diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js index 7489d5259aa7..548c444a1424 100644 --- a/packages/react/src/components/Tag/Tag-test.js +++ b/packages/react/src/components/Tag/Tag-test.js @@ -6,87 +6,55 @@ */ import React from 'react'; -import Tag from '../Tag'; -import TagSkeleton from '../Tag/Tag.Skeleton'; +import { Tag } from 'carbon-components-react'; import { Add16 } from '@carbon/icons-react'; -import { shallow } from 'enzyme'; -import { settings } from 'carbon-components'; -import { render, cleanup } from '@carbon/test-utils/react'; - -const { prefix } = settings; +import { render, screen } from '@testing-library/react'; describe('Tag', () => { - afterEach(cleanup); - describe('automated accessibility testing', () => { it('should have no Axe violations', async () => { - const { container } = render(This is not a tag); + const { container } = render(test-tag); await expect(container).toHaveNoAxeViolations(); }); it('should have no AC violations', async () => { const { container } = render(
- This is not a tag + Dog
); await expect(container).toHaveNoACViolations('Tag'); }); }); - describe('with a screenreader', () => { - it('filtered variant should have appropriate aria-label', () => { - const children = 'tag content'; - const { container } = render( - - {children} - - ); - const button = container.querySelector('[aria-label], [aria-labelledby]'); - const accessibilityLabel = - button.getAttribute('aria-label') || - button.getAttribute('aria-labelledby'); - // This check would mirror our "Accessibility label must contain at least all of visible label" - // requirement - expect(accessibilityLabel).toEqual(expect.stringContaining(children)); - }); - }); - - describe('Renders as expected', () => { - it('should render with the appropriate type', () => { - const tag = shallow(); - expect(tag.hasClass(`${prefix}--tag`)).toEqual(true); - expect(tag.hasClass(`${prefix}--tag--red`)).toEqual(true); - }); + it('should have an appropriate aria-label when (filterable)', () => { + const children = 'tag content'; + const { container } = render( + + {children} + + ); + const button = container.querySelector('[aria-label], [aria-labelledby]'); + const accessibilityLabel = + button.getAttribute('aria-label') || + button.getAttribute('aria-labelledby'); + // This check would mirror our "Accessibility label must contain at least all of visible label" + // requirement + expect(accessibilityLabel).toEqual(expect.stringContaining(children)); }); it('should allow for a custom label', () => { - const tag = shallow(New Version!); - expect(tag.text()).toEqual('New Version!'); + render(Johnny Ramone); + expect(screen.getByText('Johnny Ramone')).toBeInTheDocument(); }); it('should allow for a custom icon', () => { - const tag = shallow( - - This is a tag + render( + }> + Dee Dee Ramone ); - expect(tag.childAt(0).hasClass('bx--tag__custom-icon')).toBe(true); - }); - - it('should support extra class names', () => { - const tag = shallow(); - expect(tag.hasClass('extra-class')).toEqual(true); - }); -}); -describe('TagSkeleton', () => { - describe('Renders as expected', () => { - const wrapper = shallow(); - - it('Has the expected classes', () => { - expect(wrapper.hasClass(`${prefix}--skeleton`)).toEqual(true); - expect(wrapper.hasClass(`${prefix}--tag`)).toEqual(true); - }); + expect(screen.getByTestId('test')).toBeInTheDocument(); }); });