diff --git a/package-lock.json b/package-lock.json index f09e9f122f..b1755b06ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53804,7 +53804,6 @@ "devDependencies": { "@instructure/ui-axe-check": "8.44.0", "@instructure/ui-babel-preset": "8.44.0", - "@instructure/ui-test-locator": "8.44.0", "@instructure/ui-test-utils": "8.44.0", "@instructure/ui-themes": "8.44.0", "@testing-library/jest-dom": "^5.17.0", @@ -53829,11 +53828,15 @@ "prop-types": "^15.8.1" }, "devDependencies": { + "@instructure/ui-axe-check": "8.44.0", "@instructure/ui-babel-preset": "8.44.0", "@instructure/ui-color-utils": "8.44.0", "@instructure/ui-icons": "8.44.0", "@instructure/ui-test-utils": "8.44.0", - "@instructure/ui-themes": "8.44.0" + "@instructure/ui-themes": "8.44.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.4.3" }, "peerDependencies": { "react": ">=16.8 <=18" @@ -59395,7 +59398,6 @@ "@instructure/ui-color-utils": "8.44.0", "@instructure/ui-position": "8.44.0", "@instructure/ui-react-utils": "8.44.0", - "@instructure/ui-test-locator": "8.44.0", "@instructure/ui-test-utils": "8.44.0", "@instructure/ui-testable": "8.44.0", "@instructure/ui-themes": "8.44.0", @@ -59412,6 +59414,7 @@ "@babel/runtime": "^7.22.15", "@instructure/emotion": "8.44.0", "@instructure/shared-types": "8.44.0", + "@instructure/ui-axe-check": "8.44.0", "@instructure/ui-babel-preset": "8.44.0", "@instructure/ui-color-utils": "8.44.0", "@instructure/ui-heading": "8.44.0", @@ -59421,6 +59424,9 @@ "@instructure/ui-test-utils": "8.44.0", "@instructure/ui-themes": "8.44.0", "@instructure/ui-view": "8.44.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.4.3", "prop-types": "^15.8.1" } }, diff --git a/packages/ui-badge/package.json b/packages/ui-badge/package.json index 78418f30d3..7abada0709 100644 --- a/packages/ui-badge/package.json +++ b/packages/ui-badge/package.json @@ -38,7 +38,6 @@ "devDependencies": { "@instructure/ui-axe-check": "8.44.0", "@instructure/ui-babel-preset": "8.44.0", - "@instructure/ui-test-locator": "8.44.0", "@instructure/ui-test-utils": "8.44.0", "@instructure/ui-themes": "8.44.0", "@testing-library/jest-dom": "^5.17.0", diff --git a/packages/ui-badge/src/Badge/BadgeLocator.ts b/packages/ui-badge/src/Badge/BadgeLocator.ts deleted file mode 100644 index 5936582171..0000000000 --- a/packages/ui-badge/src/Badge/BadgeLocator.ts +++ /dev/null @@ -1,30 +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 { Badge } 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 BadgeLocator = locator(Badge.selector) diff --git a/packages/ui-badge/src/Badge/__tests__/Badge.test.tsx b/packages/ui-badge/src/Badge/__tests__/Badge.test.tsx deleted file mode 100644 index 22922c8a01..0000000000 --- a/packages/ui-badge/src/Badge/__tests__/Badge.test.tsx +++ /dev/null @@ -1,111 +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 React from 'react' - -import { expect, mount } from '@instructure/ui-test-utils' - -import { Badge } from '../index' -import { BadgeLocator } from '../BadgeLocator' - -describe('', () => { - it('should be accessible', async () => { - await mount( - - - - ) - - const badge = await BadgeLocator.find() - - expect(await badge.accessible()).to.be.true() - }) - - it('should show the count', async () => { - await mount( - - - - ) - - const badge = await BadgeLocator.find() - - expect(await badge.find(':contains(100)')).to.exist() - }) - - it('should truncate the count via countUntil', async () => { - await mount( - - - - ) - - const badge = await BadgeLocator.find() - - expect(await badge.find(':contains(99 +)')).to.exist() - }) - - it('should change postion based on the placement prop', async () => { - const countOffset = '5px' - await mount( - - - - ) - - const badgeWrapper = await BadgeLocator.find() - const badge = await badgeWrapper.find('[class$=-badge]') - - expect(badge.getComputedStyle().bottom).to.equal(`-${countOffset}`) - expect(badge.getComputedStyle().left).to.equal(`-${countOffset}`) - }) - - it('should not render a wrapper for a standalone Badge', async () => { - await mount( - - - - ) - - const badge = await BadgeLocator.find() - - expect(await badge.find('li', { expectEmpty: true })).to.not.exist() - }) - - it('should change its output via the formatOutput prop', async () => { - const formatOutput = (formattedCount: string) => { - return `${formattedCount}!` - } - - await mount( - - - - ) - - const badge = await BadgeLocator.find() - - expect(await badge.findWithText('15!')).to.exist() - }) -}) diff --git a/packages/ui-badge/src/Badge/locator.ts b/packages/ui-badge/src/Badge/locator.ts deleted file mode 100644 index d0775e94f8..0000000000 --- a/packages/ui-badge/src/Badge/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 { BadgeLocator } from './BadgeLocator' - -export { BadgeLocator } -export default BadgeLocator diff --git a/packages/ui-badge/tsconfig.build.json b/packages/ui-badge/tsconfig.build.json index 5802f63b49..b55b5251a8 100644 --- a/packages/ui-badge/tsconfig.build.json +++ b/packages/ui-badge/tsconfig.build.json @@ -16,7 +16,6 @@ { "path": "../ui-testable/tsconfig.build.json" }, { "path": "../ui-view/tsconfig.build.json" }, { "path": "../ui-babel-preset/tsconfig.build.json" }, - { "path": "../ui-test-locator/tsconfig.build.json" }, { "path": "../ui-test-utils/tsconfig.build.json" }, { "path": "../ui-themes/tsconfig.build.json" }, { "path": "../ui-utils/tsconfig.build.json" }, diff --git a/packages/ui-billboard/package.json b/packages/ui-billboard/package.json index e13acbbd9c..39a1a92534 100644 --- a/packages/ui-billboard/package.json +++ b/packages/ui-billboard/package.json @@ -27,7 +27,11 @@ "@instructure/ui-color-utils": "8.44.0", "@instructure/ui-icons": "8.44.0", "@instructure/ui-test-utils": "8.44.0", - "@instructure/ui-themes": "8.44.0" + "@instructure/ui-themes": "8.44.0", + "@instructure/ui-axe-check": "8.44.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.4.3" }, "dependencies": { "@babel/runtime": "^7.22.15", diff --git a/packages/ui-billboard/src/Billboard/__new-tests__/Billboard.test.tsx b/packages/ui-billboard/src/Billboard/__new-tests__/Billboard.test.tsx new file mode 100644 index 0000000000..9a34415845 --- /dev/null +++ b/packages/ui-billboard/src/Billboard/__new-tests__/Billboard.test.tsx @@ -0,0 +1,167 @@ +/* + * 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 React from 'react' +import { fireEvent, render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import '@testing-library/jest-dom/extend-expect' + +import { Billboard } from '../index' +import { IconUserLine } from '@instructure/ui-icons' +import { runAxeCheck } from '@instructure/ui-axe-check' + +const TEST_HEADING = 'test-heading' +const TEST_MESSAGE = 'test-message' +const TEST_LINK = 'http://instructure-test.com' +const TEST_HERO = () => + +describe('', () => { + it('should render', () => { + const { container } = render() + + expect(container.firstChild).toBeInTheDocument() + }) + + it('should be accessible', async () => { + const { container } = render( + + ) + const axeCheck = await runAxeCheck(container) + + expect(axeCheck).toBe(true) + }) + + it('should render a heading with the correct tag', () => { + render() + const heading = screen.getByText(TEST_HEADING) + + expect(heading).toBeInTheDocument() + expect(heading.tagName).toBe('H2') + }) + + it('renders as a link if it has an href prop', () => { + render() + + const link = screen.getByRole('link') + + expect(link).toBeInTheDocument() + expect(link).toHaveAttribute('href', TEST_LINK) + }) + + it('renders as a button and responds to onClick event', () => { + const onClick = jest.fn() + + render() + const button = screen.getByRole('button') + + fireEvent.click(button) + + expect(onClick).toHaveBeenCalledTimes(1) + }) + + describe('when rendering message', () => { + it('should render message when passed a node', async () => { + const messageNode = {TEST_MESSAGE} + + render() + const messageElement = screen.getByText(TEST_MESSAGE) + + expect(messageElement).toBeInTheDocument() + expect(messageElement.tagName).toBe('SPAN') + }) + + it('should render message passed a function', () => { + const messageNode = {TEST_MESSAGE} + + render( messageNode} />) + const messageElement = screen.getByText(TEST_MESSAGE) + + expect(messageElement).toBeInTheDocument() + expect(messageElement.tagName).toBe('SPAN') + }) + }) + + describe('when disabled', () => { + it('should apply aria-disabled to link', () => { + render() + const link = screen.getByRole('link') + + expect(link).toHaveAttribute('aria-disabled', 'true') + }) + + it('should not be clickable', () => { + const onClick = jest.fn() + + render() + const button = screen.getByRole('button') + + userEvent.click(button) + + expect(onClick).not.toHaveBeenCalled() + }) + }) + + describe('when readOnly', () => { + it('should apply aria-disabled', () => { + render() + const link = screen.getByRole('link') + + expect(link).toHaveAttribute('aria-disabled', 'true') + }) + + it('should not be clickable', () => { + const onClick = jest.fn() + + render() + const button = screen.getByRole('button') + + userEvent.click(button) + + expect(onClick).not.toHaveBeenCalled() + }) + }) + + describe('when passing down props to View', () => { + it('should support an elementRef prop', () => { + const elementRef = jest.fn() + + render() + const link = screen.getByRole('link') + + expect(elementRef).toHaveBeenCalledWith(link) + }) + + it('should support an `as` prop', () => { + const { container } = render() + const billboardAsEm = container.querySelector('em') + + expect(billboardAsEm).toBeInTheDocument() + expect(billboardAsEm?.className).toMatch(/view-billboard/) + }) + }) +}) diff --git a/packages/ui-billboard/src/Billboard/__tests__/Billboard.test.tsx b/packages/ui-billboard/src/Billboard/__tests__/Billboard.test.tsx deleted file mode 100644 index 03c95d9e34..0000000000 --- a/packages/ui-billboard/src/Billboard/__tests__/Billboard.test.tsx +++ /dev/null @@ -1,166 +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 React from 'react' -import { - mount, - expect, - stub, - within, - generateA11yTests -} from '@instructure/ui-test-utils' -import { Billboard } from '../index' -import BillboardExamples from '../__examples__/Billboard.examples' - -describe('', async () => { - it('should render', async () => { - const subject = await mount() - const billboard = within(subject.getDOMNode()) - expect(billboard).to.exist() - }) - - describe('with generated examples', async () => { - generateA11yTests(Billboard, BillboardExamples) - }) - - it('should render a heading with the correct tag', async () => { - const subject = await mount( - - ) - const billboard = within(subject.getDOMNode()) - const heading = billboard.find('h2:contains(Test heading)') - expect(heading).to.exist() - }) - - it('renders as a link if it has an href prop', async () => { - const subject = await mount() - const billboard = within(subject.getDOMNode()) - const link = await billboard.find('a') - expect(link.getAttribute('href')).equal('#') - }) - - it('renders as a button and responds to onClick event', async () => { - const onClick = stub() - - const subject = await mount() - const billboard = within(subject.getDOMNode()) - const button = await billboard.find('button') - - await button.click() - - expect(onClick).to.have.been.calledOnce() - }) - - describe('when rendering message', async () => { - it('should render message when passed a node', async () => { - const message = 'hello some message' - - const subject = await mount( - {message}} /> - ) - const billboard = within(subject.getDOMNode()) - expect(await billboard.find(`:textContent(${message})`)).to.exist() - }) - - it('should render message passed a function', async () => { - const message = 'hello some message' - - const subject = await mount( - {message}} - /> - ) - const billboard = within(subject.getDOMNode()) - expect(await billboard.find(`:textContent(${message})`)).to.exist() - }) - }) - - describe('when disabled', async () => { - it('should apply aria-disabled to link', async () => { - const subject = await mount( - - ) - const billboard = within(subject.getDOMNode()) - const link = await billboard.find('a') - - expect(link.getAttribute('aria-disabled')).to.equal('true') - }) - - it('should not be clickable', async () => { - const onClick = stub() - - const subject = await mount() - const billboard = within(subject.getDOMNode()) - await billboard.click(undefined, { clickable: false }) - - expect(onClick).to.not.have.been.called() - }) - }) - - describe('when readOnly', async () => { - it('should apply aria-disabled', async () => { - const subject = await mount( - - ) - const billboard = within(subject.getDOMNode()) - const link = await billboard.find('a') - - expect(link.getAttribute('aria-disabled')).to.equal('true') - }) - - it('should not be clickable', async () => { - const onClick = stub() - - const subject = await mount() - const billboard = within(subject.getDOMNode()) - await billboard.click(undefined, { clickable: false }) - - expect(onClick).to.not.have.been.called() - }) - }) - - describe('when passing down props to View', async () => { - it('should support an elementRef prop', async () => { - const elementRef = stub() - - const subject = await mount( - - ) - const billboard = within(subject.getDOMNode()) - const focusable = await billboard.find(':focusable') - expect(elementRef).to.have.been.calledWith(focusable.getDOMNode()) - }) - - it('should support an `as` prop', async () => { - const subject = await mount() - const billboard = within(subject.getDOMNode()) - expect(billboard.getTagName()).to.equal('div') - }) - }) -}) diff --git a/packages/ui-billboard/tsconfig.build.json b/packages/ui-billboard/tsconfig.build.json index 4e64969d19..d24b510a6d 100644 --- a/packages/ui-billboard/tsconfig.build.json +++ b/packages/ui-billboard/tsconfig.build.json @@ -17,6 +17,7 @@ { "path": "../ui-heading/tsconfig.build.json" }, { "path": "../ui-img/tsconfig.build.json" }, { "path": "../ui-react-utils/tsconfig.build.json" }, - { "path": "../ui-view/tsconfig.build.json" } + { "path": "../ui-view/tsconfig.build.json" }, + { "path": "../ui-axe-check/tsconfig.build.json" } ] }