[FSSDK-10507] React SDK - Linter errors (#272)

* [FSSDK-10507] lint config update, experiment, feature, provider, client update

* [FSSDK-10507] notifier and optimizely HOC update

* [FSSDK-10507] hook changes, skipping some error for seperate issue

* [FSSDK-10507] husky + lint-staged addition

* [FSSDK-10507] copyright text addition

* [FSSDK-10507] lint-staged command adjustment

Author: junaed-optimizely

.eslintrc.js

@@ -20,9 +20,9 @@ module.exports = {
     'plugin:prettier/recommended',
   ],
   rules: {
-    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/ban-ts-comment': 'warn',
     '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/no-empty-function': 'off',
-    'no-shadow': 'error',
+    '@typescript-eslint/no-shadow': 'error',
   },
 };

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package.json

@@ -28,11 +28,17 @@
     "lint": "tsc --noEmit && eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
     "test": "jest --silent",
     "prepublishOnly": "npm run test && npm run build",
-    "prepare": "npm run build"
+    "prepare": "npm run build && husky install"
   },
   "publishConfig": {
     "access": "public"
   },
+  "lint-staged": {
+    "**/*.{js,ts,tsx}": [
+      "yarn run lint",
+      "yarn run test --findRelatedTests"
+    ]
+  },
   "dependencies": {
     "@optimizely/optimizely-sdk": "^5.3.4",
     "hoist-non-react-statics": "^3.3.2",
@@ -61,8 +67,10 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "husky": "8.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "13.2.3",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/Experiment.spec.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2018-2019, 2023, Optimizely
+ * Copyright 2018-2019, 2023-2024, Optimizely
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -41,7 +41,7 @@ describe('<OptimizelyExperiment>', () => {
       };
     });
 
