Skip to content

Commit

Permalink
feat(tag, theme)!: update colored tag variant (#758)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hebernardEquisoft
hebernardEquisoft authored Apr 24, 2024
1 parent 80006c1 commit d7429a5
Show file tree
Hide file tree
Showing 13 changed files with 4,608 additions and 992 deletions.
4 changes: 2 additions & 2 deletions packages/react/src/components/dropdown-list/dropdown-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const TagWrapper = styled.div`

const ListBoxTag = styled(Tag)`
margin: 2px;
& + & {
margin-left: 2px;
}
Expand Down Expand Up @@ -431,7 +431,7 @@ export const DropdownList: VoidFunctionComponent<DropdownListProps<boolean | und
aria-hidden="true"
data-testid={`listboxtag-${option.value}`}
key={option.value}
onDelete={handleTagRemove}
onRemove={handleTagRemove}
value={{ id: option.value, label: option.label }}
/>
));
Expand Down
158 changes: 75 additions & 83 deletions packages/react/src/components/tag/tag.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,98 +6,90 @@ import { Tag, TagProps } from './tag';

describe('Tag', () => {
const tagSizes: TagProps['size'][] = ['small', 'medium'];
tagSizes.forEach((size) => {
describe(`Tag ${size}`, () => {
it('should call onClick callback when tag is clicked', () => {
const callback = jest.fn();
const wrapper = shallow(
<Tag size={size} value={{ label: 'Test' }} onClick={callback} />,
);

wrapper.simulate('click');

expect(callback).toHaveBeenCalledTimes(1);
});

it('should call onDelete callback when delete-button is clicked', () => {
const callback = jest.fn();
const stopPropagation = jest.fn();
const wrapper = shallow(
<Tag size={size} value={{ label: 'Test' }} onDelete={callback} />,
);

getByTestId(wrapper, 'Test-delete-button').simulate('click', { stopPropagation });

expect(callback).toHaveBeenCalledTimes(1);
});

it(
'should have aria-hidden="false" and an aria-label on icon when the label is not the same as iconName',
() => {
const wrapper = shallow(
<Tag size={size} iconName="home" value={{ label: 'Test' }} />,
);

const testIconWrapper = getByTestId(wrapper, 'Test-icon');
expect(testIconWrapper.prop('aria-label')).toBe('home');
expect(testIconWrapper.prop('aria-hidden')).toBe(false);
},
);
const tagColors: TagProps['color'][] = ['default', 'decorative-01', 'decorative-02'];

it(
'should have aria-hidden="true" and no label on icon when the label is the same as the iconName',
() => {
tagSizes.forEach((size) => {
tagColors.forEach((color) => {
describe(`Tag size=${size} color=${color}`, () => {
it('should call onRemove callback when delete-button is clicked', () => {
const callback = jest.fn();
const stopPropagation = jest.fn();
const wrapper = shallow(
<Tag size={size} iconName="home" value={{ label: 'Home' }} />,
<Tag size={size} color={color} value={{ label: 'Test' }} onRemove={callback} />,
);

const testIconWrapper = getByTestId(wrapper, 'Home-icon');
expect(testIconWrapper.prop('aria-label')).toBe(undefined);
expect(testIconWrapper.prop('aria-hidden')).toBe(true);
},
);

(['mobile', 'desktop'] as DeviceType[]).forEach((deviceType) => {
it(`matches snapshot (${deviceType})`, () => {
const tree = renderWithProviders(<Tag size={size} value={{ label: 'Test' }} />, 'desktop');

expect(tree).toMatchSnapshot();
});

it(`matches snapshot (${deviceType})`, () => {
const tree = renderWithProviders(<Tag size={size} value={{ label: 'Test' }} />, 'mobile');

expect(tree).toMatchSnapshot();
});

it(`matches snapshot (${deviceType} with icons)`, () => {
const tree = renderWithProviders(<Tag size={size} iconName="home" value={{ label: 'Test' }} />);
getByTestId(wrapper, 'Test-remove-button').simulate('click', { stopPropagation });

expect(tree).toMatchSnapshot();
expect(callback).toHaveBeenCalledTimes(1);
});

it(`matches snapshot (${deviceType} deletable)`, () => {
const tree = renderWithProviders(
<Tag
size={size}
value={{ label: 'Test' }}
onDelete={jest.fn()}
/>,
);

expect(tree).toMatchSnapshot();
});
it(
'should have aria-hidden="false" and an icon aria-label when label is not the same as iconName',
() => {
const wrapper = shallow(
<Tag size={size} color={color} iconName="home" value={{ label: 'Test' }} />,
);

const testIconWrapper = getByTestId(wrapper, 'Test-icon');
expect(testIconWrapper.prop('aria-label')).toBe('home');
expect(testIconWrapper.prop('aria-hidden')).toBe(false);
},
);

it(`matches snapshot (${deviceType} clickable)`, () => {
const tree = renderWithProviders(
<Tag
size={size}
value={{ label: 'Test' }}
onClick={jest.fn()}
/>,
);
it(
'should have aria-hidden="true" and no label on icon when the label is the same as the iconName',
() => {
const wrapper = shallow(
<Tag size={size} color={color} iconName="home" value={{ label: 'Home' }} />,
);

const testIconWrapper = getByTestId(wrapper, 'Home-icon');
expect(testIconWrapper.prop('aria-label')).toBe(undefined);
expect(testIconWrapper.prop('aria-hidden')).toBe(true);
},
);

expect(tree).toMatchSnapshot();
(['mobile', 'desktop'] as DeviceType[]).forEach((deviceType) => {
it(`matches snapshot (${deviceType})`, () => {
const tree = renderWithProviders(
<Tag
size={size}
color={color}
value={{ label: 'Test' }}
/>,
deviceType,
);

expect(tree).toMatchSnapshot();
});

it(`matches snapshot (${deviceType} with icons)`, () => {
const tree = renderWithProviders(
<Tag
size={size}
color={color}
iconName="home"
value={{ label: 'Test' }}
/>,
deviceType,
);

expect(tree).toMatchSnapshot();
});

it(`matches snapshot (${deviceType} removable)`, () => {
const tree = renderWithProviders(
<Tag
size={size}
color={color}
value={{ label: 'Test' }}
onRemove={jest.fn()}
/>,
deviceType,
);

expect(tree).toMatchSnapshot();
});
});
});
});
Expand Down
Loading

0 comments on commit d7429a5

Please sign in to comment.