Skip to content

Commit

Permalink
test: switch to snapshot tests (#3579)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalinkrustev
kalinkrustev authored Nov 8, 2022
1 parent d70236d commit 0f20078
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 79 deletions.
92 changes: 13 additions & 79 deletions components/lib/divider/Divider.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,84 +2,18 @@ import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import { Divider } from './Divider';

describe('Divider', () => {
test('when component has no properties it returns with default class', () => {
// Arrange
const { container } = render(<Divider />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-solid p-divider-left').length).toBe(1);
});
test('when layout and align as property it returns with class', () => {
// Arrange
const { container } = render(<Divider layout={'horizontal'} align={'left'} />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-left').length).toBe(1);
});
test('when layout and align as property it returns with class', () => {
// Arrange
const { container } = render(<Divider layout={'horizontal'} align={'right'} />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-right').length).toBe(1);
});
test('when layout and align as property it returns with class', () => {
// Arrange
const { container } = render(<Divider layout={'horizontal'} align={'center'} />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-center').length).toBe(1);
});

test('when tpe has not any property it returns with default class', () => {
// Arrange
const { container } = render(<Divider />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-horizontal p-divider-solid').length).toBe(1);
});
test('when layout and align as property it returns with class', () => {
// Arrange
const { container } = render(<Divider layout={'vertical'} align={'center'} />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-center').length).toBe(1);
});
test('when layout and align as property it returns with class', () => {
// Arrange
const { container } = render(<Divider layout={'vertical'} align={'top'} />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-top').length).toBe(1);
});
test('when layout and align as property it returns with class', () => {
// Arrange
const { container } = render(<Divider layout={'vertical'} align={'bottom'} />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-vertical p-divider-bottom').length).toBe(1);
});

test('when type has no property it returns with the default class', () => {
// Arrange
const { container } = render(<Divider />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-solid').length).toBe(1);
});
test('when type is dashed it is styled as a dashed line', () => {
// Arrange
const { container } = render(<Divider type={'dashed'} />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-dashed').length).toBe(1);
});
test('when type is dotted is is styled as a dotted line', () => {
// Arrange
const { container } = render(<Divider type={'dotted'} />);

// Act + Assert
expect(container.getElementsByClassName('p-divider p-component p-divider-dotted').length).toBe(1);
const snapshot = (props, name) => expect(render(<Divider {...props} />).container).toMatchSnapshot(name);

describe('Divider Snapshot', () => {
test('check snapshots', () => {
snapshot({}, 'default');
snapshot({ layout: 'horizontal', align: 'left' }, 'horizontal left');
snapshot({ layout: 'horizontal', align: 'right' }, 'horizontal right');
snapshot({ layout: 'horizontal', align: 'center' }, 'horizontal center');
snapshot({ layout: 'vertical', align: 'center' }, 'vertical center');
snapshot({ layout: 'vertical', align: 'top' }, 'vertical top');
snapshot({ layout: 'vertical', align: 'bottom' }, 'vertical bottom');
snapshot({ type: 'dashed' }, 'dashed');
snapshot({ type: 'dotted' }, 'dotted');
});
});
118 changes: 118 additions & 0 deletions components/lib/divider/__snapshots__/Divider.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Divider Snapshot check snapshots: dashed 1`] = `
<div>
<div
class="p-divider p-component p-divider-horizontal p-divider-dashed p-divider-left"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

exports[`Divider Snapshot check snapshots: default 1`] = `
<div>
<div
class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

exports[`Divider Snapshot check snapshots: dotted 1`] = `
<div>
<div
class="p-divider p-component p-divider-horizontal p-divider-dotted p-divider-left"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

exports[`Divider Snapshot check snapshots: horizontal center 1`] = `
<div>
<div
class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-center"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

exports[`Divider Snapshot check snapshots: horizontal left 1`] = `
<div>
<div
class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

exports[`Divider Snapshot check snapshots: horizontal right 1`] = `
<div>
<div
class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-right"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

exports[`Divider Snapshot check snapshots: vertical bottom 1`] = `
<div>
<div
class="p-divider p-component p-divider-vertical p-divider-solid p-divider-bottom"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

exports[`Divider Snapshot check snapshots: vertical center 1`] = `
<div>
<div
class="p-divider p-component p-divider-vertical p-divider-solid p-divider-center"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

exports[`Divider Snapshot check snapshots: vertical top 1`] = `
<div>
<div
class="p-divider p-component p-divider-vertical p-divider-solid p-divider-top"
role="separator"
>
<div
class="p-divider-content"
/>
</div>
</div>
`;

0 comments on commit 0f20078

Please sign in to comment.