Snapshot testing updates (#3585)

components/lib/button/Button.spec.js

@@ -8,105 +8,95 @@ describe('Button', () => {
         const { container } = render(<Button label={'test'} visible={false} />);
 
         // Act + Assert
-        expect(container.getElementsByClassName('p-button').length).toBe(0);
+        expect(container).toMatchSnapshot();
     });
 
     test('when visible is true Button render correctly', () => {
         // Arrange
         const { container } = render(<Button label={'test'} visible={true} />);
 
         // Act + Assert
-        expect(container.getElementsByClassName('p-button').length).toBe(1);
+        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.getElementsByClassName('p-button-vertical').length).toBe(1);
+        expect(container).toMatchSnapshot();
     });
 
     test('when label is empty it returns empty button', async () => {
         // Arrange
         const { container } = render(<Button visible={true} />);
 
         // Act + Assert
-        const button = container.getElementsByClassName('p-button-label p-c');
-
-        expect(button[0].innerHTML).toBe('&nbsp;');
+        expect(container).toMatchSnapshot();
     });
 
     test('when badge is true it renders Button with badge', () => {
         // Arrange
         const { container } = render(<Button badge={'test'} />);
 
         // Act + Assert
-        expect(container.getElementsByClassName('p-badge').length).toBe(1);
+        expect(container).toMatchSnapshot();
     });
 
     test('when badge is null it renders Button without badge', () => {
         // Arrange
         const { container } = render(<Button />);
 
         // Act + Assert
-        expect(container.getElementsByClassName('p-badge').length).toBe(0);
+        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.getElementsByClassName('p-button-icon').length).toBe(1);
+        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.getElementsByClassName('p-button-loading-icon').length).toBe(0);
+        expect(container).toMatchSnapshot();
     });
 
     test('when label is true it renders Button with default aria label', () => {
         // Arrange
         const { container } = render(<Button />);
 
         // Act + Assert
-        const hasAriaLabel = container.getElementsByClassName('p-button')[0].getAttribute('aria-label');
-
-        expect(hasAriaLabel).toBe(null);
+        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
-        const getAriaLabel = container.getElementsByClassName('p-button')[0].getAttribute('aria-label');
-
-        expect(getAriaLabel).toBe('test');
+        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
-        const getAriaLabel = container.getElementsByClassName('p-button')[0].getAttribute('aria-label');
-
-        expect(getAriaLabel).toBe('test');
+        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
-        const getAriaLabel = container.getElementsByClassName('p-button')[0].getAttribute('aria-label');
-
-        expect(getAriaLabel).toBe('test lost');
+        expect(container).toMatchSnapshot();
     });
 
     test('when using tooltip make sure the tooltip is rendered', async () => {
@@ -140,6 +130,7 @@ describe('Button', () => {
         fireEvent.click(button);
 
         // Assert
+        expect(button).toBeEnabled();
         expect(clickOn).toHaveBeenCalledTimes(1);
     });
 

components/lib/button/__snapshots__/Button.spec.js.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button when aria-label prop is not exist aria-label prop should be equal to label prop  1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when badge is null it renders Button without badge 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when badge is true it renders Button with badge 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+    <span
+      class="p-badge"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when click the button if loading is false it renders Button without loading icon 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when click the button if loading is true it renders Button with loading icon 1`] = `
+<div>
+  <button
+    class="p-button p-component p-button-icon-only p-disabled p-button-loading"
+    disabled=""
+  >
+    <span
+      class="p-button-icon p-c p-button-loading-icon pi pi-spinner pi-spin"
+    />
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when iconPos is bottom Button is vertical 1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="p-button p-component p-button-vertical"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when label is empty it returns empty button 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when label is true it renders Button with default aria label 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when label prop is not exist label prop should be equal to aria-label prop 1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when using badge and label the aria-label should contain both values 1`] = `
+<div>
+  <button
+    aria-label="test lost"
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+      test
+    </span>
+    <span
+      class="p-badge"
+    >
+      lost
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when visible is false Button return null 1`] = `<div />`;
+
+exports[`Button when visible is true Button render correctly 1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;

components/lib/inputtext/InputText.spec.js

@@ -14,8 +14,8 @@ describe('InputText', () => {
 
         // Act
         expect(input).toBeEnabled();
-        expect(input).toHaveClass('p-inputtext p-component p-filled');
         expect(input).toHaveValue('abc');
+        expect(container).toMatchSnapshot();
     });
     test('when input is blank it should not have filled state', () => {
         // Arrange
@@ -27,9 +27,9 @@ describe('InputText', () => {
 
         // Act
         expect(input).toBeEnabled();
-        expect(input).toHaveClass('p-inputtext p-component');
         expect(input).not.toHaveClass('p-filled');
         expect(input).toHaveValue('');
+        expect(container).toMatchSnapshot();
     });
     test('when input is is set for validation only', () => {
         // Arrange
@@ -40,21 +40,21 @@ describe('InputText', () => {
         fireEvent.input(input, { target: { value: 'def' } });
 
         // Act
-        expect(input).toBeEnabled();
-        expect(input).toHaveClass('p-inputtext p-component');
+        expect(container).toMatchSnapshot();
         expect(input).toHaveValue('def');
     });
-    test('when input is disabled it should render as disabled', () => {
+    test('when input is disabled it should render as disabled', async () => {
         // Arrange
         const { container } = render(<InputText disabled />);
         const input = container.getElementsByTagName('input')[0];
 
         // Act
-        fireEvent.input(input, { target: { value: '23' } });
+        await userEvent.type(input, '123');
 
         // Act
         expect(input).toBeDisabled();
-        expect(input).toHaveClass('p-inputtext p-component p-disabled');
+        expect(input).toHaveValue('');
+        expect(container).toMatchSnapshot();
     });
     test('when input is using keyfilter for integers accept integer input', async () => {
         // Arrange

components/lib/inputtext/__snapshots__/InputText.spec.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputText when input is blank it should not have filled state 1`] = `
+<div>
+  <input
+    class="p-inputtext p-component"
+  />
+</div>
+`;
+
+exports[`InputText when input is disabled it should render as disabled 1`] = `
+<div>
+  <input
+    class="p-inputtext p-component p-disabled"
+    disabled=""
+  />
+</div>
+`;
+
+exports[`InputText when input is enabled then input accepts data entry and have filled state 1`] = `
+<div>
+  <input
+    class="p-inputtext p-component p-filled"
+  />
+</div>
+`;
+
+exports[`InputText when input is is set for validation only 1`] = `
+<div>
+  <input
+    class="p-inputtext p-component p-filled"
+  />
+</div>
+`;

components/lib/inputtextarea/InputTextarea.js

@@ -131,5 +131,6 @@ InputTextarea.defaultProps = {
     onKeyUp: null,
     onPaste: null,
     tooltip: null,
-    tooltipOptions: null
+    tooltipOptions: null,
+    validateOnly: false
 };