test(e2e): Add E2E test for Snap dialogs (MetaMask#17504)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This adds an E2E test for Snap dialogs (alert, confirmation, custom).
Prompt dialogs don't seem to be implemented yet, so I skipped it for
now.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: Mrtenz

e2e/pages/Browser/TestSnaps.ts

@@ -129,11 +129,31 @@ class TestSnaps {
     const webElement = Matchers.getElementByWebID(
       BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
       TestSnapViewSelectorWebIDS[buttonLocator],
-    ) as any;
+    );
     await Gestures.scrollToWebViewPort(webElement);
     await Gestures.tapWebElement(webElement);
   }
 
+  async tapOkButton() {
+    const button = Matchers.getElementByText('OK');
+    await Gestures.waitAndTap(button);
+  }
+
+  async tapApproveButton() {
+    const button = Matchers.getElementByText('Approve');
+    await Gestures.waitAndTap(button);
+  }
+
+  async tapConfirmButton() {
+    const button = Matchers.getElementByText('Confirm');
+    await Gestures.waitAndTap(button);
+  }
+
+  async tapCancelButton() {
+    const button = Matchers.getElementByText('Cancel');
+    await Gestures.waitAndTap(button);
+  }
+
   async getOptionValueByText(
     webElement: IndexableWebElement,
     text: string,

e2e/selectors/Browser/TestSnaps.selectors.ts

@@ -7,6 +7,7 @@ export const TestSnapViewSelectorWebIDS = {
   connectBip32Button: 'connectbip32',
   connectBip44Button: 'connectbip44',
   connectClientStatusSnapButton: 'connectclient-status',
+  connectDialogSnapButton: 'connectdialogs',
   connectGetEntropyButton: 'connectGetEntropySnap',
   connectGetPreferencesButton: 'connectpreferences',
   connectJsonRpcButton: 'connectjson-rpc',
@@ -25,7 +26,10 @@ export const TestSnapViewSelectorWebIDS = {
   signMessageBip32Secp256k1Button: 'sendBip32-secp256k1',
   signMessageBip32ed25519Button: 'sendBip32-ed25519',
   signMessageBip32ed25519Bip32Button: 'sendBip32-ed25519Bip32',
+  sendAlertButton: 'sendAlertButton',
   sendClientStatusButton: 'sendClientStatusTest',
+  sendConfirmationButton: 'sendConfirmationButton',
+  sendCustomButton: 'sendCustomButton',
   sendGetStateButton: 'sendGetState',
   sendGetUnencryptedStateButton: 'sendGetUnencryptedState',
   sendManageStateButton: 'sendManageState',
@@ -81,6 +85,7 @@ export const TestSnapResultSelectorWebIDS = {
   clearManageStateResultSpan: 'clearManageStateResult',
   clearUnencryptedManageStateResultSpan: 'clearUnencryptedManageStateResult',
   clientStatusResultSpan: 'clientStatusResult',
+  dialogResultSpan: 'dialogResult',
   encryptedStateResultSpan: 'encryptedStateResult',
   entropySignResultSpan: 'entropySignResult',
   preferencesResultSpan: 'preferencesResult',

e2e/specs/snaps/test-snap-dialog.spec.ts

@@ -0,0 +1,103 @@
+import { FlaskBuildTests } from '../../tags';
+import { loginToApp } from '../../viewHelper';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+import TestSnaps from '../../pages/Browser/TestSnaps';
+import Assertions from '../../framework/Assertions';
+import Gestures from '../../utils/Gestures';
+import { Matchers } from '../../framework';
+import { withFixtures } from '../../framework/fixtures/FixtureHelper';
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+
+jest.setTimeout(150_000);
+
+describe(FlaskBuildTests('Dialog Snap Tests'), () => {
+  it('connects to the Dialog Snap', async () => {
+    await withFixtures(
+      {
+        fixture: new FixtureBuilder().build(),
+        restartDevice: true,
+      },
+      async () => {
+        await loginToApp();
+        await TabBarComponent.tapBrowser();
+        await TestSnaps.navigateToTestSnap();
+
+        await TestSnaps.installSnap('connectDialogSnapButton');
+      },
+    );
+  });
+
+  describe('alert', () => {
+    it('shows an alert dialog', async () => {
+      await withFixtures(
+        {
+          fixture: new FixtureBuilder().build(),
+        },
+        async () => {
+          await TestSnaps.tapButton('sendAlertButton');
+          await Assertions.expectTextDisplayed(
+            'This is an alert dialog. It has a single button: "OK".',
+          );
+
+          await TestSnaps.tapOkButton();
+          await TestSnaps.checkResultSpan('dialogResultSpan', 'null');
+        },
+      );
+    });
+  });
+
+  describe('confirmation', () => {
+    it('shows a confirmation dialog', async () => {
+      await withFixtures(
+        {
+          fixture: new FixtureBuilder().build(),
+        },
+        async () => {
+          await TestSnaps.tapButton('sendConfirmationButton');
+          await Assertions.expectTextDisplayed('Confirmation Dialog');
+
+          await TestSnaps.tapApproveButton();
+          await TestSnaps.checkResultSpan('dialogResultSpan', 'true');
+        },
+      );
+    });
+
+    it('shows a confirmation dialog and cancels', async () => {
+      await withFixtures(
+        {
+          fixture: new FixtureBuilder().build(),
+        },
+        async () => {
+          await TestSnaps.tapButton('sendConfirmationButton');
+          await Assertions.expectTextDisplayed('Confirmation Dialog');
+
+          await TestSnaps.tapCancelButton();
+          await TestSnaps.checkResultSpan('dialogResultSpan', 'false');
+        },
+      );
+    });
+  });
+
+  describe('custom', () => {
+    it('shows a custom dialog', async () => {
+      await withFixtures(
+        {
+          fixture: new FixtureBuilder().build(),
+        },
+        async () => {
+          await TestSnaps.tapButton('sendCustomButton');
+          await Assertions.expectTextDisplayed('Custom Dialog');
+
+          const input = Matchers.getElementByID('custom-input-snap-ui-input');
+          await Gestures.typeTextAndHideKeyboard(input, 'Hello, World!');
+
+          await TestSnaps.tapConfirmButton();
+          await TestSnaps.checkResultSpan(
+            'dialogResultSpan',
+            '"Hello, World!"',
+          );
+        },
+      );
+    });
+  });
+});