test: Enhance Snap home page

test/e2e/page-objects/pages/snap-list-page.ts

@@ -33,6 +33,16 @@ class SnapListPage {
   // this selector needs to be combined with snap name to be unique.
   private readonly snapListItem = '.snap-list-item';
 
+  private readonly defaultSnap = {
+    text: 'Home Page Example Snap',
+    tag: 'p',
+  };
+
+  private readonly title = {
+    text: 'Welcome to my Snap home page!',
+    tag: 'p',
+  };
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -75,6 +85,22 @@ class SnapListPage {
     console.log('Verifying no snaps is installed for current account');
     await this.driver.waitForSelector(this.noSnapInstalledMessage);
   }
+
+  async clickDefaultSnap(): Promise<void> {
+    console.log('Clicking default snap');
+    await this.driver.waitForSelector(this.defaultSnap);
+    await this.driver.clickElement(this.defaultSnap);
+  }
+
+  async check_title(): Promise<void> {
+    try {
+      await this.driver.waitForSelector(this.title);
+    } catch (e) {
+      console.log('Timeout while waiting for title to be loaded', e);
+      throw e;
+    }
+    console.log('Title is loaded');
+  }
 }
 
 export default SnapListPage;

test/e2e/page-objects/pages/test-snaps.ts

@@ -12,6 +12,26 @@ export class TestSnaps {
 
   private readonly dialogsSnapConfirmationButton = '#sendConfirmationButton';
 
+  private readonly dialogConnectButton = {
+    text: 'Connect',
+    tag: 'button',
+    css: '[data-testid="page-container-footer-next"]',
+  };
+
+  private readonly dialogConfirmButton = {
+    text: 'Confirm',
+    tag: 'button',
+    css: '[data-testid="page-container-footer-next"]',
+  };
+
+  private readonly dialogOkButton = {
+    text: 'OK',
+    tag: 'button',
+    css: '[data-testid="page-container-footer-next"]',
+  };
+
+  private readonly connectHomePage = '#connecthomepage';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -36,21 +56,33 @@ export class TestSnaps {
   async completeSnapInstallConfirmation() {
     await this.driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
-    await this.driver.clickElement({
-      text: 'Connect',
-      tag: 'button',
-    });
+    await this.driver.waitForSelector(this.dialogConnectButton);
+
+    await this.driver.clickElement(this.dialogConnectButton);
+
+    await this.driver.waitForSelector(this.dialogConfirmButton);
 
-    await this.driver.clickElement({
-      text: 'Confirm',
-      tag: 'button',
-    });
+    await this.driver.clickElement(this.dialogConfirmButton);
 
-    await this.driver.clickElement({
-      text: 'OK',
-      tag: 'button',
-    });
+    await this.driver.waitForSelector(this.dialogOkButton);
+
+    await this.driver.clickElement(this.dialogOkButton);
 
     await this.driver.switchToWindowWithTitle(WINDOW_TITLES.TestSnaps);
   }
+
+  async clickConnectHomePage() {
+    // find and scroll to the homepage snap
+    const connectHomePageButton = await this.driver.findElement(
+      this.connectHomePage,
+    );
+    await this.driver.scrollToElement(connectHomePageButton);
+
+    // added delay for firefox
+    await this.driver.delayFirefox(1000);
+
+    // wait for and click connect
+    await this.driver.waitForSelector(this.connectHomePage);
+    await this.driver.clickElement(this.connectHomePage);
+  }
 }

test/e2e/snaps/test-snap-homepage.spec.ts

@@ -0,0 +1,41 @@
+import { Suite } from 'mocha';
+import { Driver } from '../webdriver/driver';
+import { withFixtures, WINDOW_TITLES } from '../helpers';
+import FixtureBuilder from '../fixture-builder';
+import { TestSnaps } from '../page-objects/pages/test-snaps';
+import HeaderNavbar from '../page-objects/pages/header-navbar';
+import SnapListPage from '../page-objects/pages/snap-list-page';
+import { loginWithoutBalanceValidation } from '../page-objects/flows/login.flow';
+
+describe('Test Snap Homepage', function (this: Suite) {
+  it('tests snap home page functionality', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await loginWithoutBalanceValidation(driver);
+
+        const testSnaps = new TestSnaps(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        const snapListPage = new SnapListPage(driver);
+
+        await testSnaps.openPage();
+        await testSnaps.clickConnectHomePage();
+        await testSnaps.completeSnapInstallConfirmation();
+
+        // switch to metamask page and open the three dots menu
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
+
+        await headerNavbar.openSnapListPage();
+        await snapListPage.clickDefaultSnap();
+
+        // check that the home page appears and contains the right info
+        await snapListPage.check_title();
+      },
+    );
+  });
+});