diff --git a/components/Welcome/Welcome.test.tsx b/components/Welcome/Welcome.test.tsx index 2d01b17..5bb9fb6 100644 --- a/components/Welcome/Welcome.test.tsx +++ b/components/Welcome/Welcome.test.tsx @@ -1,7 +1,9 @@ -import { render, screen } from '@/test-utils'; +import { render, screen, tests } from '@/test-utils'; import { Welcome } from './Welcome'; describe('Welcome component', () => { + tests.itSupportsClassName({ component: Welcome, props: {} }); + it('has correct Next.js theming section link', () => { render(); expect(screen.getByText('this guide')).toHaveAttribute( diff --git a/components/Welcome/Welcome.tsx b/components/Welcome/Welcome.tsx index 34d8161..fe6d78d 100644 --- a/components/Welcome/Welcome.tsx +++ b/components/Welcome/Welcome.tsx @@ -1,9 +1,9 @@ import { Title, Text, Anchor } from '@mantine/core'; import classes from './Welcome.module.css'; -export function Welcome() { +export function Welcome(props: React.ComponentPropsWithoutRef<'div'>) { return ( - <> +
Welcome to{' '} <Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}> @@ -18,6 +18,6 @@ export function Welcome() { </Anchor> . To get started edit page.tsx file. </Text> - </> + </div> ); } diff --git a/package.json b/package.json index 5e7b4c6..2435a17 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ }, "devDependencies": { "@babel/core": "^7.23.2", + "@mantine-tests/core": "^1.0.1", "@next/eslint-plugin-next": "^14.0.1", "@storybook/addon-essentials": "^7.5.2", "@storybook/addon-styling-webpack": "^0.0.5", @@ -56,6 +57,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-testing-library": "^6.1.0", "jest": "^29.7.0", + "jest-axe": "^8.0.0", "jest-environment-jsdom": "^29.7.0", "postcss": "^8.4.31", "postcss-preset-mantine": "1.11.0", diff --git a/test-utils/index.ts b/test-utils/index.ts index 15d3a0e..6666db6 100644 --- a/test-utils/index.ts +++ b/test-utils/index.ts @@ -1,5 +1,6 @@ import userEvent from '@testing-library/user-event'; +export { tests } from '@mantine-tests/core'; export * from '@testing-library/react'; export { render } from './render'; export { userEvent }; diff --git a/yarn.lock b/yarn.lock index 21a9ae6..043a1cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2306,6 +2306,16 @@ __metadata: languageName: node linkType: hard +"@mantine-tests/core@npm:^1.0.1": + version: 1.0.1 + resolution: "@mantine-tests/core@npm:1.0.1" + peerDependencies: + react: ^18.2.0 + react-dom: ^18.2.0 + checksum: 3039a597bd283a1b39cc806e8545b2919e13b5fbdeede997530d089cd099ed78c9154881fe7929f75473b9db7e2cbedd91c3e58ee7958326be2d61a68711ba33 + languageName: node + linkType: hard + "@mantine/core@npm:7.2.2": version: 7.2.2 resolution: "@mantine/core@npm:7.2.2" @@ -5931,6 +5941,13 @@ __metadata: languageName: node linkType: hard +"axe-core@npm:4.7.2": + version: 4.7.2 + resolution: "axe-core@npm:4.7.2" + checksum: 8dfc61f038fbd9623ae8a264c8a475d887113a027fb440a2b377b82ffd300e71d1a0bcf042ff13b517a8d548b34c44b4159eff693725c5d7cde240d0aa68feac + languageName: node + linkType: hard + "axe-core@npm:=4.7.0": version: 4.7.0 resolution: "axe-core@npm:4.7.0" @@ -6561,6 +6578,16 @@ __metadata: languageName: node linkType: hard +"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2": + version: 4.1.2 + resolution: "chalk@npm:4.1.2" + dependencies: + ansi-styles: "npm:^4.1.0" + supports-color: "npm:^7.1.0" + checksum: 4a3fef5cc34975c898ffe77141450f679721df9dde00f6c304353fa9c8b571929123b26a0e4617bde5018977eb655b31970c297b91b63ee83bb82aeb04666880 + languageName: node + linkType: hard + "chalk@npm:^2.4.2": version: 2.4.2 resolution: "chalk@npm:2.4.2" @@ -6582,16 +6609,6 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2": - version: 4.1.2 - resolution: "chalk@npm:4.1.2" - dependencies: - ansi-styles: "npm:^4.1.0" - supports-color: "npm:^7.1.0" - checksum: 4a3fef5cc34975c898ffe77141450f679721df9dde00f6c304353fa9c8b571929123b26a0e4617bde5018977eb655b31970c297b91b63ee83bb82aeb04666880 - languageName: node - linkType: hard - "char-regex@npm:^1.0.2": version: 1.0.2 resolution: "char-regex@npm:1.0.2" @@ -10348,6 +10365,18 @@ __metadata: languageName: node linkType: hard +"jest-axe@npm:^8.0.0": + version: 8.0.0 + resolution: "jest-axe@npm:8.0.0" + dependencies: + axe-core: "npm:4.7.2" + chalk: "npm:4.1.2" + jest-matcher-utils: "npm:29.2.2" + lodash.merge: "npm:4.6.2" + checksum: 7e7b41324695c26332803937908604e325415a34945526fa20d74a9f3c5a7bb6432e7158d6091f6e8fdd1b09bc6be093c306938c6626119f6ee613453cc913f0 + languageName: node + linkType: hard + "jest-changed-files@npm:^29.7.0": version: 29.7.0 resolution: "jest-changed-files@npm:29.7.0" @@ -10451,7 +10480,7 @@ __metadata: languageName: node linkType: hard -"jest-diff@npm:^29.7.0": +"jest-diff@npm:^29.2.1, jest-diff@npm:^29.7.0": version: 29.7.0 resolution: "jest-diff@npm:29.7.0" dependencies: @@ -10520,7 +10549,7 @@ __metadata: languageName: node linkType: hard -"jest-get-type@npm:^29.6.3": +"jest-get-type@npm:^29.2.0, jest-get-type@npm:^29.6.3": version: 29.6.3 resolution: "jest-get-type@npm:29.6.3" checksum: 552e7a97a983d3c2d4e412a44eb7de0430ff773dd99f7500962c268d6dfbfa431d7d08f919c9d960530e5f7f78eb47f267ad9b318265e5092b3ff9ede0db7c2b @@ -10560,6 +10589,18 @@ __metadata: languageName: node linkType: hard +"jest-matcher-utils@npm:29.2.2": + version: 29.2.2 + resolution: "jest-matcher-utils@npm:29.2.2" + dependencies: + chalk: "npm:^4.0.0" + jest-diff: "npm:^29.2.1" + jest-get-type: "npm:^29.2.0" + pretty-format: "npm:^29.2.1" + checksum: a554e683bcd18cc11e1e018597771051e88cb3bf79cdbb5896f7550bd4c787e473ba4727336db2049fea6149e21546c8f1cde4b78a76eb595199cfeaba6450b1 + languageName: node + linkType: hard + "jest-matcher-utils@npm:^29.7.0": version: 29.7.0 resolution: "jest-matcher-utils@npm:29.7.0" @@ -11190,7 +11231,7 @@ __metadata: languageName: node linkType: hard -"lodash.merge@npm:^4.6.2": +"lodash.merge@npm:4.6.2, lodash.merge@npm:^4.6.2": version: 4.6.2 resolution: "lodash.merge@npm:4.6.2" checksum: 402fa16a1edd7538de5b5903a90228aa48eb5533986ba7fa26606a49db2572bf414ff73a2c9f5d5fd36b31c46a5d5c7e1527749c07cbcf965ccff5fbdf32c506 @@ -11343,6 +11384,7 @@ __metadata: resolution: "mantine-next-template@workspace:." dependencies: "@babel/core": "npm:^7.23.2" + "@mantine-tests/core": "npm:^1.0.1" "@mantine/core": "npm:7.2.2" "@mantine/hooks": "npm:7.2.2" "@next/bundle-analyzer": "npm:^14.0.1" @@ -11374,6 +11416,7 @@ __metadata: eslint-plugin-react-hooks: "npm:^4.6.0" eslint-plugin-testing-library: "npm:^6.1.0" jest: "npm:^29.7.0" + jest-axe: "npm:^8.0.0" jest-environment-jsdom: "npm:^29.7.0" next: "npm:14.0.1" postcss: "npm:^8.4.31" @@ -12870,7 +12913,7 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^29.0.0, pretty-format@npm:^29.7.0": +"pretty-format@npm:^29.0.0, pretty-format@npm:^29.2.1, pretty-format@npm:^29.7.0": version: 29.7.0 resolution: "pretty-format@npm:29.7.0" dependencies: