Fix #3606: ProgressBar/Spinner jest tests (#3607)

components/lib/button/Button.spec.js

@@ -1,8 +1,8 @@
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { Button } from './Button';
-
 import { snapshot } from '../../test';
+import PrimeReact from '../api/PrimeReact';
+import { Button } from './Button';
 
 describe('Button', () => {
     snapshot(<Button label={'test'} visible={false} />, 'when visible is false Button return null');
@@ -17,6 +17,12 @@ describe('Button', () => {
     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');
+    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" />);
@@ -51,7 +57,6 @@ describe('Button', () => {
         expect(button).toBeEnabled();
         expect(clickOn).toHaveBeenCalledTimes(1);
     });
-
     test('when button is disabled the click event should not fire', () => {
         // Arrange
         const clickOn = jest.fn();
@@ -65,4 +70,20 @@ describe('Button', () => {
         expect(button).toBeDisabled();
         expect(clickOn).toHaveBeenCalledTimes(0);
     });
+    test('when Ripple is enabled button should have ripple effect', () => {
+        // Arrange
+        const clickOn = jest.fn();
+
+        PrimeReact.ripple = true;
+        const { container } = render(<Button onClick={clickOn} />);
+        const button = container.getElementsByClassName('p-button')[0];
+
+        // Act
+        fireEvent.click(button);
+
+        // Assert
+        expect(button).toBeEnabled();
+        expect(clickOn).toHaveBeenCalledTimes(1);
+        expect(container).toMatchSnapshot();
+    });
 });

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

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Button when Ripple is enabled button should have ripple effect 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+    <span
+      class="p-ink"
+      role="presentation"
+    />
+  </button>
+</div>
+`;
+
 exports[`Button when aria-label prop is not exist aria-label prop should be equal to label prop  1`] = `
 <div>
   <button
@@ -158,6 +176,26 @@ exports[`Button when using badge and label the aria-label should contain both va
 </div>
 `;
 
+exports[`Button when using badge and label the aria-label should contain both values 2`] = `
+<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`] = `

components/lib/progressbar/ProgressBar.spec.js

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { snapshot } from '../../test';
+import { ProgressBar } from './ProgressBar';
+
+describe('ProgressBar', () => {
+    snapshot(<ProgressBar />, 'default');
+    snapshot(<ProgressBar value={50} />, 'value');
+    snapshot(<ProgressBar value={50} showValue={false} />, 'hide value');
+    snapshot(<ProgressBar value={50} unit="%" />, 'value with unit');
+    snapshot(<ProgressBar mode="determinate" value={20} />, 'mode determinate');
+    snapshot(<ProgressBar mode="indeterminate" style={{ height: '6px' }} />, 'mode indeterminate');
+    test('when mode is invalid throws exception', () => {
+        try {
+            const { container } = render(<ProgressBar mode="invalid" value={20} />);
+        } catch (error) {
+            expect(error.toString().startsWith("Error: invalid is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'")).toBeTruthy();
+        }
+    });
+});

components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar default 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    class="p-progressbar p-component p-progressbar-determinate"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      style="display: flex;"
+    />
+  </div>
+</div>
+`;
+
+exports[`ProgressBar hide value 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="p-progressbar p-component p-progressbar-determinate"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      style="width: 50%; display: flex;"
+    />
+  </div>
+</div>
+`;
+
+exports[`ProgressBar mode determinate 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="20"
+    class="p-progressbar p-component p-progressbar-determinate"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      style="width: 20%; display: flex;"
+    >
+      <div
+        class="p-progressbar-label"
+      >
+        20%
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressBar mode indeterminate 1`] = `
+<div>
+  <div
+    class="p-progressbar p-component p-progressbar-indeterminate"
+    role="progressbar"
+    style="height: 6px;"
+  >
+    <div
+      class="p-progressbar-indeterminate-container"
+    >
+      <div
+        class="p-progressbar-value p-progressbar-value-animate"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressBar value 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="p-progressbar p-component p-progressbar-determinate"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      style="width: 50%; display: flex;"
+    >
+      <div
+        class="p-progressbar-label"
+      >
+        50%
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressBar value with unit 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="p-progressbar p-component p-progressbar-determinate"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      style="width: 50%; display: flex;"
+    >
+      <div
+        class="p-progressbar-label"
+      >
+        50%
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/lib/progressspinner/ProgressSpinner.spec.js

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom';
+import { ProgressSpinner } from './ProgressSpinner';
+
+import { snapshot } from '../../test';
+
+describe('ProgressSpinner', () => {
+    snapshot(<ProgressSpinner />, 'default');
+    snapshot(<ProgressSpinner strokeWidth="3" />, 'strokeWidth');
+    snapshot(<ProgressSpinner fill="green" />, 'fill');
+    snapshot(<ProgressSpinner animationDuration="5s" />, 'animationDuration');
+});

components/lib/progressspinner/__snapshots__/ProgressSpinner.spec.js.snap

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressSpinner animationDuration 1`] = `
+<div>
+  <div
+    aria-busy="true"
+    class="p-progress-spinner"
+    role="alert"
+  >
+    <svg
+      class="p-progress-spinner-svg"
+      style="animation-duration: 5s;"
+      viewBox="25 25 50 50"
+    >
+      <circle
+        class="p-progress-spinner-circle"
+        cx="50"
+        cy="50"
+        fill="none"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="2"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`ProgressSpinner default 1`] = `
+<div>
+  <div
+    aria-busy="true"
+    class="p-progress-spinner"
+    role="alert"
+  >
+    <svg
+      class="p-progress-spinner-svg"
+      style="animation-duration: 2s;"
+      viewBox="25 25 50 50"
+    >
+      <circle
+        class="p-progress-spinner-circle"
+        cx="50"
+        cy="50"
+        fill="none"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="2"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`ProgressSpinner fill 1`] = `
+<div>
+  <div
+    aria-busy="true"
+    class="p-progress-spinner"
+    role="alert"
+  >
+    <svg
+      class="p-progress-spinner-svg"
+      style="animation-duration: 2s;"
+      viewBox="25 25 50 50"
+    >
+      <circle
+        class="p-progress-spinner-circle"
+        cx="50"
+        cy="50"
+        fill="green"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="2"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`ProgressSpinner strokeWidth 1`] = `
+<div>
+  <div
+    aria-busy="true"
+    class="p-progress-spinner"
+    role="alert"
+  >
+    <svg
+      class="p-progress-spinner-svg"
+      style="animation-duration: 2s;"
+      viewBox="25 25 50 50"
+    >
+      <circle
+        class="p-progress-spinner-circle"
+        cx="50"
+        cy="50"
+        fill="none"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="3"
+      />
+    </svg>
+  </div>
+</div>
+`;