Merge pull request #2265 from epam/feat/add_more_e2e_tests

Add E2E tests for RadioInput & RadioGroup components

app/src/docs/RadioGroup.doc.tsx

@@ -3,8 +3,17 @@ import * as uui from '@epam/uui';
 import * as loveship from '@epam/loveship';
 import * as promo from '@epam/promo';
 import * as electric from '@epam/electric';
-import { DocBuilder, TDocConfig, TDocContext, TSkin } from '@epam/uui-docs';
+import {
+    DocBuilder,
+    DocPreviewBuilder,
+    TDocConfig,
+    TDocContext,
+    TPreviewCellSize,
+    TPreviewMatrix,
+    TSkin,
+} from '@epam/uui-docs';
 import { BaseDocsBlock, DocExample, EditableDocContent } from '../common';
+import { TRadioGroupPreview } from './_types/previewIds';
 
 export class RadioGroupDoc extends BaseDocsBlock {
     title = 'RadioGroup';
@@ -31,6 +40,41 @@ export class RadioGroupDoc extends BaseDocsBlock {
             doc.merge('direction', { defaultValue: 'vertical' });
             doc.merge('value', { examples: [1, 2, 3] });
         },
+        preview: (docPreview: DocPreviewBuilder<uui.RadioGroupProps<any>>) => {
+            const TEST_DATA = {
+                label: 'Test',
+                items: [{ name: 'Test 1', id: 1 }, { name: 'Test 2', id: 2 }],
+                value: 1,
+            };
+            const w170_h70: TPreviewCellSize = '170-70';
+            const w100_h70: TPreviewCellSize = '100-70';
+            type TMatrixLocal = TPreviewMatrix<uui.RadioGroupProps<any>>;
+            const statesBaseMatrix: TMatrixLocal = {
+                isInvalid: { values: [false, true] },
+                isDisabled: { values: [false, true], condition: (props) => !props.isInvalid },
+                isReadonly: { values: [false, true], condition: (props) => !props.isInvalid && !props.isDisabled },
+            };
+            docPreview.add({
+                id: TRadioGroupPreview['Size Variants'],
+                matrix: {
+                    items: { values: [TEST_DATA.items] },
+                    value: { values: [TEST_DATA.value] },
+                    size: { examples: '*' },
+                    direction: { values: ['vertical', 'horizontal'] },
+                },
+                cellSize: w170_h70,
+            });
+            docPreview.add({
+                id: TRadioGroupPreview['Color Variants'],
+                matrix: {
+                    items: { values: [TEST_DATA.items] },
+                    value: { values: [TEST_DATA.value] },
+                    size: { values: ['18'] },
+                    ...statesBaseMatrix,
+                },
+                cellSize: w100_h70,
+            });
+        },
     };
 
     renderContent() {

app/src/docs/RadioInput.doc.tsx

@@ -3,8 +3,17 @@ import * as uui from '@epam/uui';
 import * as loveship from '@epam/loveship';
 import * as promo from '@epam/promo';
 import * as electric from '@epam/electric';
-import { DocBuilder, TDocConfig, TDocContext, TSkin } from '@epam/uui-docs';
+import {
+    DocBuilder,
+    DocPreviewBuilder,
+    TDocConfig,
+    TDocContext,
+    TPreviewCellSize,
+    TPreviewMatrix,
+    TSkin,
+} from '@epam/uui-docs';
 import { BaseDocsBlock, DocExample, EditableDocContent } from '../common';
+import { TRadioInputPreview } from './_types/previewIds';
 
 export class RadioInputDoc extends BaseDocsBlock {
     title = 'RadioInput';
@@ -21,6 +30,37 @@ export class RadioInputDoc extends BaseDocsBlock {
         doc: (doc: DocBuilder<uui.RadioInputProps>) => {
             doc.merge('value', { examples: [true, { value: false, isDefault: true }] });
         },
+        preview: (docPreview: DocPreviewBuilder<uui.RadioInputProps>) => {
+            const TEST_DATA = {
+                label: 'Test',
+            };
+            const w75_h40: TPreviewCellSize = '75-40';
+            type TMatrixLocal = TPreviewMatrix<uui.RadioInputProps>;
+            const statesBaseMatrix: TMatrixLocal = {
+                isInvalid: { values: [false, true] },
+                isDisabled: { values: [false, true], condition: (props) => !props.isInvalid },
+                isReadonly: { values: [false, true], condition: (props) => !props.isInvalid && !props.isDisabled },
+            };
+            docPreview.add({
+                id: TRadioInputPreview['Size Variants'],
+                matrix: {
+                    label: { values: [TEST_DATA.label, undefined] },
+                    size: { examples: '*' },
+                    value: { values: [true, false] },
+                },
+                cellSize: w75_h40,
+            });
+            docPreview.add({
+                id: TRadioInputPreview['Color Variants'],
+                matrix: {
+                    size: { values: ['18'] },
+                    value: { values: [true] },
+                    label: { values: [TEST_DATA.label] },
+                    ...statesBaseMatrix,
+                },
+                cellSize: w75_h40,
+            });
+        },
     };
 
     renderContent() {

app/src/docs/_types/previewIds.ts

@@ -136,3 +136,13 @@ export enum TNumericInputPreview {
     Sizes = 'Sizes',
     States = 'States'
 }
+
+export enum TRadioInputPreview {
+    'Size Variants' = 'Size Variants',
+    'Color Variants' = 'Color Variants'
+}
+
+export enum TRadioGroupPreview {
+    'Size Variants' = 'Size Variants',
+    'Color Variants' = 'Color Variants'
+}

uui-e2e-tests/src/data/previewIds.ts

@@ -136,3 +136,13 @@ export enum TNumericInputPreview {
     Sizes = 'Sizes',
     States = 'States'
 }
+
+export enum TRadioInputPreview {
+    'Size Variants' = 'Size Variants',
+    'Color Variants' = 'Color Variants'
+}
+
+export enum TRadioGroupPreview {
+    'Size Variants' = 'Size Variants',
+    'Color Variants' = 'Color Variants'
+}

uui-e2e-tests/src/data/testData.ts

@@ -9,7 +9,7 @@ import {
     TDatePickerPreview,
     TIconButtonPreview,
     TLinkButtonPreview, TNumericInputPreview,
-    TPickerInputPreview,
+    TPickerInputPreview, TRadioGroupPreview, TRadioInputPreview,
     TRangeDatePickerPreview,
     TSwitchPreview,
     TTabButtonPreview,
@@ -121,6 +121,8 @@ export type TPreviewIdByComponentId = {
     [TComponentId.textInput]: TTextInputPreview[],
     [TComponentId.verticalTabButton]: TVerticalTabButtonPreview[],
     [TComponentId.numericInput]: TNumericInputPreview[],
+    [TComponentId.radioInput]: TRadioInputPreview[],
+    [TComponentId.radioGroup]: TRadioGroupPreview[],
 };
 
 export const THEMES = {

uui-e2e-tests/tests/screenshot.e2e.ts

@@ -19,13 +19,13 @@ import {
     TRangeDatePickerPreview,
     TTextAreaPreview,
     TTextPreview,
-    TNumericInputPreview,
+    TNumericInputPreview, TRadioInputPreview, TRadioGroupPreview,
 } from '../src/data/previewIds';
 
 const {
     badge, button, linkButton, avatarStack, tag, checkbox, textInput, countIndicator,
     accordion, alert, iconButton, tabButton, verticalTabButton, pickerInput, datePicker,
-    rangeDatePicker, textArea, text, numericInput,
+    rangeDatePicker, textArea, text, numericInput, radioInput, radioGroup,
 } = TComponentId;
 
 const { values } = Object;
@@ -65,6 +65,8 @@ builder
     .add(TComponentId.switch, { previewId: values(TSwitchPreview) })
     .add(textArea, { previewId: values(TTextAreaPreview) })
     .add(textInput, { previewId: values(TTextInputPreview) })
-    .add(verticalTabButton, { previewId: values(TVerticalTabButtonPreview) });
+    .add(verticalTabButton, { previewId: values(TVerticalTabButtonPreview) })
+    .add(radioInput, { previewId: values(TRadioInputPreview) })
+    .add(radioGroup, { previewId: values(TRadioGroupPreview) });
 
 builder.buildTests();