diff --git a/package-lock.json b/package-lock.json index dcd48a34c3..b3744630b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45183,10 +45183,13 @@ "prop-types": "^15.8.1" }, "devDependencies": { + "@instructure/ui-axe-check": "10.6.0", "@instructure/ui-babel-preset": "10.6.0", - "@instructure/ui-test-locator": "10.6.0", "@instructure/ui-test-utils": "10.6.0", - "@instructure/ui-themes": "10.6.0" + "@instructure/ui-themes": "10.6.0", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.1", + "vitest": "^2.1.1" }, "peerDependencies": { "react": ">=16.8 <=18" diff --git a/packages/ui-progress/package.json b/packages/ui-progress/package.json index 7aa5258ba3..5864647f3d 100644 --- a/packages/ui-progress/package.json +++ b/packages/ui-progress/package.json @@ -35,10 +35,13 @@ "prop-types": "^15.8.1" }, "devDependencies": { + "@instructure/ui-axe-check": "10.6.0", "@instructure/ui-babel-preset": "10.6.0", - "@instructure/ui-test-locator": "10.6.0", "@instructure/ui-test-utils": "10.6.0", - "@instructure/ui-themes": "10.6.0" + "@instructure/ui-themes": "10.6.0", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.1", + "vitest": "^2.1.1" }, "peerDependencies": { "react": ">=16.8 <=18" diff --git a/packages/ui-progress/src/ProgressBar/ProgressBarLocator.ts b/packages/ui-progress/src/ProgressBar/ProgressBarLocator.ts deleted file mode 100644 index 88d3c9b939..0000000000 --- a/packages/ui-progress/src/ProgressBar/ProgressBarLocator.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import { locator } from '@instructure/ui-test-locator' - -import { ProgressBar } from './index' - -// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message -export const ProgressBarLocator = locator(ProgressBar.selector) diff --git a/packages/ui-progress/src/ProgressBar/__tests__/ProgressBar.test.tsx b/packages/ui-progress/src/ProgressBar/__new-tests__/ProgressBar.test.tsx similarity index 70% rename from packages/ui-progress/src/ProgressBar/__tests__/ProgressBar.test.tsx rename to packages/ui-progress/src/ProgressBar/__new-tests__/ProgressBar.test.tsx index ba311bb2f1..1ea95cd2c3 100644 --- a/packages/ui-progress/src/ProgressBar/__tests__/ProgressBar.test.tsx +++ b/packages/ui-progress/src/ProgressBar/__new-tests__/ProgressBar.test.tsx @@ -23,60 +23,64 @@ */ import React from 'react' -import { expect, mount } from '@instructure/ui-test-utils' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom' +import { runAxeCheck } from '@instructure/ui-axe-check' import { ProgressBar } from '../index' -import { ProgressBarLocator } from '../ProgressBarLocator' -describe('', async () => { +describe('', () => { it('should render', async () => { - await mount( + const { container } = render( ) - expect(await ProgressBarLocator.find()).to.exist() + const progress = container.querySelector('progress') + + expect(progress).toBeInTheDocument() }) it('should render a progress element with correct aria attributes', async () => { - await mount( + const { container } = render( ) + const progress = container.querySelector('progress') - const componentRoot = await ProgressBarLocator.find() - const progress = await componentRoot.find('progress') - - expect(progress).to.exist() - expect(progress.getAttribute('value')).to.equal('30') + expect(progress).toHaveAttribute('value', '30') }) it('should format the displayed text', async () => { - await mount( + const current = 30 + const max = 60 + const { container } = render( `${valueNow} of ${valueMax}`} /> ) - expect(await ProgressBarLocator.find(':contains(30 of 60)')).to.exist() + const progress = container.querySelector('[class$="-progressBar"]') + + expect(progress).toHaveTextContent(`${current} of ${max}`) }) it('should meet a11y standards', async () => { - await mount( + const { container } = render( ) - const progress = await ProgressBarLocator.find() - expect(await progress.accessible()).to.be.true() + const axeCheck = await runAxeCheck(container) + expect(axeCheck).toBe(true) }) }) diff --git a/packages/ui-progress/src/ProgressBar/locator.ts b/packages/ui-progress/src/ProgressBar/locator.ts deleted file mode 100644 index 33a013b5ce..0000000000 --- a/packages/ui-progress/src/ProgressBar/locator.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import { ProgressBarLocator } from './ProgressBarLocator' - -export { ProgressBarLocator } -export default ProgressBarLocator diff --git a/packages/ui-progress/src/ProgressCircle/ProgressCircleLocator.ts b/packages/ui-progress/src/ProgressCircle/ProgressCircleLocator.ts deleted file mode 100644 index 4ccc0810d9..0000000000 --- a/packages/ui-progress/src/ProgressCircle/ProgressCircleLocator.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import { locator } from '@instructure/ui-test-locator' - -import { ProgressCircle } from './index' - -// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message -export const ProgressCircleLocator = locator(ProgressCircle.selector) diff --git a/packages/ui-progress/src/ProgressCircle/__tests__/ProgressCircle.test.tsx b/packages/ui-progress/src/ProgressCircle/__new-tests__/ProgressCircle.test.tsx similarity index 70% rename from packages/ui-progress/src/ProgressCircle/__tests__/ProgressCircle.test.tsx rename to packages/ui-progress/src/ProgressCircle/__new-tests__/ProgressCircle.test.tsx index 9726520ff8..cc98747eec 100644 --- a/packages/ui-progress/src/ProgressCircle/__tests__/ProgressCircle.test.tsx +++ b/packages/ui-progress/src/ProgressCircle/__new-tests__/ProgressCircle.test.tsx @@ -23,60 +23,64 @@ */ import React from 'react' -import { expect, mount } from '@instructure/ui-test-utils' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom' +import { runAxeCheck } from '@instructure/ui-axe-check' import { ProgressCircle } from '../index' -import { ProgressCircleLocator } from '../ProgressCircleLocator' -describe('', async () => { +describe('', () => { it('should render', async () => { - await mount( + const { container } = render( ) - expect(await ProgressCircleLocator.find()).to.exist() + const progress = container.querySelector('progress') + + expect(progress).toBeInTheDocument() }) it('should render a progress element with correct aria attributes', async () => { - await mount( + const { container } = render( ) + const progress = container.querySelector('progress') - const componentRoot = await ProgressCircleLocator.find() - const progress = await componentRoot.find('progress') - - expect(progress).to.exist() - expect(progress.getAttribute('value')).to.equal('30') + expect(progress).toHaveAttribute('value', '30') }) it('should format the displayed text', async () => { - await mount( + const current = 30 + const max = 60 + const { container } = render( `${valueNow} of ${valueMax}`} /> ) - expect(await ProgressCircleLocator.find(':contains(30 of 60)')).to.exist() + const progress = container.querySelector('[class$="-progressCircle"]') + + expect(progress).toHaveTextContent(`${current} of ${max}`) }) it('should meet a11y standards', async () => { - await mount( + const { container } = render( ) - const progress = await ProgressCircleLocator.find() - expect(await progress.accessible()).to.be.true() + const axeCheck = await runAxeCheck(container) + expect(axeCheck).toBe(true) }) }) diff --git a/packages/ui-progress/src/ProgressCircle/locator.ts b/packages/ui-progress/src/ProgressCircle/locator.ts deleted file mode 100644 index 4a81a0d220..0000000000 --- a/packages/ui-progress/src/ProgressCircle/locator.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -import { ProgressCircleLocator } from './ProgressCircleLocator' - -export { ProgressCircleLocator } -export default ProgressCircleLocator diff --git a/packages/ui-progress/tsconfig.build.json b/packages/ui-progress/tsconfig.build.json index 7fc0d7e8b5..a6cd658158 100644 --- a/packages/ui-progress/tsconfig.build.json +++ b/packages/ui-progress/tsconfig.build.json @@ -11,6 +11,7 @@ { "path": "../emotion/tsconfig.build.json" }, { "path": "../shared-types/tsconfig.build.json" }, { "path": "../ui-a11y-content/tsconfig.build.json" }, + { "path": "../ui-axe-check/tsconfig.build.json" }, { "path": "../ui-color-utils/tsconfig.build.json" }, { "path": "../ui-react-utils/tsconfig.build.json" }, { "path": "../ui-testable/tsconfig.build.json" },