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.

Sign up for GitHub

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

Refactor(web-react): Use @local/tests path alias in tests #1807

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+294 −393
Open

Refactor(web-react): Use @local/tests path alias in tests #1807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9a9a6d6
Test(web-react): Introduce barell files for tests and test providers
literat Dec 10, 2024
fe5222d
Chore(web-react): Introduce `@local/tests` path alias for tests
literat Dec 10, 2024
b997fce
Refactor(web-react): Use `@local/tests` path alias in tests
literat Dec 10, 2024
3b281f4
Test(web-react): Use Jest's automock functionality to share useIcon m…
literat Dec 17, 2024
fa7e713
Test(web-react): Fix typo in `data-testid` attribute
literat Dec 17, 2024
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
24 changes: 22 additions & 2 deletions packages/web-react/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ module.exports = {

settings: {
'import/resolver': {
typescript: {},
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.md'],
},
Expand All @@ -24,6 +25,20 @@ module.exports = {

plugins: ['promise', 'react', '@typescript-eslint', 'prettier', 'react-refresh'],
rules: {
// Turn off unresolved imports because Typescript is already handling this
// @see: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-unresolved.md#importno-unresolved
'import/no-unresolved': 'off',

'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
// @see: https://github.com/ArnaudBarre/eslint-plugin-react-refresh
'react-refresh/only-export-components': 'warn',
// @TODO: add to typescript config
Expand Down Expand Up @@ -73,9 +88,14 @@ module.exports = {
{
groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
pathGroups: [
// {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

thought (if-minor): It looks like this option have no effect on the current code. @curdaj

// pattern: '**',
// group: 'internal',
// },
{
pattern: '**',
group: 'internal',
pattern: '@local/**',
group: 'parent',
position: 'before',
},
{
pattern: '..',
Expand Down
7 changes: 7 additions & 0 deletions packages/web-react/jest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@ const config = {
// Automatically clear mock calls, instances, contexts and results before every test.
// https://jestjs.io/docs/configuration#clearmocks-boolean
clearMocks: true,

// A map from regular expressions to module names or to arrays of module names
// https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring
moduleNameMapper: {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

suggestion (if-minor): Consider using ts-jest and https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping/

'^@local/(.*)': '<rootDir>/$1',
'^@local/tests/(.*)': '<rootDir>/tests/$1',
},
};

export default config;
1 change: 1 addition & 0 deletions packages/web-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
"eslint": "8.57.1",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "9.1.0",
"eslint-import-resolver-typescript": "^3.7.0",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-jsx-a11y": "6.10.2",
"eslint-plugin-prettier": "5.2.1",
Expand Down
4 changes: 1 addition & 3 deletions packages/web-react/src/components/Accordion/__tests__/Accordion.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

todo (if-minor): We need to setup the correct import order. Maybe @curdaj can help with it.

import Accordion from '../Accordion';

describe('Accordion', () => {
Expand Down
4 changes: 1 addition & 3 deletions packages/web-react/src/components/Accordion/__tests__/AccordionContent.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import AccordionContent from '../AccordionContent';
import AccordionItem from '../AccordionItem';

Expand Down
7 changes: 2 additions & 5 deletions packages/web-react/src/components/Accordion/__tests__/AccordionHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { useIconMock } from '../../../../tests/mocks/hooksMock';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import AccordionHeader from '../AccordionHeader';
import AccordionItem from '../AccordionItem';

jest.mock('../../../hooks', () => useIconMock);
jest.mock('../../../hooks/useIcon');

describe('AccordionHeader', () => {
classNamePrefixProviderTest(AccordionHeader, 'Accordion__itemHeader');
Expand Down
7 changes: 2 additions & 5 deletions packages/web-react/src/components/Accordion/__tests__/AccordionItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { useIconMock } from '../../../../tests/mocks/hooksMock';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import Accordion from '../Accordion';
import AccordionContent from '../AccordionContent';
import AccordionHeader from '../AccordionHeader';
import AccordionItem from '../AccordionItem';

jest.mock('../../../hooks', () => useIconMock);
jest.mock('../../../hooks/useIcon');

describe('AccordionItem', () => {
classNamePrefixProviderTest(AccordionItem, 'Accordion__item');
Expand Down
7 changes: 2 additions & 5 deletions packages/web-react/src/components/Accordion/__tests__/UncontrolledAccordion.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import '@testing-library/jest-dom';
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { useIconMock } from '../../../../tests/mocks/hooksMock';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import AccordionContent from '../AccordionContent';
import AccordionHeader from '../AccordionHeader';
import AccordionItem from '../AccordionItem';
import UncontrolledAccordion from '../UncontrolledAccordion';

jest.mock('../../../hooks', () => useIconMock);
jest.mock('../../../hooks/useIcon');

describe('UncontrolledAccordion', () => {
classNamePrefixProviderTest(UncontrolledAccordion, 'Accordion');
Expand Down
8 changes: 2 additions & 6 deletions packages/web-react/src/components/Alert/__tests__/Alert.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { useIconMock } from '../../../../tests/mocks/hooksMock';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { emotionColorPropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, emotionColorPropsTest, restPropsTest, stylePropsTest } from '@local/tests';
import Alert from '../Alert';

jest.mock('../../../hooks', () => useIconMock);
jest.mock('../../../hooks/useIcon');

describe('Alert', () => {
classNamePrefixProviderTest(Alert, 'Alert');
Expand Down
7 changes: 2 additions & 5 deletions packages/web-react/src/components/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { useIconMock } from '../../../../tests/mocks/hooksMock';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import Breadcrumbs from '../Breadcrumbs';

jest.mock('../../../hooks', () => useIconMock);
jest.mock('../../../hooks/useIcon');

describe('Breadcrumbs', () => {
classNamePrefixProviderTest(Breadcrumbs, 'Breadcrumbs');
Expand Down
7 changes: 2 additions & 5 deletions packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { useIconMock } from '../../../../tests/mocks/hooksMock';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import BreadcrumbsItem from '../BreadcrumbsItem';

jest.mock('../../../hooks', () => useIconMock);
jest.mock('../../../hooks/useIcon');

describe('BreadcrumbsItem', () => {
classNamePrefixProviderTest(BreadcrumbsItem, 'd-none');
Expand Down
13 changes: 6 additions & 7 deletions packages/web-react/src/components/Button/__tests__/Button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { useIconMock } from '../../../../tests/mocks/hooksMock';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import {
classNamePrefixProviderTest,
actionButtonColorPropsTest,
emotionColorPropsTest,
sizePropsTest,
} from '../../../../tests/providerTests/dictionaryPropsTest';
import { loadingPropsTest } from '../../../../tests/providerTests/loadingPropsTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
loadingPropsTest,
restPropsTest,
stylePropsTest,
} from '@local/tests';
import Button from '../Button';

jest.mock('../../../hooks', () => useIconMock);
jest.mock('../../../hooks/useIcon');

describe('Button', () => {
classNamePrefixProviderTest(Button, 'Button');
Expand Down
13 changes: 6 additions & 7 deletions packages/web-react/src/components/ButtonLink/__tests__/ButtonLink.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { useIconMock } from '../../../../tests/mocks/hooksMock';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import {
classNamePrefixProviderTest,
actionButtonColorPropsTest,
emotionColorPropsTest,
sizePropsTest,
} from '../../../../tests/providerTests/dictionaryPropsTest';
import { loadingPropsTest } from '../../../../tests/providerTests/loadingPropsTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
loadingPropsTest,
restPropsTest,
stylePropsTest,
} from '@local/tests';
import ButtonLink from '../ButtonLink';

jest.mock('../../../hooks', () => useIconMock);
jest.mock('../../../hooks/useIcon');

describe('ButtonLink', () => {
classNamePrefixProviderTest(ButtonLink, 'Button');
Expand Down
6 changes: 2 additions & 4 deletions packages/web-react/src/components/Card/__tests__/Card.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import Card from '../Card';

describe('Card', () => {
Expand All @@ -20,7 +18,7 @@ describe('Card', () => {
});

it('should render custom element', () => {
render(<Card elementType="section" data-testId="test" />);
render(<Card elementType="section" data-testid="test" />);

expect(screen.getByTestId('test')).toContainHTML('section');
});
Expand Down
9 changes: 3 additions & 6 deletions packages/web-react/src/components/Card/__tests__/CardArtwork.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { alignmentXPropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, alignmentXPropsTest, restPropsTest, stylePropsTest } from '@local/tests';
import CardArtwork from '../CardArtwork';

describe('CardArtwork', () => {
Expand All @@ -17,13 +14,13 @@ describe('CardArtwork', () => {
alignmentXPropsTest(CardArtwork, 'CardArtwork');

it('should render artwork card component and have default class name', () => {
render(<CardArtwork data-testId="test" />);
render(<CardArtwork data-testid="test" />);

expect(screen.getByTestId('test')).toHaveClass('CardArtwork');
});

it('should render text children', () => {
render(<CardArtwork data-testId="test">Hello World</CardArtwork>);
render(<CardArtwork data-testid="test">Hello World</CardArtwork>);

expect(screen.getByTestId('test')).toHaveTextContent('Hello World');
});
Expand Down
4 changes: 1 addition & 3 deletions packages/web-react/src/components/Card/__tests__/CardBody.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import CardBody from '../CardBody';

describe('CardBody', () => {
Expand Down
8 changes: 3 additions & 5 deletions packages/web-react/src/components/Card/__tests__/CardEyebrow.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import CardEyebrow from '../CardEyebrow';

describe('CardEyebrow', () => {
Expand All @@ -14,13 +12,13 @@ describe('CardEyebrow', () => {
restPropsTest(CardEyebrow, '.CardEyebrow');

it('should render eyebrow card component and have default class name', () => {
render(<CardEyebrow data-testId="test" />);
render(<CardEyebrow data-testid="test" />);

expect(screen.getByTestId('test')).toHaveClass('CardEyebrow');
});

it('should render text children', () => {
render(<CardEyebrow data-testId="test">Hello World</CardEyebrow>);
render(<CardEyebrow data-testid="test">Hello World</CardEyebrow>);

expect(screen.getByTestId('test')).toHaveTextContent('Hello World');
});
Expand Down
5 changes: 1 addition & 4 deletions packages/web-react/src/components/Card/__tests__/CardFooter.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { alignmentXPropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, alignmentXPropsTest, restPropsTest, stylePropsTest } from '@local/tests';
import CardFooter from '../CardFooter';

describe('CardFooter', () => {
Expand Down
4 changes: 1 addition & 3 deletions packages/web-react/src/components/Card/__tests__/CardLink.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import CardLink from '../CardLink';

describe('CardLink', () => {
Expand Down
8 changes: 3 additions & 5 deletions packages/web-react/src/components/Card/__tests__/CardLogo.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
import CardLogo from '../CardLogo';

describe('CardLogo', () => {
Expand All @@ -14,13 +12,13 @@ describe('CardLogo', () => {
restPropsTest(CardLogo, '.CardLogo');

it('should render logo card component and have default class name', () => {
render(<CardLogo data-testId="test" />);
render(<CardLogo data-testid="test" />);

expect(screen.getByTestId('test')).toHaveClass('CardLogo');
});

it('should render text children', () => {
render(<CardLogo data-testId="test">Hello World</CardLogo>);
render(<CardLogo data-testid="test">Hello World</CardLogo>);

expect(screen.getByTestId('test')).toHaveTextContent('Hello World');
});
Expand Down
Loading
Loading