Skip to content

Commit c031af5

Browse files
thatblindgeyethatblindgeye
authored
chore(Compass): added tests for new variants (#12122)
* chore(Compass): added tests for new variants * Added Tabs isNav tests * Updated cardsubtitle tests * Updated snapshots * Updated snapshots after clean --------- Co-authored-by: Eric Olkowski <git.eric@thatblindgeye.dev>
1 parent d67214f commit c031af5

File tree

8 files changed

+166
-43
lines changed

8 files changed

+166
-43
lines changed

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

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,48 @@
11
import { render, screen } from '@testing-library/react';
22
import { CardSubtitle } from '../CardSubtitle';
3+
import styles from '@patternfly/react-styles/css/components/Card/card';
34

4-
describe('CardSubtitle', () => {
5-
test('renders with PatternFly Core styles', () => {
6-
const { asFragment } = render(<CardSubtitle>text</CardSubtitle>);
7-
expect(asFragment()).toMatchSnapshot();
8-
});
5+
test('Renders without children', () => {
6+
render(
7+
<div data-testid="container">
8+
<CardSubtitle />
9+
</div>
10+
);
911

10-
test('extra props are spread to the root element', () => {
11-
const testId = 'card-subtitle';
12+
expect(screen.getByTestId('container').firstChild).toBeVisible();
13+
});
14+
15+
test('Renders with children', () => {
16+
render(<CardSubtitle>Subtitle content</CardSubtitle>);
17+
18+
expect(screen.getByText('Subtitle content')).toBeInTheDocument();
19+
});
20+
21+
test(`Renders with class ${styles.cardSubtitle} by default`, () => {
22+
render(<CardSubtitle>Subtitle content</CardSubtitle>);
23+
24+
expect(screen.getByText('Subtitle content')).toHaveClass(styles.cardSubtitle, { exact: true });
25+
});
26+
27+
test('Renders with id when passed', () => {
28+
render(<CardSubtitle id="subtitle-id">Subtitle content</CardSubtitle>);
29+
30+
expect(screen.getByText('Subtitle content')).toHaveAttribute('id', 'subtitle-id');
31+
});
32+
33+
test('extra props are spread to the root element', () => {
34+
const testId = 'card-subtitle';
35+
36+
render(<CardSubtitle data-testid={testId} />);
37+
expect(screen.getByTestId(testId)).toBeInTheDocument();
38+
});
39+
40+
test('Matches snapshot without children', () => {
41+
const { asFragment } = render(<CardSubtitle />);
42+
expect(asFragment()).toMatchSnapshot();
43+
});
1244

13-
render(<CardSubtitle data-testid={testId} />);
14-
expect(screen.getByTestId(testId)).toBeInTheDocument();
15-
});
45+
test('Matches snapshot with children', () => {
46+
const { asFragment } = render(<CardSubtitle>Subtitle content</CardSubtitle>);
47+
expect(asFragment()).toMatchSnapshot();
1648
});

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

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
import { render, screen } from '@testing-library/react';
22
import { CardTitle } from '../CardTitle';
33

4-
describe('CardTitle', () => {
5-
test('renders with PatternFly Core styles', () => {
6-
const { asFragment } = render(<CardTitle>text</CardTitle>);
7-
expect(asFragment()).toMatchSnapshot();
8-
});
9-
10-
test('className is added to the root element', () => {
11-
render(<CardTitle className="extra-class">text</CardTitle>);
12-
expect(screen.getByText('text')).toHaveClass('extra-class');
13-
});
14-
15-
test('extra props are spread to the root element', () => {
16-
const testId = 'card-header';
17-
18-
render(<CardTitle data-testid={testId} />);
19-
expect(screen.getByTestId(testId)).toBeInTheDocument();
20-
});
4+
test('Renders with custom class when passed', () => {
5+
render(<CardTitle className="extra-class">text</CardTitle>);
6+
expect(screen.getByText('text')).toHaveClass('extra-class');
7+
});
8+
9+
test('Does not render with card subtitle by default', () => {
10+
render(<CardTitle>text</CardTitle>);
11+
12+
expect(screen.queryByText('text')?.nextElementSibling).not.toBeInTheDocument();
13+
});
14+
15+
test('Renders with card subtitle when subtitle is passed', () => {
16+
render(<CardTitle subtitle="subtitle content">text</CardTitle>);
17+
18+
expect(screen.getByText('subtitle content')).toBeInTheDocument();
19+
});
20+
21+
test('extra props are spread to the root element', () => {
22+
const testId = 'card-header';
23+
24+
render(<CardTitle data-testid={testId} />);
25+
expect(screen.getByTestId(testId)).toBeInTheDocument();
26+
});
27+
28+
test('Matches snapshot', () => {
29+
const { asFragment } = render(<CardTitle>text</CardTitle>);
30+
expect(asFragment()).toMatchSnapshot();
2131
});

‎packages/react-core/src/components/Card/__tests__/__snapshots__/CardSubtitle.test.tsx.snap‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`CardSubtitle renders with PatternFly Core styles 1`] = `
3+
exports[`Matches snapshot with children 1`] = `
44
<DocumentFragment>
55
<div
66
class="pf-v6-c-card__subtitle"
77
id=""
88
>
9-
text
9+
Subtitle content
1010
</div>
1111
</DocumentFragment>
1212
`;
13+
14+
exports[`Matches snapshot without children 1`] = `
15+
<DocumentFragment>
16+
<div
17+
class="pf-v6-c-card__subtitle"
18+
id=""
19+
/>
20+
</DocumentFragment>
21+
`;

‎packages/react-core/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`CardTitle renders with PatternFly Core styles 1`] = `
3+
exports[`Matches snapshot 1`] = `
44
<DocumentFragment>
55
<div
66
class="pf-v6-c-card__title"

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,12 @@ test('Renders custom class when passed', () => {
7171
expect(screen.getByLabelText('list')).toHaveClass('data-list-custom');
7272
});
7373

74+
test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
75+
render(<DataList key="list-id-1" isPlain aria-label="list" />);
76+
77+
expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.plain);
78+
});
79+
7480
test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
7581
render(
7682
<DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,66 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when unc
166166
expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
167167
});
168168

169+
test(`Renders with class ${styles.modifiers.nav} when isNav is true`, () => {
170+
render(
171+
<Tabs isNav role="region">
172+
<Tab title="Test title" eventKey={0}>
173+
Tab Content
174+
</Tab>
175+
</Tabs>
176+
);
177+
178+
expect(screen.getByRole('region')).toHaveClass(styles.modifiers.nav);
179+
});
180+
181+
test(`Renders with div wrapper by default`, () => {
182+
render(
183+
<Tabs>
184+
<Tab title="Test title" eventKey={0}>
185+
Tab Content
186+
</Tab>
187+
</Tabs>
188+
);
189+
190+
expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
191+
});
192+
193+
test(`Renders with nav wrapper when component="nav"`, () => {
194+
render(
195+
<Tabs component="nav">
196+
<Tab title="Test title" eventKey={0}>
197+
Tab Content
198+
</Tab>
199+
</Tabs>
200+
);
201+
202+
expect(screen.getByRole('navigation')).toBeInTheDocument();
203+
});
204+
205+
test(`Renders with nav wrapper when isNav is true`, () => {
206+
render(
207+
<Tabs isNav>
208+
<Tab title="Test title" eventKey={0}>
209+
Tab Content
210+
</Tab>
211+
</Tabs>
212+
);
213+
214+
expect(screen.getByRole('navigation')).toBeInTheDocument();
215+
});
216+
217+
test(`Overrides isNav nav wrapper when component="div" is passed`, () => {
218+
render(
219+
<Tabs component="div" isNav>
220+
<Tab title="Test title" eventKey={0}>
221+
Tab Content
222+
</Tab>
223+
</Tabs>
224+
);
225+
226+
expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
227+
});
228+
169229
test('should render simple tabs', () => {
170230
const { asFragment } = render(
171231
<Tabs id="simpleTabs">

‎packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
55
<nav
66
aria-label="accessible Tabs example"
77
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
8-
data-ouia-component-id="OUIA-Generated-Tabs-14"
8+
data-ouia-component-id="OUIA-Generated-Tabs-19"
99
data-ouia-component-type="PF6/Tabs"
1010
data-ouia-safe="true"
1111
id="accessibleTabs"
@@ -122,7 +122,7 @@ exports[`should render box tabs 1`] = `
122122
<DocumentFragment>
123123
<div
124124
class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
125-
data-ouia-component-id="OUIA-Generated-Tabs-13"
125+
data-ouia-component-id="OUIA-Generated-Tabs-18"
126126
data-ouia-component-type="PF6/Tabs"
127127
data-ouia-safe="true"
128128
id="boxTabs"
@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
281281
<DocumentFragment>
282282
<div
283283
class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
284-
data-ouia-component-id="OUIA-Generated-Tabs-24"
284+
data-ouia-component-id="OUIA-Generated-Tabs-29"
285285
data-ouia-component-type="PF6/Tabs"
286286
data-ouia-safe="true"
287287
id="boxSecondaryVariantTabs"
@@ -398,7 +398,7 @@ exports[`should render expandable vertical tabs 1`] = `
398398
<DocumentFragment>
399399
<div
400400
class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
401-
data-ouia-component-id="OUIA-Generated-Tabs-11"
401+
data-ouia-component-id="OUIA-Generated-Tabs-16"
402402
data-ouia-component-type="PF6/Tabs"
403403
data-ouia-safe="true"
404404
id="verticalTabs"
@@ -605,7 +605,7 @@ exports[`should render filled tabs 1`] = `
605605
<DocumentFragment>
606606
<div
607607
class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
608-
data-ouia-component-id="OUIA-Generated-Tabs-15"
608+
data-ouia-component-id="OUIA-Generated-Tabs-20"
609609
data-ouia-component-type="PF6/Tabs"
610610
data-ouia-safe="true"
611611
id="filledTabs"
@@ -722,7 +722,7 @@ exports[`should render simple tabs 1`] = `
722722
<DocumentFragment>
723723
<div
724724
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
725-
data-ouia-component-id="OUIA-Generated-Tabs-6"
725+
data-ouia-component-id="OUIA-Generated-Tabs-11"
726726
data-ouia-component-type="PF6/Tabs"
727727
data-ouia-safe="true"
728728
id="simpleTabs"
@@ -881,7 +881,7 @@ exports[`should render subtabs 1`] = `
881881
<DocumentFragment>
882882
<div
883883
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
884-
data-ouia-component-id="OUIA-Generated-Tabs-16"
884+
data-ouia-component-id="OUIA-Generated-Tabs-21"
885885
data-ouia-component-type="PF6/Tabs"
886886
data-ouia-safe="true"
887887
id="primarieTabs"
@@ -967,7 +967,7 @@ exports[`should render subtabs 1`] = `
967967
>
968968
<div
969969
class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
970-
data-ouia-component-id="OUIA-Generated-Tabs-17"
970+
data-ouia-component-id="OUIA-Generated-Tabs-22"
971971
data-ouia-component-type="PF6/Tabs"
972972
data-ouia-safe="true"
973973
id="subtabs"
@@ -1110,7 +1110,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
11101110
<DocumentFragment>
11111111
<div
11121112
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
1113-
data-ouia-component-id="OUIA-Generated-Tabs-18"
1113+
data-ouia-component-id="OUIA-Generated-Tabs-23"
11141114
data-ouia-component-type="PF6/Tabs"
11151115
data-ouia-safe="true"
11161116
id="eventKeyTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
12281228
<DocumentFragment>
12291229
<div
12301230
class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
1231-
data-ouia-component-id="OUIA-Generated-Tabs-25"
1231+
data-ouia-component-id="OUIA-Generated-Tabs-30"
12321232
data-ouia-component-type="PF6/Tabs"
12331233
data-ouia-safe="true"
12341234
id="noBottomBorderTabs"
@@ -1345,7 +1345,7 @@ exports[`should render tabs with separate content 1`] = `
13451345
<DocumentFragment>
13461346
<div
13471347
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
1348-
data-ouia-component-id="OUIA-Generated-Tabs-19"
1348+
data-ouia-component-id="OUIA-Generated-Tabs-24"
13491349
data-ouia-component-type="PF6/Tabs"
13501350
data-ouia-safe="true"
13511351
id="separateTabs"
@@ -1472,7 +1472,7 @@ exports[`should render uncontrolled tabs 1`] = `
14721472
<DocumentFragment>
14731473
<div
14741474
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
1475-
data-ouia-component-id="OUIA-Generated-Tabs-9"
1475+
data-ouia-component-id="OUIA-Generated-Tabs-14"
14761476
data-ouia-component-type="PF6/Tabs"
14771477
data-ouia-safe="true"
14781478
style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1630,7 +1630,7 @@ exports[`should render vertical tabs 1`] = `
16301630
<DocumentFragment>
16311631
<div
16321632
class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
1633-
data-ouia-component-id="OUIA-Generated-Tabs-10"
1633+
data-ouia-component-id="OUIA-Generated-Tabs-15"
16341634
data-ouia-component-type="PF6/Tabs"
16351635
data-ouia-safe="true"
16361636
id="verticalTabs"

‎packages/react-table/src/components/Table/__tests__/Table.test.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,3 +150,9 @@ test('Renders expandable toggle button in Th with pf-m-small class when variant
150150
expect(button).toHaveClass('pf-m-small');
151151
});
152152
});
153+
154+
test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
155+
render(<Table isPlain aria-label="Test table" />);
156+
157+
expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.plain);
158+
});

0 commit comments

Comments
 (0)