test(plasma-b2c): update tests for ButtonGroup and IconButton

salute-developers · Aug 30, 2024 · ae55b93 · ae55b93
1 parent f9fc554
commit ae55b93
Show file tree

Hide file tree

Showing 28 changed files with 288 additions and 1 deletion.
diff --git a/...lasma-b2c ButtonGroup -- [PLASMA-T1206] ButtonGroup size=s, view=clear.snap.png b/...lasma-b2c ButtonGroup -- [PLASMA-T1206] ButtonGroup size=s, view=clear.snap.png
diff --git a/...lasma-b2c ButtonGroup -- [PLASMA-T1207] ButtonGroup size=xs, gap=dense.snap.png b/...lasma-b2c ButtonGroup -- [PLASMA-T1207] ButtonGroup size=xs, gap=dense.snap.png
diff --git a/...[PLASMA-T820] ButtonGroup view=default, size=m, orientation=horizontal.snap.png b/...[PLASMA-T820] ButtonGroup view=default, size=m, orientation=horizontal.snap.png
diff --git a/...nGroup -- [PLASMA-T821] ButtonGroup view=accent, size=l, shape=default.snap.png b/...nGroup -- [PLASMA-T821] ButtonGroup view=accent, size=l, shape=default.snap.png
diff --git a/...-b2c ButtonGroup -- [PLASMA-T822] ButtonGroup view=secondary, gap=none.snap.png b/...-b2c ButtonGroup -- [PLASMA-T822] ButtonGroup view=secondary, gap=none.snap.png
diff --git a/...nGroup -- [PLASMA-T823] ButtonGroup view=success, orientation=vertical.snap.png b/...nGroup -- [PLASMA-T823] ButtonGroup view=success, orientation=vertical.snap.png
diff --git a/...ButtonGroup -- [PLASMA-T824] ButtonGroup view=warning, shape=segmented.snap.png b/...ButtonGroup -- [PLASMA-T824] ButtonGroup view=warning, shape=segmented.snap.png
diff --git a/...tonGroup -- [PLASMA-T825] ButtonGroup view=critical, stretching=filled.snap.png b/...tonGroup -- [PLASMA-T825] ButtonGroup view=critical, stretching=filled.snap.png
diff --git a/...plasma-b2c ButtonGroup -- [PLASMA-T826] ButtonGroup size=xxs, gap=wide.snap.png b/...plasma-b2c ButtonGroup -- [PLASMA-T826] ButtonGroup size=xxs, gap=wide.snap.png
diff --git a/...IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _pin.snap.png b/...IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _pin.snap.png
diff --git a/...conButton/IconButton.component-test.tsx/plasma-web IconButton -- _size.snap.png b/...conButton/IconButton.component-test.tsx/plasma-web IconButton -- _size.snap.png
diff --git a/...conButton/IconButton.component-test.tsx/plasma-web IconButton -- _view.snap.png b/...conButton/IconButton.component-test.tsx/plasma-web IconButton -- _view.snap.png
diff --git a/...ton/IconButton.component-test.tsx/plasma-web IconButton -- with Loader.snap.png b/...ton/IconButton.component-test.tsx/plasma-web IconButton -- with Loader.snap.png
diff --git a/.../plasma-web IconButton -- simple.snap.png → ... IconButton view=default, size=m.snap.png b/.../plasma-web IconButton -- simple.snap.png → ... IconButton view=default, size=m.snap.png
diff --git a/.../plasma-b2c IconButton -- [PLASMA-T926] IconButton view=accent, size=l.snap.png b/.../plasma-b2c IconButton -- [PLASMA-T926] IconButton view=accent, size=l.snap.png
diff --git a/...asma-b2c IconButton -- [PLASMA-T927] IconButton view=secondary, size=s.snap.png b/...asma-b2c IconButton -- [PLASMA-T927] IconButton view=secondary, size=s.snap.png
diff --git a/...lasma-b2c IconButton -- [PLASMA-T928] IconButton view=success, size=xs.snap.png b/...lasma-b2c IconButton -- [PLASMA-T928] IconButton view=success, size=xs.snap.png
diff --git a/...sma-b2c IconButton -- [PLASMA-T929] IconButton view=warning, isLoading.snap.png b/...sma-b2c IconButton -- [PLASMA-T929] IconButton view=warning, isLoading.snap.png
diff --git a/...nt-test.tsx/plasma-b2c IconButton -- [PLASMA-T930] IconButton disabled.snap.png b/...nt-test.tsx/plasma-b2c IconButton -- [PLASMA-T930] IconButton disabled.snap.png
diff --git a/...IconButton -- [PLASMA-T931] IconButton view=critical, pin=square-clear.snap.png b/...IconButton -- [PLASMA-T931] IconButton view=critical, pin=square-clear.snap.png
diff --git a/...2c IconButton -- [PLASMA-T932] IconButton view=clear, pin=clear-square.snap.png b/...2c IconButton -- [PLASMA-T932] IconButton view=clear, pin=clear-square.snap.png
diff --git a/....tsx/plasma-b2c IconButton -- [PLASMA-T933] IconButton pin=clear-clear.snap.png b/....tsx/plasma-b2c IconButton -- [PLASMA-T933] IconButton pin=clear-clear.snap.png
diff --git a/...tsx/plasma-b2c IconButton -- [PLASMA-T934] IconButton pin=clear-circle.snap.png b/...tsx/plasma-b2c IconButton -- [PLASMA-T934] IconButton pin=clear-circle.snap.png
diff --git a/...tsx/plasma-b2c IconButton -- [PLASMA-T935] IconButton pin=circle-clear.snap.png b/...tsx/plasma-b2c IconButton -- [PLASMA-T935] IconButton pin=circle-clear.snap.png
diff --git a/...sx/plasma-b2c IconButton -- [PLASMA-T936] IconButton pin=circle-circle.snap.png b/...sx/plasma-b2c IconButton -- [PLASMA-T936] IconButton pin=circle-circle.snap.png
diff --git a/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.update-test.component-test.tsx b/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.update-test.component-test.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
+
+describe('plasma-b2c: ButtonGroup', () => {
+    const ButtonGroup = getComponent('ButtonGroup');
+    const Button = getComponent('Button');
+
+    const getButtons = () => [
+        <Button text="Button" />,
+        <Button text="Button" />,
+        <Button text="Button" />,
+        <Button text="Button" />,
+        <Button text="Button" />,
+    ];
+
+    it('[PLASMA-T820] ButtonGroup: view=default, size=m, orientation=horizontal', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup view="default" size="m" orientation="horizontal">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T821] ButtonGroup: view=accent, size=l, shape=default', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup view="accent" size="l" shape="default">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.viewport(1366, 768);
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T822] ButtonGroup: view=secondary, gap=none', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup view="secondary" gap="none">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T823] ButtonGroup: view=success, orientation=vertical', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup view="success" orientation="vertical">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T824] ButtonGroup: view=warning, shape=segmented', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup view="warning" shape="segmented">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T825] ButtonGroup: view=critical, stretching=filled', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup view="critical" stretching="filled">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T826] ButtonGroup: size=xxs, gap=wide', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup size="xxs" gap="wide">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T1206] ButtonGroup: size=s, view=clear', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup size="s" view="clear">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T1207] ButtonGroup: size=xs, gap=dense', () => {
+        mount(
+            <CypressTestDecorator>
+                <ButtonGroup size="xs" gap="dense">
+                    {getButtons()}
+                </ButtonGroup>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+});
diff --git a/packages/plasma-b2c/src/components/IconButton/IconButton.component-test.tsx b/packages/plasma-b2c/src/components/IconButton/IconButton.component-test.tsx
diff --git a/packages/plasma-b2c/src/components/IconButton/IconButton.update-test.component-test.tsx b/packages/plasma-b2c/src/components/IconButton/IconButton.update-test.component-test.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import { IconClose } from '@salutejs/plasma-icons';
+import { standard as standardTypo } from '@salutejs/plasma-typo';
+import { createGlobalStyle } from 'styled-components';
+import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
+
+const Icon = () => <IconClose color="inherit" />;
+const StandardTypoStyle = createGlobalStyle(standardTypo);
+
+describe('plasma-b2c: IconButton', () => {
+    const IconButton = getComponent('IconButton');
+
+    const CypressTestDecoratorWithTypo: FC<PropsWithChildren> = ({ children }) => (
+        <CypressTestDecorator>
+            <StandardTypoStyle />
+            {children}
+        </CypressTestDecorator>
+    );
+
+    it('[PLASMA-T925] IconButton: view=default, size=m', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton view="default" size="m">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T926] IconButton: view=accent, size=l', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton view="accent" size="l">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T927] IconButton: view=secondary, size=s', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton view="secondary" size="s">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T928] IconButton: view=success, size=xs', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton view="success" size="xs">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T929] IconButton: view=warning, isLoading', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton view="warning" isLoading>
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T930] IconButton: disabled', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton disabled>
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T931] IconButton: view=critical, pin=square-clear', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton view="critical" pin="square-clear">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T932] IconButton: view=clear, pin=clear-square', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton view="clear" pin="clear-square">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T933] IconButton: pin=clear-clear', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton pin="clear-clear">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T934] IconButton: pin=clear-circle', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton pin="clear-circle">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T935] IconButton: pin=circle-clear', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton pin="circle-clear">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('[PLASMA-T936] IconButton: pin=circle-circle', () => {
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <IconButton pin="circle-circle">
+                    <Icon size="s" />
+                </IconButton>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+});