@aarhus-university/au-lib-react-components 10.5.0 → 10.8.0

package/.eslintrc.js

@@ -29,5 +29,6 @@ module.exports = {
   ignorePatterns: ['stories'],
   globals: {
     AU: true,
+    $: true,
   },
 };

package/.storybook/main.js

@@ -1,8 +1,21 @@
+const path = require('path');
+
 module.exports = {
   "stories": ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
   "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
   "framework": "@storybook/react",
   core: {
     builder: "webpack5"
-  }
+  },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(ts|js)x?$/,
+      include: path.resolve(__dirname, '../node_modules/@aarhus-university/au-designsystem-delphinus/source'),
+      use: {
+        loader: 'babel-loader',
+      },
+    });
+    return config;
+    // return { ...config, module: { ...config.module, rules: custom.module.rules } };
+  },
 };

package/__tests__/jest/AUButtonComponent.test.tsx

@@ -44,18 +44,20 @@ describe('<AUButtonComponent />', () => {
     expect(button).toBeEnabled();
   });
 
-  it('renders a small dimmed button', () => {
+  it('renders a small dimmed button with an extra classname', () => {
     const { container } = render(
       <AUButtonComponent
         label="Min knap"
         size="small"
         type="dimmed"
+        classNames={['fubar']}
       />,
     );
 
     const classList = container?.querySelector('button')?.classList;
     expect(classList?.contains('button--small')).toBe(true);
     expect(classList?.contains('button--dimmed')).toBe(true);
+    expect(classList?.contains('fubar')).toBe(true);
   });
 
   it('renders a default sized text button with a narwhal icon to the right', () => {
@@ -75,7 +77,7 @@ describe('<AUButtonComponent />', () => {
     expect(classList?.contains('button--text')).toBe(true);
     expect(classList?.contains('button--icon')).toBe(true);
     expect(classList?.contains('button--icon--right')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
+    expect(button?.getAttribute('data-icon')).toBe('');
   });
 
   it('renders a button with a narwhal icon with a hidden label', () => {
@@ -91,7 +93,7 @@ describe('<AUButtonComponent />', () => {
     const classList = button?.classList;
     expect(classList?.contains('button--icon')).toBe(true);
     expect(classList?.contains('button--icon--hide-label')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
+    expect(button?.getAttribute('data-icon')).toBe('');
     expect(button?.getAttribute('title')).toBe('Min knap');
   });
 
@@ -124,7 +126,7 @@ describe('<AUButtonComponent />', () => {
     expect(classList?.contains('button--confirmable-action')).toBe(true);
     expect(classList?.contains('button--icon')).toBe(true);
     expect(classList?.contains('button--icon--hide-label')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
+    expect(button?.getAttribute('data-icon')).toBe('');
     expect(button?.getAttribute('title')).toBe('Min knap');
   });
 

package/__tests__/jest/AUModalComponent.test.tsx

@@ -0,0 +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)}
+      >
+        <div className="modal-view__body">
+          <h2 className="modal-view__header theme--dark">
+            Header
+          </h2>
+          <div className="modal-view__content">
+            <p>Content</p>
+          </div>
+        </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}
+        >
+          <div className="modal-view__body">
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </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}
+        >
+          <div className="modal-view__body">
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </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}
+        >
+          <div className="modal-view__body">
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </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}
+        >
+          <div className="modal-view__body">
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </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

@@ -0,0 +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('<AUNotification />', () => {
+  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();
+  });
+});

package/__tests__/jest/AUSpinnerComponent.test.tsx

@@ -0,0 +1,57 @@
+/* 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 AUSpinnerComponent from '../../src/components/AUSpinnerComponent';
+
+describe('<AUSpinnerComponent />', () => {
+  it('renders a loading animation', () => {
+    const { container } = render(
+      <AUSpinnerComponent loaded={false}>
+        <p>Child content</p>
+      </AUSpinnerComponent>,
+    );
+
+    const processing = container.querySelector('.processing-state');
+    expect(processing).toBeInTheDocument();
+  });
+
+  it('renders a loading animation in a box with a height of 40rem', () => {
+    const { container } = render(
+      <AUSpinnerComponent loaded={false} height="40rem" init="box">
+        <p>Child content</p>
+      </AUSpinnerComponent>,
+    );
+
+    const processing = container.querySelector('.processing-state--init-box');
+    expect(processing).toBeInTheDocument();
+    const style = getComputedStyle(processing as HTMLElement);
+    expect(style.minHeight).toBe('40rem');
+  });
+
+  it('renders a loading animation in a table with a height of 20rem', () => {
+    const { container } = render(
+      <AUSpinnerComponent loaded={false} height="20rem" init="table">
+        <p>Child content</p>
+      </AUSpinnerComponent>,
+    );
+
+    const processing = container.querySelector('.processing-state--init-table');
+    expect(processing).toBeInTheDocument();
+    const style = getComputedStyle(processing as HTMLElement);
+    expect(style.minHeight).toBe('20rem');
+  });
+
+  it('renders its child content when loaded', () => {
+    const { container } = render(
+      <AUSpinnerComponent loaded>
+        <p>Child content</p>
+      </AUSpinnerComponent>,
+    );
+
+    const child = container.querySelector('p');
+    expect(child).toBeInTheDocument();
+    expect(child?.innerHTML).toBe('Child content');
+  });
+});

package/__tests__/jest/AUToolbarComponent.test.tsx

@@ -0,0 +1,46 @@
+/* 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 AUToolbarComponent from '../../src/components/AUToolbarComponent';
+import AUButtonComponent from '../../src/components/AUButtonComponent';
+
+describe('<AUToolbarComponent />', () => {
+  it('renders a toolbar with a toggle button labeled "Muligheder" and no items', () => {
+    const { container } = render(
+      <AUToolbarComponent lang="da" elements={[]} />,
+    );
+
+    const toolbar = container.querySelector('.toolbar');
+    const toggle = toolbar?.querySelector('.toolbar__toggle');
+    const itemsContainer = toolbar?.querySelector('.toolbar__items');
+    const items = itemsContainer?.querySelectorAll('*');
+    expect(toolbar).toBeInTheDocument();
+    expect(toggle?.innerHTML).toBe('Muligheder');
+    expect(items?.length).toBe(0);
+  });
+
+  it('renders a toolbar with a toggle button labeled "Options" and five items', () => {
+    const { container } = render(
+      <AUToolbarComponent
+        lang="en"
+        elements={[
+          <AUButtonComponent label="First action" />,
+          <AUButtonComponent label="Second action" />,
+          <AUButtonComponent label="Third action" />,
+          <div className="toolbar__split" />,
+          <AUButtonComponent label="Fourth action" />,
+        ]}
+      />,
+    );
+
+    const toolbar = container.querySelector('.toolbar');
+    const toggle = toolbar?.querySelector('.toolbar__toggle');
+    const itemsContainer = toolbar?.querySelector('.toolbar__items');
+    const items = itemsContainer?.querySelectorAll('*');
+    expect(toolbar).toBeInTheDocument();
+    expect(toggle?.innerHTML).toBe('Options');
+    expect(items?.length).toBe(5);
+  });
+});