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 EuiForm unit tests using enzyme render to RTL #6970

Merged
merged 1 commit into from
Jul 20, 2023
Merged

test: convert EuiForm unit tests using enzyme render to RTL #6970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
54 changes: 16 additions & 38 deletions src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,33 @@

exports[`EuiCheckboxGroup (mocked checkbox) disabled is rendered 1`] = `
<div>
<eui_checkbox
checked=""
class="euiCheckboxGroup__item"
disabled=""
id="1"
label="kibana"
<div
data-eui-checkbox=""
/>
<eui_checkbox
class="euiCheckboxGroup__item"
disabled=""
id="2"
label="elastic"
<div
data-eui-checkbox=""
/>
</div>
`;

exports[`EuiCheckboxGroup (mocked checkbox) idToSelectedMap is rendered 1`] = `
<div>
<eui_checkbox
checked=""
class="euiCheckboxGroup__item"
id="1"
label="kibana"
<div
data-eui-checkbox=""
/>
<eui_checkbox
class="euiCheckboxGroup__item"
id="2"
label="elastic"
<div
data-eui-checkbox=""
/>
</div>
`;

exports[`EuiCheckboxGroup (mocked checkbox) individual disabled is rendered 1`] = `
<div>
<eui_checkbox
checked=""
class="euiCheckboxGroup__item"
disabled=""
id="1"
label="kibana"
<div
data-eui-checkbox=""
/>
<eui_checkbox
class="euiCheckboxGroup__item"
id="2"
label="elastic"
<div
data-eui-checkbox=""
/>
</div>
`;
Expand All @@ -71,15 +53,11 @@ exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `

exports[`EuiCheckboxGroup (mocked checkbox) options are rendered 1`] = `
<div>
<eui_checkbox
class="euiCheckboxGroup__item"
id="1"
label="kibana"
<div
data-eui-checkbox=""
/>
<eui_checkbox
class="euiCheckboxGroup__item"
id="2"
label="elastic"
<div
data-eui-checkbox=""
/>
</div>
`;
26 changes: 13 additions & 13 deletions src/components/form/checkbox/checkbox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
*/

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

import { EuiCheckbox, TYPES } from './checkbox';

Expand Down Expand Up @@ -43,60 +43,60 @@ describe('EuiCheckbox', () => {
);

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

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

describe('props', () => {
test('check is rendered', () => {
const component = render(
const { container } = render(
<EuiCheckbox {...checkboxRequiredProps} checked />
);

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

test('label is rendered', () => {
const component = render(
const { container } = render(
<EuiCheckbox {...checkboxRequiredProps} label={<span>Label</span>} />
);

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

test('labelProps is rendered', () => {
const component = render(
const { container } = render(
<EuiCheckbox
{...checkboxRequiredProps}
label="Label"
labelProps={requiredProps}
/>
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
describe('type', () => {
TYPES.forEach((value) => {
test(`${value} is rendered`, () => {
const component = render(
const { container } = render(
<EuiCheckbox {...checkboxRequiredProps} type={value} />
);

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

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

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
});
Expand Down
30 changes: 16 additions & 14 deletions src/components/form/checkbox/checkbox_group.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@
*/

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

import { EuiCheckboxGroup } from './checkbox_group';

jest.mock('./checkbox', () => ({ EuiCheckbox: 'eui_checkbox' }));
jest.mock('./checkbox', () => ({
EuiCheckbox: () => <div data-eui-checkbox="" />,
}));

const checkboxGroupRequiredProps = {
options: [],
Expand All @@ -22,15 +24,15 @@ const checkboxGroupRequiredProps = {

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

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

test('options are rendered', () => {
const component = render(
const { container } = render(
<EuiCheckboxGroup
{...checkboxGroupRequiredProps}
options={[
Expand All @@ -40,11 +42,11 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => {
/>
);

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

test('idToSelectedMap is rendered', () => {
const component = render(
const { container } = render(
<EuiCheckboxGroup
{...checkboxGroupRequiredProps}
options={[
Expand All @@ -58,11 +60,11 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => {
/>
);

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

test('disabled is rendered', () => {
const component = render(
const { container } = render(
<EuiCheckboxGroup
{...checkboxGroupRequiredProps}
options={[
Expand All @@ -77,11 +79,11 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => {
/>
);

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

test('individual disabled is rendered', () => {
const component = render(
const { container } = render(
<EuiCheckboxGroup
{...checkboxGroupRequiredProps}
options={[
Expand All @@ -95,11 +97,11 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => {
/>
);

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

test('legend is rendered', () => {
const component = render(
const { container } = render(
<EuiCheckboxGroup
{...checkboxGroupRequiredProps}
legend={{
Expand All @@ -108,6 +110,6 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => {
/>
);

expect(component).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
10 changes: 10 additions & 0 deletions src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ exports[`EuiFieldPassword props compressed is rendered 1`] = `
<input
class="euiFieldPassword euiFieldPassword--compressed"
type="password"
value=""
/>
</eui-validatable-control>
</div>
Expand Down Expand Up @@ -90,6 +91,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
<input
class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
type="password"
value=""
/>
</eui-validatable-control>
</div>
Expand Down Expand Up @@ -143,6 +145,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
<input
class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
type="password"
value=""
/>
</eui-validatable-control>
</div>
Expand Down Expand Up @@ -187,6 +190,7 @@ exports[`EuiFieldPassword props fullWidth is rendered 1`] = `
<input
class="euiFieldPassword euiFieldPassword--fullWidth"
type="password"
value=""
/>
</eui-validatable-control>
</div>
Expand Down Expand Up @@ -219,6 +223,7 @@ exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
<input
class="euiFieldPassword euiFormControlLayout--1icons"
type="password"
value=""
/>
</eui-validatable-control>
<div
Expand Down Expand Up @@ -257,6 +262,7 @@ exports[`EuiFieldPassword props isLoading is rendered 1`] = `
<input
class="euiFieldPassword euiFormControlLayout--1icons euiFieldPassword-isLoading"
type="password"
value=""
/>
</eui-validatable-control>
<div
Expand Down Expand Up @@ -301,6 +307,7 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
<input
class="euiFieldPassword euiFieldPassword--inGroup"
type="password"
value=""
/>
</eui-validatable-control>
</div>
Expand Down Expand Up @@ -336,6 +343,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
<input
class="euiFieldPassword euiFieldPassword--inGroup euiFieldPassword--withToggle"
type="password"
value=""
/>
</eui-validatable-control>
</div>
Expand Down Expand Up @@ -379,6 +387,7 @@ exports[`EuiFieldPassword props type password is rendered 1`] = `
<input
class="euiFieldPassword"
type="password"
value=""
/>
</eui-validatable-control>
</div>
Expand Down Expand Up @@ -409,6 +418,7 @@ exports[`EuiFieldPassword props type text is rendered 1`] = `
<input
class="euiFieldPassword"
type="text"
value=""
/>
</eui-validatable-control>
</div>
Expand Down
Loading