Add lint cmd to client package

Author: benkeen

apps/client/.eslintrc.js

@@ -29,9 +29,12 @@ module.exports = {
     'object-curly-spacing': ['error', 'always'],
     allowIndentationTabs: 0,
     'no-extra-parens': ['off'],
-    'no-duplicate-imports': ['error'],
+    'no-duplicate-imports': 'off',
+    // '@typescript-eslint/no-duplicate-imports': ['error'],
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }],
     'no-multi-spaces': 'error',
     'react/prop-types': ['off'],
+    'react/react-in-jsx-scope': 'off',
     'comma-dangle': 'off',
     'no-tabs': 'off',
     'no-multiple-empty-lines': 'off',
@@ -59,7 +62,7 @@ module.exports = {
   },
   settings: {
     react: {
-      version: '19.1.1'
+      version: '18.3.1'
     }
   },
   ignorePatterns: ['_pluginWebWorkers.ts']

apps/client/package.json

@@ -16,6 +16,7 @@
     "purge": "npx rimraf node_modules dist dist-workers .turbo",
     "watch": "npm run build-assets & npm run build-webpack:dev",
     "test": "jest --config=./config/jest.config.js",
+    "lint": "eslint src --ext .ts,.tsx",
     "webpackDev": "webpack serve --config ./webpack.config.js --mode=development",
     "webpackProd": "webpack --config ./webpack.config.js --mode=production"
   },

apps/client/src/app.tsx

