Skip to content

Commit 6539ca4

Browse files
kmcfaulkmcfaul
committed
updates
1 parent 26aa1d9 commit 6539ca4

14 files changed

+219
-44
lines changed

‎packages/react-core/src/components/DataList/DataList.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ class DataList extends React.Component<DataListProps> {
7373
const {
7474
className,
7575
children,
76+
'aria-label': ariaLabel,
7677
onSelectDataListItem,
7778
selectedDataListItemId,
7879
isCompact,
@@ -106,6 +107,7 @@ class DataList extends React.Component<DataListProps> {
106107
)}
107108
style={props.style}
108109
role="list"
110+
aria-label={ariaLabel}
109111
{...props}
110112
ref={this.ref}
111113
>

‎packages/react-core/src/components/DataList/DataListAction.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,19 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
3131
children,
3232
className,
3333
visibility,
34-
/* eslint-disable @typescript-eslint/no-unused-vars */
3534
id,
3635
'aria-label': ariaLabel,
3736
'aria-labelledby': ariaLabelledBy,
3837
isPlainButtonAction,
39-
/* eslint-enable @typescript-eslint/no-unused-vars */
4038
...props
4139
}: DataListActionProps) => (
42-
<div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>
40+
<div
41+
className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)}
42+
id={id}
43+
aria-label={ariaLabel}
44+
aria-labelledby={ariaLabelledBy}
45+
{...props}
46+
>
4347
{isPlainButtonAction ? <div className={css(styles.dataListAction)}>{children}</div> : children}
4448
</div>
4549
);

‎packages/react-core/src/components/DataList/__tests__/DataList.test.tsx

+29-3
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,41 @@ import styles from '@patternfly/react-styles/css/components/DataList/data-list';
1111

1212
test('Renders to match snapshot', () => {
1313
const { asFragment } = render(<DataList aria-label="list" />);
14-
expect(screen.getByLabelText('list')).toBeInTheDocument();
1514
expect(asFragment()).toMatchSnapshot();
1615
});
1716

17+
test(`Renders with default class ${styles.dataList}`, () => {
18+
render(<DataList aria-label="list" />);
19+
expect(screen.getByLabelText('list')).toHaveClass(styles.dataList);
20+
});
21+
22+
test(`Renders with custom class when className is passed`, () => {
23+
render(<DataList aria-label="list" className="custom" />);
24+
expect(screen.getByLabelText('list')).toHaveClass('custom');
25+
});
26+
27+
test(`Renders with spread props`, () => {
28+
render(<DataList aria-label="list" id="test" />);
29+
expect(screen.getByLabelText('list')).toHaveAttribute('id', 'test');
30+
});
31+
32+
test(`Renders with aria-label when aria-label is passed`, () => {
33+
render(<DataList aria-label="list">test</DataList>);
34+
expect(screen.getByText('test')).toHaveAttribute('aria-label', 'list');
35+
});
36+
1837
test(`Renders ${styles.modifiers.compact} when isCompact = true`, () => {
1938
render(<DataList aria-label="list" isCompact />);
2039
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.compact);
2140
});
2241

42+
['nowrap', 'truncate', 'breakWord'].forEach((wrap) => {
43+
test(`Renders with class ${styles.modifiers[wrap]} when wrapModifier = ${wrap} is pased`, () => {
44+
render(<DataList aria-label="list" wrapModifier={wrap as 'nowrap' | 'truncate' | 'breakWord'} />);
45+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers[wrap]);
46+
});
47+
});
48+
2349
const gridBreakpointClasses = {
2450
none: styles.modifiers.gridNone,
2551
always: 'pf-m-grid',
@@ -79,7 +105,7 @@ test('Does not render with a hidden input to improve a11y when onSelectableRowCh
79105
expect(selectableInput).not.toBeInTheDocument();
80106
});
81107

