Fix/eslint

.eslintrc.json → .eslintrc.js

@@ -1,13 +1,36 @@
-{
-  "root": true,
-  "env": {
-    "browser": true
+module.exports = {
+  overrides: [
+    {
+      files: ["*.jest.js"],
+      env: {
+        jest: true,
+        "jest/globals": true
+      }
+    }
+  ],
+  env: {
+    browser: true,
+    es2021: true
+  },
+  settings: {
+    jest: {
+      version: 27
+    }
+  },
+  extends: ["plugin:react/recommended", "airbnb", "plugin:react-hooks/recommended"],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 13,
+    sourceType: "module"
   },
-  "parser": "@babel/eslint-parser",
-  "ignorePatterns": ["*test.js", "*.jest.js", "*.stories*.js"],
-  "extends": ["airbnb", "plugin:prettier/recommended", "plugin:react-hooks/recommended"],
-  "plugins": ["import", "react", "jsx-a11y", "json", "markdown", "react-hooks"],
-  "rules": {
+  plugins: ["import", "react", "jsx-a11y", "json", "markdown", "jest"],
+  rules: {
+    quotes: "off",
+    "comma-dangle": "off",
+    "object-curly-newline": "off",
+    "arrow-body-style": "off",
     "no-debugger": "error",
     "global-require": "off",
     "no-unused-expressions": "off",
@@ -21,14 +44,13 @@
     "react/sort-comp": "off",
     "prefer-destructuring": "off",
     "class-methods-use-this": "off",
-    "radix": "off",
-    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    radix: "off",
+    "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
     "no-underscore-dangle": "off",
     "import/prefer-default-export": "off",
     "no-plusplus": "off",
     "react/react-in-jsx-scope": 0,
     "react/no-did-update-set-state": "off",
-    "arrow-body-style": "off",
     "react/no-danger": "error",
     "react/jsx-one-expression-per-line": "off",
     "react/prop-types": 0,
@@ -38,16 +60,16 @@
     "react/require-default-props": ["error"],
     "jsx-a11y/anchor-is-valid": ["error"],
     "react/jsx-props-no-spreading": 0,
-    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
+    "react/jsx-filename-extension": ["error", { extensions: [".js", ".jsx"] }],
     "jsx-a11y/no-static-element-interactions": "off",
     "jsx-a11y/alt-text": "error",
     "jsx-a11y/no-noninteractive-element-interactions": [
       "error",
       {
-        "required": {
-          "some": ["nesting", "id"]
+        required: {
+          some: ["nesting", "id"]
         },
-        "handlers": ["onClick", "onMouseDown", "onMouseUp", "onKeyPress", "onKeyDown", "onKeyUp"]
+        handlers: ["onClick", "onMouseDown", "onMouseUp", "onKeyPress", "onKeyDown", "onKeyUp"]
       }
     ],
     "jsx-a11y/role-has-required-aria-props": "error",
@@ -58,12 +80,11 @@
     "react/button-has-type": "error",
     "jsx-a11y/interactive-supports-focus": "error",
     "jsx-a11y/no-noninteractive-tabindex": "error",
-    "react/jsx-boolean-value": "off"
-  },
-  "overrides": [
-    {
-      "files": ["scripts/**/*.js"],
-      "rules": { "import/no-extraneous-dependencies": ["error", { "devDependencies": true }] }
-    }
-  ]
-}
+    "react/jsx-boolean-value": "off",
+    "max-len": "off",
+    "arrow-parens": "off",
+    "implicit-arrow-linebreak": "off",
+    "import/order": "warn",
+    "import/no-extraneous-dependencies": ["error", { devDependencies: true }]
+  }
+};

package.json

@@ -95,6 +95,7 @@
     "@storybook/source-loader": "6.5.0-alpha.5",
     "@storybook/storybook-deployer": "^2.8.10",
     "@storybook/theming": "6.5.0-alpha.5",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
@@ -111,10 +112,11 @@
     "chromatic": "^6.3.3",
     "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^6.5.1",
-    "eslint": "^8.5.0",
+    "eslint": "^8.6.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^25.3.4",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-markdown": "^2.2.1",

src/components/Accordion/Accordion/Accordion.scss

@@ -1,6 +1,6 @@
-@import "../../../styles/themes.scss";
-@import "../../../styles/typography.scss";
-@import "../../../styles/global-css-settings.scss";
+@import "../../../styles/themes";
+@import "../../../styles/typography";
+@import "../../../styles/global-css-settings";
 
 .accordion {
   height: fit-content;
@@ -12,7 +12,7 @@
   .accordion-item {
     .expand-collapse--wrapper {
       .expand-collapse {
-        border-radius: 0px;
+        border-radius: 0;
         border-top: none;
         border-left: none;
         border-right: none;

src/components/Accordion/AccordionItem/__stories__/accordionItem.stories.js

@@ -14,7 +14,7 @@ export const Sandbox = () => {
 
   return (
     <div style={{ width, height }}>
-      <AccordionItem id="Knobs" open={isOpen} onClickAccordionCallback={onClick} title={"I can be anything"}>
+      <AccordionItem id="Knobs" open={isOpen} onClickAccordionCallback={onClick} title="I can be anything">
         <h3>Any component you want</h3>
       </AccordionItem>
     </div>

src/components/Accordion/AccordionItem/__tests__/accordionItem-snapshot-tests.jest.js

@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import Accordion from "../../Accordion/Accordion.jsx";
+import Accordion from "../../Accordion/Accordion";
 import AccordionItem from "../AccordionItem";
 
 describe("AccordionItem renders correctly", () => {

src/components/Accordion/AccordionItem/__tests__/accordionItem-tests.jest.js

@@ -1,23 +1,22 @@
 import React from "react";
-import Accordion from "../../Accordion/Accordion.jsx";
-import AccordionItem from "../AccordionItem";
 import { render, fireEvent, screen } from "@testing-library/react";
+import Accordion from "../../Accordion/Accordion";
+import AccordionItem from "../AccordionItem";
 
 describe("AccordionItem tests", () => {
   let onClickMock;
-  let accordionComponent;
-
+
   beforeEach(() => {
     onClickMock = jest.fn();
-    accordionComponent = render(
-      <Accordion >
+    render(
+      <Accordion>
         <AccordionItem onClick={onClickMock} />
       </Accordion>
     );
   });
 
   it("should call the click callback when clicked", () => {
-    fireEvent.click(screen.queryByRole('button'));
+    fireEvent.click(screen.queryByRole("button"));
     expect(onClickMock.mock.calls.length).toBe(1);
   });
 });

src/components/AlertBanner/__tests__/AlertBanner-snapshots.jest.js

@@ -21,7 +21,6 @@ jest.mock("../../Button/Button", () => {
 });
 
 describe("AlertBanner", () => {
-
   it("should render correctly without props", () => {
     const tree = renderer.create(<AlertBanner />).toJSON();
     expect(tree).toMatchSnapshot();
@@ -82,7 +81,7 @@ describe("AlertBanner", () => {
   });
 
   it("should render correctly with hidden close button", () => {
-    const tree = renderer.create(<AlertBanner isCloseHidden></AlertBanner>).toJSON();
+    const tree = renderer.create(<AlertBanner isCloseHidden />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/components/AlertBanner/__tests__/alertBanner-snapshot-tests.jest.js

@@ -67,12 +67,12 @@ describe("AlertBanner", () => {
   });
 
   it("should render correctly with hidden close button", () => {
-    const tree = renderer.create(<AlertBanner isCloseHidden></AlertBanner>).toJSON();
+    const tree = renderer.create(<AlertBanner isCloseHidden />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it("should render correctly with background color", () => {
-    const tree = renderer.create(<AlertBanner backgroundColor={AlertBanner.backgroundColors.POSITIVE}></AlertBanner>).toJSON();
+    const tree = renderer.create(<AlertBanner backgroundColor={AlertBanner.backgroundColors.POSITIVE} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/components/AlertBanner/__tests__/alertBanner-tests.jest.js

@@ -30,16 +30,14 @@ describe("<AlertBanner />", () => {
       fireEvent.click(container.querySelector(".monday-alert-banner__alert-banner-close-btn"));
       expect(onCloseStub.mock.calls.length).toBe(1);
     });
-    
+
     describe("a11y", () => {
       it("should add the label", () => {
         const ariaLabel = "Lable Name";
-        const { getByLabelText } = render(
-          <AlertBanner ariaLabel={ariaLabel} />
-        );
-        const alertBannerComponent = getByLabelText(ariaLabel);
-        expect(alertBannerComponent).toBeTruthy();
-      }); 
+        const { getByLabelText } = render(<AlertBanner ariaLabel={ariaLabel} />);
+        const alertBannerComponentLabel = getByLabelText(ariaLabel);
+        expect(alertBannerComponentLabel).toBeTruthy();
+      });
     });
   });
 });

src/components/AttentionBox/__tests__/attentionBox-snapshot-tests.jest.js

@@ -20,10 +20,6 @@ describe("AttentionBox renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("renders correctly with undefined title prop", () => {
-    const tree = renderer.create(<AttentionBox text="Text" />);
-  });
-
   it("renders correctly with no icon", () => {
     const tree = renderer.create(<AttentionBox title="Title" text="Text" withoutIcon />).toJSON();
     expect(tree).toMatchSnapshot();

src/components/AttentionBox/__tests__/attentionBox-tests.jest.js

@@ -8,10 +8,8 @@ describe("AttentionBox tests", () => {
 
   it("should call onClose callback when close button clicked", () => {
     const onCloseMock = jest.fn();
-    const attentionBoxComponent = render(
-      <AttentionBox onClose={onCloseMock} title={title} text={text}  />
-    );
-    fireEvent.click(screen.getByLabelText('Close'));
+    render(<AttentionBox onClose={onCloseMock} title={title} text={text} />);
+    fireEvent.click(screen.getByLabelText("Close"));
     expect(onCloseMock.mock.calls.length).toBe(1);
-  })
+  });
 });

src/components/Avatar/__tests__/avatar-snapshot-tests.jest.js

@@ -6,8 +6,7 @@ import { WhatsNew } from "../../Icon/Icons";
 jest.mock("../../Icon/Icon", () => ({ icon }) => <div data-testid="icon-mock">{icon}</div>);
 jest.mock("../../Icon/CustomSvgIcon", () => () => <div data-testid="custom-icon-mock" />);
 
-const IMG_SRC =
-  "https://files.monday.com/use1/photos/16447897/small/16447897-Hadas_Farhi_photo_2020_10_04_10_14_06.png?1601806446";
+const IMG_SRC = "https://files.monday.com/use1/photos/16447897/small/16447897-Hadas_Farhi_photo_2020_10_04_10_14_06.png?1601806446";
 const BADGE_SRC = "https://cdn7.monday.com/images/working-status/wfh.svg";
 
 describe("Avatar renders correctly", () => {
@@ -59,7 +58,7 @@ describe("Avatar renders correctly", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  
+
   it("renders correctly with damaged src badges", () => {
     const tree = renderer
       .create(