From ca8320ed25c39f82aa35f5be8a8eb556425c6038 Mon Sep 17 00:00:00 2001 From: Tamas Kovacs Date: Thu, 11 Jul 2024 15:07:29 +0200 Subject: [PATCH] test(ui-tag): migrate old Tag tests Closes: INSTUI-4128 --- package-lock.json | 60 +++++++++++- packages/ui-tag/package.json | 8 +- packages/ui-tag/src/Tag/TagLocator.ts | 29 ------ .../{__tests__ => __new-tests__}/Tag.test.tsx | 97 +++++++++++++------ packages/ui-tag/src/Tag/locator.ts | 27 ------ packages/ui-tag/tsconfig.build.json | 2 +- 6 files changed, 130 insertions(+), 93 deletions(-) delete mode 100644 packages/ui-tag/src/Tag/TagLocator.ts rename packages/ui-tag/src/Tag/{__tests__ => __new-tests__}/Tag.test.tsx (52%) delete mode 100644 packages/ui-tag/src/Tag/locator.ts diff --git a/package-lock.json b/package-lock.json index fd47e86981..5f86244dc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47380,15 +47380,71 @@ "prop-types": "^15.8.1" }, "devDependencies": { + "@instructure/ui-axe-check": "9.2.0", "@instructure/ui-babel-preset": "9.2.0", - "@instructure/ui-test-locator": "9.2.0", "@instructure/ui-test-utils": "9.2.0", - "@instructure/ui-themes": "9.2.0" + "@instructure/ui-themes": "9.2.0", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.7", + "@testing-library/user-event": "^14.5.2", + "vitest": "^1.6.0" }, "peerDependencies": { "react": ">=16.8 <=18" } }, + "packages/ui-tag/node_modules/@testing-library/dom": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.3.1.tgz", + "integrity": "sha512-q/WL+vlXMpC0uXDyfsMtc1rmotzLV8Y0gq6q1gfrrDjQeHoeLrqHbxdPvPNAh1i+xuJl7+BezywcXArz7vLqKQ==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "packages/ui-tag/node_modules/@testing-library/react": { + "version": "15.0.7", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-15.0.7.tgz", + "integrity": "sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@testing-library/dom": "^10.0.0", + "@types/react-dom": "^18.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/react": "^18.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "packages/ui-tag/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, "packages/ui-test-locator": { "name": "@instructure/ui-test-locator", "version": "9.2.0", diff --git a/packages/ui-tag/package.json b/packages/ui-tag/package.json index fffc514609..d6942e0fe6 100644 --- a/packages/ui-tag/package.json +++ b/packages/ui-tag/package.json @@ -36,10 +36,14 @@ "prop-types": "^15.8.1" }, "devDependencies": { + "@instructure/ui-axe-check": "9.2.0", "@instructure/ui-babel-preset": "9.2.0", - "@instructure/ui-test-locator": "9.2.0", "@instructure/ui-test-utils": "9.2.0", - "@instructure/ui-themes": "9.2.0" + "@instructure/ui-themes": "9.2.0", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.7", + "@testing-library/user-event": "^14.5.2", + "vitest": "^1.6.0" }, "peerDependencies": { "react": ">=16.8 <=18" diff --git a/packages/ui-tag/src/Tag/TagLocator.ts b/packages/ui-tag/src/Tag/TagLocator.ts deleted file mode 100644 index e78e9312c2..0000000000 --- a/packages/ui-tag/src/Tag/TagLocator.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 { Tag } 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 TagLocator = locator(Tag.selector) diff --git a/packages/ui-tag/src/Tag/__tests__/Tag.test.tsx b/packages/ui-tag/src/Tag/__new-tests__/Tag.test.tsx similarity index 52% rename from packages/ui-tag/src/Tag/__tests__/Tag.test.tsx rename to packages/ui-tag/src/Tag/__new-tests__/Tag.test.tsx index 0fbf800d3b..b874cf6da2 100644 --- a/packages/ui-tag/src/Tag/__tests__/Tag.test.tsx +++ b/packages/ui-tag/src/Tag/__new-tests__/Tag.test.tsx @@ -22,47 +22,75 @@ * SOFTWARE. */ -import React from 'react' +import React, { ComponentType } from 'react' +import { render, screen, waitFor } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' +import '@testing-library/jest-dom' +import { vi } from 'vitest' -import { expect, mount, spy, stub, wait } from '@instructure/ui-test-utils' -import { View } from '@instructure/ui-view' +import { Tag } from '../index' +import { runAxeCheck } from '@instructure/ui-axe-check' import type { ViewProps } from '@instructure/ui-view' +import { View } from '@instructure/ui-view' -import { Tag } from '../index' -import { TagLocator } from '../TagLocator' +const originalOmitViewProps = View.omitViewProps describe('', async () => { - it('should display text', async () => { - await mount() + beforeAll(() => { + // View component read Component.name instead of Component.displayName + // causing [undefined] in error messages + type TagComponentType = ComponentType & { + name: 'Tag' + } - const tag = await TagLocator.find() + View.omitViewProps = (props, Component) => { + const ModifiedComponent = { + ...Component, + name: 'Tag' + } as TagComponentType + return originalOmitViewProps(props, ModifiedComponent) + } + }) + afterAll(() => { + View.omitViewProps = originalOmitViewProps + }) + + it('should display text', async () => { + render() + const tag = screen.getByText('Summer') - expect(await tag.find(':contains(Summer)')).to.exist() + expect(tag).toBeInTheDocument() }) it('should render as a button and respond to onClick event', async () => { - const onClick = stub() - await mount() - const tag = await TagLocator.find() - const button = await tag.find('button') - await button.click() - - await wait(() => { - expect(onClick).to.have.been.called() + const onClick = vi.fn() + render() + + const button = screen.getByTestId('summer-button') + + userEvent.click(button) + + await waitFor(() => { + expect(onClick).toHaveBeenCalledTimes(1) + expect(button.tagName).toBe('BUTTON') }) }) it('should render a close icon when it is dismissible and clickable', async () => { - const onClick = stub() - await mount() - const tag = await TagLocator.find() - expect(await tag.find('svg[name="IconX"]')).to.exist() + const onClick = vi.fn() + const { container } = render( + + ) + const icon = container.querySelector('svg') + + expect(icon).toHaveAttribute('name', 'IconX') }) it('should meet a11y standards', async () => { - await mount() - const tag = await TagLocator.find() - expect(await tag.accessible()).to.be.true() + const { container } = render() + const axeCheck = await runAxeCheck(container) + + expect(axeCheck).toBe(true) }) describe('when passing down props to View', async () => { @@ -70,28 +98,33 @@ describe('', async () => { margin: 'small', elementRef: () => {} } - View.allowedProps .filter((prop) => prop !== 'children') .forEach((prop) => { if (Object.keys(allowedProps).indexOf(prop) < 0) { it(`should NOT allow the '${prop}' prop`, async () => { - const warning = `Warning: [Tag] prop '${prop}' is not allowed.` const props = { [prop]: 'foo' } - const consoleError = spy(console, 'error') + const consoleError = vi + .spyOn(console, 'error') + .mockImplementation(() => {}) - await mount() - expect(consoleError.firstCall.args[0]).to.be.equal(warning) + render() + const warning = `Warning: [Tag] prop '${prop}' is not allowed.` + + expect(consoleError.mock.calls[0][0]).toBe(warning) + consoleError.mockRestore() }) } else { it(`should allow the '${prop}' prop`, async () => { const props = { [prop]: allowedProps[prop] } - const consoleError = stub(console, 'error') + const consoleError = vi.spyOn(console, 'error') + + render() - await mount() - expect(consoleError).to.not.be.called() + expect(consoleError).not.toHaveBeenCalled() + consoleError.mockRestore() }) } }) diff --git a/packages/ui-tag/src/Tag/locator.ts b/packages/ui-tag/src/Tag/locator.ts deleted file mode 100644 index 9f61b515de..0000000000 --- a/packages/ui-tag/src/Tag/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 { TagLocator } from './TagLocator' - -export { TagLocator } -export default TagLocator diff --git a/packages/ui-tag/tsconfig.build.json b/packages/ui-tag/tsconfig.build.json index 5f7440718b..45f49c4cf1 100644 --- a/packages/ui-tag/tsconfig.build.json +++ b/packages/ui-tag/tsconfig.build.json @@ -10,6 +10,7 @@ { "path": "../console/tsconfig.build.json" }, { "path": "../emotion/tsconfig.build.json" }, { "path": "../shared-types/tsconfig.build.json" }, + { "path": "../ui-axe-check/tsconfig.build.json" }, { "path": "../ui-color-utils/tsconfig.build.json" }, { "path": "../ui-dom-utils/tsconfig.build.json" }, { "path": "../ui-icons/tsconfig.build.json" }, @@ -17,7 +18,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" } ]