Badge and Chip snapshot tests

components/lib/badge/Badge.spec.js

@@ -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');
     });
 });

components/lib/badge/__snapshots__/Badge.spec.js.snap

@@ -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>
+`;

components/lib/chip/Chip.spec.js

@@ -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();
@@ -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();
@@ -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');
-    });
 });

components/lib/chip/__snapshots__/Chip.spec.js.snap

@@ -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>
+`;