diff --git a/package-lock.json b/package-lock.json index f1ce135fbd..f09e9f122f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53802,10 +53802,13 @@ "prop-types": "^15.8.1" }, "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" + "@instructure/ui-themes": "8.44.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.0.0" }, "peerDependencies": { "react": ">=16.8 <=18" @@ -59387,6 +59390,7 @@ "@instructure/console": "8.44.0", "@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-position": "8.44.0", @@ -59397,6 +59401,8 @@ "@instructure/ui-themes": "8.44.0", "@instructure/ui-utils": "8.44.0", "@instructure/ui-view": "8.44.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.0.0", "prop-types": "^15.8.1" } }, diff --git a/packages/ui-badge/package.json b/packages/ui-badge/package.json index 75de7f1eff..78418f30d3 100644 --- a/packages/ui-badge/package.json +++ b/packages/ui-badge/package.json @@ -36,10 +36,13 @@ "prop-types": "^15.8.1" }, "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" + "@instructure/ui-themes": "8.44.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.0.0" }, "peerDependencies": { "react": ">=16.8 <=18" diff --git a/packages/ui-badge/src/Badge/__new-tests__/Badge.test.tsx b/packages/ui-badge/src/Badge/__new-tests__/Badge.test.tsx new file mode 100644 index 0000000000..28c0862e94 --- /dev/null +++ b/packages/ui-badge/src/Badge/__new-tests__/Badge.test.tsx @@ -0,0 +1,131 @@ +/* + * 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 { render, screen } from '@testing-library/react' +import { runAxeCheck } from '@instructure/ui-axe-check' + +import '@testing-library/jest-dom/extend-expect' +import { Badge } from '../index' +import type { BadgeProps } from '../props' + +const TEST_STRING = 'test' +const renderBadge = (props: Partial = { count: 100 }) => { + return render( + + + + ) +} + +describe('', () => { + it('should be accessible', async () => { + const { container } = renderBadge() + const axeCheck = await runAxeCheck(container) + + expect(axeCheck).toBe(true) + }) + + it('should show the count', () => { + const { container } = renderBadge({ count: 100 }) + + expect(container).toHaveTextContent('100') + }) + + it('should truncate the count via countUntil', async () => { + renderBadge({ count: 100, countUntil: 100 }) + + const truncatedCount = await screen.findByText('99 +') + + expect(truncatedCount).toBeVisible() + }) + + it('should change position based on the placement prop', () => { + const countOffset = '5px' + const EXPECTED_PROP_VALUE = 'calc(-1 * 5px)' + + const { container } = renderBadge({ + placement: 'bottom start', + themeOverride: { countOffset } + }) + + const badge = container.querySelector('[class$=-badge]') + const badgeStyle = badge && getComputedStyle(badge) + + expect(badge).not.toBeNull() + expect(badgeStyle).toHaveProperty('bottom', EXPECTED_PROP_VALUE) + expect(badgeStyle).toHaveProperty('inset-inline-start', EXPECTED_PROP_VALUE) + }) + + it('should not render a wrapper for a standalone Badge', () => { + const { container } = renderBadge({ as: 'li', standalone: true }) + const liElement = container.querySelector('li') + + expect(liElement).toBeNull() + }) + + it('should render a wrapper for a NONE standalone Badge', () => { + const { container } = renderBadge({ as: 'li', standalone: false }) + const liElement = container.querySelector('li') + + expect(liElement).not.toBeNull() + }) + + it('should change its output via the formatOutput prop', () => { + const formatOutput = (formattedCount: string) => { + return `${formattedCount}!` + } + + renderBadge({ count: 15, formatOutput }) + const badgeElement = screen.getByText('15!') + + expect(badgeElement).toBeInTheDocument() + }) + + it('should render button child correctly', () => { + const { container } = renderBadge() + const childBtnElement = container.querySelector('button') + + expect(childBtnElement).toBeInTheDocument() + expect(container).toHaveTextContent(TEST_STRING) + }) + + it('should call elementRef function', () => { + const refMock = jest.fn() + const { container } = renderBadge({ elementRef: refMock }) + + expect(refMock).toHaveBeenCalledWith(container.firstChild) + }) + + it('should show the count when type is count', () => { + const { container } = renderBadge({ count: 100, type: 'count' }) + + expect(container).toHaveTextContent('100') + }) + + it('should NOT show the count when type is notification', () => { + const { container } = renderBadge({ count: 100, type: 'notification' }) + + expect(container).not.toHaveTextContent('100') + }) +}) diff --git a/packages/ui-badge/tsconfig.build.json b/packages/ui-badge/tsconfig.build.json index db4cfaae16..5802f63b49 100644 --- a/packages/ui-badge/tsconfig.build.json +++ b/packages/ui-badge/tsconfig.build.json @@ -19,6 +19,7 @@ { "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" } + { "path": "../ui-utils/tsconfig.build.json" }, + { "path": "../ui-axe-check/tsconfig.build.json" } ] }