Merge pull request #33 from open-formulieren/issue/#32-test-formio-co…

…mpatibility

Issue/#32 test formio compatibility

package.json

@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
+    "react-formio": "^4.3.0",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -84,5 +85,8 @@
   "dependencies": {
     "clsx": "^1.2.1",
     "formik": "^2.2.9"
+  },
+  "resolutions": {
+    "react-formio/formiojs": "~4.13.0"
   }
 }

src/components/columns/columns.component.tsx → src/components/formio/columns/columns.component.tsx

@@ -1,11 +1,12 @@
-import {Component} from '@components';
+import {Component} from '@components/utils';
 import {IComponentProps} from '@types';
 import clsx from 'clsx';
 import {ComponentSchema} from 'formiojs';
 import React from 'react';
 
 export interface IColumnsComponent extends ComponentSchema {
   type: 'columns';
+  columns: IFormioColumn[];
 }
 
 export interface IColumnsProps extends IComponentProps {

src/components/formio/columns/columns.stories.tsx

@@ -0,0 +1,45 @@
+import {Columns} from '@components';
+import {RenderComponent} from '@lib/renderer';
+import {expect} from '@storybook/jest';
+import type {ComponentStory, Meta} from '@storybook/react';
+import {within} from '@storybook/testing-library';
+
+import {FormikDecorator} from '../../../tests/utils/decorators';
+
+const meta: Meta<typeof Columns> = {
+  title: 'Components / Formio / Columns',
+  component: Columns,
+  decorators: [],
+  parameters: {},
+};
+export default meta;
+
+export const columns: ComponentStory<typeof RenderComponent> = args => (
+  <RenderComponent {...args} />
+);
+columns.args = {
+  component: {
+    key: 'foo',
+    type: 'columns',
+    columns: [
+      {
+        key: 'foo.foo',
+        type: 'column',
+        size: 9,
+        components: [{key: 'foo.foo.foo', type: 'content', html: 'Left column.'}],
+      },
+      {
+        key: 'foo.bar',
+        type: 'column',
+        size: 3,
+        components: [{key: 'foo.bar.bar', type: 'content', html: 'Right column.'}],
+      },
+    ],
+  },
+};
+columns.play = async ({canvasElement}) => {
+  const canvas = within(canvasElement);
+  expect(await canvas.findByText('Left column.')).toBeVisible();
+  expect(await canvas.findByText('Right column.')).toBeVisible();
+};
+columns.decorators = [FormikDecorator];

src/components/formio/content/content.stories.tsx

@@ -0,0 +1,31 @@
+import {Content} from '@components';
+import {RenderComponent} from '@lib/renderer';
+import {expect} from '@storybook/jest';
+import type {ComponentStory, Meta} from '@storybook/react';
+import {within} from '@storybook/testing-library';
+
+import {FormikDecorator} from '../../../tests/utils/decorators';
+
+const meta: Meta<typeof Content> = {
+  title: 'Components / Formio / Content',
+  component: Content,
+  decorators: [],
+  parameters: {},
+};
+export default meta;
+
+export const content: ComponentStory<typeof RenderComponent> = args => (
+  <RenderComponent {...args} />
+);
+content.args = {
+  component: {
+    key: 'foo',
+    type: 'content',
+    html: 'The <b>quick</b> brown fox jumps over the lazy dog.',
+  },
+};
+content.play = async ({canvasElement}) => {
+  const canvas = within(canvasElement);
+  expect(await canvas.findByText('quick')).toBeVisible();
+};
+content.decorators = [FormikDecorator];

src/components/formio/index.ts

@@ -0,0 +1,3 @@
+export * from './columns';
+export * from './content';
+export * from './textfield';