@@ -44,7 +44,7 @@ export const useRouteListener = () => {
 
 const routes = getRoutes();
 
-const LocalizationWrapper = (args: any) => {
+const LocalizationWrapper = () => {
   // this rewrites any routes that include a valid (known) lang path root folder so the routing
   // works as expected. Note: the actual loading of the locale file will have taken place prior to here. It either
   // occurs on first boot and <Page> handles waiting to show the whole application until it's ready, or when

apps/client/src/core/account/__tests__/Account.container.test.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
 import AccountContainer from '../Account.container';
 import { renderWithStoreAndRouter } from '../../../../tests/testHelpers';
 
 describe('Account Container', () => {
-	it('renders', () => {
-		const { baseElement } = renderWithStoreAndRouter(<AccountContainer />);
+  it('renders', () => {
+    const { baseElement } = renderWithStoreAndRouter(<AccountContainer />);
 
-		expect(baseElement.querySelector('div')).toBeTruthy();
-	});
+    expect(baseElement.querySelector('div')).toBeTruthy();
+  });
 });

apps/client/src/core/account/changePassword/__tests__/ChangePassword.component.test.tsx

@@ -0,0 +1,79 @@
+import { render, fireEvent } from '@testing-library/react';
+import ChangePassword from '../ChangePassword.component';
+import { getTestI18n } from '../../../../../tests/testHelpers';
+
+const i18n = getTestI18n();
+
+describe('ChangePassword container', () => {
+  it('submitting form does not work when fields empty', () => {
+    const onSave = jest.fn();
+    const { container } = render(<ChangePassword className="the-class" onSave={onSave} i18n={i18n} oneTimePassword="" throttle={false} />);
+
+    const submitButton = container.querySelector('button[type=submit]') as HTMLButtonElement;
+    fireEvent.click(submitButton);
+
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('submitting form still does not works when fields non-empty but new passwords are not identical', () => {
+    const onSave = jest.fn();
+    const { container } = render(<ChangePassword className="the-class" onSave={onSave} i18n={i18n} oneTimePassword="" throttle={false} />);
+
+    const currentPasswordField = container.querySelector('input[name=currentPassword]') as HTMLInputElement;
+    fireEvent.change(currentPasswordField, {
+      target: {
+        value: 'current-password'
+      }
+    });
+
+    const newPasswordField1 = container.querySelector('input[name=password]') as HTMLInputElement;
+    fireEvent.change(newPasswordField1, {
+      target: {
+        value: 'password'
+      }
+    });
+
+    const newPasswordField2 = container.querySelector('input[name=password2]') as HTMLInputElement;
+    fireEvent.change(newPasswordField2, {
+      target: {
+        value: 'passwordX'
+      }
+    });
+
+    const submitButton = container.querySelector('button[type=submit]') as HTMLButtonElement;
+    fireEvent.click(submitButton);
+
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('submitting form works when fields non-empty and new passwords are identical', () => {
+    const onSave = jest.fn();
+    const { container } = render(<ChangePassword className="the-class" onSave={onSave} i18n={i18n} oneTimePassword="" throttle={false} />);
+
+    const currentPasswordField = container.querySelector('input[name=currentPassword]') as HTMLInputElement;
+    fireEvent.change(currentPasswordField, {
+      target: {
+        value: 'current-password'
+      }
+    });
+
+    const newPasswordField1 = container.querySelector('input[name=password]') as HTMLInputElement;
+    fireEvent.change(newPasswordField1, {
+      target: {
+        value: 'password'
+      }
+    });
+
+    const newPasswordField2 = container.querySelector('input[name=password2]') as HTMLInputElement;
+    fireEvent.change(newPasswordField2, {
+      target: {
+        value: 'password'
+      }
+    });
+
+    const submitButton = container.querySelector('button[type=submit]') as HTMLButtonElement;
+    fireEvent.click(submitButton);
+
+    expect(onSave).toHaveBeenCalled();
+  });
+});

apps/client/src/core/account/changePassword/__tests__/ChangePassword.component.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
 import ChangePassword from '../ChangePassword.container';
 import { renderWithStoreAndRouter } from '../../../../../tests/testHelpers';
 
 describe('ChangePassword container', () => {
-	it('renders', () => {
-		const { baseElement } = renderWithStoreAndRouter(<ChangePassword />);
+  it('renders', () => {
+    const { baseElement } = renderWithStoreAndRouter(<ChangePassword />);
 
-		expect(baseElement.querySelector('div')).toBeTruthy();
-	});
+    expect(baseElement.querySelector('div')).toBeTruthy();
+  });
 });

apps/client/src/core/account/changePassword/__tests__/ChangePassword.container.test.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
 import DataSets from '../DataSets.container';
 import { renderWithStoreAndRouter } from '../../../../../tests/testHelpers';
 
 describe('DataSets', () => {
-	// need to finish deciding exactly what the header will contain before adding these tests
+  // need to finish deciding exactly what the header will contain before adding these tests
 
-	it('renders', () => {
-		const { baseElement } = renderWithStoreAndRouter(<DataSets />);
+  it('renders', () => {
+    const { baseElement } = renderWithStoreAndRouter(<DataSets />);
 
-		expect(baseElement.querySelector('div')).toBeTruthy();
-	});
+    expect(baseElement.querySelector('div')).toBeTruthy();
+  });
 });

apps/client/src/core/account/dataSets/__tests__/DataSets.container.test.tsx

@@ -9,13 +9,13 @@ import { Store } from '~types/general';
 import { withAuth } from '~core/auth/withAuth';
 
 const mapStateToProps = (state: Store): Pick<AccountsPageProps, 'i18n' | 'selectedTab'> => ({
-	i18n: selectors.getCoreI18n(state),
-	selectedTab: accountSelectors.getSelectedAccountsPageTab(state)
+  i18n: selectors.getCoreI18n(state),
+  selectedTab: accountSelectors.getSelectedAccountsPageTab(state)
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): Pick<AccountsPageProps, 'onChangeTab' | 'onDestroy'> => ({
-	onChangeTab: (tab: SelectedAccountsTab): any => dispatch(accountActions.onChangeAccountsTab(tab)),
-	onDestroy: (): any => dispatch(accountActions.onCleanupAccountsPage())
+  onChangeTab: (tab: SelectedAccountsTab): any => dispatch(accountActions.onChangeAccountsTab(tab)),
+  onDestroy: (): any => dispatch(accountActions.onCleanupAccountsPage())
 });
 
 const container: any = connect(mapStateToProps, mapDispatchToProps)(AccountsPage);

apps/client/src/core/accounts/Accounts.container.tsx

@@ -2,7 +2,6 @@ import { useMutation, useQuery } from '@apollo/client/react';
 import C from '@generatedata/config/constants';
 import { Dropdown, DropdownOption, SecondaryButton, SmallSpinner, useSharedClasses } from '@generatedata/shared';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import Button from '@mui/material/Button';
 import { format, fromUnixTime } from 'date-fns';
 import { useEffect, useState } from 'react';
 import AccountStatusPill from '~components/accounts/accountStatusPill/AccountStatusPill.component';
@@ -40,12 +39,12 @@ const Row = ({ i18n, firstName, lastName, onEdit, onDelete, accountStatus, lastL
     if (expiryDate) {
       expiryDateVal = format(fromUnixTime(expiryDate / 1000), C.DATE_FORMAT);
     }
-  } catch (e) {}
+  } catch (_e) {}
 
   let lastLoggedInVal: any = <span className={sharedClasses.blank}>&#8212;</span>;
   try {
     lastLoggedInVal = format(fromUnixTime(lastLoggedIn), C.DATE_FORMAT);
-  } catch (lastLoggedInVal) {}
+  } catch (_e) {}
 
   return (
     <div className={classNames.row}>