improve snapshot tests (#3597)

primefaces · Nov 9, 2022 · 68563c3 · 68563c3
1 parent c19f969
commit 68563c3
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 136 deletions.
diff --git a/components/lib/badge/Badge.spec.js b/components/lib/badge/Badge.spec.js
@@ -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');
+    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');
 });
diff --git a/components/lib/badge/__snapshots__/Badge.spec.js.snap b/components/lib/badge/__snapshots__/Badge.spec.js.snap
@@ -1,78 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Badge check snapshots: default 1`] = `
+exports[`Badge default 1`] = `
 <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"

diff --git a/components/lib/button/Button.spec.js b/components/lib/button/Button.spec.js
@@ -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');
     test('when using tooltip make sure the tooltip is rendered', async () => {
         // Arrange
         const { container } = render(<Button label={'test'} tooltip="Jest Tooltip" />);

diff --git a/components/lib/chip/Chip.spec.js b/components/lib/chip/Chip.spec.js
@@ -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');
         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);
     });
 });
diff --git a/components/lib/chip/__snapshots__/Chip.spec.js.snap b/components/lib/chip/__snapshots__/Chip.spec.js.snap
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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>
+`;
+
+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>
+`;
diff --git a/components/lib/inputtext/InputText.spec.js b/components/lib/inputtext/InputText.spec.js
@@ -27,7 +27,6 @@ describe('InputText', () => {
 
         // Act
         expect(input).toBeEnabled();
-        expect(input).not.toHaveClass('p-filled');
         expect(input).toHaveValue('');
         expect(container).toMatchSnapshot();
     });

diff --git a/components/lib/inputtextarea/InputTextarea.spec.js b/components/lib/inputtextarea/InputTextarea.spec.js
@@ -40,7 +40,6 @@ describe('InputTextarea', () => {
 
         // Act
         expect(input).toBeEnabled();
-        expect(input).not.toHaveClass('p-filled');
         expect(container).toMatchSnapshot();
     });
     test('when input is is set for validation only', async () => {

diff --git a/components/test/index.js b/components/test/index.js
@@ -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();
+    });
+}