-    optimizelyMock = ({
+    optimizelyMock = {
       onReady: jest.fn().mockImplementation(() => onReadyPromise),
       activate: jest.fn().mockImplementation(() => variationKey),
       onUserUpdate: jest.fn().mockImplementation(() => () => {}),
@@ -58,7 +58,7 @@ describe('<OptimizelyExperiment>', () => {
       getIsReadyPromiseFulfilled: () => true,
       getIsUsingSdkKey: () => true,
       onForcedVariationsUpdate: jest.fn().mockReturnValue(() => {}),
-    } as unknown) as ReactSDKClient;
+    } as unknown as ReactSDKClient;
   });
 
   it('does not throw an error when not rendered in the context of an OptimizelyProvider', () => {

src/Experiment.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2018-2019, 2023, Optimizely
+ * Copyright 2018-2019, 2023-2024, Optimizely
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -36,7 +36,7 @@ export interface ExperimentProps {
   children: React.ReactNode | ChildrenRenderFunction;
 }
 
-const Experiment: React.FunctionComponent<ExperimentProps> = props => {
+const Experiment: React.FunctionComponent<ExperimentProps> = (props) => {
   const { experiment, autoUpdate, timeout, overrideUserId, overrideAttributes, children } = props;
   const [variation, clientReady, didTimeout] = useExperiment(
     experiment,

src/Feature.spec.tsx

@@ -43,15 +43,15 @@ describe('<OptimizelyFeature>', () => {
       };
     });
 
-    optimizelyMock = ({
-      onReady: jest.fn().mockImplementation(config => onReadyPromise),
+    optimizelyMock = {
+      onReady: jest.fn().mockImplementation(() => onReadyPromise),
       getFeatureVariables: jest.fn().mockImplementation(() => featureVariables),
       isFeatureEnabled: jest.fn().mockImplementation(() => isEnabledMock),
-      onUserUpdate: jest.fn().mockImplementation(handler => () => {}),
+      onUserUpdate: jest.fn().mockImplementation(() => () => {}),
       getVuid: jest.fn().mockImplementation(() => 'vuid_95bf72cebc774dfd8e8e580a5a1'),
       notificationCenter: {
-        addNotificationListener: jest.fn().mockImplementation((type, handler) => {}),
-        removeNotificationListener: jest.fn().mockImplementation(id => {}),
+        addNotificationListener: jest.fn().mockImplementation(() => {}),
+        removeNotificationListener: jest.fn().mockImplementation(() => {}),
       },
       user: {
         id: 'testuser',
@@ -60,13 +60,12 @@ describe('<OptimizelyFeature>', () => {
       isReady: jest.fn().mockImplementation(() => isReady),
       getIsReadyPromiseFulfilled: () => true,
       getIsUsingSdkKey: () => true,
-    } as unknown) as ReactSDKClient;
+    } as unknown as ReactSDKClient;
   });
 
   it('does not throw an error when not rendered in the context of an OptimizelyProvider', () => {
     expect(() => {
-      // @ts-ignore
-      mount(<OptimizelyFeature feature="feature1">{(isEnabled, variables) => isEnabled}</OptimizelyFeature>);
+      render(<OptimizelyFeature feature="feature1">{(isEnabled, variables) => isEnabled}</OptimizelyFeature>);
     }).toBeDefined();
   });
 
@@ -301,7 +300,7 @@ describe('<OptimizelyFeature>', () => {
         resolver.resolve({ success: false, reason: NotReadyReason.TIMEOUT, dataReadyPromise: Promise.resolve() });
 
         // Simulate config update notification firing after datafile fetched
-        await optimizelyMock.onReady().then(res => res.dataReadyPromise);
+        await optimizelyMock.onReady().then((res) => res.dataReadyPromise);
 
         expect(optimizelyMock.isFeatureEnabled).toHaveBeenCalledWith('feature1', undefined, undefined);
         expect(optimizelyMock.getFeatureVariables).toHaveBeenCalledWith('feature1', undefined, undefined);

src/Feature.tsx

@@ -35,7 +35,7 @@ export interface FeatureProps {
   children: ChildrenRenderFunction;
 }
 
-const FeatureComponent: React.FunctionComponent<FeatureProps> = props => {
+const FeatureComponent: React.FunctionComponent<FeatureProps> = (props) => {
   const { feature, timeout, autoUpdate, children, overrideUserId, overrideAttributes } = props;
   const [isEnabled, variables, clientReady, didTimeout] = useFeature(
     feature,

src/Provider.spec.tsx

@@ -30,13 +30,13 @@ describe('OptimizelyProvider', () => {
   };
 
   beforeEach(() => {
-    mockReactClient = ({
+    mockReactClient = {
       user: {
         id: 'test-id',
         attributes: {},
       },
       setUser: jest.fn().mockResolvedValue(undefined),
-    } as unknown) as ReactSDKClient;
+    } as unknown as ReactSDKClient;
   });
 
   it('should render successfully with user provided', () => {

src/client.spec.ts

@@ -150,7 +150,7 @@ describe('ReactSDKClient', () => {
 
     it('fulfills the returned promise with success: true when a user is set', async () => {
       jest.spyOn(mockInnerClient, 'onReady').mockResolvedValue({ success: true });
-      const instance = createInstance(config);
+      instance = createInstance(config);
       jest.spyOn(instance, 'fetchQualifiedSegments').mockResolvedValue(true);
 
       await instance.setUser({
@@ -164,7 +164,7 @@ describe('ReactSDKClient', () => {
 
     it('fulfills the returned promise with success: false when fetchqualifiedsegment is false', async () => {
       jest.spyOn(mockInnerClient, 'onReady').mockResolvedValue({ success: true });
-      const instance = createInstance(config);
+      instance = createInstance(config);
       jest.spyOn(instance, 'fetchQualifiedSegments').mockResolvedValue(false);
 
       await instance.setUser({
@@ -179,8 +179,8 @@ describe('ReactSDKClient', () => {
       beforeEach(() => {
         // Mocks clientAndUserReadyPromise value instead of _client = null because test initialization of
         // instance causes clientAndUserReadyPromise to return { success: true }
-        // @ts-ignore
-        instance.clientAndUserReadyPromise = new Promise(resolve => {
+        //@ts-ignore
+        instance.clientAndUserReadyPromise = new Promise((resolve) => {
           resolve({
             success: false,
             reason: NotReadyReason.NO_CLIENT,
@@ -200,7 +200,7 @@ describe('ReactSDKClient', () => {
       it('waits for the inner client onReady to fulfill with success = false before fulfilling the returned promise', async () => {
         const mockInnerClientOnReady = jest.spyOn(mockInnerClient, 'onReady');
         let resolveInnerClientOnReady: (result: OnReadyResult) => void = () => {};
-        const mockReadyPromise: Promise<OnReadyResult> = new Promise(res => {
+        const mockReadyPromise: Promise<OnReadyResult> = new Promise((res) => {
           resolveInnerClientOnReady = res;
         });
         mockInnerClientOnReady.mockReturnValueOnce(mockReadyPromise);
@@ -220,11 +220,11 @@ describe('ReactSDKClient', () => {
     it('waits for the inner client onReady to fulfill with success = true before fulfilling the returned promise', async () => {
       const mockInnerClientOnReady = jest.spyOn(mockInnerClient, 'onReady');
       let resolveInnerClientOnReady: (result: OnReadyResult) => void;
-      const mockReadyPromise: Promise<OnReadyResult> = new Promise(res => {
+      const mockReadyPromise: Promise<OnReadyResult> = new Promise((res) => {
         resolveInnerClientOnReady = res;
       });
       mockInnerClientOnReady.mockReturnValueOnce(mockReadyPromise);
-      const instance = createInstance(config);
+      instance = createInstance(config);
       jest.spyOn(instance, 'fetchQualifiedSegments').mockImplementation(async () => true);
       await instance.setUser({
         id: 'user999',
@@ -1652,7 +1652,7 @@ describe('ReactSDKClient', () => {
 
     it('should throw error when action param is falsy', async () => {
       const badValues = ['', '  '];
-      badValues.forEach(item => {
+      badValues.forEach((item) => {
         instance.sendOdpEvent(item);
       });
 

src/client.ts

@@ -235,7 +235,7 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
     };
 
     this.userPromiseResolver = () => {};
-    const userReadyPromise = new Promise<OnReadyResult>(resolve => {
+    const userReadyPromise = new Promise<OnReadyResult>((resolve) => {
       this.userPromiseResolver = resolve;
     });
 
@@ -263,7 +263,7 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
     } else {
       logger.warn('Unable to resolve datafile and user information because Optimizely client failed to initialize.');
 
-      this.clientAndUserReadyPromise = new Promise(resolve => {
+      this.clientAndUserReadyPromise = new Promise((resolve) => {
         resolve({
           success: false,
           reason: NotReadyReason.NO_CLIENT,
@@ -302,7 +302,7 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
     if (config && config.timeout !== undefined) {
       timeout = config.timeout;
     }
-    const timeoutPromise = new Promise<OnReadyResult>(resolve => {
+    const timeoutPromise = new Promise<OnReadyResult>((resolve) => {
       timeoutId = setTimeout(() => {
         resolve({
           success: false,
@@ -313,7 +313,7 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
       }, timeout) as any;
     });
 
-    return Promise.race([this.clientAndUserReadyPromise, timeoutPromise]).then(async res => {
+    return Promise.race([this.clientAndUserReadyPromise, timeoutPromise]).then(async (res) => {
       clearTimeout(timeoutId);
       return res;
     });
@@ -406,7 +406,7 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
       this.isUserPromiseResolved = true;
     }
 
-    this.onUserUpdateHandlers.forEach(handler => handler(this.user));
+    this.onUserUpdateHandlers.forEach((handler) => handler(this.user));
   }
 
   public onUserUpdate(handler: OnUserUpdateHandler): DisposeFn {
@@ -718,7 +718,7 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
     const isSuccess = this.userContext.removeAllForcedDecisions();
 
     if (isSuccess) {
-      this.forcedDecisionFlagKeys.forEach(flagKey => notifier.notify(flagKey));
+      this.forcedDecisionFlagKeys.forEach((flagKey) => notifier.notify(flagKey));
       this.forcedDecisionFlagKeys.clear();
     }
 
@@ -812,7 +812,7 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
       return {};
     }
 
-    Object.keys(feature.variablesMap).forEach(key => {
+    Object.keys(feature.variablesMap).forEach((key) => {
       const variable = feature.variablesMap[key];
       variableObj[variable.key] = this._client!.getFeatureVariable(featureKey, variable.key, userId, userAttributes);
     });
@@ -1150,7 +1150,7 @@ class OptimizelyReactSDKClient implements ReactSDKClient {
     }
 
     const result = this._client.setForcedVariation(experiment, finalUserId, finalVariationKey);
-    this.onForcedVariationsUpdateHandlers.forEach(handler => handler());
+    this.onForcedVariationsUpdateHandlers.forEach((handler) => handler());
     return result;
   }