tests

mocks/ens/domain.ts

+import type { EnsDomainDetailed } from 'types/api/ens';
+
+export const ensDomainA: EnsDomainDetailed = {
+  id: '0xb140bf9645e54f02ed3c1bcc225566b515a98d1688f10494a5c3bc5b447936a7',
+  tokenId: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a6',
+  name: 'cat.eth',
+  registrant: {
+    hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
+  },
+  resolvedAddress: {
+    hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
+  },
+  owner: {
+    hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
+  },
+  registrationDate: '2021-06-27T13:34:44.000Z',
+  expiryDate: '2025-03-01T14:20:24.000Z',
+  otherAddresses: {
+    ETH: 'fe6ab8a0dafe7d41adf247c210451c264155c9b0',
+    GNO: 'DDAfbb505ad214D7b80b1f830fcCc89B60fb7A83',
+    NEAR: 'a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.factory.bridge.near',
+  },
+};
+
+export const ensDomainB: EnsDomainDetailed = {
+  id: '0x632ac7bec8e883416b371b36beaa822f4784208c99d063ee030020e2bd09b885',
+  tokenId: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a7',
+  name: 'kitty.kitty.kitty.cat.eth',
+  resolvedAddress: null,
+  registrant: {
+    hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
+  },
+  owner: {
+    hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
+  },
+  registrationDate: '2023-08-13T13:01:12.000Z',
+  expiryDate: null,
+  otherAddresses: {},
+};
+
+export const ensDomainC: EnsDomainDetailed = {
+  id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ad',
+  tokenId: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a8',
+  name: 'duck.duck.eth',
+  registrant: {
+    hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
+  },
+  resolvedAddress: {
+    hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
+  },
+  owner: {
+    hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
+  },
+  registrationDate: '2022-04-24T07:34:44.000Z',
+  expiryDate: '2022-11-01T13:10:36.000Z',
+  otherAddresses: {},
+};
+
+export const ensDomainD: EnsDomainDetailed = {
+  id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ae',
+  tokenId: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a9',
+  name: '🦆.duck.eth',
+  registrant: {
+    hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
+  },
+  resolvedAddress: {
+    hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
+  },
+  owner: null,
+  registrationDate: '2022-04-24T07:34:44.000Z',
+  expiryDate: '2027-09-23T13:10:36.000Z',
+  otherAddresses: {},
+};

mocks/ens/events.ts

+import type { EnsDomainEvent } from 'types/api/ens';
+
+export const ensDomainEventA: EnsDomainEvent = {
+  transactionHash: '0x86c66b9fad66e4f20d42a6eed4fe12a0f48a274786fd85e9d4aa6c60e84b5874',
+  timestamp: '2021-06-27T13:34:44.000000Z',
+  fromAddress: {
+    hash: '0xaa96a50a2f67111262fe24576bd85bb56ec65016',
+  },
+  action: '0xf7a16963',
+};
+
+export const ensDomainEventB = {
+  transactionHash: '0x150bf7d5cd42457dd9c799ddd9d4bf6c30c703e1954a88c6d4b668b23fe0fbf8',
+  timestamp: '2022-11-02T14:20:24.000000Z',
+  fromAddress: {
+    hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
+  },
+  action: 'register',
+};

types/api/ens.ts

@@ -8,7 +8,7 @@ export interface EnsDomain {
     hash: string;
   } | null;
   registrationDate?: string;
-  expiryDate?: string;
+  expiryDate: string | null;
 }
 
 export interface EnsDomainDetailed extends EnsDomain {

ui/address/ensDomains/AddressEnsDomains.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import config from 'configs/app';
+import * as ensDomainMock from 'mocks/ens/domain';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import AddressEnsDomains from './AddressEnsDomains';
+
+const ADDRESSES_LOOKUP_API_URL = buildApiUrl('addresses_lookup', { chainId: config.chain.id });
+const ADDRESS_HASH = ensDomainMock.ensDomainA.owner?.hash ?? '';
+
+test('base view', async({ mount, page }) => {
+  await page.route(ADDRESSES_LOOKUP_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({
+      items: [
+        ensDomainMock.ensDomainA,
+        ensDomainMock.ensDomainB,
+        ensDomainMock.ensDomainC,
+        ensDomainMock.ensDomainD,
+      ],
+      totalRecords: 4,
+    }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <AddressEnsDomains addressHash={ ADDRESS_HASH } mainDomainName={ ensDomainMock.ensDomainA.name }/>
+    </TestApp>,
+  );
+
+  await component.getByText('4 domains').click();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 550, height: 350 } });
+});

ui/nameDomains/NameDomainsListItem.tsx

