test(FilePreview): Add smoke tests/file preview

src/components/FilePreview/__tests__/FilePreview.visual.test.tsx

@@ -0,0 +1,48 @@
+import {expect} from '@playwright/experimental-ct-react';
+
+import {smokeTest, test} from '~playwright/core';
+
+import {FilePreviewWithAllActions} from './helpers';
+import {FilePreviewStories} from './helpersPlaywright';
+
+test.describe('FilePreview', {tag: '@FilePreview'}, () => {
+    test(`render story: <Default>`, async ({mount, expectScreenshot}) => {
+        await mount(<FilePreviewStories.Default />);
+
+        await expectScreenshot({});
+    });
+
+    test(`render story: <Collage>`, async ({mount, page, expectScreenshot}) => {
+        await mount(<FilePreviewStories.Collage />);
+
+        // wait download image
+        await page.waitForLoadState('networkidle');
+
+        await expectScreenshot({});
+    });
+
+    smokeTest('actions', async ({mount, page, expectScreenshot}) => {
+        await mount(
+            <div style={{padding: 50}}>
+                <FilePreviewWithAllActions />
+            </div>,
+        );
+
+        await page.getByTestId('file-preview').hover();
+
+        await expectScreenshot({
+            themes: ['light'],
+            nameSuffix: 'show actions',
+        });
+
+        await page.locator('button[aria-label="Close"]').hover();
+        await expect(page.getByTestId('action-1-tooltip')).toBeVisible({
+            timeout: 3000,
+        });
+
+        await expectScreenshot({
+            themes: ['light'],
+            nameSuffix: 'show action tooltip',
+        });
+    });
+});

src/components/FilePreview/__tests__/helpers.tsx

@@ -0,0 +1,54 @@
+import {Link, Xmark} from '@gravity-ui/icons';
+
+import {FilePreview} from '../FilePreview';
+import type {FilePreviewProps} from '../FilePreview';
+
+export const FilePreviewWithAllActions = (
+    props: Partial<Omit<FilePreviewProps, 'actions' | 'onClose'>>,
+) => {
+    return (
+        <FilePreview
+            qa="file-preview"
+            file={{name: 'File', type: 'text/docs'} as File}
+            onClick={() => {
+                // nothing
+            }}
+            actions={[
+                {
+                    icon: null,
+                    title: 'Without icon action',
+                    onClick: () => {
+                        // nothing
+                    },
+                },
+                {
+                    icon: <Link width={14} height={14} />,
+                    disabled: true,
+                    title: 'Disabled action',
+                    onClick: () => {
+                        // nothing
+                    },
+                },
+                {
+                    icon: <Link width={14} height={14} />,
+                    href: '#',
+                    title: 'Link action',
+                    onClick: () => {
+                        // nothing
+                    },
+                },
+                {
+                    icon: <Xmark width={14} height={14} />,
+                    title: 'Close',
+                    onClick: () => {
+                        // nothing
+                    },
+                    tooltipExtraProps: {
+                        qa: 'action-1-tooltip',
+                    },
+                },
+            ]}
+            {...props}
+        />
+    );
+};

src/components/FilePreview/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as DefaultFilePreviewStories from '../__stories__/FilePreview.stories';
+
+export const FilePreviewStories = composeStories(DefaultFilePreviewStories);