fix: fix storybook coverage task (#5256)

- Fixes storybook coverage command: the coverage directory path was incorrect, but instead of failing `storybook:test --configuration=ci`, it was hanging indefinitely. - Switches back to `concurrently` to launch `storybook:static` and `storybook:test` in parallel, which allows to use options to explicitly kill `storybook:static` when `storybook:test` fails. - Moves `storybook:test --configuration=ci` to its own command `storybook:static:test`: used in the CI, and can be used locally to run storybook tests without having to launch `storybook:dev` first. - Creates command `storybook:coverage` and enables cache for this command. - Fixes Jest tests that were failing. - Improves caching conditions for some tasks (for instance, no need to invalidate Jest test cache if only Storybook story files were modified).
2025-11-02 05:37:56 +00:00 · 2024-05-03 14:59:09 +02:00
parent 50421863d4
commit 1351a95754
11 changed files with 123 additions and 75 deletions
--- a/.github/workflows/actions/task-cache/action.yaml
+++ b/.github/workflows/actions/task-cache/action.yaml
@@ -24,6 +24,8 @@ runs:
        path: |
          .cache
          .nx/cache
+          node_modules/.cache
+          packages/*/node_modules/.cache
        key: tasks-cache-${{ github.ref_name }}-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-${{ github.sha }}
        restore-keys: |
          tasks-cache-${{ github.ref_name }}-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-
--- a/.github/workflows/ci-front.yaml
+++ b/.github/workflows/ci-front.yaml
@@ -62,7 +62,7 @@ jobs:
      - name: Front / Write .env
        run: npx nx reset:env twenty-front
      - name: Run storybook tests
-        run: npx nx storybook:test twenty-front --configuration=ci --scope=${{ matrix.storybook_scope }}
+        run: npx nx storybook:static:test twenty-front --configuration=${{ matrix.storybook_scope }}
  front-chromatic-deployment:
    if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
    needs: front-sb-build
--- a/nx.json
+++ b/nx.json
@@ -1,11 +1,33 @@
 {
  "namedInputs": {
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
-    "sharedGlobals": ["{workspaceRoot}/.github/workflows/**/*"]
+    "default": ["{projectRoot}/**/*"],
+    "excludeStories": [
+      "default",
+      "!{projectRoot}/.storybook/*",
+      "!{projectRoot}/**/tsconfig.storybook.json",
+      "!{projectRoot}/**/*.stories.(ts|tsx)",
+      "!{projectRoot}/**/__stories__/*"
+    ],
+    "excludeTests": [
+      "default",
+      "!{projectRoot}/**/jest.config.(js|ts)",
+      "!{projectRoot}/**/tsconfig.spec.json",
+      "!{projectRoot}/**/*.test.(ts|tsx)",
+      "!{projectRoot}/**/*.spec.(ts|tsx)",
+      "!{projectRoot}/**/__tests__/*"
+    ],
+    "production": [
+      "default",
+      "excludeStories",
+      "excludeTests",
+      "!{projectRoot}/**/__mocks__/*",
+      "!{projectRoot}/**/testing/*"
+    ]
  },
  "targetDefaults": {
    "build": {
      "cache": true,
+      "inputs": ["^production", "production"],
      "dependsOn": ["^build"]
    },
    "start": {
@@ -58,6 +80,11 @@
      "executor": "@nx/jest:jest",
      "cache": true,
      "dependsOn": ["^build"],
+      "inputs": [
+        "^default",
+        "excludeStories",
+        "{workspaceRoot}/jest.preset.js"
+      ],
      "outputs": ["{projectRoot}/coverage"],
      "options": {
        "jestConfig": "{projectRoot}/jest.config.ts",
@@ -82,12 +109,7 @@
      "executor": "@nx/storybook:build",
      "cache": true,
      "dependsOn": ["^build"],
-      "inputs": [
-        "default",
-        "^default",
-        "{projectRoot}/.storybook/**/*",
-        "{projectRoot}/tsconfig.storybook.json"
-      ],
+      "inputs": ["^default", "excludeTests"],
      "outputs": ["{options.outputDir}"],
      "options": {
        "outputDir": "{projectRoot}/storybook-static",
@@ -106,37 +128,51 @@
      "executor": "@nx/web:file-server",
      "options": {
        "staticFilePath": "{projectRoot}/storybook-static",
+        "parallel": false,
        "watch": false
      }
    },
+    "storybook:coverage": {
+      "executor": "nx:run-commands",
+      "cache": true,
+      "inputs": [
+        "^default",
+        "excludeTests",
+        "{projectRoot}/coverage/storybook/coverage-storybook.json"
+      ],
+      "outputs": [
+        "{projectRoot}/coverage/storybook",
+        "!{projectRoot}/coverage/storybook/coverage-storybook.json"
+      ],
+      "options": {
+        "command": "npx nyc report --reporter={args.reporter} --reporter=text-summary -t {args.coverageDir} --report-dir {args.coverageDir} --check-coverage --cwd={projectRoot}",
+        "coverageDir": "coverage/storybook",
+        "reporter": "lcov"
+      }
+    },
    "storybook:test": {
      "executor": "nx:run-commands",
+      "cache": true,
+      "inputs": ["^default", "excludeTests"],
+      "outputs": ["{projectRoot}/coverage/storybook"],
      "options": {
+        "cwd": "{projectRoot}",
        "commands": [
-          "test-storybook -c {args.configDir} --url {args.url} --maxWorkers=3 --coverage",
-          "nyc report --reporter=lcov --reporter=text-summary -t {args.coverageDir} --report-dir {args.coverageDir} --check-coverage"
+          "test-storybook --url http://localhost:{args.port} --maxWorkers=3 --coverage --coverageDirectory={args.coverageDir}",
+          "nx storybook:coverage {projectName} --coverageDir={args.coverageDir}"
        ],
        "parallel": false,
-        "configDir": "{projectRoot}/.storybook",
-        "coverageDir": "{projectRoot}/coverage/storybook",
-        "url": "http://localhost:6006",
+        "coverageDir": "coverage/storybook",
+        "port": 6006
+      }
+    },
+    "storybook:static:test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'"
+        ],
        "port": 6006
-      },
-      "configurations": {
-        "ci": {
-          "commands": [
-            {
-              "prefix": "[SB]",
-              "command": "nx storybook:static {projectName} --port={args.port}",
-              "forwardAllArgs": false
-            },
-            {
-              "command": "npx wait-on tcp:{args.port} && nx storybook:test {projectName}",
-              "forwardAllArgs": false
-            }
-          ],
-          "parallel": true
-        }
      }
    },
    "chromatic": {
@@ -154,7 +190,11 @@
    },
    "@nx/jest:jest": {
      "cache": true,
-      "inputs": ["default", "^default", "{workspaceRoot}/jest.preset.js"],
+      "inputs": [
+        "^default",
+        "excludeStories",
+        "{workspaceRoot}/jest.preset.js"
+      ],
      "options": {
        "passWithNoTests": true
      },
--- a/packages/twenty-front/nyc.config.cjs
+++ b/packages/twenty-front/nyc.config.cjs
@@ -1,4 +1,5 @@
 const globalCoverage = {
+  branches: 45,
  statements: 60,
  lines: 60,
  functions: 60,
@@ -6,6 +7,7 @@ const globalCoverage = {
 };

 const modulesCoverage = {
+  branches: 45,
  statements: 70,
  lines: 70,
  functions: 65,
@@ -14,6 +16,7 @@ const modulesCoverage = {
 };

 const pagesCoverage = {
+  branches: 45,
  statements: 60,
  lines: 60,
  functions: 45,
--- a/packages/twenty-front/project.json
+++ b/packages/twenty-front/project.json
@@ -63,13 +63,12 @@
    "storybook:build:scope": {
      "executor": "nx:run-commands",
      "options": {
-        "command": "STORYBOOK_SCOPE={args.scope} nx storybook:build twenty-front",
-        "scope": "all"
+        "command": "nx storybook:build twenty-front"
      },
      "configurations": {
-        "docs": { "scope": "ui-docs" },
-        "modules": { "scope": "modules" },
-        "pages": { "scope": "pages" }
+        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
+        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
+        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
      }
    },
    "storybook:dev": {
@@ -78,13 +77,12 @@
    "storybook:dev:scope": {
      "executor": "nx:run-commands",
      "options": {
-        "command": "STORYBOOK_SCOPE={args.scope} nx storybook:dev twenty-front",
-        "scope": "all"
+        "command": "nx storybook:dev twenty-front"
      },
      "configurations": {
-        "docs": { "scope": "ui-docs" },
-        "modules": { "scope": "modules" },
-        "pages": { "scope": "pages" }
+        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
+        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
+        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
      }
    },
    "storybook:static": {
@@ -96,35 +94,39 @@
    "storybook:static:scope": {
      "executor": "nx:run-commands",
      "options": {
-        "command": "STORYBOOK_SCOPE={args.scope} nx storybook:static twenty-front",
-        "scope": "all"
+        "command": "nx storybook:static twenty-front"
      },
      "configurations": {
-        "docs": { "scope": "ui-docs" },
-        "modules": { "scope": "modules" },
-        "pages": { "scope": "pages" }
+        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
+        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
+        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
+      }
+    },
+    "storybook:coverage": {
+      "configurations": {
+        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
+        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
+        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
      }
    },
    "storybook:test": {
      "options": {
-        "url": "http://localhost:6006",
        "port": 6006
      },
      "configurations": {
-        "ci": {
-          "commands": [
-            {
-              "prefix": "[SB]",
-              "command": "nx storybook:static {projectName} --port={args.port}",
-              "forwardAllArgs": false
-            },
-            {
-              "command": "STORYBOOK_SCOPE={args.scope} npx wait-on tcp:{args.port} && nx storybook:test {projectName}",
-              "forwardAllArgs": false
-            }
-          ],
-          "parallel": true
-        },
+        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
+        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
+        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
+      }
+    },
+    "storybook:static:test": {
+      "options": {
+        "commands": [
+          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
+        ],
+        "port": 6006
+      },
+      "configurations": {
        "docs": { "scope": "ui-docs" },
        "modules": { "scope": "modules" },
        "pages": { "scope": "pages" }
--- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/tests/useExportTableData.test.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/tests/useExportTableData.test.ts
@@ -62,8 +62,8 @@ describe('generateCsv', () => {
      },
    ];
    const csv = generateCsv({ columns, rows });
-    expect(csv).toEqual(`Foo,Empty,Nested Foo,Nested Nested
-some field,,foo,nested`);
+    expect(csv).toEqual(`Foo,Empty,Nested Foo,Nested Nested,Relation
+some field,,foo,nested,a relation`);
  });
 });

--- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useExportTableData.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useExportTableData.ts
@@ -36,14 +36,16 @@ export const generateCsv: GenerateExport = ({
 }: GenerateExportOptions): string => {
  const columnsToExport = columns.filter(
    (col) =>
-      !('relationType' in col.metadata && col.metadata.relationType) ||
+      !('relationType' in col.metadata) ||
      col.metadata.relationType === 'TO_ONE_OBJECT',
  );

  const keys = columnsToExport.flatMap((col) => {
    const column = {
      field: `${col.metadata.fieldName}${col.type === 'RELATION' ? 'Id' : ''}`,
-      title: `${col.label} ${col.type === 'RELATION' ? 'Id' : ''}`,
+      title: [col.label, col.type === 'RELATION' ? 'Id' : null]
+        .filter(isDefined)
+        .join(' '),
    };

    const fieldsWithSubFields = rows.find((row) => {
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx
@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { Section } from '@react-email/components';

 import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
+import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
 import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard';
 import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection';
 import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
@@ -9,7 +10,6 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { SettingsIntegrationDatabaseConnectionSummaryCard } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard';

 export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
  const navigate = useNavigate();
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
--- a/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts
+++ b/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts
@@ -1,4 +1,5 @@
 import {
+  FieldMetadataType,
  ObjectEdge,
  ObjectMetadataItemsQuery,
 } from '~/generated-metadata/graphql';
@@ -3201,7 +3202,7 @@ export const mockedStandardObjectMetadataQueryResult: ObjectMetadataItemsQuery =
                  node: {
                    __typename: 'field',
                    id: '7ada51cb-58be-42cd-86df-16c3f2bb8b58',
-                    type: 'TEXT',
+                    type: FieldMetadataType.Phone,
                    name: 'phone',
                    label: 'Phone',
                    description: 'Contact’s phone number',
--- a/packages/twenty-ui/project.json
+++ b/packages/twenty-ui/project.json
@@ -11,11 +11,7 @@
    "generateBarrels": {
      "executor": "nx:run-commands",
      "cache": true,
-      "inputs": [
-        "{projectRoot}/src/**/*.{ts,tsx}",
-        "!{projectRoot}/src/**/*.(spec|test).{ts,tsx}",
-        "!{projectRoot}/src/**/*.stories.{ts,tsx}"
-      ],
+      "inputs": ["production", "{projectRoot}/scripts/generateBarrels.js"],
      "outputs": ["{projectRoot}/src/index.ts", "{projectRoot}/src/*/index.ts"],
      "options": {
        "command": "node {projectRoot}/scripts/generateBarrels.js"
@@ -52,10 +48,12 @@
        "port": 6007
      }
    },
+    "storybook:coverage": {},
    "storybook:test": {
-      "options": {
-        "url": "http://localhost:6007"
-      }
+      "options": { "port": 6007 }
+    },
+    "storybook:static:test": {
+      "options": { "port": 6007 }
    }
  }
 }