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

improve snapshot tests #3597

Merged
merged 1 commit into from
Nov 9, 2022
Merged

improve snapshot tests #3597

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
24 changes: 11 additions & 13 deletions components/lib/badge/Badge.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,17 @@ import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import { Badge } from './Badge';

const snapshot = (props, name) => expect(render(<Badge {...props} />).container).toMatchSnapshot(name);
import { snapshot } from '../../test';

describe('Badge', () => {
test('check snapshots', () => {
snapshot({}, 'default');
snapshot({ value: 22 }, 'value');
snapshot({ size: 'large' }, 'size large');
snapshot({ size: 'xlarge' }, 'size xlarge');
snapshot({ size: 'invalid' }, 'size invalid');
snapshot({ severity: 'success' }, 'severity success');
snapshot({ severity: 'info' }, 'severity info');
snapshot({ severity: 'warning' }, 'severity warning');
snapshot({ severity: 'danger' }, 'severity danger');
snapshot({ severity: 'invalid' }, 'severity invalid');
});
snapshot(<Badge />, 'default');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

To make the snapshot function easier to use across components, it expects the element, not the properties only.

snapshot(<Badge value={22} />, 'value');
snapshot(<Badge size="large" />, 'size large');
snapshot(<Badge size="xlarge" />, 'size xlarge');
snapshot(<Badge size="invalid" />, 'size invalid');
snapshot(<Badge severity="success" />, 'severity success');
snapshot(<Badge severity="info" />, 'severity info');
snapshot(<Badge severity="warning" />, 'severity warning');
snapshot(<Badge severity="danger" />, 'severity danger');
snapshot(<Badge severity="invalid" />, 'severity invalid');
});
20 changes: 10 additions & 10 deletions components/lib/badge/__snapshots__/Badge.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,78 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Badge check snapshots: default 1`] = `
exports[`Badge default 1`] = `
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here the 'check snapshots: ' string was not really useful, as it is clear that snapshots are being checked.

<div>
<span
class="p-badge p-component p-badge-dot"
/>
</div>
`;

exports[`Badge check snapshots: severity danger 1`] = `
exports[`Badge severity danger 1`] = `
<div>
<span
class="p-badge p-component p-badge-dot p-badge-danger"
/>
</div>
`;

exports[`Badge check snapshots: severity info 1`] = `
exports[`Badge severity info 1`] = `
<div>
<span
class="p-badge p-component p-badge-dot p-badge-info"
/>
</div>
`;

exports[`Badge check snapshots: severity invalid 1`] = `
exports[`Badge severity invalid 1`] = `
<div>
<span
class="p-badge p-component p-badge-dot p-badge-invalid"
/>
</div>
`;

exports[`Badge check snapshots: severity success 1`] = `
exports[`Badge severity success 1`] = `
<div>
<span
class="p-badge p-component p-badge-dot p-badge-success"
/>
</div>
`;

exports[`Badge check snapshots: severity warning 1`] = `
exports[`Badge severity warning 1`] = `
<div>
<span
class="p-badge p-component p-badge-dot p-badge-warning"
/>
</div>
`;

exports[`Badge check snapshots: size invalid 1`] = `
exports[`Badge size invalid 1`] = `
<div>
<span
class="p-badge p-component p-badge-dot"
/>
</div>
`;

exports[`Badge check snapshots: size large 1`] = `
exports[`Badge size large 1`] = `
<div>
<span
class="p-badge p-component p-badge-dot p-badge-lg"
/>
</div>
`;

exports[`Badge check snapshots: size xlarge 1`] = `
exports[`Badge size xlarge 1`] = `
<div>
<span
class="p-badge p-component p-badge-dot p-badge-xl"
/>
</div>
`;

exports[`Badge check snapshots: value 1`] = `
exports[`Badge value 1`] = `
<div>
<span
class="p-badge p-component"
Expand Down
110 changes: 14 additions & 96 deletions components/lib/button/Button.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,21 @@ import '@testing-library/jest-dom';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { Button } from './Button';

