mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-17 11:07:29 +03:00
fix: fix storybook pages tests coverage (#5319)
This commit is contained in:
parent
ce4e78aa85
commit
b7a2e72c32
4
.github/workflows/ci-front.yaml
vendored
4
.github/workflows/ci-front.yaml
vendored
@ -38,7 +38,7 @@ jobs:
|
||||
- name: Front / Write .env
|
||||
run: npx nx reset:env twenty-front
|
||||
- name: Front / Build storybook
|
||||
run: NODE_OPTIONS=--max-old-space-size=5000 npx nx storybook:build twenty-front
|
||||
run: npx nx storybook:build twenty-front
|
||||
front-sb-test:
|
||||
runs-on: ci-8-cores
|
||||
needs: front-sb-build
|
||||
@ -87,7 +87,7 @@ jobs:
|
||||
touch .env
|
||||
echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
|
||||
- name: Publish to Chromatic
|
||||
run: NODE_OPTIONS=--max-old-space-size=5000 npx nx run twenty-front:chromatic:ci
|
||||
run: npx nx run twenty-front:chromatic:ci
|
||||
front-task:
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
|
36
nx.json
36
nx.json
@ -106,30 +106,38 @@
|
||||
"dependsOn": ["^build"]
|
||||
},
|
||||
"storybook:build": {
|
||||
"executor": "@nx/storybook:build",
|
||||
"executor": "nx:run-commands",
|
||||
"cache": true,
|
||||
"dependsOn": ["^build"],
|
||||
"inputs": ["^default", "excludeTests"],
|
||||
"outputs": ["{options.outputDir}"],
|
||||
"outputs": ["{options.output-dir}"],
|
||||
"options": {
|
||||
"outputDir": "{projectRoot}/storybook-static",
|
||||
"configDir": "{projectRoot}/.storybook"
|
||||
"cwd": "{projectRoot}",
|
||||
"command": "storybook build",
|
||||
"output-dir": "storybook-static",
|
||||
"config-dir": ".storybook"
|
||||
}
|
||||
},
|
||||
"storybook:dev": {
|
||||
"executor": "@nx/storybook:storybook",
|
||||
"executor": "nx:run-commands",
|
||||
"cache": true,
|
||||
"dependsOn": ["^build"],
|
||||
"options": {
|
||||
"configDir": "{projectRoot}/.storybook"
|
||||
"cwd": "{projectRoot}",
|
||||
"command": "storybook dev",
|
||||
"config-dir": ".storybook"
|
||||
}
|
||||
},
|
||||
"storybook:static": {
|
||||
"executor": "@nx/web:file-server",
|
||||
"executor": "nx:run-commands",
|
||||
"dependsOn": ["storybook:build"],
|
||||
"options": {
|
||||
"staticFilePath": "{projectRoot}/storybook-static",
|
||||
"parallel": false,
|
||||
"watch": false
|
||||
"cwd": "{projectRoot}",
|
||||
"command": "npx http-server {args.staticDir} -a={args.host} --port={args.port} --silent={args.silent}",
|
||||
"staticDir": "storybook-static",
|
||||
"host": "localhost",
|
||||
"port": 6006,
|
||||
"silent": true
|
||||
}
|
||||
},
|
||||
"storybook:coverage": {
|
||||
@ -148,6 +156,9 @@
|
||||
"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"
|
||||
},
|
||||
"configurations": {
|
||||
"text": { "reporter": "text" }
|
||||
}
|
||||
},
|
||||
"storybook:test": {
|
||||
@ -179,8 +190,9 @@
|
||||
"executor": "nx:run-commands",
|
||||
"options": {
|
||||
"cwd": "{projectRoot}",
|
||||
"command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=build-storybook --exit-zero-on-changes={args.ci}",
|
||||
"ci": false
|
||||
"command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name={args.targetPackageJsonScript} --exit-zero-on-changes={args.ci}",
|
||||
"ci": false,
|
||||
"targetPackageJsonScript": "storybook:build:chromatic"
|
||||
},
|
||||
"configurations": {
|
||||
"ci": {
|
||||
|
@ -6,7 +6,7 @@
|
||||
"scripts": {
|
||||
"build": "npx vite build && sh ./scripts/inject-runtime-env.sh",
|
||||
"build:sourcemaps": "VITE_BUILD_SOURCEMAP=true NODE_OPTIONS=--max-old-space-size=4096 npx nx build",
|
||||
"build-storybook": "cd ../.. && npx nx storybook:build twenty-front",
|
||||
"storybook:build:chromatic": "nx storybook:build",
|
||||
"start:prod": "NODE_ENV=production npx vite --host",
|
||||
"tsup": "npx tsup"
|
||||
},
|
||||
|
@ -59,26 +59,33 @@
|
||||
}
|
||||
},
|
||||
"test": {},
|
||||
"storybook:build": {},
|
||||
"storybook:build:scope": {
|
||||
"executor": "nx:run-commands",
|
||||
"storybook:build": {
|
||||
"options": {
|
||||
"command": "nx storybook:build twenty-front"
|
||||
"env": { "NODE_OPTIONS": "--max_old_space_size=5000" }
|
||||
},
|
||||
"configurations": {
|
||||
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
||||
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
||||
"pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
|
||||
"docs": {
|
||||
"env": {
|
||||
"NODE_OPTIONS": "--max_old_space_size=5000",
|
||||
"STORYBOOK_SCOPE": "ui-docs"
|
||||
}
|
||||
},
|
||||
"modules": {
|
||||
"env": {
|
||||
"NODE_OPTIONS": "--max_old_space_size=5000",
|
||||
"STORYBOOK_SCOPE": "modules"
|
||||
}
|
||||
},
|
||||
"pages": {
|
||||
"env": {
|
||||
"NODE_OPTIONS": "--max_old_space_size=5000",
|
||||
"STORYBOOK_SCOPE": "pages"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"storybook:dev": {
|
||||
"options": { "port": 6006 }
|
||||
},
|
||||
"storybook:dev:scope": {
|
||||
"executor": "nx:run-commands",
|
||||
"options": {
|
||||
"command": "nx storybook:dev twenty-front"
|
||||
},
|
||||
"options": { "port": 6006 },
|
||||
"configurations": {
|
||||
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
||||
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
||||
@ -86,16 +93,7 @@
|
||||
}
|
||||
},
|
||||
"storybook:static": {
|
||||
"options": {
|
||||
"buildTarget": "twenty-front:storybook:build",
|
||||
"port": 6006
|
||||
}
|
||||
},
|
||||
"storybook:static:scope": {
|
||||
"executor": "nx:run-commands",
|
||||
"options": {
|
||||
"command": "nx storybook:static twenty-front"
|
||||
},
|
||||
"options": { "port": 6006 },
|
||||
"configurations": {
|
||||
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
||||
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
||||
@ -104,15 +102,14 @@
|
||||
},
|
||||
"storybook:coverage": {
|
||||
"configurations": {
|
||||
"text": {},
|
||||
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
||||
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
||||
"pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
|
||||
}
|
||||
},
|
||||
"storybook:test": {
|
||||
"options": {
|
||||
"port": 6006
|
||||
},
|
||||
"options": { "port": 6006 },
|
||||
"configurations": {
|
||||
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
||||
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
||||
@ -124,8 +121,7 @@
|
||||
"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,
|
||||
"env": { "NODE_OPTIONS": "--max-old-space-size=5000" }
|
||||
"port": 6006
|
||||
},
|
||||
"configurations": {
|
||||
"docs": { "scope": "ui-docs" },
|
||||
|
@ -51,7 +51,11 @@ export const SettingsObjectFieldActiveActionDropdown = ({
|
||||
<Dropdown
|
||||
dropdownId={dropdownId}
|
||||
clickableComponent={
|
||||
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
|
||||
<LightIconButton
|
||||
aria-label="Active Field Options"
|
||||
Icon={IconDotsVertical}
|
||||
accent="tertiary"
|
||||
/>
|
||||
}
|
||||
dropdownComponents={
|
||||
<DropdownMenu width="160px">
|
||||
|
@ -67,7 +67,11 @@ export const SettingsObjectSummaryCard = ({
|
||||
<Dropdown
|
||||
dropdownId={dropdownId}
|
||||
clickableComponent={
|
||||
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
|
||||
<LightIconButton
|
||||
aria-label="Object Options"
|
||||
Icon={IconDotsVertical}
|
||||
accent="tertiary"
|
||||
/>
|
||||
}
|
||||
dropdownComponents={
|
||||
<DropdownMenu width="160px">
|
||||
|
@ -3,6 +3,7 @@ import styled from '@emotion/styled';
|
||||
import { v4 } from 'uuid';
|
||||
|
||||
import { RecordIndexContainer } from '@/object-record/record-index/components/RecordIndexContainer';
|
||||
import { RecordIndexPageHeader } from '@/object-record/record-index/components/RecordIndexPageHeader';
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell';
|
||||
import { useSelectedTableCellEditMode } from '@/object-record/record-table/record-table-cell/hooks/useSelectedTableCellEditMode';
|
||||
@ -10,7 +11,6 @@ import { PageBody } from '@/ui/layout/page/PageBody';
|
||||
import { PageContainer } from '@/ui/layout/page/PageContainer';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
|
||||
import { RecordIndexPageHeader } from '~/pages/object-record/RecordIndexPageHeader';
|
||||
import { capitalize } from '~/utils/string/capitalize';
|
||||
|
||||
const StyledIndexContainer = styled.div`
|
||||
|
@ -0,0 +1,30 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import {
|
||||
PageDecorator,
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
|
||||
import { RecordIndexPage } from '../RecordIndexPage';
|
||||
|
||||
const meta: Meta<PageDecoratorArgs> = {
|
||||
title: 'Pages/ObjectRecord/RecordIndexPage',
|
||||
component: RecordIndexPage,
|
||||
decorators: [PageDecorator],
|
||||
args: {
|
||||
routePath: '/objects/:objectNamePlural',
|
||||
routeParams: {
|
||||
':objectNamePlural': 'companies',
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
export type Story = StoryObj<typeof RecordIndexPage>;
|
||||
|
||||
export const Default: Story = {};
|
@ -1,4 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/test';
|
||||
|
||||
import {
|
||||
PageDecorator,
|
||||
@ -37,3 +38,38 @@ export const CustomObject: Story = {
|
||||
routeParams: { ':objectSlug': 'workspaces' },
|
||||
},
|
||||
};
|
||||
|
||||
export const ObjectDropdownMenu: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
await sleep(100);
|
||||
|
||||
const canvas = within(canvasElement);
|
||||
const objectSummaryVerticalDotsIconButton = await canvas.findByRole(
|
||||
'button',
|
||||
{
|
||||
name: 'Object Options',
|
||||
},
|
||||
);
|
||||
|
||||
await userEvent.click(objectSummaryVerticalDotsIconButton);
|
||||
|
||||
await canvas.findByText('Edit');
|
||||
await canvas.findByText('Deactivate');
|
||||
},
|
||||
};
|
||||
|
||||
export const FieldDropdownMenu: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
await sleep(100);
|
||||
|
||||
const canvas = within(canvasElement);
|
||||
const [fieldVerticalDotsIconButton] = await canvas.findAllByRole('button', {
|
||||
name: 'Active Field Options',
|
||||
});
|
||||
|
||||
await userEvent.click(fieldVerticalDotsIconButton);
|
||||
|
||||
await canvas.findByText('View');
|
||||
await canvas.findByText('Deactivate');
|
||||
},
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user