Merge pull request #2215 from epam/feat/e2e_tests_2

Add e2e test for IconButton

app/src/docs/IconButton.doc.tsx

@@ -3,10 +3,23 @@ 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 { COLOR_MAP, DocBuilder, getColorPickerComponent, TDocConfig, TDocContext, TSkin } from '@epam/uui-docs';
+import {
+    COLOR_MAP,
+    DocBuilder,
+    DocPreviewBuilder,
+    getColorPickerComponent,
+    TDocConfig,
+    TDocContext,
+    TSkin,
+} from '@epam/uui-docs';
 import { BaseDocsBlock, DocExample, EditableDocContent } from '../common';
 import { getCurrentTheme } from '../helpers';
 
+enum TIconButtonPreview {
+    Colors = 'Colors',
+    Layout = 'Layout'
+}
+
 export class IconButtonDoc extends BaseDocsBlock {
     title = 'Icon Button';
 
@@ -27,6 +40,40 @@ export class IconButtonDoc extends BaseDocsBlock {
                 }),
             });
         },
+        preview: (docPreview: DocPreviewBuilder<promo.IconButtonProps | loveship.IconButtonProps| uui.IconButtonProps>) => {
+            const TEST_DATA = {
+                icon: 'action-account-fill.svg',
+                dropdownIcon: 'navigation-chevron_down-outline.svg',
+            };
+            docPreview.add({
+                id: TIconButtonPreview.Colors,
+                matrix: {
+                    size: { values: ['24'] },
+                    color: { examples: '*' },
+                    dropdownIcon: { examples: [TEST_DATA.dropdownIcon] },
+                    showDropdownIcon: { values: [true] },
+                    isOpen: { values: [false] },
+                    icon: { examples: [TEST_DATA.icon] },
+                    isDisabled: { values: [false] },
+                    href: { values: ['https://www.epam.com'] },
+                },
+                cellSize: '60-40',
+            });
+            docPreview.add({
+                id: TIconButtonPreview.Layout,
+                matrix: {
+                    dropdownIcon: { examples: [undefined, TEST_DATA.dropdownIcon] },
+                    showDropdownIcon: { values: [true], condition: (props) => !!props.dropdownIcon },
+                    isOpen: { values: [false, true], condition: (props) => !!props.dropdownIcon },
+                    isDisabled: { values: [false, true] },
+                    icon: { examples: [undefined, TEST_DATA.icon], condition: (props, v) => (v === undefined ? !!props.dropdownIcon : true) },
+                    size: { examples: '*' },
+                    color: { examples: ['info'] },
+                    href: { values: ['https://www.epam.com'] },
+                },
+                cellSize: '80-50',
+            });
+        },
     };
 
     renderContent() {

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

@@ -133,6 +133,10 @@ export enum TAlertPreview {
     'Layout with icon' = 'Layout with icon',
     'Layout without icon' = 'Layout without icon'
 }
+export enum TIconButtonPreview {
+    Colors = 'Colors',
+    Layout = 'Layout'
+}
 
 /**
  * Keep list of previews in sync with corresponding *.doc.tsx files
@@ -149,4 +153,5 @@ export type TPreviewIdByComponentId = {
     [TComponentId.countIndicator]: TCountIndicatorPreview[],
     [TComponentId.accordion]: TAccordionPreview[],
     [TComponentId.alert]: TAlertPreview[],
+    [TComponentId.iconButton]: TIconButtonPreview[],
 };

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

@@ -11,11 +11,12 @@ import {
     TCountIndicatorPreview,
     TAccordionPreview,
     TAlertPreview,
+    TIconButtonPreview,
 } from '../src/data/testData';
 
 const {
     badge, button, linkButton, avatarStack, tag, checkbox, textInput, countIndicator,
-    accordion, alert,
+    accordion, alert, iconButton,
 } = TComponentId;
 
 const builder = new TestBuilder();
@@ -30,5 +31,6 @@ builder.add(textInput, { previewId: Object.values(TTextInputPreview) });
 builder.add(countIndicator, { previewId: Object.values(TCountIndicatorPreview) });
 builder.add(accordion, { previewId: Object.values(TAccordionPreview) });
 builder.add(alert, { previewId: Object.values(TAlertPreview) });
+builder.add(iconButton, { previewId: Object.values(TIconButtonPreview) });
 
 builder.buildTests();