Test setup tweaks (#1415)

* unused package cleanup * make storybook use webpack 5 * see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5 * bump react, cleanup * button story tweaks * add Alert stories * bump Jest to v28.1.0 * try original storyshots initialization * split up build & test CI jobs * stop testing Node.js v14 * set jest coverage flag * downgrade paambaati/codeclimate-action again * move jest config files, remove coverageReporter override * collect coverage from `src/` only * another paambaati/codeclimate-action bump test * create additional button markup test * downgrade paambaati/codeclimate-action again * more downgrade * render default button without optional style prop * ignore some folders for Jest * full coverage for Alert * more package updates * add eslint-plugin-testing-library & eslint-plugin-jest-dom * bump ESLint packages, follow new rules * start storybook in quiet mode * update docs * test storybook build as part of CI * more testing docs clarification * add jest:watch command * add body background colors switch in toolbar * TypeScript voodoo * test [email protected] for default coverageCommand * downgrade codeclimate-action and running in debug mode * make coverage artifacts OS agnostic * subgraph typings as artifact for coverage job * disable coverage sending job for now Co-authored-by: Enzo Vezzaro <[email protected]>
deltaDAO · May 12, 2022 · 5f3ee32 · 5f3ee32
1 parent a2bf3b2
commit 5f3ee32
Show file tree

Hide file tree

Showing 32 changed files with 35,997 additions and 27,233 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -30,9 +30,16 @@
         "plugin:@typescript-eslint/eslint-recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:prettier/recommended",
-        "plugin:react-hooks/recommended"
+        "plugin:react-hooks/recommended",
+        "plugin:testing-library/react",
+        "plugin:jest-dom/recommended"
+      ],
+      "plugins": [
+        "@typescript-eslint",
+        "prettier",
+        "testing-library",
+        "jest-dom"
       ],
