Skip to content

Commit

Permalink
Badge and Chip snapshot tests (#3592)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored Nov 8, 2022
1 parent 5067a14 commit 20ebc31
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 122 deletions.
89 changes: 13 additions & 76 deletions components/lib/badge/Badge.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,82 +2,19 @@ import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import { Badge } from './Badge';

describe('Badge', () => {
test('when value is not property it returns with dot class', () => {
// Arrange
const { container } = render(<Badge />);

// Act + Assert
expect(container.getElementsByClassName('p-badge-dot').length).toBe(1);
});

test('when value is property it returns with class', () => {
// Arrange
const { container } = render(<Badge value={22} />);
const badge = container.getElementsByClassName('p-badge p-component')[0].textContent;

// Act + Assert
expect(badge).toBe('22');
});

test('when size as property it returns with class', () => {
// Arrange
const { container } = render(<Badge size={'large'} />);

// Act + Assert
expect(container.getElementsByClassName('p-badge p-component p-badge-lg').length).toBe(1);
});
test('when size as property it returns with class', () => {
// Arrange
const { container } = render(<Badge size={'xlarge'} />);

// Act + Assert
expect(container.getElementsByClassName('p-badge p-component p-badge-xl').length).toBe(1);
});

test('when value of size property is invalid it returns with default class', () => {
// Arrange
const { container } = render(<Badge size={'invalid'} />);

// Act + Assert
const snapshot = (props, name) => expect(render(<Badge {...props} />).container).toMatchSnapshot(name);

expect(container.getElementsByClassName('p-badge p-component').length).toBe(1);
});

test('when severity as property it returns with class', () => {
// Arrange
const { container } = render(<Badge severity={'success'} />);

// Act + Assert
expect(container.getElementsByClassName('p-badge p-component p-badge-success').length).toBe(1);
});
test('when severity as property it returns with class', () => {
// Arrange
const { container } = render(<Badge severity={'info'} />);

// Act + Assert
expect(container.getElementsByClassName('p-badge p-component p-badge-info').length).toBe(1);
});
test('when severity as property it returns with class', () => {
// Arrange
const { container } = render(<Badge severity={'warning'} />);

// Act + Assert
expect(container.getElementsByClassName('p-badge p-component p-badge-warning').length).toBe(1);
});
test('when severity as property it returns with class', () => {
// Arrange
const { container } = render(<Badge severity={'danger'} />);

// Act + Assert
expect(container.getElementsByClassName('p-badge p-component p-badge-danger').length).toBe(1);
});

test('when value of severity property is invalid it returns with class that has property additional class', () => {
// Arrange
const { container } = render(<Badge severity={'invalid'} />);

// Act + Assert
expect(container.getElementsByClassName('p-badge p-component p-badge-invalid').length).toBe(1);
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');
});
});
83 changes: 83 additions & 0 deletions components/lib/badge/__snapshots__/Badge.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

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

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

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

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

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

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

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

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

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

exports[`Badge check snapshots: value 1`] = `
<div>
<span
class="p-badge p-component"
>
22
</span>
</div>
`;
56 changes: 10 additions & 46 deletions components/lib/chip/Chip.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
import '@testing-library/jest-dom';
import { fireEvent, render, within } from '@testing-library/react';
import { fireEvent, render } from '@testing-library/react';
import { Chip } from './Chip';

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

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');
});
test('when removable is true it returns with remove icon', () => {
// Arrange
const removeOn = jest.fn();
Expand All @@ -16,7 +25,6 @@ describe('Chip', () => {
expect(container.getElementsByClassName('p-chip-remove-icon pi pi-times-circle').length).toBe(0);
expect(removeOn).toHaveBeenCalledTimes(1);
});

test('when removable is true the chip is removed when ENTER is pressed', () => {
// Arrange
const removeOn = jest.fn();
Expand All @@ -30,48 +38,4 @@ describe('Chip', () => {
expect(container.getElementsByClassName('p-chip-remove-icon pi pi-times-circle').length).toBe(0);
expect(removeOn).toHaveBeenCalledTimes(1);
});

test('when image is property it returns with image class', () => {
// Arrange
const { container } = render(<Chip image={'test'} />);

// Act + Assert
const wrapper = container.getElementsByClassName('p-chip p-component p-chip-image');
const chipImage = within(wrapper[0]).getByRole('img');

expect(chipImage.getAttribute('alt')).toBe('chip');
});

test('when imageAlt property is set the alt is set', () => {
// Arrange
const { container } = render(<Chip image={'test'} imageAlt="jest" />);

// Act + Assert
const wrapper = container.getElementsByClassName('p-chip p-component p-chip-image');
const chipImage = within(wrapper[0]).getByRole('img');

expect(chipImage.getAttribute('alt')).toBe('jest');
});

test('when icon is property it returns with icon class', () => {
// Arrange
const { container } = render(<Chip icon={'pi pi-check'} />);

// Act + Assert
const icon = container.getElementsByClassName('p-chip-icon');
const iconClass = icon[0].getAttribute('class');

expect(iconClass).toBe('p-chip-icon pi pi-check');
});

test('when label is property it returns with label class', () => {
// Arrange
const { container } = render(<Chip label={'test'} />);

// Act + Assert
const label = container.getElementsByClassName('p-chip-text');
const spanTextContent = label[0].textContent;

expect(spanTextContent).toBe('test');
});
});
61 changes: 61 additions & 0 deletions components/lib/chip/__snapshots__/Chip.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

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

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

exports[`Chip check snapshots: image 1`] = `
<div>
<div
class="p-chip p-component p-chip-image"
>
<img
alt="chip"
src="http://google.com/my.png"
/>
</div>
</div>
`;

exports[`Chip check snapshots: image and alt 1`] = `
<div>
<div
class="p-chip p-component p-chip-image"
>
<img
alt="jest"
src="http://google.com/my.png"
/>
</div>
</div>
`;

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

0 comments on commit 20ebc31

Please sign in to comment.