82-
test('Calls onSelectableRowChange.onChange when the selectable input changes', async () => {
108+
test('Calls onSelectableRowChange when the selectable input changes', async () => {
83109
const mock = jest.fn();
84110
const user = userEvent.setup();
85111

@@ -99,7 +125,7 @@ test('Calls onSelectableRowChange.onChange when the selectable input changes', a
99125
expect(mock).toHaveBeenCalled();
100126
});
101127

102-
test('Does not call onSelectableRowChange.onChange when the selectable input is not changed', () => {
128+
test('Does not call onSelectableRowChange when the selectable input is not changed', () => {
103129
const mock = jest.fn();
104130

105131
render(

‎packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx

+49-19
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ test('Renders to match snapshot', () => {
1515

1616
test(`Renders with default class ${styles.dataListItemAction}`, () => {
1717
render(
18-
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
18+
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
1919
test
2020
</DataListAction>
2121
);
22-
expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction);
22+
expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true });
2323
});
2424

2525
test(`Renders with custom class when className is passed`, () => {
@@ -31,33 +31,63 @@ test(`Renders with custom class when className is passed`, () => {
3131
expect(screen.getByText('test')).toHaveClass('test-class');
3232
});
3333

34-
test('Renders button with visibliity breakpoint set', () => {
34+
test(`Renders with spread props`, () => {
35+
render(
36+
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
37+
test
38+
</DataListAction>
39+
);
40+
expect(screen.getByText('test')).toHaveAttribute('id', 'ex-action');
41+
});
42+
43+
test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => {
3544
render(
36-
<DataListAction
37-
visibility={{ default: 'hidden', lg: 'visible' }}
38-
aria-labelledby="check-action-item2 check-action-action2"
39-
id="check-action-action2"
40-
aria-label="Actions"
41-
>
45+
<DataListAction id="id" aria-label="Actions" aria-labelledby="ex-action" isPlainButtonAction>
4246
test
4347
</DataListAction>
4448
);
49+
expect(screen.getByText('test')).toHaveClass(styles.dataListAction);
50+
});
51+
52+
['hidden', 'visible'].forEach((vis) => {
53+
const visMod = vis as 'hidden' | 'visible';
54+
test(`Has visibility - ${vis} for every breakpoint`, () => {
55+
render(
56+
<DataListAction
57+
visibility={{ default: visMod, sm: visMod, md: visMod, lg: visMod, xl: visMod, '2xl': visMod }}
58+
aria-labelledby="check-action-item2 check-action-action2"
59+
id="check-action-action2"
60+
aria-label="Actions"
61+
>
62+
test
63+
</DataListAction>
64+
);
4565

46-
expect(screen.getByText('test')).toHaveClass('pf-m-hidden');
47-
expect(screen.getByText('test')).toHaveClass('pf-m-visible-on-lg');
66+
if (visMod === 'hidden') {
67+
expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}`]);
68+
}
69+
expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnSm`]);
70+
expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnMd`]);
71+
expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnLg`]);
72+
expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnXl`]);
73+
expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]);
74+
});
4875
});
4976

50-
test('Does not render button with hidden breakpoint set', () => {
77+
test(`Renders with aria-label when aria-label is passed`, () => {
5178
render(
52-
<DataListAction
53-
visibility={{ '2xl': 'hidden' }}
54-
aria-labelledby="check-action-item2 check-action-action2"
55-
id="check-action-action2"
56-
aria-label="Actions"
57-
>
79+
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
5880
test
5981
</DataListAction>
6082
);
83+
expect(screen.getByText('test')).toHaveAccessibleName('Actions');
84+
});
6185

62-
expect(screen.getByText('test')).toHaveClass('pf-m-hidden-on-2xl');
86+
test(`Renders with aria-labelledby when aria-label is passed`, () => {
87+
render(
88+
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
89+
test
90+
</DataListAction>
91+
);
92+
expect(screen.getByText('test')).toHaveAttribute('aria-labelledby', 'ex-action');
6393
});

‎packages/react-core/src/components/DataList/__tests__/DataListCell.test.tsx

+29-11
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ test(`Renders default class ${styles.dataListCell}`, () => {
1515
Primary Id
1616
</DataListCell>
1717
);
18-
expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell);
18+
expect(screen.getByTestId('test')).toHaveClass(styles.dataListCell, { exact: true });
1919
});
2020

2121
test(`Renders custom class when className is passed`, () => {
@@ -27,13 +27,22 @@ test(`Renders custom class when className is passed`, () => {
2727
expect(screen.getByTestId('test')).toHaveClass('test-class');
2828
});
2929

30+
test(`Renders with spread props`, () => {
31+
render(
32+
<DataListCell key={0} id="test">
33+
Primary Id
34+
</DataListCell>
35+
);
36+
expect(screen.getByText('Primary Id')).toHaveAttribute('id', 'test');
37+
});
38+
3039
test('Renders width modifier when width is passed', () => {
3140
[
3241
{ width: 1, class: '' },
33-
{ width: 2, class: 'pf-m-flex-2' },
34-
{ width: 3, class: 'pf-m-flex-3' },
35-
{ width: 4, class: 'pf-m-flex-4' },
36-
{ width: 5, class: 'pf-m-flex-5' }
42+
{ width: 2, class: styles.modifiers.flex_2 },
43+
{ width: 3, class: styles.modifiers.flex_3 },
44+
{ width: 4, class: styles.modifiers.flex_4 },
45+
{ width: 5, class: styles.modifiers.flex_5 }
3746
].forEach((testCase, index) => {
3847
const testId = `cell-test-id-${index}`;
3948

@@ -46,17 +55,22 @@ test('Renders width modifier when width is passed', () => {
4655
const dataListCell = screen.getByTestId(testId);
4756

4857
testCase.class === ''
49-
? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell', { exact: true })
58+
? expect(dataListCell).not.toHaveClass(
59+
styles.modifiers.flex_2,
60+
styles.modifiers.flex_3,
61+
styles.modifiers.flex_4,
62+
styles.modifiers.flex_5
63+
)
5064
: expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`, { exact: true });
5165
});
5266
});
5367

5468
test('Has text wrap modifiers when wrapModifier is passed', () => {
5569
[
5670
{ wrapModifier: null as any, class: '' },
57-
{ wrapModifier: 'breakWord', class: 'pf-m-break-word' },
58-
{ wrapModifier: 'nowrap', class: 'pf-m-nowrap' },
59-
{ wrapModifier: 'truncate', class: 'pf-m-truncate' }
71+
{ wrapModifier: 'breakWord', class: styles.modifiers.breakWord },
72+
{ wrapModifier: 'nowrap', class: styles.modifiers.nowrap },
73+
{ wrapModifier: 'truncate', class: styles.modifiers.truncate }
6074
].forEach((testCase, index) => {
6175
const testId = `cell-test-id-${index}`;
6276

@@ -69,8 +83,12 @@ test('Has text wrap modifiers when wrapModifier is passed', () => {
6983
const dataListCell = screen.getByTestId(testId);
7084

7185
testCase.class === ''
72-
? expect(dataListCell).toHaveClass('pf-v5-c-data-list__cell')
73-
: expect(dataListCell).toHaveClass(`pf-v5-c-data-list__cell ${testCase.class}`);
86+
? expect(dataListCell).not.toHaveClass(
87+
styles.modifiers.breakWord,
88+
styles.modifiers.nowrap,
89+
styles.modifiers.truncate
90+
)
91+
: expect(dataListCell).toHaveClass(`${testCase.class}`);
7492
});
7593
});
7694

‎packages/react-core/src/components/DataList/__tests__/DataListCheck.test.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import { render, screen } from '@testing-library/react';
33
import userEvent from '@testing-library/user-event';
44
import { DataListCheck } from '../DataListCheck';
55

6+
test(`Renders with spread props`, () => {
7+
render(<DataListCheck id="test" aria-labelledby={'string'} isChecked />);
8+
expect(screen.getByRole('checkbox')).toHaveAttribute('id', 'test');
9+
});
10+
611
it('does not throw a "A component is changing an uncontrolled input of type checkbox to be controlled" error when changed if using isChecked', async () => {
712
const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
813
const user = userEvent.setup();

‎packages/react-core/src/components/DataList/__tests__/DataListContent.test.tsx

+28-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,16 @@ test(`Renders with default class ${styles.dataListExpandableContent}`, () => {
1515
test
1616
</DataListContent>
1717
);
18-
expect(screen.getByTestId('test-id')).toHaveClass(styles.dataListExpandableContent);
18+
expect(screen.getByTestId('test-id')).toHaveClass(styles.dataListExpandableContent, { exact: true });
19+
});
20+
21+
test(`Renders with default class ${styles.dataListExpandableContentBody}`, () => {
22+
render(
23+
<DataListContent data-testid="test-id" aria-label="Primary Content Details">
24+
test
25+
</DataListContent>
26+
);
27+
expect(screen.getByText('test')).toHaveClass(styles.dataListExpandableContentBody, { exact: true });
1928
});
2029

2130
test(`Renders with custom class when className is passed`, () => {
@@ -27,6 +36,24 @@ test(`Renders with custom class when className is passed`, () => {
2736
expect(screen.getByTestId('test-id')).toHaveClass('test-class');
2837
});
2938

39+
test(`Renders with id when id is passed`, () => {
40+
render(
41+
<DataListContent id="idProp" data-testid="test-id" aria-label="Primary Content Details" className="test-class">
42+
test
43+
</DataListContent>
44+
);
45+
expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'idProp');
46+
});
47+
48+
test(`Renders with spread props`, () => {
49+
render(
50+
<DataListContent dir="rtl" data-testid="test-id" aria-label="Primary Content Details">
51+
test
52+
</DataListContent>
53+
);
54+
expect(screen.getByTestId('test-id')).toHaveAttribute('dir', 'rtl');
55+
});
56+
3057
test(`Renders with class ${styles.modifiers.noPadding} when hasNoPadding is passed`, () => {
3158
render(
3259
<DataListContent aria-label="Primary Content Details" hidden hasNoPadding>

‎packages/react-core/src/components/DataList/__tests__/DataListItem.test.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ test('Renders to match snapshot', () => {
1515

1616
test(`Renders with default class ${styles.dataListItem}`, () => {
1717
render(<DataListItem aria-labelledby="item-1">test</DataListItem>);
18-
expect(screen.getByRole('listitem')).toHaveClass(styles.dataListItem);
18+
expect(screen.getByRole('listitem')).toHaveClass(styles.dataListItem, { exact: true });
1919
});
2020

2121
test('Renders with custom class name', () => {
@@ -27,6 +27,15 @@ test('Renders with custom class name', () => {
2727
expect(screen.getByRole('listitem')).toHaveClass('data-list-item-custom');
2828
});
2929

30+
test('Renders with spread props', () => {
31+
render(
32+
<DataListItem dir="rtl" aria-labelledby="item-1">
33+
test
34+
</DataListItem>
35+
);
36+
expect(screen.getByRole('listitem')).toHaveAttribute('dir', 'rtl');
37+
});
38+
3039
test(`Renders class ${styles.modifiers.expanded} when isExpanded is passed`, () => {
3140
render(
3241
<DataListItem aria-labelledby="item-1" isExpanded>

‎packages/react-core/src/components/DataList/__tests__/DataListItemCells.test.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,15 @@ test('Cells renders to match snapshot', () => {
1111

1212
test(`Renders with default class ${styles.dataListItemContent}`, () => {
1313
render(<DataListItemCells dataListCells="test" />);
14-
expect(screen.getByText('test')).toHaveClass(styles.dataListItemContent);
14+
expect(screen.getByText('test')).toHaveClass(styles.dataListItemContent, { exact: true });
1515
});
1616

1717
test(`Renders with custom class when className is passed`, () => {
1818
render(<DataListItemCells className="custom" dataListCells="test" />);
1919
expect(screen.getByText('test')).toHaveClass('custom');
2020
});
21+
22+
test(`Renders with spread props`, () => {
23+
render(<DataListItemCells dir="rtl" dataListCells="test" />);
24+
expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
25+
});

0 commit comments

Comments
 (0)