feat: add screenshots check

Author: stepanLav

package.json

@@ -48,6 +48,7 @@
     "test:watch": "cross-env POLKADOTJS_DISABLE_ESM_CJS_WARNING=1 vitest",
     "test:coverage": "cross-env POLKADOTJS_DISABLE_ESM_CJS_WARNING=1 vitest run --coverage",
     "test:coverage-new-files": "cross-env POLKADOTJS_DISABLE_ESM_CJS_WARNING=1 vitest run --coverage --changed dev",
+    "test:screenshots": "playwright test --config=playwright.screenshots.config.ts",
     "test:system": "cross-env CHAINS_FILE=chains_dev playwright test",
     "test:system:regress": "cross-env CHAINS_FILE=chains_dev playwright test --grep @regress",
     "test:system:load-fee": "cross-env CHAINS_FILE=chains_dev playwright test --grep @fee-test",

playwright.screenshots.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/screenshots',
+  fullyParallel: false,
+  retries: 0,
+  workers: 1,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:6006',
+    ...devices['Desktop Chrome'],
+  },
+  timeout: 30000,
+});

src/renderer/domains/network/account/resource.ts

@@ -1,6 +1,6 @@
 import { attach, combine, createStore } from 'effector';
 
-import { type Chain, type Wallet } from '@/shared/core';
+import { type Chain, type Contact, type Wallet } from '@/shared/core';
 import { type AccountId } from '@/shared/polkadotjs-schemas';
 import { createQueryResource } from '@/shared/query';
 import { contactModel } from '@/entities/contact';
