Merge pull request #625 from open-formulieren/feature/471-summary-sto…

…ries

✅ Add stories for FormStepSummary component

src/components/FormStepSummary/FormStepSummary.stories.js

@@ -0,0 +1,66 @@
+import {expect} from '@storybook/jest';
+import {userEvent, within} from '@storybook/testing-library';
+import {withRouter} from 'storybook-addon-react-router-v6';
+
+import FormStepSummary from '.';
+
+export default {
+  title: 'Private API / FormStepSummary',
+  component: FormStepSummary,
+  decorators: [withRouter],
+  parameters: {
+    reactRouter: {
+      routePath: '/overzicht',
+    },
+  },
+  args: {
+    editUrl: '#',
+    name: 'Step title',
+    data: [
+      {
+        name: 'A field',
+        value: 'The field value',
+        component: {
+          type: 'textfield',
+          key: 'textfield',
+          label: 'A field',
+        },
+      },
+    ],
+    editStepText: 'Edit',
+  },
+};
+
+export const Default = {
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    await step('Accessible heading for step title', () => {
+      const stepTitle = canvas.getByRole('heading', {level: 2, name: 'Step title'});
+      expect(stepTitle).toBeVisible();
+    });
+
+    await step('Clickable link to edit step data', () => {
+      expect(canvas.getByRole('link', {name: 'Edit'})).toBeVisible();
+    });
+  },
+};
+
+export const NotEditable = {
+  args: {
+    editStepText: '',
+  },
+
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    await step('Accessible heading for step title', () => {
+      const stepTitle = canvas.getByRole('heading', {level: 2, name: 'Step title'});
+      expect(stepTitle).toBeVisible();
+    });
+
+    await step('No link to edit step data', () => {
+      expect(canvas.queryByRole('link')).not.toBeInTheDocument();
+    });
+  },
+};