describe('Button', () => {
test('when visible is false Button return null', () => {
// Arrange
const { container } = render(<Button label={'test'} visible={false} />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when visible is true Button render correctly', () => {
// Arrange
const { container } = render(<Button label={'test'} visible={true} />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when iconPos is bottom Button is vertical', () => {
// Arrange
const { container } = render(<Button label={'test'} iconPos={'bottom'} visible={true} />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when label is empty it returns empty button', async () => {
// Arrange
const { container } = render(<Button visible={true} />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when badge is true it renders Button with badge', () => {
// Arrange
const { container } = render(<Button badge={'test'} />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when badge is null it renders Button without badge', () => {
// Arrange
const { container } = render(<Button />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when click the button if loading is true it renders Button with loading icon', () => {
// Arrange
const { container } = render(<Button loading={'test'} />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when click the button if loading is false it renders Button without loading icon', () => {
// Arrange
const { container } = render(<Button />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when label is true it renders Button with default aria label', () => {
// Arrange
const { container } = render(<Button />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when aria-label prop is not exist aria-label prop should be equal to label prop ', () => {
// Arrange
const { container } = render(<Button label={'test'} />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when label prop is not exist label prop should be equal to aria-label prop', () => {
// Arrange
const { container } = render(<Button aria-label={'test'} />);

// Act + Assert
expect(container).toMatchSnapshot();
});

test('when using badge and label the aria-label should contain both values', () => {
// Arrange
const { container } = render(<Button label={'test'} badge={'lost'} />);

// Act + Assert
expect(container).toMatchSnapshot();
});
import { snapshot } from '../../test';

describe('Button', () => {
snapshot(<Button label={'test'} visible={false} />, 'when visible is false Button return null');
snapshot(<Button label={'test'} visible={true} />, 'when visible is true Button render correctly');
snapshot(<Button label={'test'} iconPos={'bottom'} visible={true} />, 'when iconPos is bottom Button is vertical');
snapshot(<Button visible={true} />, 'when label is empty it returns empty button');
snapshot(<Button badge={'test'} />, 'when badge is true it renders Button with badge');
snapshot(<Button />, 'when badge is null it renders Button without badge');
snapshot(<Button loading={'test'} />, 'when click the button if loading is true it renders Button with loading icon');
snapshot(<Button />, 'when click the button if loading is false it renders Button without loading icon');
snapshot(<Button />, 'when label is true it renders Button with default aria label');
snapshot(<Button label={'test'} />, 'when aria-label prop is not exist aria-label prop should be equal to label prop ');
snapshot(<Button aria-label={'test'} />, 'when label prop is not exist label prop should be equal to aria-label prop');
snapshot(<Button label={'test'} badge={'lost'} />, 'when using badge and label the aria-label should contain both values');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here, the snapshot calls replaced the old code, that was repetitive. It is now more clearly visible, that some tests are doing the same thing and that test names might be a bit incorrect. Three of them are rendering just <Button />.

test('when using tooltip make sure the tooltip is rendered', async () => {
// Arrange
const { container } = render(<Button label={'test'} tooltip="Jest Tooltip" />);
Expand Down
22 changes: 12 additions & 10 deletions components/lib/chip/Chip.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,42 @@ import '@testing-library/jest-dom';
import { fireEvent, render } from '@testing-library/react';
import { Chip } from './Chip';

const snapshot = (props, name) => expect(render(<Chip {...props} />).container).toMatchSnapshot(name);
import { snapshot } from '../../test';

describe('Chip', () => {
test('check snapshots', () => {
snapshot({}, 'default');
snapshot({ image: 'http://google.com/my.png' }, 'image');
snapshot({ image: 'http://google.com/my.png', imageAlt: 'jest' }, 'image and alt');
snapshot({ icon: 'pi pi-check' }, 'icon');
snapshot({ label: 'jest' }, 'label');
});
snapshot(<Chip />, 'default');
snapshot(<Chip image="http://google.com/my.png" />, 'image');
snapshot(<Chip image="http://google.com/my.png" imageAlt="jest" />, 'image and alt');
snapshot(<Chip icon="pi pi-check" />, 'icon');
snapshot(<Chip label="jest" />, 'label');
test('when removable is true it returns with remove icon', () => {
// Arrange
const removeOn = jest.fn();
const { container } = render(<Chip removable onRemove={removeOn} />);

expect(container).toMatchSnapshot('before remove');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here is example how to pass a name to the toMatchSnapshot call, so that two snapshots are made in the same test. Here is makes sense to snapshot before and after the action, as the component rendered differently.

const chipRemoveIcon = container.getElementsByClassName('p-chip-remove-icon')[0];

// Act
fireEvent.keyDown(chipRemoveIcon, { key: 'enter', keyCode: 13 });

// Assert
expect(container.getElementsByClassName('p-chip-remove-icon pi pi-times-circle').length).toBe(0);
expect(container).toMatchSnapshot('after remove');
expect(removeOn).toHaveBeenCalledTimes(1);
});
test('when removable is true the chip is removed when ENTER is pressed', () => {
// Arrange
const removeOn = jest.fn();
const { container } = render(<Chip removable onRemove={removeOn} />);

expect(container).toMatchSnapshot('before remove');
const chipRemoveIcon = container.getElementsByClassName('p-chip-remove-icon')[0];

// Act
fireEvent.click(chipRemoveIcon);

// Assert
expect(container.getElementsByClassName('p-chip-remove-icon pi pi-times-circle').length).toBe(0);
expect(container).toMatchSnapshot('after remove');
expect(removeOn).toHaveBeenCalledTimes(1);
});
});
40 changes: 35 additions & 5 deletions components/lib/chip/__snapshots__/Chip.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Chip check snapshots: default 1`] = `
exports[`Chip default 1`] = `
<div>
<div
class="p-chip p-component"
/>
</div>
`;

exports[`Chip check snapshots: icon 1`] = `
exports[`Chip icon 1`] = `
<div>
<div
class="p-chip p-component"
Expand All @@ -20,7 +20,7 @@ exports[`Chip check snapshots: icon 1`] = `
</div>
`;

exports[`Chip check snapshots: image 1`] = `
exports[`Chip image 1`] = `
<div>
<div
class="p-chip p-component p-chip-image"
Expand All @@ -33,7 +33,7 @@ exports[`Chip check snapshots: image 1`] = `
</div>
`;

exports[`Chip check snapshots: image and alt 1`] = `
exports[`Chip image and alt 1`] = `
<div>
<div
class="p-chip p-component p-chip-image"
Expand All @@ -46,7 +46,7 @@ exports[`Chip check snapshots: image and alt 1`] = `
</div>
`;

exports[`Chip check snapshots: label 1`] = `
exports[`Chip label 1`] = `
<div>
<div
class="p-chip p-component"
Expand All @@ -59,3 +59,33 @@ exports[`Chip check snapshots: label 1`] = `
</div>
</div>
`;

exports[`Chip when removable is true it returns with remove icon: after remove 1`] = `<div />`;

exports[`Chip when removable is true it returns with remove icon: before remove 1`] = `
<div>
<div
class="p-chip p-component"
>
<span
class="p-chip-remove-icon pi pi-times-circle"
tabindex="0"
/>
</div>
</div>
`;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

You can observe the above how the before remove and after remove snapshots rendered different results (as expected)


exports[`Chip when removable is true the chip is removed when ENTER is pressed: after remove 1`] = `<div />`;

exports[`Chip when removable is true the chip is removed when ENTER is pressed: before remove 1`] = `
<div>
<div
class="p-chip p-component"
>
<span
class="p-chip-remove-icon pi pi-times-circle"
tabindex="0"
/>
</div>
</div>
`;
1 change: 0 additions & 1 deletion components/lib/inputtext/InputText.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ describe('InputText', () => {

// Act
expect(input).toBeEnabled();
expect(input).not.toHaveClass('p-filled');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is not needed, as the snapshot will cover this check.

Copy link
Member

@melloware melloware Nov 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I left this here because it was explicitly what i was testing not meant to be implicitly figured out from the SNAPSHOT. I am proving that its not FILLED before checking the SNAPSHOT.

expect(input).toHaveValue('');
expect(container).toMatchSnapshot();
});
Expand Down
1 change: 0 additions & 1 deletion components/lib/inputtextarea/InputTextarea.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ describe('InputTextarea', () => {

// Act
expect(input).toBeEnabled();
expect(input).not.toHaveClass('p-filled');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is not needed, as the snapshot will cover this check.

Copy link
Member

Choose a reason for hiding this comment

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

Explicit test since its in the description of the test its testing

expect(container).toMatchSnapshot();
});
test('when input is is set for validation only', async () => {
Expand Down
8 changes: 8 additions & 0 deletions components/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';

export function snapshot(element, name) {
test(name, () => {
expect(render(element).container).toMatchSnapshot();
});
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The reusable function, to avoid repetitive calls to test, expect, render and toMatchSnapshot