@@ -28,7 +28,16 @@ export type AccountsNameParams = {
 
 type NameCache = Record<string, string>;
 
-const getContactsStore = () => contactModel?.$contacts ?? createStore([]);
+const $contactsFallback = createStore<Contact[]>([]);
+
+// Defensive: contactModel may be in TDZ during circular module initialization (e.g. Storybook)
+const getContactsStore = () => {
+  try {
+    return contactModel.$contacts;
+  } catch {
+    return $contactsFallback;
+  }
+};
 
 const getNameResolverSource = () => {
   return combine({

src/renderer/entities/contact/index.ts

@@ -2,6 +2,7 @@ export {
   BackendContactRow,
   BackendErrorView,
   BackendLoadingView,
+  CachedWithErrorView,
   ContactList,
   ContactRow,
   ContactSkeleton,

src/renderer/entities/contact/ui/BackendContactRow.stories.tsx

@@ -0,0 +1,55 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { type BackendContact } from '@/shared/core';
+import { TEST_ACCOUNTS, TEST_ADDRESS } from '@/shared/lib/utils';
+
+import { BackendContactRow } from './BackendContactRow';
+
+const mockContact: BackendContact = {
+  id: '1',
+  name: 'Treasury Multisig',
+  address: TEST_ADDRESS,
+  accountId: TEST_ACCOUNTS[0],
+  source: 'backend',
+  entityNames: ['Nova Foundation', 'Treasury'],
+  chainId: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
+  chainName: 'Polkadot',
+  categoryName: 'Infrastructure',
+  contactTypeName: 'Multisig',
+  derivationPath: null,
+  ownerAccountId: null,
+};
+
+const meta: Meta<typeof BackendContactRow> = {
+  title: 'Address Book/BackendContactRow',
+  component: BackendContactRow,
+  decorators: [
+    (Story) => (
+      <ul>
+        <Story />
+      </ul>
+    ),
+  ],
+  args: {
+    contact: mockContact,
+    onSendTo: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BackendContactRow>;
+
+export const Default: Story = {};
+
+export const MinimalLabels: Story = {
+  args: {
+    contact: {
+      ...mockContact,
+      id: '2',
+      name: 'Simple Contact',
+      contactTypeName: null,
+      entityNames: [],
+    },
+  },
+};

src/renderer/entities/contact/ui/BackendErrorView.stories.tsx

@@ -0,0 +1,39 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { BackendErrorView } from './BackendErrorView';
+
+const meta: Meta<typeof BackendErrorView> = {
+  title: 'Address Book/BackendErrorView',
+  component: BackendErrorView,
+  args: {
+    onRetry: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BackendErrorView>;
+
+export const NetworkError: Story = {
+  args: {
+    error: 'TypeError: Failed to fetch — ECONNREFUSED',
+  },
+};
+
+export const AuthError: Story = {
+  args: {
+    error: '401 Unauthorized — session token expired',
+  },
+};
+
+export const TimeoutError: Story = {
+  args: {
+    error: 'AbortError: The operation was aborted (timed out)',
+  },
+};
+
+export const GenericError: Story = {
+  args: {
+    error: 'Internal server error: unexpected null pointer',
+  },
+};

src/renderer/entities/contact/ui/BackendErrorView.tsx

@@ -34,13 +34,13 @@ export const BackendErrorView = ({ error, onRetry }: Props) => {
   const { t } = useI18n();
 
   return (
-    <div className="flex flex-col gap-y-3 py-4">
+    <div className="py-4">
       <Alert title={t(getErrorMessageKey(error))} active variant="error">
         <CaptionText className="break-all text-text-tertiary">{error}</CaptionText>
+        <Button variant="text" className="h-4.5 self-start p-0" onClick={onRetry}>
+          {t('addressBook.sources.retry')}
+        </Button>
       </Alert>
-      <Button variant="text" className="h-4.5 self-center" onClick={onRetry}>
-        {t('addressBook.sources.retry')}
-      </Button>
     </div>
   );
 };

src/renderer/entities/contact/ui/BackendLoadingView.stories.tsx

@@ -0,0 +1,14 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { BackendLoadingView } from './BackendLoadingView';
+
+const meta: Meta<typeof BackendLoadingView> = {
+  title: 'Address Book/BackendLoadingView',
+  component: BackendLoadingView,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BackendLoadingView>;
+
+export const Default: Story = {};

src/renderer/entities/contact/ui/CachedWithErrorView.stories.tsx

@@ -0,0 +1,62 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { MemoryRouter } from 'react-router-dom';
+
+import { type BackendContact } from '@/shared/core';
+import { TEST_ACCOUNTS, TEST_ADDRESS } from '@/shared/lib/utils';
+
+import { CachedWithErrorView } from './CachedWithErrorView';
+
+const mockContacts: BackendContact[] = [
+  {
+    id: '1',
+    name: 'Treasury Multisig',
+    address: TEST_ADDRESS,
+    accountId: TEST_ACCOUNTS[0],
+    source: 'backend',
+    entityNames: ['Nova Foundation'],
+    chainId: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
+    chainName: 'Polkadot',
+    categoryName: 'Infrastructure',
+    contactTypeName: 'Multisig',
+    derivationPath: null,
+    ownerAccountId: null,
+  },
+  {
+    id: '2',
+    name: 'Validator Node',
+    address: TEST_ADDRESS,
+    accountId: TEST_ACCOUNTS[1],
+    source: 'backend',
+    entityNames: ['Staking Ops'],
+    chainId: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
+    chainName: 'Kusama',
+    categoryName: 'Validators',
+    contactTypeName: null,
+    derivationPath: null,
+    ownerAccountId: null,
+  },
+];
+
+const meta: Meta<typeof CachedWithErrorView> = {
+  title: 'Address Book/CachedWithErrorView',
+  component: CachedWithErrorView,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  args: {
+    error: 'TypeError: Failed to fetch — ECONNREFUSED',
+    items: mockContacts,
+    onSendTo: () => {},
+    onRetry: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CachedWithErrorView>;
+
+export const Default: Story = {};

src/renderer/entities/contact/ui/CachedWithErrorView.tsx

@@ -0,0 +1,41 @@
+import { type Contact, isBackendContact, isLocalContact } from '@/shared/core';
+import { useI18n } from '@/shared/i18n';
+import { Alert, BodyText, Button } from '@/shared/ui';
+
+import { BackendContactRow } from './BackendContactRow';
+import { ContactRow } from './ContactRow';
+
+type Props = {
+  error: string;
+  items: Contact[];
+  onSendTo: (contact: Contact) => void;
+  onRetry: () => void;
+};
+
+export const CachedWithErrorView = ({ error, items, onSendTo, onRetry }: Props) => {
+  const { t } = useI18n();
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <Alert title={t('addressBook.sources.syncErrorCached')} active variant="warn">
+        <Alert.Item withDot={false}>
+          <div className="flex items-center gap-x-2">
+            <BodyText className="break-all text-text-tertiary">{error}</BodyText>
+            <Button variant="text" className="h-4.5 shrink-0" onClick={onRetry}>
+              {t('addressBook.sources.retry')}
+            </Button>
+          </div>
+        </Alert.Item>
+      </Alert>
+      <ul className="flex flex-col gap-y-2">
+        {items.map((contact) =>
+          isBackendContact(contact) ? (
+            <BackendContactRow key={contact.id} contact={contact} onSendTo={onSendTo} />
+          ) : isLocalContact(contact) ? (
+            <ContactRow key={contact.id} contact={contact} onSendTo={onSendTo} />
+          ) : null,
+        )}
+      </ul>
+    </div>
+  );
+};