Boost CI (#1643)

* Boost CI

* Split CI tests in 2

* Try caching node modules

* Try caching node modules

* Try caching node modules

* Improve CI

* Improve CI

* Improve CI

* Improve CI

* Improve CI

* Improve CI

* Separate jest tests

* Fix typo

* Re-order tests jobs

.github/workflows/ci-front.yaml

@@ -5,7 +5,32 @@ on:
       - main
   pull_request:
 jobs:
-  front-test:
+  front-yarn-install:
+    runs-on: ci-8-cores
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: Cache front node modules
+        uses: actions/cache@v3
+        with:
+          path: front/node_modules
+          key: front-node_modules-${{hashFiles('front/yarn.lock')}}
+          restore-keys: front-node_modules-
+      - name: Cache eslint-plugin-twenty node modules
+        uses: actions/cache@v3
+        with:
+          path: packages/eslint-plugin-twenty/node_modules
+          key: eslint-plugin-twenty-node_modules-${{hashFiles('packages/eslint-plugin-twenty/yarn.lock')}}
+          restore-keys: eslint-plugin-twenty-node_modules-
+      - name: Front / Install Dependencies
+        run: cd front && yarn
+  front-pages-sb-test:
+    needs: front-yarn-install
     runs-on: ci-8-cores
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
@@ -19,19 +44,120 @@ jobs:
         run: |
           cd front
           cp .env.example .env
-      - name: Front / Install Dependencies
+      - name: Cache front node modules
+        uses: actions/cache@v3
+        with:
+          path: front/node_modules
+          key: front-node_modules-${{hashFiles('front/yarn.lock')}}
+          restore-keys: front-node_modules-
+      - name: Cache eslint-plugin-twenty node modules
+        uses: actions/cache@v3
+        with:
+          path: packages/eslint-plugin-twenty/node_modules
+          key: eslint-plugin-twenty-node_modules-${{hashFiles('packages/eslint-plugin-twenty/yarn.lock')}}
+          restore-keys: eslint-plugin-twenty-node_modules-
+      - name: Install dependencies
+        run: yarn
+      - name: Install Dependencies
         run: cd front && yarn
-      - name: Front / Install Playwright
+      - name: Install Playwright
-        run: cd front && npx playwright install --with-deps
+        run: cd front && npx playwright install
-      - name: Front / Run linter
+      - name: Build Storybook
-        run: cd front && yarn lint
+        run: cd front && yarn storybook:pages:build --quiet
-      - name: Front / Build Storybook
+      - name: Run storybook tests
-        run: cd front && yarn storybook:build --quiet
-      - name: Front / Run storybook tests
         run: |
           cd front && npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
             "npx http-server storybook-static --silent --port 6006" \
-            "yarn storybook:coverage"
+            "yarn storybook:pages:coverage"
-      - name: Front / Run jest tests
+  front-modules-sb-test:
+    needs: front-yarn-install
+    runs-on: ci-8-cores
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: Front / Write .env
         run: |
-          cd front && yarn test
+          cd front
+          cp .env.example .env
+      - name: Cache front node modules
+        uses: actions/cache@v3
+        with:
+          path: front/node_modules
+          key: front-node_modules-${{hashFiles('front/yarn.lock')}}
+          restore-keys: front-node_modules-
+      - name: Cache eslint-plugin-twenty node modules
+        uses: actions/cache@v3
+        with:
+          path: packages/eslint-plugin-twenty/node_modules
+          key: eslint-plugin-twenty-node_modules-${{hashFiles('packages/eslint-plugin-twenty/yarn.lock')}}
+          restore-keys: eslint-plugin-twenty-node_modules-
+      - name: Install Dependencies
+        run: cd front && yarn
+      - name: Install Playwright
+        run: cd front && npx playwright install
+      - name: Build Storybook
+        run: cd front && yarn storybook:modules:build --quiet
+      - name: Run storybook tests
+        run: |
+          cd front && npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --silent --port 6006" \
+            "yarn storybook:modules:coverage"
+  front-lint:
+    needs: front-yarn-install
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: Cache front node modules
+        uses: actions/cache@v3
+        with:
+          path: front/node_modules
+          key: front-node_modules-${{hashFiles('front/yarn.lock')}}
+          restore-keys: front-node_modules-
+      - name: Cache eslint-plugin-twenty node modules
+        uses: actions/cache@v3
+        with:
+          path: packages/eslint-plugin-twenty/node_modules
+          key: eslint-plugin-twenty-node_modules-${{hashFiles('packages/eslint-plugin-twenty/yarn.lock')}}
+          restore-keys: eslint-plugin-twenty-node_modules-
+      - name: Front / Install Dependencies
+        run: cd front && yarn
+      - name: Front / Run linter
+        run: cd front && yarn lint
+  front-jest:
+    needs: front-yarn-install
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: Cache front node modules
+        uses: actions/cache@v3
+        with:
+          path: front/node_modules
+          key: front-node_modules-${{hashFiles('front/yarn.lock')}}
+          restore-keys: front-node_modules-
+      - name: Cache eslint-plugin-twenty node modules
+        uses: actions/cache@v3
+        with:
+          path: packages/eslint-plugin-twenty/node_modules
+          key: eslint-plugin-twenty-node_modules-${{hashFiles('packages/eslint-plugin-twenty/yarn.lock')}}
+          restore-keys: eslint-plugin-twenty-node_modules-
+      - name: Front / Install Dependencies
+        run: cd front && yarn
+      - name: Front / Run jest
+        run: cd front && yarn test

front/.storybook/main.js

@@ -1,5 +1,18 @@
 const path = require('path');
 
+computeStoriesGlob = () => {
+  if (process.env.STORYBOOK_STORIES_FOLDER === 'pages') {
+    return ['../src/pages/**/*.stories.@(js|jsx|ts|tsx)', '../src/__stories__/*.stories.@(js|jsx|ts|tsx)']
+  }
+
+  if (process.env.STORYBOOK_STORIES_FOLDER === 'modules') {
+    return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)']
+  }
+
+  return ['../src/**/*.stories.@(js|jsx|ts|tsx)']
+
+};
+
 module.exports = {
   webpackFinal: (config) => {
     config.module.rules.push({
@@ -55,7 +68,7 @@ module.exports = {
     };
     return config;
   },
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: computeStoriesGlob(),
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

front/.storybook/test-runner-jest.js

@@ -0,0 +1,13 @@
+const { getJestConfig } = require('@storybook/test-runner');
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+module.exports = {
+  // The default configuration comes from @storybook/test-runner
+  ...getJestConfig(),
+  /** Add your own overrides below
+   * @see https://jestjs.io/docs/configuration
+   */
+  testTimeout: process.env.STORYBOOK_STORIES_FOLDER === 'pages' ? 30000 : 15000,
+};

front/nyc.config.js

@@ -0,0 +1,20 @@
+const modulesCoverage = {
+  "statements": 50,
+  "lines": 50,
+  "functions": 45,
+  "include": [
+    "src/modules/**/*",
+  ]
+};
+
+const pagesCoverage = {
+  "statements": 55,
+  "lines": 55,
+  "functions": 55,
+  "exclude": [
+    "src/generated/**/*",
+    "src/modules/**/*",
+  ]
+};
+
+module.exports = process.env.STORYBOOK_STORIES_FOLDER === 'modules' ? modulesCoverage : pagesCoverage;

front/package.json

@@ -69,15 +69,22 @@
     "test": "craco test",
     "coverage": "craco test --coverage .",
     "lint": "eslint src --max-warnings=0",
-    "lint:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
+    "eslint-plugin:upgrade": "yarn eslint-plugin:setup && yarn upgrade eslint-plugin-twenty",
+    "eslint-plugin:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/",
     "storybook:dev": "storybook dev -p 6006 -s ../public",
     "storybook:test": "test-storybook",
     "storybook:test-slow": "test-storybook --maxWorkers=3",
     "storybook:build": "storybook build -s public",
     "storybook:coverage": "test-storybook --coverage --maxWorkers=3 && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
+    "storybook:modules:dev": "STORYBOOK_STORIES_FOLDER=modules yarn storybook:dev",
+    "storybook:pages:dev": "STORYBOOK_STORIES_FOLDER=pages yarn storybook:dev",
+    "storybook:modules:build": "STORYBOOK_STORIES_FOLDER=modules yarn storybook:build",
+    "storybook:pages:build": "STORYBOOK_STORIES_FOLDER=pages yarn storybook:build",
+    "storybook:modules:coverage": "STORYBOOK_STORIES_FOLDER=modules yarn storybook:coverage",
+    "storybook:pages:coverage": "STORYBOOK_STORIES_FOLDER=pages yarn storybook:coverage",
     "graphql:generate": "dotenv cross-var graphql-codegen --config codegen.js",
     "chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
-    "install": "yarn lint:setup"
+    "install": "yarn eslint-plugin:setup"
   },
   "eslintConfig": {
     "extends": [
@@ -185,13 +192,5 @@
   },
   "msw": {
     "workerDirectory": "public"
-  },
-  "nyc": {
-    "statements": 60,
-    "lines": 60,
-    "functions": 60,
-    "exclude": [
-      "src/generated/**/*"
-    ]
   }
 }