mirror of
https://github.com/twentyhq/twenty.git
synced 2024-08-16 17:30:24 +03:00
Clarify storybook tests (#6073)
In this PR, I'm simplifying storybook setup: 1) Remove build --test configuration that prevent autodocs. We are not using autodocs at all (the dev experience is not good enough), so I have completely disabled it. 2) Clarify `serve` vs `test` vs `serve-and-test` configurations After this PR: - you can serve storybook in two modes: `npx nx run twenty-front:storybook:serve:dev` and `npx nx run twenty-front:storybook:serve:static` - you can run tests agains an already served storybook (this is useful in dev so you don't have to rebuild everytime to run tests): `npx nx run twenty-front:storybook:test` - you can conbine both: `npx nx run twenty-front:storybook:serve-and-test:static`
This commit is contained in:
parent
36530dbe89
commit
6683ffb890
6
.github/workflows/ci-front.yaml
vendored
6
.github/workflows/ci-front.yaml
vendored
@ -39,7 +39,7 @@ jobs:
|
|||||||
- name: Front / Write .env
|
- name: Front / Write .env
|
||||||
run: npx nx reset:env twenty-front
|
run: npx nx reset:env twenty-front
|
||||||
- name: Front / Build storybook
|
- name: Front / Build storybook
|
||||||
run: npx nx storybook:build twenty-front --configuration=test
|
run: npx nx storybook:build twenty-front
|
||||||
front-sb-test:
|
front-sb-test:
|
||||||
runs-on: ci-8-cores
|
runs-on: ci-8-cores
|
||||||
needs: front-sb-build
|
needs: front-sb-build
|
||||||
@ -64,7 +64,7 @@ jobs:
|
|||||||
- name: Front / Write .env
|
- name: Front / Write .env
|
||||||
run: npx nx reset:env twenty-front
|
run: npx nx reset:env twenty-front
|
||||||
- name: Run storybook tests
|
- name: Run storybook tests
|
||||||
run: npx nx storybook:static:test twenty-front --configuration=${{ matrix.storybook_scope }}
|
run: npx nx storybook:serve-and-test:static twenty-front --configuration=${{ matrix.storybook_scope }}
|
||||||
front-sb-test-performance:
|
front-sb-test-performance:
|
||||||
runs-on: ci-8-cores
|
runs-on: ci-8-cores
|
||||||
env:
|
env:
|
||||||
@ -80,7 +80,7 @@ jobs:
|
|||||||
- name: Front / Write .env
|
- name: Front / Write .env
|
||||||
run: npx nx reset:env twenty-front
|
run: npx nx reset:env twenty-front
|
||||||
- name: Run storybook tests
|
- name: Run storybook tests
|
||||||
run: npx nx storybook:performance:test twenty-front
|
run: npx nx storybook:serve-and-test:static:performance twenty-front
|
||||||
front-chromatic-deployment:
|
front-chromatic-deployment:
|
||||||
if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
|
if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
|
||||||
needs: front-sb-build
|
needs: front-sb-build
|
||||||
|
74
nx.json
74
nx.json
@ -116,14 +116,9 @@
|
|||||||
"command": "storybook build",
|
"command": "storybook build",
|
||||||
"output-dir": "storybook-static",
|
"output-dir": "storybook-static",
|
||||||
"config-dir": ".storybook"
|
"config-dir": ".storybook"
|
||||||
},
|
|
||||||
"configurations": {
|
|
||||||
"test": {
|
|
||||||
"command": "storybook build --test"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:dev": {
|
"storybook:serve:dev": {
|
||||||
"executor": "nx:run-commands",
|
"executor": "nx:run-commands",
|
||||||
"cache": true,
|
"cache": true,
|
||||||
"dependsOn": ["^build"],
|
"dependsOn": ["^build"],
|
||||||
@ -133,7 +128,7 @@
|
|||||||
"config-dir": ".storybook"
|
"config-dir": ".storybook"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:static": {
|
"storybook:serve:static": {
|
||||||
"executor": "nx:run-commands",
|
"executor": "nx:run-commands",
|
||||||
"dependsOn": ["storybook:build"],
|
"dependsOn": ["storybook:build"],
|
||||||
"options": {
|
"options": {
|
||||||
@ -143,9 +138,33 @@
|
|||||||
"host": "localhost",
|
"host": "localhost",
|
||||||
"port": 6006,
|
"port": 6006,
|
||||||
"silent": true
|
"silent": true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"configurations": {
|
"storybook:test": {
|
||||||
"test": {}
|
"executor": "nx:run-commands",
|
||||||
|
"cache": true,
|
||||||
|
"inputs": ["^default", "excludeTests"],
|
||||||
|
"outputs": ["{projectRoot}/coverage/storybook"],
|
||||||
|
"options": {
|
||||||
|
"cwd": "{projectRoot}",
|
||||||
|
"commands": [
|
||||||
|
"test-storybook --url http://localhost:{args.port} --maxWorkers=3 --coverage --coverageDirectory={args.coverageDir}",
|
||||||
|
"nx storybook:coverage {projectName} --coverageDir={args.coverageDir}"
|
||||||
|
],
|
||||||
|
"parallel": false,
|
||||||
|
"coverageDir": "coverage/storybook",
|
||||||
|
"port": 6006
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"storybook:test:no-coverage": {
|
||||||
|
"executor": "nx:run-commands",
|
||||||
|
"inputs": ["^default", "excludeTests"],
|
||||||
|
"options": {
|
||||||
|
"cwd": "{projectRoot}",
|
||||||
|
"commands": [
|
||||||
|
"test-storybook --url http://localhost:{args.port} --maxWorkers=3"
|
||||||
|
],
|
||||||
|
"port": 6006
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:coverage": {
|
"storybook:coverage": {
|
||||||
@ -169,47 +188,20 @@
|
|||||||
"text": { "reporter": "text" }
|
"text": { "reporter": "text" }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:test": {
|
"storybook:serve-and-test:static": {
|
||||||
"executor": "nx:run-commands",
|
"executor": "nx:run-commands",
|
||||||
"cache": true,
|
|
||||||
"inputs": ["^default", "excludeTests"],
|
|
||||||
"outputs": ["{projectRoot}/coverage/storybook"],
|
|
||||||
"options": {
|
"options": {
|
||||||
"cwd": "{projectRoot}",
|
|
||||||
"commands": [
|
"commands": [
|
||||||
"test-storybook --url http://localhost:{args.port} --maxWorkers=3 --coverage --coverageDirectory={args.coverageDir}",
|
"npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'"
|
||||||
"nx storybook:coverage {projectName} --coverageDir={args.coverageDir}"
|
|
||||||
],
|
|
||||||
"parallel": false,
|
|
||||||
"coverageDir": "coverage/storybook",
|
|
||||||
"port": 6006
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"storybook:test:nocoverage": {
|
|
||||||
"executor": "nx:run-commands",
|
|
||||||
"inputs": ["^default", "excludeTests"],
|
|
||||||
"options": {
|
|
||||||
"cwd": "{projectRoot}",
|
|
||||||
"commands": [
|
|
||||||
"test-storybook --url http://localhost:{args.port} --maxWorkers=3"
|
|
||||||
],
|
],
|
||||||
"port": 6006
|
"port": 6006
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:static:test": {
|
"storybook:serve-and-test:static:performance": {
|
||||||
"executor": "nx:run-commands",
|
"executor": "nx:run-commands",
|
||||||
"options": {
|
"options": {
|
||||||
"commands": [
|
"commands": [
|
||||||
"npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --port={args.port} --configuration=test' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'"
|
"npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:dev {projectName} --configuration=performance --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test:no-coverage {projectName} --port={args.port} --configuration=performance'"
|
||||||
],
|
|
||||||
"port": 6006
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"storybook:performance:test": {
|
|
||||||
"executor": "nx:run-commands",
|
|
||||||
"options": {
|
|
||||||
"commands": [
|
|
||||||
"npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:dev {projectName} --configuration=performance --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test:nocoverage {projectName} --port={args.port} --configuration=performance'"
|
|
||||||
],
|
],
|
||||||
"port": 6006
|
"port": 6006
|
||||||
}
|
}
|
||||||
@ -220,7 +212,7 @@
|
|||||||
"cwd": "{projectRoot}",
|
"cwd": "{projectRoot}",
|
||||||
"commands": [
|
"commands": [
|
||||||
{
|
{
|
||||||
"command": "nx storybook:build {projectName} --configuration=test",
|
"command": "nx storybook:build {projectName}",
|
||||||
"forwardAllArgs": false
|
"forwardAllArgs": false
|
||||||
},
|
},
|
||||||
"cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --storybook-build-dir=storybook-static {args.ci}"
|
"cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --storybook-build-dir=storybook-static {args.ci}"
|
||||||
|
@ -45,17 +45,5 @@ const config: StorybookConfig = {
|
|||||||
name: '@storybook/react-vite',
|
name: '@storybook/react-vite',
|
||||||
options: {},
|
options: {},
|
||||||
},
|
},
|
||||||
build: {
|
|
||||||
test: {
|
|
||||||
disableMDXEntries: true,
|
|
||||||
disabledAddons: [
|
|
||||||
'@storybook/addon-docs',
|
|
||||||
'@storybook/addon-essentials/docs',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
docs: {
|
|
||||||
autodocs: false,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
export default config;
|
export default config;
|
||||||
|
@ -62,12 +62,9 @@
|
|||||||
"storybook:build": {
|
"storybook:build": {
|
||||||
"options": {
|
"options": {
|
||||||
"env": { "NODE_OPTIONS": "--max_old_space_size=5000" }
|
"env": { "NODE_OPTIONS": "--max_old_space_size=5000" }
|
||||||
},
|
|
||||||
"configurations": {
|
|
||||||
"test": {}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:dev": {
|
"storybook:serve:dev": {
|
||||||
"options": { "port": 6006 },
|
"options": { "port": 6006 },
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
||||||
@ -76,11 +73,8 @@
|
|||||||
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:static": {
|
"storybook:serve:static": {
|
||||||
"options": { "port": 6006 },
|
"options": { "port": 6006 }
|
||||||
"configurations": {
|
|
||||||
"test": {}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"storybook:coverage": {
|
"storybook:coverage": {
|
||||||
"configurations": {
|
"configurations": {
|
||||||
@ -100,18 +94,10 @@
|
|||||||
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:test:nocoverage": {
|
"storybook:serve-and-test:static": {
|
||||||
"configurations": {
|
|
||||||
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
|
||||||
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
|
||||||
"pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
|
|
||||||
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"storybook:static:test": {
|
|
||||||
"options": {
|
"options": {
|
||||||
"commands": [
|
"commands": [
|
||||||
"npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --configuration=test --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
|
"npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
|
||||||
],
|
],
|
||||||
"port": 6006
|
"port": 6006
|
||||||
},
|
},
|
||||||
@ -122,7 +108,15 @@
|
|||||||
"performance": { "scope": "performance" }
|
"performance": { "scope": "performance" }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:performance:test": {},
|
"storybook:serve-and-test:static:performance": {},
|
||||||
|
"storybook:test:no-coverage": {
|
||||||
|
"configurations": {
|
||||||
|
"docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
|
||||||
|
"modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
|
||||||
|
"pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
|
||||||
|
"performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
|
||||||
|
}
|
||||||
|
},
|
||||||
"graphql:generate": {
|
"graphql:generate": {
|
||||||
"executor": "nx:run-commands",
|
"executor": "nx:run-commands",
|
||||||
"defaultConfiguration": "data",
|
"defaultConfiguration": "data",
|
||||||
|
@ -12,7 +12,7 @@ import {
|
|||||||
DateTimeFieldInputProps,
|
DateTimeFieldInputProps,
|
||||||
} from '../DateTimeFieldInput';
|
} from '../DateTimeFieldInput';
|
||||||
|
|
||||||
const formattedDate = new Date(2022, 1, 1);
|
const formattedDate = new Date(2022, 0, 1, 2, 0, 0);
|
||||||
|
|
||||||
const DateFieldValueSetterEffect = ({ value }: { value: Date }) => {
|
const DateFieldValueSetterEffect = ({ value }: { value: Date }) => {
|
||||||
const { setFieldValue } = useDateTimeField();
|
const { setFieldValue } = useDateTimeField();
|
||||||
@ -126,9 +126,9 @@ type Story = StoryObj<typeof DateFieldInputWithContext>;
|
|||||||
export const Default: Story = {
|
export const Default: Story = {
|
||||||
play: async ({ canvasElement }) => {
|
play: async ({ canvasElement }) => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
const div = await canvas.findByText('February');
|
const div = await canvas.findByText('January');
|
||||||
|
|
||||||
await expect(div.innerText).toContain('February');
|
await expect(div.innerText).toContain('January');
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -138,7 +138,7 @@ export const ClickOutside: Story = {
|
|||||||
|
|
||||||
await expect(clickOutsideJestFn).toHaveBeenCalledTimes(0);
|
await expect(clickOutsideJestFn).toHaveBeenCalledTimes(0);
|
||||||
|
|
||||||
await canvas.findByText('February');
|
await canvas.findByText('January');
|
||||||
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
|
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
|
||||||
await userEvent.click(emptyDiv);
|
await userEvent.click(emptyDiv);
|
||||||
|
|
||||||
@ -151,7 +151,7 @@ export const Escape: Story = {
|
|||||||
await expect(escapeJestFn).toHaveBeenCalledTimes(0);
|
await expect(escapeJestFn).toHaveBeenCalledTimes(0);
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
|
|
||||||
await canvas.findByText('February');
|
await canvas.findByText('January');
|
||||||
await userEvent.keyboard('{escape}');
|
await userEvent.keyboard('{escape}');
|
||||||
|
|
||||||
await expect(escapeJestFn).toHaveBeenCalledTimes(1);
|
await expect(escapeJestFn).toHaveBeenCalledTimes(1);
|
||||||
@ -163,7 +163,7 @@ export const Enter: Story = {
|
|||||||
await expect(enterJestFn).toHaveBeenCalledTimes(0);
|
await expect(enterJestFn).toHaveBeenCalledTimes(0);
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
|
|
||||||
await canvas.findByText('February');
|
await canvas.findByText('January');
|
||||||
await userEvent.keyboard('{enter}');
|
await userEvent.keyboard('{enter}');
|
||||||
|
|
||||||
await expect(enterJestFn).toHaveBeenCalledTimes(1);
|
await expect(enterJestFn).toHaveBeenCalledTimes(1);
|
||||||
|
@ -11,7 +11,7 @@ const meta: Meta<typeof InternalDatePicker> = {
|
|||||||
argTypes: {
|
argTypes: {
|
||||||
date: { control: 'date' },
|
date: { control: 'date' },
|
||||||
},
|
},
|
||||||
args: { date: new Date('January 1, 2023 00:00:00') },
|
args: { date: new Date('January 1, 2023 02:00:00') },
|
||||||
};
|
};
|
||||||
|
|
||||||
export default meta;
|
export default meta;
|
||||||
|
@ -16,15 +16,6 @@ const config: StorybookConfig = {
|
|||||||
name: '@storybook/react-vite',
|
name: '@storybook/react-vite',
|
||||||
options: {},
|
options: {},
|
||||||
},
|
},
|
||||||
build: {
|
|
||||||
test: {
|
|
||||||
disableMDXEntries: true,
|
|
||||||
disabledAddons: [
|
|
||||||
'@storybook/addon-docs',
|
|
||||||
'@storybook/addon-essentials/docs',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
export default config;
|
||||||
|
@ -43,10 +43,10 @@
|
|||||||
"test": {}
|
"test": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"storybook:dev": {
|
"storybook:serve:dev": {
|
||||||
"options": { "port": 6007 }
|
"options": { "port": 6007 }
|
||||||
},
|
},
|
||||||
"storybook:static": {
|
"storybook:serve:static": {
|
||||||
"options": {
|
"options": {
|
||||||
"buildTarget": "twenty-ui:storybook:build",
|
"buildTarget": "twenty-ui:storybook:build",
|
||||||
"port": 6007
|
"port": 6007
|
||||||
@ -59,7 +59,7 @@
|
|||||||
"storybook:test": {
|
"storybook:test": {
|
||||||
"options": { "port": 6007 }
|
"options": { "port": 6007 }
|
||||||
},
|
},
|
||||||
"storybook:static:test": {
|
"storybook:serve-and-test:static": {
|
||||||
"options": { "port": 6007 }
|
"options": { "port": 6007 }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -28,9 +28,9 @@ nx lint twenty-front
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
nx test twenty-front# run jest tests
|
nx test twenty-front# run jest tests
|
||||||
nx storybook:dev twenty-front# run storybook
|
nx storybook:serve:dev twenty-front# run storybook
|
||||||
nx storybook:test twenty-front# run tests # (needs yarn storybook:dev to be running)
|
nx storybook:test twenty-front# run tests # (needs yarn storybook:serve:dev to be running)
|
||||||
nx storybook:coverage twenty-front # (needs yarn storybook:dev to be running)
|
nx storybook:coverage twenty-front # (needs yarn storybook:serve:dev to be running)
|
||||||
```
|
```
|
||||||
|
|
||||||
## Tech Stack
|
## Tech Stack
|
||||||
|
Loading…
Reference in New Issue
Block a user