📝 [#3969] Stories for LoA overrides field

src/openforms/js/components/admin/form_design/authentication/LoAOverrideOption.mdx

@@ -0,0 +1,18 @@
+import {ArgTypes, Canvas, Meta} from '@storybook/addon-docs';
+
+import LoAOverrideOption from './LoAOverrideOption';
+import * as Stories from './LoAOverrideOption.stories';
+
+<Meta of={Stories} />
+
+# Form field
+
+Some authentication plugins offer the option of overriding the Level of Assurance (LoA) per form.
+This form field is visible if one of these plugins has been selected. It is then possible to select
+the new minimum desired LoA for a form.
+
+<Canvas of={Stories.Default} />
+
+### Props
+
+<ArgTypes of={LoAOverrideOption} />

src/openforms/js/components/admin/form_design/authentication/LoAOverrideOption.stories.js

@@ -0,0 +1,116 @@
+import {expect} from '@storybook/jest';
+import {within} from '@storybook/testing-library';
+
+import LoAOverrideOption from './LoAOverrideOption';
+
+export default {
+  title: 'Form design/ Authentication / LoA override option',
+  component: LoAOverrideOption,
+};
+
+export const Default = {
+  args: {
+    availableAuthPlugins: [
+      {
+        id: 'digid',
+        label: 'DigiD',
+        providesAuth: 'bsn',
+        supportsLoaOverride: true,
+        assuranceLevels: [
+          {
+            value: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport',
+            label: 'DigiD Basis',
+          },
+          {
+            value: 'urn:oasis:names:tc:SAML:2.0:ac:classes:MobileTwoFactorContract',
+            label: 'DigiD Midden',
+          },
+          {
+            value: 'urn:oasis:names:tc:SAML:2.0:ac:classes:Smartcard',
+            label: 'DigiD Substantieel',
+          },
+          {
+            value: 'urn:oasis:names:tc:SAML:2.0:ac:classes:SmartcardPKI',
+            label: 'DigiD Hoog',
+          },
+        ],
+      },
+      {
+        id: 'eidas',
+        label: 'eIDAS',
+        providesAuth: 'pseudo',
+        supportsLoaOverride: false,
+        assuranceLevels: [],
+      },
+    ],
+    selectedAuthPlugins: ['digid', 'eidas'],
+    authenticationBackendOptions: {
+      digid: {loa: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport'},
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const fieldLabel = canvas.queryByText('Minimale betrouwbaarheidsniveaus');
+
+    await expect(fieldLabel).toBeVisible();
+
+    const dropdowns = canvas.getAllByRole('combobox');
+
+    await expect(dropdowns.length).toEqual(1);
+  },
+};
+
+export const NoDigiDSelected = {
+  name: 'No DigiD selceted',
+  args: {
+    availableAuthPlugins: [
+      {
+        id: 'digid',
+        label: 'DigiD',
+        providesAuth: 'bsn',
+        supportsLoaOverride: true,
+        assuranceLevels: [
+          {
+            value: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport',
+            label: 'DigiD Basis',
+          },
+          {
+            value: 'urn:oasis:names:tc:SAML:2.0:ac:classes:MobileTwoFactorContract',
+            label: 'DigiD Midden',
+          },
+          {
+            value: 'urn:oasis:names:tc:SAML:2.0:ac:classes:Smartcard',
+            label: 'DigiD Substantieel',
+          },
+          {
+            value: 'urn:oasis:names:tc:SAML:2.0:ac:classes:SmartcardPKI',
+            label: 'DigiD Hoog',
+          },
+        ],
+      },
+      {
+        id: 'eidas',
+        label: 'eIDAS',
+        providesAuth: 'pseudo',
+        supportsLoaOverride: false,
+        assuranceLevels: [],
+      },
+    ],
+    selectedAuthPlugins: ['eidas'],
+    authenticationBackendOptions: {
+      digid: {loa: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport'},
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const fieldLabel = canvas.queryByText('Minimale betrouwbaarheidsniveaus');
+
+    await expect(fieldLabel).toBeNull();
+
+    const dropdowns = canvas.queryAllByRole('combobox');
+
+    await expect(dropdowns.length).toEqual(0);
+  },
+};