test(Button): add visual test for Button inside text (#1451)

gravity-ui · Mar 26, 2024 · b7da9e1 · b7da9e1
1 parent 2f0e83e
commit b7da9e1
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 2 deletions.
diff --git a/...isual.test.tsx-snapshots/Button-render-story-InsideText-dark-chromium-linux.png b/...isual.test.tsx-snapshots/Button-render-story-InsideText-dark-chromium-linux.png
diff --git a/....visual.test.tsx-snapshots/Button-render-story-InsideText-dark-webkit-linux.png b/....visual.test.tsx-snapshots/Button-render-story-InsideText-dark-webkit-linux.png
diff --git a/...sual.test.tsx-snapshots/Button-render-story-InsideText-light-chromium-linux.png b/...sual.test.tsx-snapshots/Button-render-story-InsideText-light-chromium-linux.png
diff --git a/...visual.test.tsx-snapshots/Button-render-story-InsideText-light-webkit-linux.png b/...visual.test.tsx-snapshots/Button-render-story-InsideText-light-webkit-linux.png
diff --git a/src/components/Button/__stories__/Button.stories.tsx b/src/components/Button/__stories__/Button.stories.tsx
@@ -115,6 +115,9 @@ export const Loading: Story = {
 };
 
 export const Width: Story = {
+    args: {
+        ...Default.args,
+    },
     render: (args) => {
         return (
             <div style={{width: 100, border: '2px dashed gray', overflow: 'hidden', padding: 2}}>
@@ -137,6 +140,9 @@ export const Width: Story = {
 };
 
 export const Pin: Story = {
+    args: {
+        ...Default.args,
+    },
     render: (args) => {
         return (
             <Showcase>
@@ -154,13 +160,32 @@ export const Pin: Story = {
 
 export const Link: Story = {
     args: {
+        ...Default.args,
         children: ['Link Button', <IconComponent key="icon" data={ArrowUpRightFromSquare} />],
         href: 'https://gravity-ui.com',
         target: '_blank',
     },
     name: 'As Link',
 };
 
+export const InsideText: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: (args) => {
+        return (
+            <div>
+                Lorem ipsum
+                <br />
+                <Button {...args} /> dolor
+                <br />
+                sit amet
+            </div>
+        );
+    },
+    name: 'Inside Text',
+};
+
 export const Custom: Story = {
     args: {
         children: 'Fancy Button',

diff --git a/src/components/Button/__tests__/Button.visual.test.tsx b/src/components/Button/__tests__/Button.visual.test.tsx
@@ -6,6 +6,7 @@ import {
     Default,
     Disabled,
     Icon,
+    InsideText,
     Link,
     Loading,
     Pin,
@@ -75,4 +76,10 @@ test.describe('Button', () => {
 
         await expectScreenshot();
     });
+
+    test('render story: <InsideText>', async ({mount, expectScreenshot}) => {
+        await mount(<InsideText />);
+
+        await expectScreenshot();
+    });
 });
diff --git a/src/components/Button/__tests__/helpersPlaywright.ts b/src/components/Button/__tests__/helpersPlaywright.ts
@@ -2,5 +2,16 @@ import {composeStories} from '@storybook/react';
 
 import * as ButtonStories from '../__stories__/Button.stories';
 
-export const {Default, Selected, Size, View, Icon, Disabled, Loading, Width, Pin, Link} =
-    composeStories(ButtonStories);
+export const {
+    Default,
+    Selected,
+    Size,
+    View,
+    Icon,
+    Disabled,
+    Loading,
+    Width,
+    Pin,
+    Link,
+    InsideText,
+} = composeStories(ButtonStories);