Fix #3608: Ripple and Message jest tests (#3609)

components/lib/button/Button.spec.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { snapshot } from '../../test';
 import PrimeReact from '../api/PrimeReact';
 import { Button } from './Button';
@@ -44,33 +45,33 @@ describe('Button', () => {
         expect(screen.queryByText(tooltipText)).toBeNull();
     });
 
-    test('when button is clicked ensure onClick is fired', () => {
+    test('when button is clicked ensure onClick is fired', async () => {
         // Arrange
         const clickOn = jest.fn();
         const { container } = render(<Button onClick={clickOn} />);
         const button = container.getElementsByClassName('p-button')[0];
 
         // Act
-        fireEvent.click(button);
+        await userEvent.click(button);
 
         // Assert
         expect(button).toBeEnabled();
         expect(clickOn).toHaveBeenCalledTimes(1);
     });
-    test('when button is disabled the click event should not fire', () => {
+    test('when button is disabled the click event should not fire', async () => {
         // Arrange
         const clickOn = jest.fn();
         const { container } = render(<Button onClick={clickOn} disabled />);
         const button = container.getElementsByClassName('p-button')[0];
 
         // Act
-        fireEvent.click(button);
+        await userEvent.click(button);
 
         // Assert
         expect(button).toBeDisabled();
         expect(clickOn).toHaveBeenCalledTimes(0);
     });
-    test('when Ripple is enabled button should have ripple effect', () => {
+    test('when Ripple is enabled button should have ripple effect', async () => {
         // Arrange
         const clickOn = jest.fn();
 
@@ -79,7 +80,7 @@ describe('Button', () => {
         const button = container.getElementsByClassName('p-button')[0];
 
         // Act
-        fireEvent.click(button);
+        await userEvent.click(button);
 
         // Assert
         expect(button).toBeEnabled();

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

@@ -11,8 +11,9 @@ exports[`Button when Ripple is enabled button should have ripple effect 1`] = `
        
     </span>
     <span
-      class="p-ink"
+      class="p-ink p-ink-active"
       role="presentation"
+      style="height: 0px; width: 0px;"
     />
   </button>
 </div>

components/lib/message/Message.spec.js

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { Message } from './Message';
+
+import { snapshot } from '../../test';
+
+describe('Message', () => {
+    snapshot(<Message />, 'default');
+    snapshot(<Message severity="success" text="Jest" />, 'severity success');
+    snapshot(<Message severity="info" text="Jest" />, 'severity info');
+    snapshot(<Message severity="warn" text="Jest" />, 'severity warn');
+    snapshot(<Message severity="error" text="Jest" />, 'severity error');
+    snapshot(<Message icon="pi pi-check" />, 'icon');
+    snapshot(<Message content={<span>Test</span>} />, 'content');
+    snapshot(
+        <Message>
+            <span>Jester</span>
+        </Message>,
+        'templating'
+    );
+});

components/lib/message/__snapshots__/Message.spec.js.snap

@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message content 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info p-inline-message-icon-only"
+    role="alert"
+  >
+    <span>
+      Test
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message default 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info p-inline-message-icon-only"
+    role="alert"
+  >
+    <span
+      class="p-inline-message-icon pi pi-info-circle"
+    />
+    <span
+      class="p-inline-message-text"
+    />
+  </div>
+</div>
+`;
+
+exports[`Message icon 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info p-inline-message-icon-only"
+    role="alert"
+  >
+    <span
+      class="p-inline-message-icon pi pi-check"
+    />
+    <span
+      class="p-inline-message-text"
+    />
+  </div>
+</div>
+`;
+
+exports[`Message severity error 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-error"
+    role="alert"
+  >
+    <span
+      class="p-inline-message-icon pi pi-times-circle"
+    />
+    <span
+      class="p-inline-message-text"
+    >
+      Jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message severity info 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info"
+    role="alert"
+  >
+    <span
+      class="p-inline-message-icon pi pi-info-circle"
+    />
+    <span
+      class="p-inline-message-text"
+    >
+      Jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message severity success 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-success"
+    role="alert"
+  >
+    <span
+      class="p-inline-message-icon pi pi-check"
+    />
+    <span
+      class="p-inline-message-text"
+    >
+      Jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message severity warn 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-warn"
+    role="alert"
+  >
+    <span
+      class="p-inline-message-icon pi pi-exclamation-triangle"
+    />
+    <span
+      class="p-inline-message-text"
+    >
+      Jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message templating 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info p-inline-message-icon-only"
+    role="alert"
+  >
+    <span
+      class="p-inline-message-icon pi pi-info-circle"
+    />
+    <span
+      class="p-inline-message-text"
+    />
+  </div>
+</div>
+`;

components/lib/progressbar/ProgressBar.spec.js

@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
 import { snapshot } from '../../test';
 import { ProgressBar } from './ProgressBar';
 
@@ -10,11 +9,4 @@ describe('ProgressBar', () => {
     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/ripple/Ripple.spec.js

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { userAgent } from '../../test';
+import PrimeReact from '../api/PrimeReact';
+import { Button } from '../button/Button';
+
+describe('Ripple', () => {
+    test('when Ripple is enabled, button should have ripple effect on desktop device', async () => {
+        // Arrange
+        userAgent('Chrome');
+        PrimeReact.ripple = true;
+        const { container } = render(<Button />);
+        const button = container.getElementsByClassName('p-button')[0];
+
+        // Act
+        await userEvent.click(button);
+
+        // Assert
+        expect(button).toBeEnabled();
+        expect(container).toMatchSnapshot();
+    });
+
+    test('when Ripple is enabled, button should have ripple effect on touch device', async () => {
+        // Arrange
+        userAgent('iPhone');
+        PrimeReact.ripple = true;
+        const { container } = render(<Button />);
+        const button = container.getElementsByClassName('p-button')[0];
+
+        // Act
+        fireEvent.touchStart(button, { targetTouches: [{ pageX: '50', pageY: '50' }] });
+
+        // Assert
+        expect(button).toBeEnabled();
+        expect(container).toMatchSnapshot();
+    });
+});

components/lib/ripple/__snapshots__/Ripple.spec.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ripple when Ripple is enabled, button should have ripple effect on desktop device 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+    <span
+      class="p-ink p-ink-active"
+      role="presentation"
+      style="height: 0px; width: 0px;"
+    />
+  </button>
+</div>
+`;
+
+exports[`Ripple when Ripple is enabled, button should have ripple effect on touch device 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+  >
+    <span
+      class="p-button-label p-c"
+    >
+       
+    </span>
+    <span
+      class="p-ink p-ink-active"
+      role="presentation"
+      style="height: 0px; width: 0px;"
+    />
+  </button>
+</div>
+`;

components/test/index.js

@@ -1,8 +1,56 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 
+// Set the userAgent inside the navigator
+Object.defineProperty(
+    window.navigator,
+    'userAgent',
+    ((value) => ({
+        get() {
+            return value;
+        },
+        set(v) {
+            value = v;
+        }
+    }))(window.navigator.userAgent)
+);
+
+// Set the maxTouchPoints inside the navigator for touch devices
+Object.defineProperty(
+    window.navigator,
+    'maxTouchPoints',
+    ((value) => ({
+        get() {
+            return value;
+        },
+        set(v) {
+            value = v;
+        }
+    }))(window.navigator.maxTouchPoints)
+);
+
+/**
+ * Run a single snapshot test.
+ *
+ * @param {*} element the element to render
+ * @param {*} name the name of the test
+ */
 export function snapshot(element, name) {
     test(name, () => {
         expect(render(element).container).toMatchSnapshot();
     });
 }
+
+/**
+ * Sets the browser user agent so it can simulate browsers. If its IOS adds touch setting to allow DomUtils.isTouchDevice.
+ *
+ * @param {*} name the name of the user agent.
+ */
+export function userAgent(name) {
+    // Set the userAgent that you wanna test on your function
+    global.navigator.userAgent = name;
+
+    if (name.match(/iPhone|iPad|iPod/i)) {
+        global.navigator.maxTouchPoints = 2;
+    }
+}