Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: convert even more component unit tests using enzyme render to RTL #6974

Merged
merged 10 commits into from
Jul 24, 2023
Merged

test: convert even more component unit tests using enzyme render to RTL #6974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f6d615c
test: convert EuiPopover unit tests using enzyme render to RTL
tkajtoch Jul 19, 2023
5ddd293
test: convert EuiPanel unit tests using enzyme render to RTL
tkajtoch Jul 19, 2023
a23070b
test: convert EuiNotification unit tests using enzyme render to RTL
tkajtoch Jul 19, 2023
c31eae4
test: convert EuiMarkdownEditor unit tests using enzyme render to RTL
tkajtoch Jul 19, 2023
7135880
test: convert EuiLoading* unit tests using enzyme render to RTL
tkajtoch Jul 19, 2023
1673b56
test: convert EuiListGroup unit tests using enzyme render to RTL
tkajtoch Jul 19, 2023
f2ebab8
test: convert EuiKeyPadMenu unit tests using enzyme render to RTL
tkajtoch Jul 19, 2023
6dcff8a
test: convert EuiHeader unit tests using enzyme render to RTL
tkajtoch Jul 19, 2023
0651419
uncomment showTooltip test
tkajtoch Jul 24, 2023
7cbab7f
fix EuiComboBox tests
tkajtoch Jul 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 28 additions & 5 deletions src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,6 +417,7 @@ exports[`props option.prepend & option.append renders in pills 1`] = `
Array [
<span
class="euiBadge euiComboBoxPill emotion-euiBadge-hollow"
data-test-subj="euiComboBoxPill"
title="1"
>
<span
Expand All @@ -428,7 +429,11 @@ Array [
<span
class="euiComboBoxPill__prepend"
>
Pre
<span
data-test-subj="prepend"
>
Pre
</span>
</span>
1
</span>
Expand All @@ -448,6 +453,7 @@ Array [
</span>,
<span
class="euiBadge euiComboBoxPill emotion-euiBadge-hollow"
data-test-subj="euiComboBoxPill"
title="2"
>
<span
Expand All @@ -460,7 +466,11 @@ Array [
<span
class="euiComboBoxPill__append"
>
Post
<span
data-test-subj="append"
>
Post
</span>
</span>
</span>
<button
Expand All @@ -483,11 +493,16 @@ Array [
exports[`props option.prepend & option.append renders in single selection 1`] = `
<span
class="euiComboBoxPill euiComboBoxPill--plainText"
data-test-subj="euiComboBoxPill"
>
<span
class="euiComboBoxPill__prepend"
>
Pre
<span
data-test-subj="prepend"
>
Pre
</span>
</span>
1
</span>
Expand Down Expand Up @@ -535,7 +550,11 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
<span
class="euiComboBoxOption__prepend"
>
Pre
<span
data-test-subj="prepend"
>
Pre
</span>
</span>
<span
class="euiComboBoxOption__content"
Expand Down Expand Up @@ -572,7 +591,11 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
<span
class="euiComboBoxOption__append"
>
Post
<span
data-test-subj="append"
>
Post
</span>
</span>
</span>
</span>
Expand Down
17 changes: 9 additions & 8 deletions src/components/combo_box/combo_box.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,18 +119,18 @@ describe('props', () => {

describe('option.prepend & option.append', () => {
const options = [
{ label: '1', prepend: 'Pre' },
{ label: '2', append: 'Post' },
{ label: '1', prepend: <span data-test-subj="prepend">Pre</span> },
{ label: '2', append: <span data-test-subj="append">Post</span> },
];

test('renders in pills', () => {
const component = render(
const { getByTestSubject, getAllByTestSubject } = render(
<EuiComboBox options={options} selectedOptions={options} />
);

expect(component.find('.euiComboBoxPill__prepend')).toHaveLength(1);
expect(component.find('.euiComboBoxPill__append')).toHaveLength(1);
expect(component.find('.euiComboBoxPill')).toMatchSnapshot();
expect(getByTestSubject('prepend')).toBeInTheDocument();
expect(getByTestSubject('append')).toBeInTheDocument();
expect(getAllByTestSubject('euiComboBoxPill')).toMatchSnapshot();
});

test('renders in the options dropdown', () => {
Expand All @@ -146,14 +146,15 @@ describe('props', () => {
});

test('renders in single selection', () => {
const component = render(
const { getByTestSubject } = render(
<EuiComboBox
options={options}
selectedOptions={[options[0]]}
singleSelection={{ asPlainText: true }}
/>
);
expect(component.find('.euiComboBoxPill')).toMatchSnapshot();

expect(getByTestSubject('euiComboBoxPill')).toMatchSnapshot();
});
});

Expand Down
4 changes: 3 additions & 1 deletion src/components/combo_box/combo_box_input/combo_box_pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
<EuiBadge
className={classes}
color={color}
data-test-subj="euiComboBoxPill"
iconOnClick={this.onCloseButtonClick}
iconOnClickAriaLabel={removeSelection}
iconSide="right"
Expand All @@ -106,7 +107,7 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {

if (asPlainText) {
return (
<span className={classes} {...rest}>
<span className={classes} data-test-subj="euiComboBoxPill" {...rest}>
{content}
</span>
);
Expand All @@ -116,6 +117,7 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
<EuiBadge
className={classes}
color={color}
data-test-subj="euiComboBoxPill"
title={children}
{...rest}
{...onClickProps}
Expand Down
9 changes: 5 additions & 4 deletions src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,11 @@ exports[`EuiHeaderAlert renders title as an element 1`] = `
<h3
class="euiHeaderAlert__title"
id="generated-id-title"
/>
<h2>
Circumambulate the city
</h2>
>
<span>
Circumambulate the city
</span>
</h3>
Comment on lines -132 to +135
Copy link
Contributor

@cee-chen cee-chen Jul 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha, thanks for fixing this - I ran into it as well locally when starting the Emotion conversion for this component. The years before EUI had an accessibility dev on the team sure were wild 🤣

<div
class="euiHeaderAlert__text"
/>
Expand Down
20 changes: 10 additions & 10 deletions src/components/header/header_alert/header_alert.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@
*/

import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../../test/required_props';
import { render } from '../../../test/rtl';

import { EuiHeaderAlert } from './header_alert';

describe('EuiHeaderAlert', () => {
test('is rendered', () => {
const component = render(
const { container } = render(
<EuiHeaderAlert {...requiredProps} title="title" date="date" />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

test('renders action', () => {
const action = <button>Quietly take to the ship</button>;
const component = render(
const { container } = render(
<EuiHeaderAlert
{...requiredProps}
title="title"
Expand All @@ -32,24 +32,24 @@ describe('EuiHeaderAlert', () => {
/>
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

test('renders title as an element', () => {
const title = <h2>Circumambulate the city</h2>;
const component = render(
const title = <span>Circumambulate the city</span>;
const { container } = render(
<EuiHeaderAlert {...requiredProps} date="date" title={title} />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

test('renders date as an element', () => {
const date = <h2>October 18, 1851</h2>;
const component = render(
const { container } = render(
<EuiHeaderAlert {...requiredProps} title="shazm" date={date} />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
14 changes: 7 additions & 7 deletions src/components/header/header_links/header_link.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,27 @@
*/

import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../../test';
import { render } from '../../../test/rtl';

import { EuiHeaderLink } from './header_link';

describe('EuiHeaderLink', () => {
test('is rendered', () => {
const component = render(<EuiHeaderLink {...requiredProps} />);
const { container } = render(<EuiHeaderLink {...requiredProps} />);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

test('is rendered as active', () => {
const component = render(<EuiHeaderLink isActive />);
const { container } = render(<EuiHeaderLink isActive />);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

test('can render as specific color', () => {
const component = render(<EuiHeaderLink color="danger" />);
const { container } = render(<EuiHeaderLink color="danger" />);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
22 changes: 13 additions & 9 deletions src/components/header/header_links/header_links.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
*/

import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../../test';
import { shouldRenderCustomStyles } from '../../../test/internal';
import { render } from '../../../test/rtl';

import { EuiHeaderLinks, GUTTER_SIZES } from './header_links';

Expand All @@ -19,24 +19,26 @@ describe('EuiHeaderLinks', () => {
});

test('is rendered', () => {
const component = render(<EuiHeaderLinks {...requiredProps} />);
const { container } = render(<EuiHeaderLinks {...requiredProps} />);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

describe('gutterSize', () => {
GUTTER_SIZES.forEach((gutterSize) => {
test(`${gutterSize} is rendered`, () => {
const component = render(<EuiHeaderLinks gutterSize={gutterSize} />);
const { container } = render(
<EuiHeaderLinks gutterSize={gutterSize} />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
});

describe('popover props', () => {
test('is rendered', () => {
const component = render(
const { container } = render(
<EuiHeaderLinks
popoverBreakpoints={['xs', 's', 'm', 'l', 'xl']}
popoverButtonProps={{
Expand All @@ -47,13 +49,15 @@ describe('EuiHeaderLinks', () => {
/>
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});

test('is never rendered with "none"', () => {
const component = render(<EuiHeaderLinks popoverBreakpoints={'none'} />);
const { container } = render(
<EuiHeaderLinks popoverBreakpoints={'none'} />
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
});
2 changes: 1 addition & 1 deletion src/components/header/header_section/__snapshots__/header_section.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ exports[`EuiHeaderSection is rendered 1`] = `
exports[`EuiHeaderSection renders optional params 1`] = `
<div
class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
style="color:blue"
style="color: blue;"
>
<span>
Some years ago never mind how long precisely...
Expand Down
Loading