test: [Snaps E2E] Create test for snaps interactive ui functions (#24884

)

<!--
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**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/24884?quickstart=1)

## **Related issues**

Fixes: #24721 

## **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 Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.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.

---------

Co-authored-by: Frederik Bolding <[email protected]>

test/e2e/snaps/test-snap-interactive-ui.spec.js

@@ -0,0 +1,99 @@
+const {
+  defaultGanacheOptions,
+  withFixtures,
+  unlockWallet,
+  switchToNotificationWindow,
+  WINDOW_TITLES,
+} = require('../helpers');
+const FixtureBuilder = require('../fixture-builder');
+const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
+
+describe('Test Snap Interactive UI', function () {
+  it('test interactive ui elements', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        failOnConsoleError: false,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+
+        // navigate to test snaps page and connect to interactive ui snap
+        await driver.openNewPage(TEST_SNAPS_WEBSITE_URL);
+        await driver.delay(1000);
+        const dialogButton = await driver.findElement('#connectinteractive-ui');
+        await driver.scrollToElement(dialogButton);
+        await driver.delay(1000);
+        await driver.clickElement('#connectinteractive-ui');
+
+        // switch to metamask extension and click connect
+        await switchToNotificationWindow(driver);
+        await driver.clickElement({
+          text: 'Connect',
+          tag: 'button',
+        });
+
+        await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
+
+        await driver.waitForSelector({ text: 'Confirm' });
+
+        await driver.clickElement({
+          text: 'Confirm',
+          tag: 'button',
+        });
+
+        await driver.waitForSelector({ text: 'OK' });
+
+        await driver.clickElement({
+          text: 'OK',
+          tag: 'button',
+        });
+
+        // switch to test snaps tab
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestSnaps);
+
+        // wait for npm installation success
+        await driver.waitForSelector('#connectinteractive-ui');
+
+        // click create dialog button
+        await driver.clickElement('#createDialogButton');
+        await driver.delay(500);
+
+        // switch to dialog popup
+        await switchToNotificationWindow(driver);
+        await driver.delay(500);
+
+        // fill in thr example input
+        await driver.fill('#example-input', 'foo bar');
+
+        // try to click on dropdown
+        await driver.waitForSelector('[data-testid="snaps-dropdown"]');
+        await driver.clickElement('[data-testid="snaps-dropdown"]');
+
+        // try to select option 2 from the list
+        await driver.clickElement({ text: 'Option 2', tag: 'option' });
+
+        // try to click approve
+        await driver.clickElement('#submit');
+
+        // check for returned values
+        await driver.waitForSelector({ text: 'foo bar', tag: 'p' });
+        await driver.waitForSelector({ text: 'option2', tag: 'p' });
+
+        // try to click on approve
+        await driver.clickElement('[data-testid="confirmation-submit-button"]');
+
+        // switch to test snaps tab
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestSnaps);
+
+        // look for returned true
+        await driver.waitForSelector({
+          text: 'true',
+          css: '#interactiveUIResult',
+        });
+      },
+    );
+  });
+});

ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx

@@ -51,7 +51,12 @@ export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
       flexDirection={FlexDirection.Column}
     >
       {label && <Label htmlFor={name}>{label}</Label>}
-      <Dropdown selectedOption={value} onChange={handleChange} {...props} />
+      <Dropdown
+        data-testid="snaps-dropdown"
+        selectedOption={value}
+        onChange={handleChange}
+        {...props}
+      />
       {error && (
         <HelpText severity={HelpTextSeverity.Danger} marginTop={1}>
           {error}