Add ESLint plugin for Jest (#505)

src/ensembl/.eslintrc.js

@@ -3,9 +3,9 @@ module.exports = {
   extends: [
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
-    'plugin:prettier/recommended' // Displays prettier errors as ESLint errors. This has to be the last in this array (not yet sure why).
+    'plugin:prettier/recommended', // Displays prettier errors as ESLint errors. This has to be the last in this array (not yet sure why).
   ],
-  plugins: ['react-hooks'],
+  plugins: ['react-hooks', 'jest'],
   parserOptions: {
     ecmaVersion: 2019,
     sourceType: 'module',
@@ -20,7 +20,7 @@ module.exports = {
     '@typescript-eslint/interface-name-prefix': 0,
     '@typescript-eslint/prefer-interface': 0,
     '@typescript-eslint/explicit-function-return-type': 0,
-    "@typescript-eslint/explicit-module-boundary-types": 0,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-use-before-define': 0,
     '@typescript-eslint/no-unused-vars': ['warn', { args: 'after-used' }],
@@ -29,9 +29,12 @@ module.exports = {
     'react/no-unescaped-entities': 0,
     'react-hooks/rules-of-hooks': 2,
     'prettier/prettier': 0,
-    "no-unused-vars": "off",
+    'no-unused-vars': 'off',
     'no-unneeded-ternary': 'error',
-    'eqeqeq': 'error'
+    'eqeqeq': 'error',
+    'jest/no-focused-tests': 'error',
+    'jest/no-identical-title': 'error',
+    'jest/valid-expect': 'error'
   },
   settings: {
     react: {

src/ensembl/package-lock.json

@@ -79,6 +79,7 @@
         "dotenv-webpack": "7.0.2",
         "eslint": "7.27.0",
         "eslint-config-prettier": "8.3.0",
+        "eslint-plugin-jest": "^24.3.6",
         "eslint-plugin-prettier": "3.4.0",
         "eslint-plugin-react": "7.23.2",
         "eslint-plugin-react-hooks": "4.2.0",
@@ -15922,6 +15923,27 @@
         "eslint": ">=7.0.0"
       }
     },
+    "node_modules/eslint-plugin-jest": {
+      "version": "24.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.3.6.tgz",
+      "integrity": "sha512-WOVH4TIaBLIeCX576rLcOgjNXqP+jNlCiEmRgFTfQtJ52DpwnIQKAVGlGPAN7CZ33bW6eNfHD6s8ZbEUTQubJg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/experimental-utils": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": ">= 4",
+        "eslint": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-prettier": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
@@ -39861,7 +39883,6 @@
       "integrity": "sha512-qOtwgiqI3LMqT0eXYNV6ykp7qSu0LQGeXxy3wOBGuDDqAizfgnAjomYEWGFcyKp5ahV7HCRCjxbixAklFPUmyw==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.12.10",
         "@babel/generator": "^7.12.11",
         "@babel/parser": "^7.12.11",
         "@babel/plugin-transform-react-jsx": "^7.12.12",
@@ -50226,6 +50247,15 @@
       "dev": true,
       "requires": {}
     },
+    "eslint-plugin-jest": {
+      "version": "24.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.3.6.tgz",
+      "integrity": "sha512-WOVH4TIaBLIeCX576rLcOgjNXqP+jNlCiEmRgFTfQtJ52DpwnIQKAVGlGPAN7CZ33bW6eNfHD6s8ZbEUTQubJg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/experimental-utils": "^4.0.1"
+      }
+    },
     "eslint-plugin-prettier": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",

src/ensembl/package.json

@@ -103,6 +103,7 @@
     "dotenv-webpack": "7.0.2",
     "eslint": "7.27.0",
     "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",

src/ensembl/src/content/app/browser/browser-messaging-service.test.ts

@@ -20,11 +20,14 @@ import faker from 'faker';
 import windowService from 'src/services/window-service';
 
 class MockWindow {
-  private subscribers: { [name: string]: Function[] } = {};
+  private subscribers: { [name: string]: ((payload?: any) => void)[] } = {};
 
   public postMessage = jest.fn();
 
-  public addEventListener = (name: string, callback: Function) => {
+  public addEventListener = (
+    name: string,
+    callback: (payload?: any) => void
+  ) => {
     if (!this.subscribers[name]) {
       this.subscribers[name] = [];
     }

src/ensembl/src/content/app/browser/browser-messaging-service.ts

@@ -70,11 +70,13 @@ export class BrowserMessagingService {
     }
     const subscribers = this.subscribers[type];
     if (subscribers) {
-      subscribers.forEach((subscriber: Function) => subscriber(payload));
+      subscribers.forEach((subscriber: (payload?: any) => void) =>
+        subscriber(payload)
+      );
     }
   };
 
-  public subscribe = (eventName: string, callback: Function) => {
+  public subscribe = (eventName: string, callback: (payload?: any) => void) => {
     if (!this.subscribers[eventName]) {
       this.subscribers[eventName] = new Set();
     }

src/ensembl/src/content/app/browser/track-panel/track-panel-tabs/TrackPanelTabs.test.tsx

@@ -46,7 +46,7 @@ describe('<TrackPanelTabs />', () => {
       const tabs = [...container.querySelectorAll('.trackPanelTab')];
 
       tabValues.forEach((text) => {
-        expect(tabs.some((tab) => tab.innerHTML === text));
+        expect(tabs.some((tab) => tab.innerHTML === text)).toBeTruthy();
       });
     });
   });

src/ensembl/src/content/app/browser/zmenu/ZmenuContent.test.tsx

@@ -61,9 +61,8 @@ describe('<ZmenuContent />', () => {
       const { container } = renderZmenuContent();
       const zmenuContentLine = defaultProps.content[0].lines[0];
 
-      const renderedContentBlocks = container.querySelectorAll(
-        '.zmenuContentBlock'
-      );
+      const renderedContentBlocks =
+        container.querySelectorAll('.zmenuContentBlock');
 
       // check that the number of blocks of text is correct
       expect(renderedContentBlocks.length).toBe(zmenuContentLine.length);
@@ -76,14 +75,19 @@ describe('<ZmenuContent />', () => {
 
       zmenuContentLine.forEach((block, blockIndex) => {
         block.forEach((blockItem, blockItemIndex) => {
-          const renderedElement = renderedContentBlocks[
-            blockIndex
-          ].querySelectorAll('span')[blockItemIndex];
+          const renderedElement =
+            renderedContentBlocks[blockIndex].querySelectorAll('span')[
+              blockItemIndex
+            ];
           if (blockItem.markup.includes(Markup.LIGHT)) {
-            expect(renderedElement.classList.contains('markupLight'));
+            expect(
+              renderedElement.classList.contains('markupLight')
+            ).toBeTruthy();
           }
           if (blockItem.markup.includes(Markup.STRONG)) {
-            expect(renderedElement.classList.contains('markupStrong'));
+            expect(
+              renderedElement.classList.contains('markupStrong')
+            ).toBeTruthy();
           }
         });
       });

src/ensembl/src/shared/components/badged-button/BadgedButton.test.tsx

@@ -54,7 +54,7 @@ describe('BadgedButton', () => {
       container
         .querySelector('.badgeDefault')
         ?.classList.contains(fakeClassName)
-    ).toBeTruthy;
+    ).toBeTruthy();
   });
 
   it('trims the longer strings to three characters', () => {

src/ensembl/src/shared/helpers/formatters/fastaFormatter.test.ts

@@ -37,7 +37,9 @@ describe('fasta formatter', () => {
 
     const [firstLine, ...sequenceLines] = fastaFormattedSequence.split('\n');
     expect(firstLine).toBe(`>${sequenceLabel}`);
-    expect(sequenceLines.every((line) => line.length <= LINE_LENGTH));
+    expect(
+      sequenceLines.every((line) => line.length <= LINE_LENGTH)
+    ).toBeTruthy();
     expect(sequenceLines.join('')).toBe(rawSequence);
   });
 });

src/ensembl/src/shared/helpers/formatters/numberFormater.test.ts

@@ -117,25 +117,6 @@ describe('getCommaSeparatedNumber', () => {
     expect(Number(numberSplitByComma.join(''))).toBe(randomNumber);
   });
 
-  it('returns -x,xxx for the input number -xxxx', () => {
-    const randomNumber = faker.datatype.number({ min: -9999, max: -1000 });
-
-    const formattedRandomNumber = getCommaSeparatedNumber(randomNumber);
-
-    const numberSplitByComma = formattedRandomNumber.split(',');
-
-    // Check if there are two elements in the array
-    expect(numberSplitByComma.length).toBe(2);
-
-    // Check if the length of the first element is 2
-    expect(numberSplitByComma[0].length).toBe(2);
-
-    // Check if the length of the second element is 3
-    expect(numberSplitByComma[1].length).toBe(3);
-
-    expect(Number(numberSplitByComma.join(''))).toBe(randomNumber);
-  });
-
   it('returns x,xxx.x for the input number xxxx.x', () => {
     const randomNumber =
       faker.datatype.number({ min: 1000, max: 9999 }) +