chore(ws): Setup eslint and jest configurations (#141)

Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com>

workspaces/frontend/.eslintignore

@@ -0,0 +1,2 @@
+package.json
+config

workspaces/frontend/.eslintrc

@@ -0,0 +1,267 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  // tell the TypeScript parser that we want to use JSX syntax
+  "parserOptions": {
+    "tsx": true,
+    "jsx": true,
+    "js": true,
+    "useJSXTextNode": true,
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": "."
+  },
+  // includes the typescript specific rules found here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks",
+    "eslint-plugin-react-hooks",
+    "import",
+    "no-only-tests",
+    "no-relative-import-paths",
+    "prettier"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "globals": {
+    "window": "readonly",
+    "describe": "readonly",
+    "test": "readonly",
+    "expect": "readonly",
+    "it": "readonly",
+    "process": "readonly",
+    "document": "readonly"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "project": "."
+      }
+    }
+  },
+  "rules": {
+    "jsx-a11y/no-autofocus": ["error", { "ignoreNonDOM": true }],
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["to"],
+        "aspects": ["noHref", "invalidHref", "preferButton"]
+      }
+    ],
+    "react/jsx-boolean-value": "error",
+    "react/jsx-fragments": "error",
+    "react/jsx-no-constructed-context-values": "error",
+    "react/no-unused-prop-types": "error",
+    "arrow-body-style": "error",
+    "curly": "error",
+    "no-only-tests/no-only-tests": "error",
+    "@typescript-eslint/default-param-last": "error",
+    "@typescript-eslint/dot-notation": ["error", { "allowKeywords": true }],
+    "@typescript-eslint/method-signature-style": "error",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "variable",
+        "format": ["camelCase", "PascalCase", "UPPER_CASE"]
+      },
+      {
+        "selector": "function",
+        "format": ["camelCase", "PascalCase"]
+      },
+      {
+        "selector": "typeLike",
+        "format": ["PascalCase"]
+      }
+    ],
+    "@typescript-eslint/no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": false,
+        "allowTernary": false,
+        "allowTaggedTemplates": false
+      }
+    ],
+    "@typescript-eslint/no-redeclare": "error",
+    "@typescript-eslint/no-shadow": "error",
+    "@typescript-eslint/return-await": ["error", "in-try-catch"],
+    "camelcase": "warn",
+    "no-else-return": ["error", { "allowElseIf": false }],
+    "eqeqeq": ["error", "always", { "null": "ignore" }],
+    "react/jsx-curly-brace-presence": [2, { "props": "never", "children": "never" }],
+    "object-shorthand": ["error", "always"],
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsFor": ["acc", "e"],
+        "ignorePropertyModificationsForRegex": ["^assignable[A-Z]"]
+      }
+    ],
+    "@typescript-eslint/no-base-to-string": "error",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "error",
+    "@typescript-eslint/no-inferrable-types": "error",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/explicit-module-boundary-types": "error",
+    "react/self-closing-comp": "error",
+    "@typescript-eslint/no-unnecessary-condition": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "prefer-destructuring": [
+      "error",
+      {
+        "VariableDeclarator": {
+          "array": false,
+          "object": true
+        },
+        "AssignmentExpression": {
+          "array": true,
+          "object": false
+        }
+      },
+      {
+        "enforceForRenamedProperties": false
+      }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/order": [
+      "error",
+      {
+        "pathGroups": [
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"],
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "index",
+          "sibling",
+          "parent",
+          "object",
+          "unknown"
+        ]
+      }
+    ],
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+    "import/no-named-as-default": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "optionalDependencies": true
+      }
+    ],
+    "no-relative-import-paths/no-relative-import-paths": [
+      "warn",
+      {
+        "allowSameFolder": true,
+        "rootDir": "src",
+        "prefix": "~"
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "arrowParens": "always",
+        "singleQuote": true,
+        "trailingComma": "all",
+        "printWidth": 100
+      }
+    ],
+    "react/prop-types": "off",
+    "array-callback-return": ["error", { "allowImplicit": true }],
+    "prefer-template": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "no-promise-executor-return": "error",
+    "no-restricted-globals": [
+      "error",
+      {
+        "name": "isFinite",
+        "message": "Use Number.isFinite instead https://github.com/airbnb/javascript#standard-library--isfinite"
+      },
+      {
+        "name": "isNaN",
+        "message": "Use Number.isNaN instead https://github.com/airbnb/javascript#standard-library--isnan"
+      }
+    ],
+    "no-sequences": "error",
+    "no-undef-init": "error",
+    "no-unneeded-ternary": ["error", { "defaultAssignment": false }],
+    "no-useless-computed-key": "error",
+    "no-useless-return": "error",
+    "symbol-description": "error",
+    "yoda": "error",
+    "func-names": "warn"
+  },
+  "overrides": [
+    {
+      "files": ["./src/api/**"],
+      "rules": {
+        "no-restricted-imports": [
+          "off",
+          {
+            "patterns": ["~/api/**"]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["./src/__tests__/cypress/**/*.ts"],
+      "parserOptions": {
+        "project": ["./src/__tests__/cypress/tsconfig.json"]
+      },
+      "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended",
+        "prettier",
+        "plugin:cypress/recommended"
+      ]
+    },
+    {
+      "files": ["src/__tests__/cypress/**"],
+      "rules": {
+        "@typescript-eslint/consistent-type-imports": "error",
+        "no-restricted-imports": [
+          "error",
+          {
+            "patterns": [
+              {
+                "group": [
+                  "@patternfly/**"
+                ],
+                "message": "Cypress tests should only import mocks and types from outside the Cypress test directory."
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}

workspaces/frontend/jest.config.js

@@ -2,29 +2,43 @@
 // https://jestjs.io/docs/en/configuration.html
 
 module.exports = {
+  roots: ['<rootDir>/src/'],
+  testMatch: [
+    '**/src/__tests__/unit/**/?(*.)+(spec|test).ts?(x)',
+    '**/__tests__/?(*.)+(spec|test).ts?(x)',
+  ],
+
   // Automatically clear mock calls and instances between every test
   clearMocks: true,
 
-  // Indicates whether the coverage information should be collected while executing the test
-  collectCoverage: false,
-
-  // The directory where Jest should output its coverage files
-  coverageDirectory: 'coverage',
-
   // An array of directory names to be searched recursively up from the requiring module's location
   moduleDirectories: ['node_modules', '<rootDir>/src'],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+    '\\.(css|less|sass|scss)$': '<rootDir>/config/transform.style.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/__mocks__/fileMock.js',
-    '@app/(.*)': '<rootDir>/src/app/$1',
+      '<rootDir>/config/transform.file.js',
+    '~/(.*)': '<rootDir>/src/$1',
   },
 
-  // A preset that is used as a base for Jest's configuration
-  preset: 'ts-jest/presets/js-with-ts',
-
   // The test environment that will be used for testing.
-  testEnvironment: 'jsdom',
+  testEnvironment: 'jest-environment-jsdom',
+
+  // include projects from node_modules as required
+  transformIgnorePatterns: [
+    'node_modules/(?!yaml|lodash-es|uuid|@patternfly|delaunator)',
+  ],
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  snapshotSerializers: [],
+
+  coverageDirectory: 'jest-coverage',
+
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.{ts,tsx}',
+    '!<rootDir>/src/__tests__/**',
+    '!<rootDir>/src/__mocks__/**',
+    '!**/*.spec.{ts,tsx}',
+  ],
 };