add tests

ui/pages/Marketplace.pw.tsx

@@ -13,6 +13,9 @@ import Marketplace from './Marketplace';
 const MARKETPLACE_CONFIG_URL = app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', 'https://marketplace-config.json') || '';
 const MARKETPLACE_SECURITY_REPORTS_URL =
   app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', 'https://marketplace-security-reports.json') || '';
+const MARKETPLACE_BANNER_CONTENT_URL =
+  app.url + buildExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', 'https://marketplace-banner.html') || '';
+const MARKETPLACE_BANNER_LINK_URL = 'https://example.com';
 
 const test = base.extend({
   context: contextWithEnvs([
@@ -21,7 +24,7 @@ const test = base.extend({
   ]) as any,
 });
 
-test('base view +@mobile +@dark-mode', async({ mount, page }) => {
+const testFn: Parameters<typeof test>[1] = async({ mount, page }) => {
   await page.route(MARKETPLACE_CONFIG_URL, (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(appsMock),
@@ -36,6 +39,11 @@ test('base view +@mobile +@dark-mode', async({ mount, page }) => {
     ),
   ));
 
+  await page.route(MARKETPLACE_BANNER_CONTENT_URL, (route) => route.fulfill({
+    status: 200,
+    path: './playwright/mocks/banner.html',
+  }));
+
   const component = await mount(
     <TestApp>
       <Marketplace/>
@@ -43,8 +51,31 @@ test('base view +@mobile +@dark-mode', async({ mount, page }) => {
   );
 
   await expect(component).toHaveScreenshot();
+};
+
+test('base view +@mobile +@dark-mode', testFn);
+
+const testWithFeaturedApp = test.extend({
+  context: contextWithEnvs([
+    { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
+    { name: 'NEXT_PUBLIC_MARKETPLACE_FEATURED_APP', value: 'hop-exchange' },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ]) as any,
 });
 
+testWithFeaturedApp('with featured app +@mobile +@dark-mode', testFn);
+
+const testWithBanner = test.extend({
+  context: contextWithEnvs([
+    { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },
+    { name: 'NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL', value: MARKETPLACE_BANNER_CONTENT_URL },
+    { name: 'NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL', value: MARKETPLACE_BANNER_LINK_URL },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ]) as any,
+});
+
+testWithBanner('with banner +@mobile +@dark-mode', testFn);
+
 const testWithScoreFeature = test.extend({
   context: contextWithEnvs([
     { name: 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', value: MARKETPLACE_CONFIG_URL },