@aarhus-university/au-lib-react-components 11.5.1 → 11.6.1

package/__tests__/jest/AUErrorComponent.test.tsx

@@ -1,142 +1,142 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { render } from '@testing-library/react';
-import { SerializedError } from '@reduxjs/toolkit';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
-// import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import AUErrorComponent from '../../src/components/AUErrorComponent';
-
-const auError: AU.IError = {
-  header: 'Our own custom error',
-  message: 'With a nice header and descriptive error message',
-  status: 500,
-};
-
-const fetchError1: FetchBaseQueryError = {
-  status: 'FETCH_ERROR',
-  error: 'Sum Ting Wong',
-};
-
-const fetchError2: FetchBaseQueryError = {
-  status: 500,
-  data: {
-    status: 'Error',
-    message: 'Sum Ting Wong',
-  },
-};
-
-const serializedError: SerializedError = {
-  code: '500',
-  message: 'Sum Ting Wong',
-  name: 'Some kind of error',
-  stack: 'Some kind of stack trace',
-};
-
-describe('<AUErrorComponent />', () => {
-  it('renders an AU custom error without a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        error={auError}
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header).toBeInTheDocument();
-    expect(p?.innerHTML).toBe(auError.message);
-  });
-
-  it('renders an AU custom error with a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        error={auError}
-        withStatus
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    expect(header?.innerHTML).toBe(`${auError.status}: ${auError.header}`);
-  });
-
-  it('renders a fetch error without a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        fetchError={fetchError1}
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header).toBe(null);
-    expect(p?.innerHTML).toBe(fetchError1.error);
-  });
-
-  it('renders a fetch error with a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        fetchError={fetchError1}
-        withStatus
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header?.innerHTML).toBe(fetchError1.status);
-    expect(p?.innerHTML).toBe(fetchError1.error);
-  });
-
-  it('renders a fetch error with stringified text without a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        fetchError={fetchError2}
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header).toBe(null);
-    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
-  });
-
-  it('renders a fetch error with stringified text with a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        fetchError={fetchError2}
-        withStatus
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header?.innerHTML).toBe(`${fetchError2.status}`);
-    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
-  });
-
-  it('renders a serialized error with without a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        serializedError={serializedError}
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header).toBe(null);
-    expect(p?.innerHTML).toBe(serializedError.message);
-  });
-
-  it('renders a serialized error with a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        serializedError={serializedError}
-        withStatus
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header?.innerHTML).toBe(serializedError.code);
-    expect(p?.innerHTML).toBe(serializedError.message);
-  });
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUErrorComponent from '../../src/components/AUErrorComponent';
+
+const auError: AU.IError = {
+  header: 'Our own custom error',
+  message: 'With a nice header and descriptive error message',
+  status: 500,
+};
+
+const fetchError1: FetchBaseQueryError = {
+  status: 'FETCH_ERROR',
+  error: 'Sum Ting Wong',
+};
+
+const fetchError2: FetchBaseQueryError = {
+  status: 500,
+  data: {
+    status: 'Error',
+    message: 'Sum Ting Wong',
+  },
+};
+
+const serializedError: SerializedError = {
+  code: '500',
+  message: 'Sum Ting Wong',
+  name: 'Some kind of error',
+  stack: 'Some kind of stack trace',
+};
+
+describe('<AUErrorComponent />', () => {
+  it('renders an AU custom error without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        error={auError}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBeInTheDocument();
+    expect(p?.innerHTML).toBe(auError.message);
+  });
+
+  it('renders an AU custom error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        error={auError}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    expect(header?.innerHTML).toBe(`${auError.status}: ${auError.header}`);
+  });
+
+  it('renders a fetch error without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError1}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(fetchError1.error);
+  });
+
+  it('renders a fetch error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError1}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(fetchError1.status);
+    expect(p?.innerHTML).toBe(fetchError1.error);
+  });
+
+  it('renders a fetch error with stringified text without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError2}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
+  });
+
+  it('renders a fetch error with stringified text with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError2}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(`${fetchError2.status}`);
+    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
+  });
+
+  it('renders a serialized error with without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        serializedError={serializedError}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(serializedError.message);
+  });
+
+  it('renders a serialized error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        serializedError={serializedError}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(serializedError.code);
+    expect(p?.innerHTML).toBe(serializedError.message);
+  });
+});

package/__tests__/jest/AUModalComponent.test.tsx

