@aarhus-university/au-lib-react-components 11.3.2 → 11.4.0

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

package/__tests__/jest/AUSpinnerComponent.test.tsx

@@ -1,57 +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');
-  });
-});
+/* 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

@@ -1,46 +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);
-  });
-});
+/* 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);
+  });
+});

package/__tests__/jest/context.test.ts

@@ -1,25 +1,25 @@
-import { getPortalByName } from '../../src/lib/portals';
-
-describe('Context', () => {
-  test('Mitstudie findes som portal', () => {
-    const portal = getPortalByName('da', 'mitstudie');
-    expect(portal?.name).toBe('mitstudie');
-  });
-
-  test('Mitstudie portalcontexten indeholder én impersonation option', () => {
-    const portal = getPortalByName('da', 'mitstudie');
-    expect(portal?.impersonationOptions.length).toBe(1);
-  });
-
-  test('Mitstudie portalcontextens ene impersonation option hedder "AU-id" på dansk og "AU ID" på engelsk', () => {
-    const danish = getPortalByName('da', 'mitstudie');
-    expect(danish?.impersonationOptions[0].label).toBe('AU-id');
-    const english = getPortalByName('en', 'mitstudie');
-    expect(english?.impersonationOptions[0].label).toBe('AU ID');
-  });
-
-  test('Portalcontexten "sfgsdfsdfsdf" findes ikke', () => {
-    const portal = getPortalByName('da', 'sfgsdfsdfsdf');
-    expect(portal).toBe(null);
-  });
-});
+import { getPortalByName } from '../../src/lib/portals';
+
+describe('Context', () => {
+  test('Mitstudie findes som portal', () => {
+    const portal = getPortalByName('da', 'mitstudie');
+    expect(portal?.name).toBe('mitstudie');
+  });
+
+  test('Mitstudie portalcontexten indeholder én impersonation option', () => {
+    const portal = getPortalByName('da', 'mitstudie');
+    expect(portal?.impersonationOptions.length).toBe(1);
+  });
+
+  test('Mitstudie portalcontextens ene impersonation option hedder "AU-id" på dansk og "AU ID" på engelsk', () => {
+    const danish = getPortalByName('da', 'mitstudie');
+    expect(danish?.impersonationOptions[0].label).toBe('AU-id');
+    const english = getPortalByName('en', 'mitstudie');
+    expect(english?.impersonationOptions[0].label).toBe('AU ID');
+  });
+
+  test('Portalcontexten "sfgsdfsdfsdf" findes ikke', () => {
+    const portal = getPortalByName('da', 'sfgsdfsdfsdf');
+    expect(portal).toBe(null);
+  });
+});

package/__tests__/jest/helpers.test.ts

@@ -1,15 +1,15 @@
-import { countryCodes } from '../../src/lib/i18n';
-import { prettyPrintPhone } from '../../src/lib/helpers';
-
-describe('Helpers', () => {
-  test('Telefonnummer med landekode', () => {
-    let phone = '+4525327240';
-    expect(prettyPrintPhone(countryCodes, phone)).toBe('+45 25 32 72 40');
-
-    phone = '+96178917075';
-    expect(prettyPrintPhone(countryCodes, phone)).toBe('+961 78 91 70 75');
-
-    phone = '25327240';
-    expect(prettyPrintPhone([], phone)).toBe('25 32 72 40');
-  });
-});
+import { countryCodes } from '../../src/lib/i18n';
+import { prettyPrintPhone } from '../../src/lib/helpers';
+
+describe('Helpers', () => {
+  test('Telefonnummer med landekode', () => {
+    let phone = '+4525327240';
+    expect(prettyPrintPhone(countryCodes, phone)).toBe('+45 25 32 72 40');
+
+    phone = '+96178917075';
+    expect(prettyPrintPhone(countryCodes, phone)).toBe('+961 78 91 70 75');
+
+    phone = '25327240';
+    expect(prettyPrintPhone([], phone)).toBe('25 32 72 40');
+  });
+});

package/__tests__/jest/setupTests.ts

@@ -1,2 +1,2 @@
-import 'regenerator-runtime/runtime';
-import 'whatwg-fetch';
+import 'regenerator-runtime/runtime';
+import 'whatwg-fetch';

package/babel.config.js

@@ -1,8 +1,8 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-    '@babel/react',
-    '@babel/preset-typescript',
-  ],
-  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-optional-chaining'],
-};
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/react',
+    '@babel/preset-typescript',
+  ],
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-optional-chaining'],
+};