-import { chakra, Skeleton } from '@chakra-ui/react';
+import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { EnsDomain } from 'types/api/ens';
@@ -35,8 +35,8 @@ const NameDomainsListItem = ({ name, isLoading, resolvedAddress, registrationDat
           <ListItemMobileGrid.Label isLoading={ isLoading }>Registered on</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton isLoaded={ !isLoading }>
-              { dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
-              <chakra.span color="text_secondary"> { dayjs(registrationDate).fromNow() }</chakra.span>
+              <div>{ dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }</div>
+              <div> { dayjs(registrationDate).fromNow() }</div>
             </Skeleton>
           </ListItemMobileGrid.Value>
         </>
@@ -44,10 +44,10 @@ const NameDomainsListItem = ({ name, isLoading, resolvedAddress, registrationDat
 
       { expiryDate && (
         <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>Registered on</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Expiration date</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
-              <span>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </span>
+              <div>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </div>
               <NameDomainExpiryStatus date={ expiryDate }/>
             </Skeleton>
           </ListItemMobileGrid.Value>

ui/nameDomains/NameDomainsTable.tsx

@@ -7,7 +7,7 @@ import arrowIcon from 'icons/arrows/east.svg';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import NameDomainsTableItem from './NameDomainsTableItem';
-import { sortFn, type Sort } from './utils';
+import { type Sort } from './utils';
 
 interface Props {
   data: EnsDomainLookupResponse | undefined;
@@ -45,12 +45,7 @@ const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
         </Tr>
       </Thead>
       <Tbody>
-        {
-          data?.items
-            .slice()
-            .sort(sortFn(sort))
-            .map((item, index) => <NameDomainsTableItem key={ index } { ...item } isLoading={ isLoading }/>)
-        }
+        { data?.items.map((item, index) => <NameDomainsTableItem key={ index } { ...item } isLoading={ isLoading }/>) }
       </Tbody>
     </Table>
   );

ui/nameDomains/utils.ts

-import type { EnsDomain } from 'types/api/ens';
-
 import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
 import type { Option } from 'ui/shared/sort/Sort';
 
@@ -17,34 +15,3 @@ const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
 };
 
 export const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefined, SORT_SEQUENCE);
-
-export const sortFn = (sort: Sort | undefined) => (a: EnsDomain, b: EnsDomain) => {
-  switch (sort) {
-    case 'registration_date-asc': {
-      if (!a.registrationDate) {
-        return 1;
-      }
-
-      if (!b.registrationDate) {
-        return -1;
-      }
-
-      return b.registrationDate?.localeCompare(a.registrationDate);
-    }
-
-    case 'registration_date-desc': {
-      if (!a.registrationDate) {
-        return -1;
-      }
-
-      if (!b.registrationDate) {
-        return 1;
-      }
-
-      return a.registrationDate.localeCompare(b.registrationDate);
-    }
-
-    default:
-      return 0;
-  }
-};

ui/pages/NameDomain.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import config from 'configs/app';
+import * as textAdMock from 'mocks/ad/textAd';
+import * as ensDomainMock from 'mocks/ens/domain';
+import * as ensDomainEventsMock from 'mocks/ens/events';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import NameDomain from './NameDomain';
+
+const DOMAIN_API_URL = buildApiUrl('domain_info', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
+const DOMAIN_EVENTS_API_URL = buildApiUrl('domain_events', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
+
+test.beforeEach(async({ page }) => {
+  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(textAdMock.duck),
+  }));
+  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/mocks/image_s.jpg',
+    });
+  });
+});
+
+test('details tab', async({ mount, page }) => {
+  await page.route(DOMAIN_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(ensDomainMock.ensDomainA),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <NameDomain/>
+    </TestApp>,
+    { hooksConfig: {
+      router: {
+        query: { name: ensDomainMock.ensDomainA.name },
+        isReady: true,
+      },
+    } },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('history tab +@mobile', async({ mount, page }) => {
+  await page.route(DOMAIN_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(ensDomainMock.ensDomainA),
+  }));
+  await page.route(DOMAIN_EVENTS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({
+      items: [
+        ensDomainEventsMock.ensDomainEventA,
+        ensDomainEventsMock.ensDomainEventB,
+      ],
+      totalRecords: 2,
+    }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <NameDomain/>
+    </TestApp>,
+    { hooksConfig: {
+      router: {
+        query: { name: ensDomainMock.ensDomainA.name, tab: 'history' },
+        isReady: true,
+      },
+    } },
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/pages/NameDomains.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import config from 'configs/app';
+import * as textAdMock from 'mocks/ad/textAd';
+import * as ensDomainMock from 'mocks/ens/domain';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import NameDomains from './NameDomains';
+
+const DOMAINS_LOOKUP_API_URL = buildApiUrl('domains_lookup', { chainId: config.chain.id });
+
+test.beforeEach(async({ page }) => {
+  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(textAdMock.duck),
+  }));
+  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/mocks/image_s.jpg',
+    });
+  });
+});
+
+test('default view +@mobile', async({ mount, page }) => {
+  await page.route(DOMAINS_LOOKUP_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({
+      items: [
+        ensDomainMock.ensDomainA,
+        ensDomainMock.ensDomainB,
+        ensDomainMock.ensDomainC,
+        ensDomainMock.ensDomainD,
+      ],
+    }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <NameDomains/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/entities/address/AddressEntity.pw.tsx

@@ -81,7 +81,9 @@ test.describe('loading', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('with ENS', async({ mount }) => {
+});
+
+test('with ENS', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <AddressEntity
@@ -91,7 +93,6 @@ test.describe('loading', () => {
   );
 
   await expect(component).toHaveScreenshot();
-  });
 });
 
 test('external link', async({ mount }) => {