tests

mocks/metadata/publicTagTypes.ts

+export const publicTagTypes = {
+  tagTypes: [
+    {
+      id: '96f9db76-02fc-477d-a003-640a0c5e7e15',
+      type: 'name' as const,
+      description: 'Alias for the address',
+    },
+    {
+      id: 'e75f396e-f52a-44c9-8790-a1dbae496b72',
+      type: 'generic' as const,
+      description: 'Group classification for the address',
+    },
+    {
+      id: '11a2d4f3-412e-4eb7-b663-86c6f48cdec3',
+      type: 'information' as const,
+      description: 'Tags with custom data for the address, e.g. additional link to project, or classification details, or minor account details',
+    },
+    {
+      id: 'd37443d4-748f-4314-a4a0-283b666e9f29',
+      type: 'classifier' as const,
+      description: 'E.g. "ERC20", "Contract", "CEX", "DEX", "NFT"',
+    },
+    {
+      id: 'ea9d0f91-9b46-44ff-be70-128bac468f6f',
+      type: 'protocol' as const,
+      description: 'Special tag type for protocol-related contracts, e.g. for bridges',
+    },
+    {
+      id: 'd2600acb-473c-445f-ac72-ed6fef53e06a',
+      type: 'note' as const,
+      description: 'Short general-purpose description for the address',
+    },
+  ],
+};

ui/publicTags/submit/PublicTagsSubmitForm.pw.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { publicTagTypes as configMock } from 'mocks/metadata/publicTagTypes';
+import { base as useInfoMock } from 'mocks/user/profile';
+import { expect, test } from 'playwright/lib';
+import * as configs from 'playwright/utils/configs';
+
+import * as mocks from './mocks';
+import PublicTagsSubmitForm from './PublicTagsSubmitForm';
+
+const onSubmitResult = () => {};
+
+test('base view +@mobile', async({ render }) => {
+  const component = await render(
+    <Box sx={{ '.recaptcha': { w: '304px', h: '78px' } }}>
+      <PublicTagsSubmitForm config={ configMock } onSubmitResult={ onSubmitResult } userInfo={ useInfoMock }/>
+    </Box>,
+  );
+
+  await component.getByLabel(/Smart contract \/ Address/i).fill(mocks.address1);
+  await component.getByLabel(/add/i).nth(1).click();
+
+  await component.getByLabel('Tag (max 35 characters)*').fill(mocks.tag1.name);
+  await component.getByLabel(/label url/i).fill(mocks.tag1.meta.tagUrl);
+  await component.getByLabel(/background color/i).fill(mocks.tag1.meta.bgColor.replace('#', ''));
+  await component.getByLabel(/text color/i).fill(mocks.tag1.meta.textColor.replace('#', ''));
+
+  await component.getByLabel(/add/i).nth(3).click();
+  await component.getByLabel(/comment/i).focus();
+  await component.getByLabel(/comment/i).blur();
+
+  await expect(component).toHaveScreenshot({
+    mask: [ component.locator('.recaptcha') ],
+    maskColor: configs.maskColor,
+  });
+});

ui/publicTags/submit/PublicTagsSubmitForm.tsx

@@ -23,7 +23,6 @@ import PublicTagsSubmitFieldDescription from './fields/PublicTagsSubmitFieldDesc
 import PublicTagsSubmitFieldRequesterEmail from './fields/PublicTagsSubmitFieldRequesterEmail';
 import PublicTagsSubmitFieldRequesterName from './fields/PublicTagsSubmitFieldRequesterName';
 import PublicTagsSubmitFieldTags from './fields/PublicTagsSubmitFieldTags';
-import * as mocks from './mocks';
 import { convertFormDataToRequestsBody, getFormDefaultValues } from './utils';
 
 interface Props {
@@ -54,10 +53,6 @@ const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
     }
   }, [ router.query.addresses, router ]);
 
-  const handleMockClick = React.useCallback(async() => {
-    return onSubmitResult(mocks.mixedResponses);
-  }, [ onSubmitResult ]);
-
   const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
     const requestsBody = convertFormDataToRequestsBody(data);
 
@@ -129,15 +124,6 @@ const PublicTagsSubmitForm = ({ config, userInfo, onSubmitResult }: Props) => {
           >
             Send request
           </Button>
-          <Button
-            onClick={ handleMockClick }
-            size="lg"
-            mt={ 3 }
-            colorScheme="gray"
-            w="min-content"
-          >
-            Mock
-          </Button>
         </Grid>
       </chakra.form>
     </FormProvider>

ui/publicTags/submit/PublicTagsSubmitResult.pw.tsx

+import React from 'react';
+
+import { expect, test, devices } from 'playwright/lib';
+
+import * as mocks from './mocks';
+import PublicTagsSubmitResult from './PublicTagsSubmitResult';
+
+test('all success result view +@mobile', async({ render }) => {
+  const component = await render(<PublicTagsSubmitResult data={ mocks.allSuccessResponses }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test('result with errors view', async({ render }) => {
+  const component = await render(<PublicTagsSubmitResult data={ mocks.mixedResponses }/>);
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+
+  test('result with errors view', async({ render }) => {
+    const component = await render(<PublicTagsSubmitResult data={ mocks.mixedResponses }/>);
+    await expect(component).toHaveScreenshot();
+  });
+});