Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: change file extension #2086

Merged
merged 1 commit into from
May 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/core/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const commonExtends = ["plugin:react/recommended", "plugin:react-hooks/recommend
module.exports = {
overrides: [
{
files: ["*.jest.js", "jest.init.js"],
files: ["*.test.js", "jest.init.js"],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it does not take into consideration *.test.tsx or *.test.ts
what is the meaning of it not catching it?

env: {
jest: true,
"jest/globals": true
Expand Down
31 changes: 19 additions & 12 deletions packages/core/TESTING_README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@

As this library is the base of all monday's ui and an open source library, its components should be very well tested. In order to do so we've chosen the following test stack.

### Stack
### Stack

1. Jest as of our test runner and framework
2. [React testing library](https://testing-library.com/docs/react-testing-library/intro) as our components testing library
3. Storybook interaction tests for scenarios which require real browser instead of JSDom simulation. More information about this [here](./src/tests/readme.md).

### Snapshot tests
- Each component will have a snapshot test file named according to the following convention: *component-name*-snapshot-tests.jest.tsx.

- Each component will have a snapshot test file named according to the following convention: _component-name_-snapshot-tests.test.tsx.
- The snapshot tests file will be located under the component's `__tests__` folder.
- This file will contain a snapshot test for the component with empty props and a snapshot test for each prop.
- Snapshot files will be implemented with Jest, as shown in the following example:
Expand All @@ -27,11 +29,12 @@ describe("Chips renders correctly", () => {
```

### Behaviour tests

- Every interactive component will contain a behaviour tests file.
- The component behaviour tests file will named according to the following convention: *component-name*-tests.jest.tsx.
- The component behaviour tests file will named according to the following convention: _component-name_-tests.test.tsx.
- The behaviour tests file will be located under the component's `__tests__` folder.
- This tests file will contain all the non-snapshot unit tests. This file should contain a test for each possible user interaction with the component.
- Behaviour files will be implemented with Jest and [React Testing Library]((https://testing-library.com/docs/react-testing-library/intro)) when needed, as shown in the following example:
- Behaviour files will be implemented with Jest and [React Testing Library](<(https://testing-library.com/docs/react-testing-library/intro)>) when needed, as shown in the following example:

```tsx
import { fireEvent, render } from "@testing-library/react";
Expand All @@ -41,40 +44,44 @@ describe("Tipseen tests", () => {
it("call onClose function when click on close button", () => {
const onClickMock = jest.fn();
const { getByLabelText } = render(
<Tipseen onClose={onClickMock}>
<div />
</Tipseen>
<Tipseen onClose={onClickMock}>
<div />
</Tipseen>
);

fireEvent.click(getByLabelText("Close"));
expect(onClickMock.mock.calls.length).toBe(1);
});
});
```

### Storybook interaction tests
- Every interactive component will contain a storybook interaction tests file according to the following name convention: *component-name*-interactions.tsx.
- The storybook interaction tests file will be located under the component's `__tests__` folder.

- Every interactive component will contain a storybook interaction tests file according to the following name convention: _component-name_-interactions.tsx.
- The storybook interaction tests file will be located under the component's `__tests__` folder.
- This tests file will contain all tests which require real browser instead of JSDOM simulation.
- Snapshot files will be implemented with Jest and React Testing library when needed, as shown in the following example:
- Every storybook interaction test suite is linked to a specific component story.
- You can read more about storybook interaction tests and our recommended practices [here](./src/tests/readme.md).

### Running Vibe tests

**Snapshot and Behavior Tests:**
To run all snapshot and behavior tests locally, use the command: `yarn test`.

**Local Storybook Interaction Tests:**
To check interaction tests for a specific story in Storybook:

1. Open the Sandbox section of Storybook.
2. Select the desired story.
3. Click on the "Interactions" tab in the story's footer tabs panel.


### Testing best practices
1. **Always test the expected behavior and not implementation details**. This approach helps us ensure test resilience, enabling easier refactoring and maintenance. It also enhances flexibility, improves communication, and future-proofs our tests. Overall, focusing on expected behavior leads to more robust test suites.

1. **Always test the expected behavior and not implementation details**. This approach helps us ensure test resilience, enabling easier refactoring and maintenance. It also enhances flexibility, improves communication, and future-proofs our tests. Overall, focusing on expected behavior leads to more robust test suites.
2. Whenever possible, in your unit tests, prefer to query a specific component using its data-testid instead of other methods.

### Creating test files from scratch

When implementing new tests for a component from scratch, please use our plop code generator.
Use our plop, which automatically generates the proper folder structure. Snapshot tests and jest behavior testes files should end with .test.tsx, and storybook interaction tests files with .interactions.tsx
2 changes: 1 addition & 1 deletion packages/core/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* https://jestjs.io/docs/en/configuration.html
*/

const JEST_END_FILES = process.env.TEST_END_FILES || "jest";
const JEST_END_FILES = process.env.TEST_END_FILES || "test";

module.exports = {
clearMocks: true,
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:stories": "testing=storybook TEST_END_FILES=jest-story jest",
"test:stories": "testing=storybook TEST_END_FILES=test-story jest",
"test:update": "yarn test -- -u",
"test:coverage": "yarn test -- --coverage",
"start": "yarn build:react-icons && yarn build:commonjs -- --watch",
Expand Down
8 changes: 4 additions & 4 deletions packages/core/plop/component/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ module.exports = plop => {
},
{
type: "add",
path: "src/components/{{properCase componentName}}/__tests__/{{camelCase componentName}}-snapshot-tests.jest.js",
templateFile: "plop/general/component-snapshot-tests-jest.txt"
path: "src/components/{{properCase componentName}}/__tests__/{{camelCase componentName}}-snapshot-tests.test.js",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the file name dropped the jest, not replaced it with test

templateFile: "plop/general/component-snapshot-tests-test.txt"
},
{
type: "add",
path: "src/components/{{properCase componentName}}/__tests__/{{camelCase componentName}}-tests.jest.js",
templateFile: "plop/general/component-tests-jest.txt"
path: "src/components/{{properCase componentName}}/__tests__/{{camelCase componentName}}-tests.test.js",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the file name dropped the jest, not replaced it with test

templateFile: "plop/general/component-tests-test.txt"
},
{
type: "append",
Expand Down
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you dropped the jest here

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed it completely, we don't use it anyway, we use snapshot testing inside the test files

File renamed without changes.
9 changes: 4 additions & 5 deletions packages/core/plop/tests/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,13 @@ module.exports = plop => {
actions: [
{
type: "add",
path:
"src/components/{{properCase componentName}}/__tests__/{{camelCase componentName}}-snapshot-tests.jest.js",
templateFile: "plop/general/component-snapshot-tests-jest.txt"
path: "src/components/{{properCase componentName}}/__tests__/{{camelCase componentName}}-snapshot-tests.test.js",
templateFile: "plop/general/component-snapshot-tests-test.txt"
},
{
type: "add",
path: "src/components/{{properCase componentName}}/__tests__/{{camelCase componentName}}-tests.jest.js",
templateFile: "plop/general/component-tests-jest.txt"
path: "src/components/{{properCase componentName}}/__tests__/{{camelCase componentName}}-tests.test.js",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the file name dropped the jest, not replaced it with test

templateFile: "plop/general/component-tests-test.txt"
}
]
});
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook-blocks/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const commonExtends = ['plugin:react/recommended', 'plugin:prettier/recommended'
module.exports = {
overrides: [
{
files: ['*.jest.js', 'jest.init.js'],
files: ['*.test.js', 'jest.init.js'],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as before, what's the meaning of it not catching ts{x}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed it as it has no effect

env: {
jest: true,
'jest/globals': true,
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook-blocks/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = {
modulePathIgnorePatterns: ['<rootDir>/dist', '<rootDir>/build'],
preset: 'ts-jest/presets/default',
testEnvironment: 'jsdom',
testMatch: ['**/__tests__/**/*.jest.[jt]s?(x)'],
testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'],
transformIgnorePatterns: ['/node_modules/(?!monday-ui-react-core)'],
transform: {
'^.+\\.jsx?$': 'babel-jest',
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook-blocks/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"prettier:fix": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,ts,tsx}\"",
"test": "jest --passWithNoTests",
"test:update": "yarn test -- -u",
"test:stories": "testing=storybook TEST_END_FILES=jest-story jest --passWithNoTests",
"test:stories": "testing=storybook TEST_END_FILES=test-story jest --passWithNoTests",
talkor marked this conversation as resolved.
Show resolved Hide resolved
"storybook": "storybook dev -p 7012",
"build-storybook": "storybook build"
},
Expand Down