-      "plugins": ["@typescript-eslint", "prettier"],
       "rules": {
         "react/prop-types": "off",
         "react/no-unused-prop-types": "off",

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -12,14 +12,14 @@ on:
       - '**'
 
 jobs:
-  test:
+  build:
     runs-on: ${{ matrix.os }}
 
     strategy:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
-        node: ['16', '14']
+        node: ['16']
 
     steps:
       - uses: actions/checkout@v2
@@ -38,24 +38,79 @@ jobs:
 
       - run: npm ci
       - run: npm run build
+
+  test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+        node: ['16']
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Cache node_modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-${{ matrix.node }}-test-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-${{ matrix.node }}-test-${{ env.cache-name }}-
+
+      - run: npm ci
       - run: npm test
 
-      - name: Upload coverage
+      - name: Upload coverage artifact
         uses: actions/upload-artifact@v2
         with:
-          name: coverage
+          name: coverage-${{ runner.os }}
           path: coverage/
 
-  coverage:
-    runs-on: ubuntu-latest
-    needs: [test]
-    if: ${{ success() && github.actor != 'dependabot[bot]' }}
+  # coverage:
+  #   runs-on: ubuntu-latest
+  #   needs: [test]
+  #   if: ${{ success() && github.actor != 'dependabot[bot]' }}
+  #   steps:
+  #     - uses: actions/checkout@v2
+  #     - uses: actions/download-artifact@v2
+  #       with:
+  #         name: coverage-${{ runner.os }}
+
+  #     - uses: paambaati/[email protected]
+  #       env:
+  #         CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
+  #       with:
+  #         debug: true
+
+  storybook:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+        node: ['16']
+
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/download-artifact@v2
+      - uses: actions/setup-node@v2
         with:
-          name: coverage
+          node-version: ${{ matrix.node }}
 
-      - uses: paambaati/[email protected] # using 2.7.1 for issue: https://github.com/paambaati/codeclimate-action/issues/316
+      - name: Cache node_modules
+        uses: actions/cache@v2
         env:
-          CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-${{ matrix.node }}-storybook-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-${{ matrix.node }}-storybook-${{ env.cache-name }}-
+
+      - run: npm ci
+      - run: npm run storybook:build
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,5 @@ src/@types/apollo/
 graphql.schema.json
 src/@types/graph.types.ts
 tsconfig.tsbuildinfo
+__snapshots__
+storybook-static
diff --git a/jest.config.js → .jest/jest.config.js b/jest.config.js → .jest/jest.config.js
@@ -7,10 +7,11 @@ const createJestConfig = nextJest({
 
 // Add any custom config to be passed to Jest
 const customJestConfig = {
+  rootDir: '../',
   // Add more setup options before each test is run
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/.jest/jest.setup.js'],
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
-  moduleDirectories: ['node_modules', '<rootDir>/'],
+  moduleDirectories: ['node_modules', '<rootDir>/src'],
   testEnvironment: 'jest-environment-jsdom',
   moduleNameMapper: {
     // '^@/components/(.*)$': '<rootDir>/components/$1',
@@ -22,7 +23,11 @@ const customJestConfig = {
     '@content/(.*)$': '<rootDir>/@content/$1'
   },
   collectCoverage: true,
-  coverageReporters: ['lcov']
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.{stories,test}.{ts,tsx}'
+  ],
+  testPathIgnorePatterns: ['node_modules', '\\.cache', '.next', 'coverage']
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

diff --git a/jest.setup.js → .jest/jest.setup.js b/jest.setup.js → .jest/jest.setup.js
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,12 +1,9 @@
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
 
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.tsx'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
-  ],
+  core: { builder: 'webpack5' },
+  stories: ['../src/**/*.stories.tsx'],
+  addons: ['@storybook/addon-essentials'],
   framework: '@storybook/react',
   webpackFinal: async (config) => {
     config.resolve.plugins = [
@@ -15,6 +12,36 @@ module.exports = {
         extensions: config.resolve.extensions
       })
     ]
+
+    // Mimic next.config.js webpack config
+    config.module.rules.push(
+      {
+        test: /\.svg$/,
+        issuer: /\.(tsx|ts)$/,
+        use: [
+          { loader: require.resolve('@svgr/webpack'), options: { icon: true } }
+        ]
+      },
+      {
+        test: /\.gif$/,
+        // yay for webpack 5
+        // https://webpack.js.org/guides/asset-management/#loading-images
+        type: 'asset/resource'
+      }
+    )
+
+    const fallback = config.resolve.fallback || {}
+    Object.assign(fallback, {
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      fs: false,
+      crypto: false,
+      os: false,
+      stream: false,
+      assert: false
+    })
+    config.resolve.fallback = fallback
+
     return config
   }
 }
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,6 +2,13 @@ import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../src/stylesGlobal/styles.css'
 
 export const parameters = {
+  backgrounds: {
+    default: 'light',
+    values: [
+      { name: 'dark', value: 'rgb(10, 10, 10)' },
+      { name: 'light', value: '#fcfcfc' }
+    ]
+  },
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {

diff --git a/README.md b/README.md
@@ -19,6 +19,8 @@
   - [3Box](#3box)
   - [Purgatory](#purgatory)
   - [Network Metadata](#network-metadata)
+- [👩‍🎤 Storybook](#-storybook)
+- [🤖 Testing](#-testing)
 - [✨ Code Style](#-code-style)
 - [🛳 Production](#-production)
 - [⬆️ Deployment](#️-deployment)
@@ -276,24 +278,6 @@ export default function NetworkName(): ReactElement {
 }
 ```
 
-## ✨ Code Style
-
-Code style is automatically enforced through [ESLint](https://eslint.org) & [Prettier](https://prettier.io) rules:
-
-- Git pre-commit hook runs `prettier` on staged files, setup with [Husky](https://typicode.github.io/husky)
-- VS Code suggested extensions and settings for auto-formatting on file save
-- CI runs a linting & TypeScript typings check with `npm run lint`, and fails if errors are found
-
-For running linting and auto-formatting manually, you can use from the root of the project:
-
-```bash
-# linting check, also runs Typescript typings check
-npm run lint
-
-# auto format all files in the project with prettier, taking all configs into account
-npm run format
-```
-
 ## 👩‍🎤 Storybook
 
 Storybook helps us build UI components in isolation from our app's business logic, data, and context. That makes it easy to develop hard-to-reach states and save these UI states as stories to revisit during development, testing, or QA.
@@ -311,36 +295,73 @@ src
 │            │   index.test.tsx
 </pre>
 
-You can also write a [test](https://storybook.js.org/docs/react/writing-tests/importing-stories-in-tests#example-with-testing-library) against your story by creating a `index.test.tsx` file.
-
 Starting up the Storybook server with this command will make it accessible under `http://localhost:6006`:
 
 ```bash
 npm run storybook
 ```
 
+If you want to build a portable static version under `storybook-static/`:
+
+```bash
+npm run storybook:build
+```
+
 ## 🤖 Testing
 
-Interaction tests are setup with Storybook's Addon for [Testing Library](https://storybook.js.org/docs/react/writing-tests/importing-stories-in-tests#example-with-testing-library), which utilizes [Jest](https://jestjs.io/) as test runner. A combined coverage report is sent to CodeClimate via the coverage GitHub Actions job.
+Test runs utilize [Jest](https://jestjs.io/) as test runner and [Testing Library](https://testing-library.com/docs/react-testing-library/intro) for writing tests.
+
+All created Storybook stories will automatically run as individual tests by using the [StoryShots Addon](https://storybook.js.org/addons/@storybook/addon-storyshots).
+
+Creating Storybook stories for a component will provide good coverage of a component in many cases. Additional tests for dedicated component functionality which can't be done with Storybook are created as usual [Testing Library](https://testing-library.com/docs/react-testing-library/intro) tests, but you can also [import exisiting Storybook stories](https://storybook.js.org/docs/react/writing-tests/importing-stories-in-tests#example-with-testing-library) into those tests.
 
-Executing linting, type checking, and interaction tests:
+Executing linting, type checking, and full test run:
 
 ```bash
-npm run test
+npm test
 ```
 
-Executing only interaction tests:
+Which is a combination of multiple scripts which can also be run individually:
 
 ```bash
+npm run lint
+npm run type-check
 npm run jest
 ```
 
+A coverage report is automatically shown in console whenever `npm run jest` is called. Generated reports are sent to CodeClimate during CI runs.
+
+During local development you can continously get coverage report feedback in your console by running Jest in watch mode:
+
+```bash
+npm run jest:watch
+```
+
+## ✨ Code Style
+
+Code style is automatically enforced through [ESLint](https://eslint.org) & [Prettier](https://prettier.io) rules:
+
+- Git pre-commit hook runs `prettier` on staged files, setup with [Husky](https://typicode.github.io/husky)
+- VS Code suggested extensions and settings for auto-formatting on file save
+- CI runs a linting & TypeScript typings check as part of `npm test`, and fails if errors are found
+
+For running linting and auto-formatting manually, you can use from the root of the project:
+
+```bash
+# linting check
+npm run lint
+
+# auto format all files in the project with prettier, taking all configs into account
+npm run format
+```
+
 ## 🛳 Production
 
 To create a production build, run from the root of the project:
 
 ```bash
 npm run build
+
 # serve production build
 npm run serve
 ```