test: create tests for InformationModal component (#639)

ita-social-projects · Oct 29, 2021 · b13e519 · b13e519
1 parent 411276d
commit b13e519
Show file tree

Hide file tree

Showing 2 changed files with 287 additions and 0 deletions.
diff --git a/src/old/lib/components/Modals/InformationModal.test.tsx b/src/old/lib/components/Modals/InformationModal.test.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  InformationModal,
+  IConfirmationModalWithButtonProps,
+} from './InformationModal';
+
+const PROPS_MOCK: IConfirmationModalWithButtonProps = {
+  message: 'Test Message',
+  buttonText: 'Ok',
+  buttonIcon: <div>Close Icon</div>,
+  loading: true,
+  disabled: false,
+};
+
+const renderModal = () => {
+  render(
+    <InformationModal
+      message={PROPS_MOCK.message}
+      buttonIcon={PROPS_MOCK.buttonIcon}
+      buttonText={PROPS_MOCK.buttonText}
+    />,
+  );
+};
+
+describe('InformationModal', () => {
+  beforeEach(() => renderModal());
+  it('render component and match snapshot', () => {
+    const { asFragment } = render(
+      <InformationModal
+        message={PROPS_MOCK.message}
+        buttonIcon={PROPS_MOCK.buttonIcon}
+        buttonText={PROPS_MOCK.buttonText}
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('render close button', () => {
+    expect(screen.getAllByRole('button')[0]).toHaveTextContent('Close Icon');
+  });
+  it('render Ok button', () => {
+    expect(screen.getAllByRole('button')[1]).toHaveTextContent('Ok');
+  });
+});
+
+describe('InformationModal events', () => {
+  it('should closes when close button is clicked', () => {
+    const { asFragment } = render(
+      <InformationModal
+        buttonIcon={PROPS_MOCK.buttonIcon}
+        message={PROPS_MOCK.message}
+        buttonText={PROPS_MOCK.buttonText}
+      />,
+    );
+    const closeBtn = screen.getByText('Close Icon');
+    userEvent.click(closeBtn);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should closes when Ok button is clicked', () => {
+    const { asFragment } = render(
+      <InformationModal
+        buttonIcon={PROPS_MOCK.buttonIcon}
+        message={PROPS_MOCK.message}
+        buttonText={PROPS_MOCK.buttonText}
+      />,
+    );
+    const closeBtn = screen.getByText('Ok');
+    userEvent.click(closeBtn);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('InformationModal loading status', () => {
+  it('render with loading icon', () => {
+    const { asFragment } = render(
+      <InformationModal
+        message={PROPS_MOCK.message}
+        buttonIcon={PROPS_MOCK.buttonIcon}
+        buttonText={PROPS_MOCK.buttonText}
+        loading
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/src/old/lib/components/Modals/__snapshots__/InformationModal.test.tsx.snap b/src/old/lib/components/Modals/__snapshots__/InformationModal.test.tsx.snap
@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InformationModal events should closes when Ok button is clicked 1`] = `
+<DocumentFragment>
+  <div>
+    <button
+      class="MuiButtonBase-root MuiIconButton-root"
+      style="padding: 0px;"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <div>
+          Close Icon
+        </div>
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiButton-label"
+      >
+        Ok
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      >
+        <span
+          class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
+          style="width: 2.8284271247461903px; height: 2.8284271247461903px; top: -1.4142135623730951px; left: -1.4142135623730951px;"
+        >
+          <span
+            class="MuiTouchRipple-child MuiTouchRipple-childLeaving"
+          />
+        </span>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`InformationModal events should closes when close button is clicked 1`] = `
+<DocumentFragment>
+  <div>
+    <button
+      class="MuiButtonBase-root MuiIconButton-root"
+      style="padding: 0px;"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <div>
+          Close Icon
+        </div>
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      >
+        <span
+          class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
+          style="width: 1px; height: 1px; top: -0.5px; left: -0.5px;"
+        >
+          <span
+            class="MuiTouchRipple-child MuiTouchRipple-childLeaving"
+          />
+        </span>
+      </span>
+    </button>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiButton-label"
+      >
+        Ok
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`InformationModal loading status render with loading icon 1`] = `
+<DocumentFragment>
+  <div>
+    <button
+      class="MuiButtonBase-root MuiIconButton-root Mui-disabled Mui-disabled"
+      disabled=""
+      style="padding: 0px;"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <div
+          class="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+          role="progressbar"
+          style="width: 20px; height: 20px;"
+        >
+          <svg
+            class="MuiCircularProgress-svg"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </div>
+      </span>
+    </button>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained Mui-disabled Mui-disabled"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        class="MuiButton-label"
+      >
+        <div
+          class="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+          role="progressbar"
+          style="width: 20px; height: 20px;"
+        >
+          <svg
+            class="MuiCircularProgress-svg"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </div>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`InformationModal render component and match snapshot 1`] = `
+<DocumentFragment>
+  <div>
+    <button
+      class="MuiButtonBase-root MuiIconButton-root"
+      style="padding: 0px;"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <div>
+          Close Icon
+        </div>
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiButton-label"
+      >
+        Ok
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;