@@ -1,186 +1,186 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, {
-  ReactNode, ReactPortal, useRef, useState,
-} from 'react';
-import ReactDOM from 'react-dom';
-import { fireEvent, render } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import AUModalComponent from '../../src/components/AUModalComponent';
-import AUButtonComponent from '../../src/components/AUButtonComponent';
-
-const ModalWrapper: React.FC = () => {
-  const [showModal, setShowModal] = useState(false);
-  const btnRef = useRef<HTMLButtonElement>(null);
-  return (
-    <>
-      <AUButtonComponent
-        label="Open modal"
-        btnRef={btnRef}
-        onClick={() => {
-          setShowModal(true);
-        }}
-      />
-      <AUModalComponent
-        domId="test-modal"
-        show={showModal}
-        sender={btnRef.current}
-        onClose={() => setShowModal(false)}
-      >
-        <>
-          <h2 className="modal-view__header theme--dark">
-            Header
-          </h2>
-          <div className="modal-view__content">
-            <p>Content</p>
-          </div>
-        </>
-      </AUModalComponent>
-    </>
-  );
-};
-
-describe('<AUModalComponent />', () => {
-  const fakeBtn = document.createElement('button');
-  const oldCreatePortal = ReactDOM.createPortal;
-  beforeAll(async () => {
-    ReactDOM.createPortal = (node: ReactNode): ReactPortal => node as ReactPortal;
-  });
-
-  afterAll(() => {
-    ReactDOM.createPortal = oldCreatePortal;
-  });
-  it('renders a visible modal view with some content', () => {
-    const { container } = render(
-      <div className="page">
-        <AUModalComponent
-          domId="test-modal"
-          show
-          sender={fakeBtn}
-        >
-          <>
-            <h2 className="modal-view__header theme--dark">
-              Header
-            </h2>
-            <div className="modal-view__content">
-              <p>Content</p>
-            </div>
-          </>
-        </AUModalComponent>
-      </div>,
-    );
-
-    const modal = container.querySelector('.modal-view.modal-view--visible');
-    expect(modal).toBeInTheDocument();
-  });
-
-  it('renders a modal view with domId "test-modal" but it is not visible', () => {
-    const { container } = render(
-      <div className="page">
-        <AUModalComponent
-          domId="test-modal"
-          show={false}
-          sender={fakeBtn}
-        >
-          <>
-            <h2 className="modal-view__header theme--dark">
-              Header
-            </h2>
-            <div className="modal-view__content">
-              <p>Content</p>
-            </div>
-          </>
-        </AUModalComponent>
-      </div>,
-    );
-
-    const modal = container.querySelector('#test-modal');
-    expect(modal).toBeInTheDocument();
-    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
-  });
-
-  it('renders a non-visible modal view until button is clicked', () => {
-    const { container, getByText } = render(
-      <div className="page">
-        <ModalWrapper />
-      </div>,
-    );
-
-    const modal = container.querySelector('.modal-view');
-    const btn = getByText('Open modal');
-    expect(modal).toBeInTheDocument();
-    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
-    fireEvent.click(btn);
-    expect(modal?.classList.contains('modal-view--visible')).toBe(true);
-  });
-
-  it('can be closed by clicking outside the modal', () => {
-    const { container } = render(
-      <div className="page">
-        <AUModalComponent
-          domId="test-modal"
-          show
-          sender={fakeBtn}
-        >
-          <>
-            <h2 className="modal-view__header theme--dark">
-              Header
-            </h2>
-            <div className="modal-view__content">
-              <p>Content</p>
-            </div>
-          </>
-        </AUModalComponent>
-      </div>,
-    );
-
-    const modal = container.querySelector('.modal-view.modal-view--visible');
-    expect(modal).toBeInTheDocument();
-    fireEvent.click(modal as HTMLElement);
-    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
-  });
-
-  it('can be closed by pressing ESC', () => {
-    const { container } = render(
-      <div className="page">
-        <AUModalComponent
-          domId="test-modal"
-          show
-          sender={fakeBtn}
-        >
-          <>
-            <h2 className="modal-view__header theme--dark">
-              Header
-            </h2>
-            <div className="modal-view__content">
-              <p>Content</p>
-            </div>
-          </>
-        </AUModalComponent>
-      </div>,
-    );
-
-    const modal = container.querySelector('.modal-view.modal-view--visible');
-    expect(modal).toBeInTheDocument();
-    fireEvent.keyUp(window, { key: 'Escape', code: 'Escape', charCode: 27 });
-    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
-  });
-
-  it('can be closed by clicking the close button', () => {
-    const { container, getByText } = render(
-      <div className="page">
-        <ModalWrapper />
-      </div>,
-    );
-
-    const modal = container.querySelector('.modal-view');
-    const btn = getByText('Open modal');
-    const closeBtn = container.querySelector('.modal-view__close');
-    expect(modal).toBeInTheDocument();
-    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
-    fireEvent.click(btn);
-    expect(modal?.classList.contains('modal-view--visible')).toBe(true);
-    fireEvent.click(closeBtn as HTMLButtonElement);
-    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
-  });
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, {
+  ReactNode, ReactPortal, useRef, useState,
+} from 'react';
+import ReactDOM from 'react-dom';
+import { fireEvent, render } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUModalComponent from '../../src/components/AUModalComponent';
+import AUButtonComponent from '../../src/components/AUButtonComponent';
+
+const ModalWrapper: React.FC = () => {
+  const [showModal, setShowModal] = useState(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  return (
+    <>
+      <AUButtonComponent
+        label="Open modal"
+        btnRef={btnRef}
+        onClick={() => {
+          setShowModal(true);
+        }}
+      />
+      <AUModalComponent
+        domId="test-modal"
+        show={showModal}
+        sender={btnRef.current}
+        onClose={() => setShowModal(false)}
+      >
+        <>
+          <h2 className="modal-view__header theme--dark">
+            Header
+          </h2>
+          <div className="modal-view__content">
+            <p>Content</p>
+          </div>
+        </>
+      </AUModalComponent>
+    </>
+  );
+};
+
+describe('<AUModalComponent />', () => {
+  const fakeBtn = document.createElement('button');
+  const oldCreatePortal = ReactDOM.createPortal;
+  beforeAll(async () => {
+    ReactDOM.createPortal = (node: ReactNode): ReactPortal => node as ReactPortal;
+  });
+
+  afterAll(() => {
+    ReactDOM.createPortal = oldCreatePortal;
+  });
+  it('renders a visible modal view with some content', () => {
+    const { container } = render(
+      <div className="page">
+        <AUModalComponent
+          domId="test-modal"
+          show
+          sender={fakeBtn}
+        >
+          <>
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </>
+        </AUModalComponent>
+      </div>,
+    );
+
+    const modal = container.querySelector('.modal-view.modal-view--visible');
+    expect(modal).toBeInTheDocument();
+  });
+
+  it('renders a modal view with domId "test-modal" but it is not visible', () => {
+    const { container } = render(
+      <div className="page">
+        <AUModalComponent
+          domId="test-modal"
+          show={false}
+          sender={fakeBtn}
+        >
+          <>
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </>
+        </AUModalComponent>
+      </div>,
+    );
+
+    const modal = container.querySelector('#test-modal');
+    expect(modal).toBeInTheDocument();
+    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
+  });
+
+  it('renders a non-visible modal view until button is clicked', () => {
+    const { container, getByText } = render(
+      <div className="page">
+        <ModalWrapper />
+      </div>,
+    );
+
+    const modal = container.querySelector('.modal-view');
+    const btn = getByText('Open modal');
+    expect(modal).toBeInTheDocument();
+    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
+    fireEvent.click(btn);
+    expect(modal?.classList.contains('modal-view--visible')).toBe(true);
+  });
+
+  it('can be closed by clicking outside the modal', () => {
+    const { container } = render(
+      <div className="page">
+        <AUModalComponent
+          domId="test-modal"
+          show
+          sender={fakeBtn}
+        >
+          <>
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </>
+        </AUModalComponent>
+      </div>,
+    );
+
+    const modal = container.querySelector('.modal-view.modal-view--visible');
+    expect(modal).toBeInTheDocument();
+    fireEvent.click(modal as HTMLElement);
+    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
+  });
+
+  it('can be closed by pressing ESC', () => {
+    const { container } = render(
+      <div className="page">
+        <AUModalComponent
+          domId="test-modal"
+          show
+          sender={fakeBtn}
+        >
+          <>
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </>
+        </AUModalComponent>
+      </div>,
+    );
+
+    const modal = container.querySelector('.modal-view.modal-view--visible');
+    expect(modal).toBeInTheDocument();
+    fireEvent.keyUp(window, { key: 'Escape', code: 'Escape', charCode: 27 });
+    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
+  });
+
+  it('can be closed by clicking the close button', () => {
+    const { container, getByText } = render(
+      <div className="page">
+        <ModalWrapper />
+      </div>,
+    );
+
+    const modal = container.querySelector('.modal-view');
+    const btn = getByText('Open modal');
+    const closeBtn = container.querySelector('.modal-view__close');
+    expect(modal).toBeInTheDocument();
+    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
+    fireEvent.click(btn);
+    expect(modal?.classList.contains('modal-view--visible')).toBe(true);
+    fireEvent.click(closeBtn as HTMLButtonElement);
+    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
+  });
+});