add tests for AppActionButton

mocks/metadata/address.ts

@@ -63,15 +63,15 @@ export const protocolTag: AddressMetadataTagApi = {
 };
 
 export const protocolTagWithMeta: AddressMetadataTagApi = {
-  slug: 'furucombo',
-  name: 'Furucombo',
+  slug: 'uniswap',
+  name: 'Uniswap',
   tagType: 'protocol',
   ordinal: 0,
   meta: {
-    appID: 'furucombo',
-    appMarketplaceURL: 'https://furucombo.app/decombo?chainId={chainId}&txHash={txHash}&utm_source=Blockscout',
-    appLogoURL: 'https://blockscout-content.s3.amazonaws.com/furucombo-action-btn.svg',
-    appActionButtonText: 'Decombo',
+    appID: 'uniswap',
+    appMarketplaceURL: 'https://example.com',
+    appLogoURL: 'https://localhost:3100/icon.svg',
+    appActionButtonText: 'Swap',
     textColor: '#FFFFFF',
     bgColor: '#1B1B21',
   },

mocks/metadata/appActionButton.ts

+import type { AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+const appID = 'uniswap';
+const appMarketplaceURL = 'https://example.com';
+export const appLogoURL = 'https://localhost:3100/icon.svg';
+const appActionButtonText = 'Swap';
+const textColor = '#FFFFFF';
+const bgColor = '#FF007A';
+
+export const buttonWithoutStyles: AddressMetadataTagApi['meta'] = {
+  appID,
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+};
+
+export const linkWithoutStyles: AddressMetadataTagApi['meta'] = {
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+};
+
+export const buttonWithStyles: AddressMetadataTagApi['meta'] = {
+  appID,
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+  textColor,
+  bgColor,
+};
+
+export const linkWithStyles: AddressMetadataTagApi['meta'] = {
+  appMarketplaceURL,
+  appLogoURL,
+  appActionButtonText,
+  textColor,
+  bgColor,
+};

ui/shared/AppActionButton/AppActionButton.pw.tsx

+import { Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+import * as actionButtonMetadataMock from 'mocks/metadata/appActionButton';
+import { test, expect } from 'playwright/lib';
+
+import AppActionButton from './AppActionButton';
+
+test.beforeEach(async({ mockAssetResponse }) => {
+  await mockAssetResponse(actionButtonMetadataMock.appLogoURL as string, './playwright/mocks/image_s.jpg');
+});
+
+test('button without styles +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.buttonWithoutStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('link without styles +@dark-mode', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.linkWithoutStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('button with styles', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.buttonWithStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('link with styles', async({ render }) => {
+  const component = await render(
+    <Flex w="200px">
+      <AppActionButton
+        data={ actionButtonMetadataMock.linkWithStyles as NonNullable<AddressMetadataTagFormatted['meta']> }
+        source="Txn"
+      />
+    </Flex>,
+  );
+  await expect(component).toHaveScreenshot();
+});