diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js index d6c91848b07d..86fddee5e56e 100644 --- a/packages/react/src/components/Tag/Tag-test.js +++ b/packages/react/src/components/Tag/Tag-test.js @@ -8,10 +8,11 @@ import { Add } from '@carbon/icons-react'; import { render, screen } from '@testing-library/react'; import React from 'react'; -import Tag, { TagSkeleton } from './'; +import Tag, { OperationalTag, TagSkeleton } from './'; import DismissibleTag from './DismissibleTag'; import { AILabel } from '../AILabel'; import { Asleep } from '@carbon/icons-react'; +import userEvent from '@testing-library/user-event'; const prefix = 'cds'; @@ -85,6 +86,37 @@ describe('Tag', () => { }); }); + describe('Operational Tag', () => { + it('should render a operational state', () => { + const { container } = render( + <OperationalTag type="red" className="some-class" text="Tag content" /> + ); + + const operationalTag = container.querySelector( + `.${prefix}--tag--operational ` + ); + + expect(operationalTag).toHaveClass(`${prefix}--tag--operational `); + }); + + it('should accept other props such as onClick', async () => { + const onClick = jest.fn(); + + const { container } = render( + <OperationalTag + type="red" + className="some-class" + text="Tag content" + onClick={onClick} + /> + ); + + await userEvent.click(screen.getByRole('button')); + + expect(onClick).toHaveBeenCalled(); + }); + }); + it('should render with different types', () => { const types = [ 'red',