Add data-testid for toggle button (#21337)

## **Description** This PR adds the prop `dataTestId` to the `ToggleButton` for easier testing. ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [x] 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)). - [x] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [x] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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: Gauthier Petetin <[email protected]> Co-authored-by: Brad Decker <[email protected]> Co-authored-by: Marina Boboc <[email protected]> Co-authored-by: Peter <[email protected]> Co-authored-by: Daniel Rocha <[email protected]> Co-authored-by: Howard Braham <[email protected]> Co-authored-by: António Regadas <[email protected]> Co-authored-by: Gustavo Antunes <[email protected]>
MetaMask · Oct 13, 2023 · 69316d2 · 69316d2
1 parent 8646a76
commit 69316d2
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 51 deletions.
diff --git a/ui/components/ui/toggle-button/toggle-button.component.js b/ui/components/ui/toggle-button/toggle-button.component.js
@@ -47,7 +47,15 @@ const colors = {
 };
 
 const ToggleButton = (props) => {
-  const { value, onToggle, offLabel, onLabel, disabled, className } = props;
+  const {
+    value,
+    onToggle,
+    offLabel,
+    onLabel,
+    disabled,
+    className,
+    dataTestId,
+  } = props;
 
   const modifier = value ? 'on' : 'off';
 
@@ -77,6 +85,9 @@ const ToggleButton = (props) => {
         thumbStyle={thumbStyle}
         thumbAnimateRange={[3, 18]}
         colors={colors}
+        passThroughInputProps={{
+          'data-testId': dataTestId,
+        }}
       />
       <div className="toggle-button__status">
         <span className="toggle-button__label-off">{offLabel}</span>
@@ -111,6 +122,10 @@ ToggleButton.propTypes = {
    * Additional className to add to the ToggleButton
    */
   className: PropTypes.string,
+  /**
+   * A test id for the toggle button
+   */
+  dataTestId: PropTypes.string,
 };
 
 export default ToggleButton;
diff --git a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
@@ -208,52 +208,48 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
             >
               Enable "Add account Snap (Beta)"
             </h5>
-            <div
-              class="mm-box"
-              data-testid="add-snap-account-toggle"
+            <label
+              class="toggle-button toggle-button--off"
+              tabindex="0"
             >
-              <label
-                class="toggle-button toggle-button--off"
-                tabindex="0"
+              <div
+                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
               >
                 <div
-                  style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
                 >
                   <div
-                    style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                  >
-                    <div
-                      style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
-                    />
-                    <div
-                      style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
-                    />
-                  </div>
+                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                  />
                   <div
-                    style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                  >
-                    <div
-                      style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
-                    />
-                  </div>
-                  <input
-                    style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                    type="checkbox"
-                    value="false"
+                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                   />
                 </div>
                 <div
-                  class="toggle-button__status"
+                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
                 >
-                  <span
-                    class="toggle-button__label-off"
-                  />
-                  <span
-                    class="toggle-button__label-on"
+                  <div
+                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
                   />
                 </div>
-              </label>
-            </div>
+                <input
+                  data-testid="add-snap-account-toggle"
+                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                  type="checkbox"
+                  value="false"
+                />
+              </div>
+              <div
+                class="toggle-button__status"
+              >
+                <span
+                  class="toggle-button__label-off"
+                />
+                <span
+                  class="toggle-button__label-on"
+                />
+              </div>
+            </label>
           </div>
           <h6
             class="mm-box mm-text mm-text--body-sm mm-box--margin-top-0 mm-box--color-text-alternative"

diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -307,21 +307,20 @@ export default class ExperimentalTab extends PureComponent {
                 >
                   {t('addSnapAccountToggle')}
                 </Text>
-                <Box data-testid="add-snap-account-toggle">
-                  <ToggleButton
-                    value={addSnapAccountEnabled}
-                    onToggle={(value) => {
-                      trackEvent({
-                        event: MetaMetricsEventName.AddSnapAccountEnabled,
-                        category: MetaMetricsEventCategory.Settings,
-                        properties: {
-                          enabled: !value,
-                        },
-                      });
-                      setAddSnapAccountEnabled(!value);
-                    }}
-                  />
-                </Box>
+                <ToggleButton
+                  dataTestId="add-snap-account-toggle"
+                  value={addSnapAccountEnabled}
+                  onToggle={(value) => {
+                    trackEvent({
+                      event: MetaMetricsEventName.AddSnapAccountEnabled,
+                      category: MetaMetricsEventCategory.Settings,
+                      properties: {
+                        enabled: !value,
+                      },
+                    });
+                    setAddSnapAccountEnabled(!value);
+                  }}
+                />
               </div>
               <Text
                 variant={TextVariant.bodySm}

diff --git a/ui/pages/settings/experimental-tab/experimental-tab.test.js b/ui/pages/settings/experimental-tab/experimental-tab.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, renderWithProvider } from '../../../../test/jest';
+import { fireEvent, renderWithProvider, waitFor } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
 import { LegacyMetaMetricsProvider } from '../../../contexts/metametrics';
@@ -86,4 +86,21 @@ describe('ExperimentalTab', () => {
     expect(setTransactionSecurityCheckEnabled).toHaveBeenCalledWith(true);
     expect(setSecurityAlertsEnabled).toHaveBeenCalledWith(false);
   });
+
+  it('should enable add account snap', async () => {
+    const setAddSnapAccountEnabled = jest.fn();
+    const { getByTestId } = render(
+      { desktopEnabled: true },
+      {
+        setAddSnapAccountEnabled,
+      },
+    );
+
+    const toggle = getByTestId('add-snap-account-toggle');
+    fireEvent.click(toggle);
+
+    await waitFor(() => {
+      expect(setAddSnapAccountEnabled).toHaveBeenCalledWith(true);
+    });
+  });
 });