Dyn forms playwright tests (#156)

playwright/core/DynamicView.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import {DynamicView as DynamicViewBase} from '../../src/lib/core/components/View/DynamicView';
+import {Spec} from '../../src/lib/core/types/specs';
+import {FormValue} from '../../src/lib/core/types/value';
+import {dynamicViewConfig} from '../../src/lib/kit/constants/config';
+
+export const DynamicView = ({spec, value}: {spec: Spec; value: FormValue}) => {
+    return <DynamicViewBase spec={spec} value={value} config={dynamicViewConfig} />;
+};

src/lib/kit/components/Card/__tests__/Card.visual.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import {ACCORDEON_CARD, SECTION_CARD, VALUE} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicForm} from '~playwright/core/DynamicForm';
+import {DynamicView} from '~playwright/core/DynamicView';
+
+test.describe('Card', () => {
+    test.describe('Accordeon Card', () => {
+        test('array spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={ACCORDEON_CARD.arraySpec} />);
+
+            await expectScreenshot();
+        });
+
+        test('object spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={ACCORDEON_CARD.objectSpec} />);
+
+            await expectScreenshot();
+        });
+    });
+
+    test.describe('Section Card', () => {
+        test('array spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={SECTION_CARD.arraySpec} />);
+
+            await expectScreenshot();
+        });
+
+        test('object spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={SECTION_CARD.objectSpec} />);
+
+            await expectScreenshot();
+        });
+    });
+});
+
+test.describe('Card view', () => {
+    test.describe('Accordeon Card', () => {
+        test('array spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicView spec={ACCORDEON_CARD.arraySpec} value={VALUE.array} />);
+
+            await expectScreenshot();
+        });
+
+        test('object spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicView spec={ACCORDEON_CARD.objectSpec} value={VALUE.object} />);
+
+            await expectScreenshot();
+        });
+    });
+
+    test.describe('Section Card', () => {
+        test('array spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicView spec={SECTION_CARD.arraySpec} value={VALUE.array} />);
+
+            await expectScreenshot();
+        });
+
+        test('object spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicView spec={SECTION_CARD.objectSpec} value={VALUE.object} />);
+
+            await expectScreenshot();
+        });
+    });
+});

src/lib/kit/components/Card/__tests__/helpers.ts

@@ -0,0 +1,134 @@
+import {ArraySpec, FormValue, ObjectSpec, SpecTypes} from '../../../../core';
+
+export const ACCORDEON_CARD: Record<string, ArraySpec | ObjectSpec> = {
+    arraySpec: {
+        defaultValue: ['value'],
+        type: SpecTypes.Array,
+        items: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Element',
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'card_accordeon',
+            layoutTitle: 'Accordeon Card',
+            layoutOpen: true,
+            itemLabel: 'Add element',
+        },
+    },
+    objectSpec: {
+        defaultValue: {
+            name: 'value',
+            age: 10,
+            license: false,
+        },
+        type: SpecTypes.Object,
+        properties: {
+            name: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'Name',
+                },
+            },
+            age: {
+                type: SpecTypes.Number,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'Age',
+                },
+            },
+            license: {
+                type: SpecTypes.Boolean,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'License',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'card_accordeon',
+            layoutTitle: 'Candidate',
+            layoutOpen: true,
+        },
+    },
+};
+
+export const SECTION_CARD: Record<string, ArraySpec | ObjectSpec> = {
+    arraySpec: {
+        defaultValue: ['value'],
+        type: SpecTypes.Array,
+        items: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Element',
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'card_section',
+            layoutTitle: 'Accordeon Card',
+            layoutOpen: true,
+            itemLabel: 'Add element',
+        },
+    },
+    objectSpec: {
+        defaultValue: {
+            name: 'value',
+            age: 10,
+            license: false,
+        },
+        type: SpecTypes.Object,
+        properties: {
+            name: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'Name',
+                },
+            },
+            age: {
+                type: SpecTypes.Number,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'Age',
+                },
+            },
+            license: {
+                type: SpecTypes.Boolean,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'License',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'card_section',
+            layoutTitle: 'Candidate',
+            layoutOpen: true,
+        },
+    },
+};
+
+export const VALUE: Record<string, FormValue> = {
+    array: ['value', 'value'],
+    object: {
+        name: 'name',
+        age: 21,
+        license: true,
+    },
+};

src/lib/kit/components/Inputs/ArrayBase/__tests__/ArrayBase.visual.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import {ARRAY_BASE, DynamicForm} from './helpers';
+import {ARRAY_BASE, DynamicForm, VALUE} from './helpers';
 
 import {test} from '~playwright/core';
+import {DynamicView} from '~playwright/core/DynamicView';
 
 test.describe('Array Base', () => {
     test('default', async ({mount, expectScreenshot}) => {
@@ -57,3 +58,11 @@ test.describe('Array Base', () => {
         await expectScreenshot();
     });
 });
+
+test.describe('Array Base view', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={ARRAY_BASE.default} value={VALUE.array} />);
+
+        await expectScreenshot();
+    });
+});

src/lib/kit/components/Inputs/ArrayBase/__tests__/helpers.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ArraySpec, Spec, SpecTypes} from '../../../../../core';
+import {ArraySpec, FormValue, Spec, SpecTypes} from '../../../../../core';
 
 import {DynamicForm as BaseDynamicForm} from '~playwright/core/DynamicForm';
 
@@ -163,6 +163,10 @@ export const ARRAY_BASE: Record<string, ArraySpec> = {
     },
 };
 
+export const VALUE: Record<string, FormValue> = {
+    array: ['value', 'value'],
+};
+
 export const DynamicForm = ({spec}: {spec: Spec}) => {
     return (
         <div style={{width: 600}}>

src/lib/kit/components/Inputs/CardOneOf/__tests__/CardOneOf.visual.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import {CARD_ONEOF, VALUE} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicForm} from '~playwright/core/DynamicForm';
+import {DynamicView} from '~playwright/core/DynamicView';
+
+test.describe('Card OneOf', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CARD_ONEOF.default} />);
+
+        await expectScreenshot();
+    });
+
+    test('default value object', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CARD_ONEOF.defaultValueObject} />);
+
+        await expectScreenshot();
+    });
+
+    test('default value string', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CARD_ONEOF.defaultValueString} />);
+
+        await expectScreenshot();
+    });
+
+    test('required', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CARD_ONEOF.required} />);
+
+        await expectScreenshot();
+    });
+
+    test('description', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CARD_ONEOF.desription} />);
+
+        await expectScreenshot();
+    });
+});
+
+test.describe('Card OneOf view', () => {
+    test('object', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={CARD_ONEOF.default} value={VALUE.object} />);
+
+        await expectScreenshot();
+    });
+
+    test('string', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={CARD_ONEOF.default} value={VALUE.string} />);
+
+        await expectScreenshot();
+    });
+});