Fix #3621: BlockUI Jest test (#3622)

* BlockUI Jest test

* BlockUI Jest test

components/doc/rating/templatedoc.js

@@ -11,78 +11,50 @@ export function TemplateDoc(props) {
     const code = {
         basic: `
 <Rating
-value={val}
-onChange={(e) => setVal(e.val)}
-cancelIcon={
-    <img src={"{contextPath}/images/rating/cancel.png"} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />
-}
-onIcon={
-    <img
-src={"{contextPath}/images/rating/custom-icon-active.png"}
-onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
-alt="custom-image-active"
-width="25px"
-height="25px"
-    />
-}
-offIcon={<img src={"{contextPath}/images/rating/custom-icon.png"} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />}
-    />
+    value={val}
+    onChange={(e) => setVal(e.value)}
+    cancelIcon={<img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />}
+    onIcon={<img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image-active" width="25px" height="25px" />}
+    offIcon={<img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />}
+/>
 `,
         javascript: `
 import { useState } from "react";
 import { Rating } from "primereact/rating";
 
-const [val, setVal] = useState(null);
-
 export default function TemplateDoc() {
+    const [val, setVal] = useState(null);
 
     return (
-<Rating
-value={val}
-onChange={(e) => setVal(e.val)}
-cancelIcon={
-    <img src={"{contextPath}/images/rating/cancel.png"} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />
-}
-onIcon={
-<img
-src={"{contextPath}/images/rating/custom-icon-active.png"}
-onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
-alt="custom-image-active"
-width="25px"
-height="25px"
-    />
-}
-offIcon={<img src={"{contextPath}/images/rating/custom-icon.png"} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />}
-    />
+        <Rating
+        value={val}
+        onChange={(e) => setVal(e.value)}
+        cancelIcon={<img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />}
+        onIcon={
+            <img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image-active" width="25px" height="25px" />
+        }
+        offIcon={<img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />}
+        />
     );
 }
         `,
         typescript: `
 import { useState } from "react";
 import { Rating, RatingChangeParams } from "primereact/rating";
 
-const [val, setVal] = useState<number>(0);
-
 export default function TemplateDoc() {
+    const [val, setVal] = useState<number>(0);
 
     return (
-<Rating
-value={val}
-onChange={(e : RatingChangeParams) => setVal(e.val)}
-cancelIcon={
-    <img src={"{contextPath}/images/rating/cancel.png"} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />
-}
-onIcon={
-<img
-src={"{contextPath}/images/rating/custom-icon-active.png"}
-onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
-alt="custom-image-active"
-width="25px"
-height="25px"
-    />
-}
-offIcon={<img src={"{contextPath}/images/rating/custom-icon.png"} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />}
-    />
+        <Rating
+        value={val}
+        onChange={(e) => setVal(e.value)}
+        cancelIcon={<img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-cancel-image" width="25px" height="25px" />}
+        onIcon={
+            <img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image-active" width="25px" height="25px" />
+        }
+        offIcon={<img src={'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt="custom-image" width="25px" height="25px" />}
+        />
     );
 }
     `

components/lib/blockui/BlockUI.spec.js

@@ -0,0 +1,69 @@
+import '@testing-library/jest-dom';
+import { act, render } from '@testing-library/react';
+import * as React from 'react';
+import { snapshotParent } from '../../test';
+import { Panel } from '../panel/Panel';
+import { BlockUI } from './BlockUI';
+
+describe('BlockUI', () => {
+    snapshotParent(<BlockUI blocked={true} fullScreen />, 'block fullscreen');
+    snapshotParent(
+        <BlockUI blocked={true}>
+            <Panel>blocked</Panel>
+        </BlockUI>,
+        'block panel'
+    );
+    snapshotParent(
+        <BlockUI blocked={false}>
+            <Panel>unblocked</Panel>
+        </BlockUI>,
+        'unblock panel'
+    );
+    test('block and unblock panel events', async () => {
+        // Arrange
+        const ref = React.createRef();
+        const { container } = render(
+            <BlockUI ref={ref} blocked={false}>
+                <Panel>unblocked</Panel>
+            </BlockUI>
+        );
+
+        // Act
+        act(() => {
+            ref.current.block();
+            ref.current.getElement();
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot('blocked-event');
+
+        // Act
+        act(() => {
+            ref.current.unblock();
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot('unblocked-event');
+    });
+    test('block and unblock fullscreen events', async () => {
+        // Arrange
+        const ref = React.createRef();
+        const { container } = render(<BlockUI ref={ref} blocked={false} fullScreen></BlockUI>);
+
+        // Act
+        act(() => {
+            ref.current.block();
+        });
+
+        // Assert
+        expect(container.parentElement).toMatchSnapshot('blocked-event-fullscreen');
+
+        // Act
+        act(() => {
+            ref.current.unblock();
+        });
+
+        // Assert
+        expect(container.parentElement).toMatchSnapshot('unblocked-event-fullscreen');
+    });
+});

components/lib/blockui/__snapshots__/BlockUI.spec.js.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockUI block and unblock fullscreen events: blocked-event-fullscreen 1`] = `
+<body
+  class="p-overflow-hidden"
+>
+  <div>
+    <div
+      class="p-blockui-container"
+    />
+  </div>
+  <div
+    class="p-blockui p-component-overlay p-component-overlay-enter p-blockui-document"
+    style="z-index: 3204;"
+  />
+</body>
+`;
+
+exports[`BlockUI block and unblock fullscreen events: unblocked-event-fullscreen 1`] = `
+<body
+  class="p-overflow-hidden"
+>
+  <div>
+    <div
+      class="p-blockui-container"
+    />
+  </div>
+  <div
+    class="p-blockui p-component-overlay p-component-overlay-enter p-blockui-document p-component-overlay-leave"
+    style="z-index: 3204;"
+  />
+</body>
+`;
+
+exports[`BlockUI block and unblock panel events: blocked-event 1`] = `
+<div>
+  <div
+    class="p-blockui-container"
+  >
+    <div
+      class="p-panel p-component"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="pr_id_3_header"
+        class="p-toggleable-content"
+        id="pr_id_3_content"
+        role="region"
+      >
+        <div
+          class="p-panel-content"
+        >
+          unblocked
+        </div>
+      </div>
+    </div>
+    <div
+      class="p-blockui p-component-overlay p-component-overlay-enter"
+      style="z-index: 2103;"
+    />
+  </div>
+</div>
+`;
+
+exports[`BlockUI block and unblock panel events: unblocked-event 1`] = `
+<div>
+  <div
+    class="p-blockui-container"
+  >
+    <div
+      class="p-panel p-component"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="pr_id_3_header"
+        class="p-toggleable-content"
+        id="pr_id_3_content"
+        role="region"
+      >
+        <div
+          class="p-panel-content"
+        >
+          unblocked
+        </div>
+      </div>
+    </div>
+    <div
+      class="p-blockui p-component-overlay p-component-overlay-enter p-component-overlay-leave"
+      style="z-index: 2103;"
+    />
+  </div>
+</div>
+`;
+
+exports[`BlockUI block fullscreen 1`] = `
+<body
+  class="p-overflow-hidden"
+>
+  <div>
+    <div
+      class="p-blockui-container"
+    />
+  </div>
+  <div
+    class="p-blockui p-component-overlay p-component-overlay-enter p-blockui-document"
+    style="z-index: 1101;"
+  />
+</body>
+`;
+
+exports[`BlockUI block panel 1`] = `
+<body
+  class=""
+>
+  <div>
+    <div
+      class="p-blockui-container"
+    >
+      <div
+        class="p-panel p-component"
+      >
+        <div
+          aria-hidden="false"
+          aria-labelledby="pr_id_1_header"
+          class="p-toggleable-content"
+          id="pr_id_1_content"
+          role="region"
+        >
+          <div
+            class="p-panel-content"
+          >
+            blocked
+          </div>
+        </div>
+      </div>
+      <div
+        class="p-blockui p-component-overlay p-component-overlay-enter"
+        style="z-index: 2102;"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`BlockUI unblock panel 1`] = `
+<body
+  class=""
+>
+  <div>
+    <div
+      class="p-blockui-container"
+    >
+      <div
+        class="p-panel p-component"
+      >
+        <div
+          aria-hidden="false"
+          aria-labelledby="pr_id_2_header"
+          class="p-toggleable-content"
+          id="pr_id_2_content"
+          role="region"
+        >
+          <div
+            class="p-panel-content"
+          >
+            unblocked
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;

components/test/index.js

@@ -41,6 +41,18 @@ export function snapshot(element, name) {
     });
 }
 
+/**
+ * Run a single snapshot test of the parent element.
+ *
+ * @param {*} element the element to render
+ * @param {*} name the name of the test
+ */
+export function snapshotParent(element, name) {
+    test(name, () => {
+        expect(render(element).container.parentElement).toMatchSnapshot();
+    });
+}
+
 /**
  * Sets the browser user agent so it can simulate browsers. If its IOS adds touch setting to allow DomUtils.isTouchDevice.
  *