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();
});
});