@aarhus-university/au-lib-react-components 12.5.1 → 12.6.1

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);
+  });
+});

package/__tests__/jest/AUNotificationComponent.test.tsx

@@ -1,115 +1,115 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { render } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import AUNotificationComponent from '../../src/components/AUNotificationComponent';
-import AUButtonComponent from '../../src/components/AUButtonComponent';
-
-describe('<AUNotificationComponent />', () => {
-  it('renders a notification without a header but with a paragraph', () => {
-    const { container } = render(
-      <AUNotificationComponent
-        content={[
-          <p>This is a notification</p>,
-        ]}
-      />,
-    );
-
-    expect(container).toBeInTheDocument();
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('p');
-    expect(header).toBe(null);
-    expect(p?.innerHTML).toBe('This is a notification');
-  });
-
-  it('renders a notification with a header and three paragraphs', () => {
-    const { container } = render(
-      <AUNotificationComponent
-        header="This is a header"
-        content={[
-          <p>This is a notification</p>,
-          <p>With multiple paragraphs</p>,
-          <p>Awesome sauce</p>,
-        ]}
-      />,
-    );
-
-    expect(container).toBeInTheDocument();
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelectorAll('p');
-    expect(header?.innerHTML).toBe('This is a header');
-    expect(p.length).toBe(3);
-  });
-
-  it('renders a notification with an action', () => {
-    const { container } = render(
-      <AUNotificationComponent
-        header="This is a header"
-        content={[
-          <p>This is a notification</p>,
-        ]}
-        actions={[
-          <AUButtonComponent label="Action button" />,
-        ]}
-      />,
-    );
-
-    const actions = container.querySelector('.notification__actions');
-    expect(actions).toBeInTheDocument();
-  });
-
-  it('renders a warning notification', () => {
-    const { container } = render(
-      <AUNotificationComponent
-        type="warning"
-        header="This is a header"
-        content={[
-          <p>This is a notification</p>,
-        ]}
-        actions={[
-          <AUButtonComponent label="Action button" />,
-        ]}
-      />,
-    );
-
-    const actions = container.querySelector('.notification--warning');
-    expect(actions).toBeInTheDocument();
-  });
-
-  it('renders a attention notification', () => {
-    const { container } = render(
-      <AUNotificationComponent
-        type="attention"
-        header="This is a header"
-        content={[
-          <p>This is a notification</p>,
-        ]}
-        actions={[
-          <AUButtonComponent label="Action button" />,
-        ]}
-      />,
-    );
-
-    const actions = container.querySelector('.notification--attention');
-    expect(actions).toBeInTheDocument();
-  });
-
-  it('renders a confirm notification', () => {
-    const { container } = render(
-      <AUNotificationComponent
-        type="confirm"
-        header="This is a header"
-        content={[
-          <p>This is a notification</p>,
-        ]}
-        actions={[
-          <AUButtonComponent label="Action button" />,
-        ]}
-      />,
-    );
-
-    const actions = container.querySelector('.notification--confirm');
-    expect(actions).toBeInTheDocument();
-  });
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUNotificationComponent from '../../src/components/AUNotificationComponent';
+import AUButtonComponent from '../../src/components/AUButtonComponent';
+
+describe('<AUNotificationComponent />', () => {
+  it('renders a notification without a header but with a paragraph', () => {
+    const { container } = render(
+      <AUNotificationComponent
+        content={[
+          <p>This is a notification</p>,
+        ]}
+      />,
+    );
+
+    expect(container).toBeInTheDocument();
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe('This is a notification');
+  });
+
+  it('renders a notification with a header and three paragraphs', () => {
+    const { container } = render(
+      <AUNotificationComponent
+        header="This is a header"
+        content={[
+          <p>This is a notification</p>,
+          <p>With multiple paragraphs</p>,
+          <p>Awesome sauce</p>,
+        ]}
+      />,
+    );
+
+    expect(container).toBeInTheDocument();
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelectorAll('p');
+    expect(header?.innerHTML).toBe('This is a header');
+    expect(p.length).toBe(3);
+  });
+
+  it('renders a notification with an action', () => {
+    const { container } = render(
+      <AUNotificationComponent
+        header="This is a header"
+        content={[
+          <p>This is a notification</p>,
+        ]}
+        actions={[
+          <AUButtonComponent label="Action button" />,
+        ]}
+      />,
+    );
+
+    const actions = container.querySelector('.notification__actions');
+    expect(actions).toBeInTheDocument();
+  });
+
+  it('renders a warning notification', () => {
+    const { container } = render(
+      <AUNotificationComponent
+        type="warning"
+        header="This is a header"
+        content={[
+          <p>This is a notification</p>,
+        ]}
+        actions={[
+          <AUButtonComponent label="Action button" />,
+        ]}
+      />,
+    );
+
+    const actions = container.querySelector('.notification--warning');
+    expect(actions).toBeInTheDocument();
+  });
+
+  it('renders a attention notification', () => {
+    const { container } = render(
+      <AUNotificationComponent
+        type="attention"
+        header="This is a header"
+        content={[
+          <p>This is a notification</p>,
+        ]}
+        actions={[
+          <AUButtonComponent label="Action button" />,
+        ]}
+      />,
+    );
+
+    const actions = container.querySelector('.notification--attention');
+    expect(actions).toBeInTheDocument();
+  });
+
+  it('renders a confirm notification', () => {
+    const { container } = render(
+      <AUNotificationComponent
+        type="confirm"
+        header="This is a header"
+        content={[
+          <p>This is a notification</p>,
+        ]}
+        actions={[
+          <AUButtonComponent label="Action button" />,
+        ]}
+      />,
+    );
+
+    const actions = container.querySelector('.notification--confirm');
+    expect(actions).toBeInTheDocument();
+  });
+});