Global Settings toggle tests

Signed-off-by: Akintayo A. Olusegun <[email protected]>
MetaMask · Dec 1, 2022 · bd0900b · bd0900b
1 parent 4866410
commit bd0900b
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 4 deletions.
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -5,6 +5,76 @@ exports[`Security Tab should match snapshot 1`] = `
   <div
     class="settings-page__body"
   >
+    <div
+      class="settings-page__content-row"
+      data-testid="advanced-setting-global-toggle"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Toggle all
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Turn off/on all security and privacy settings.
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <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="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>
+              <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"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
     <div
       class="settings-page__content-row"
     >

diff --git a/ui/pages/settings/security-tab/security-tab.test.js b/ui/pages/settings/security-tab/security-tab.test.js
@@ -43,7 +43,7 @@ describe('Security Tab', () => {
     const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
 
     const checkboxes = queryAllByRole('checkbox');
-    const showIncomingCheckbox = checkboxes[0];
+    const showIncomingCheckbox = checkboxes[1];
 
     expect(showIncomingCheckbox).toHaveAttribute('value', 'true');
 
@@ -58,7 +58,7 @@ describe('Security Tab', () => {
     const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
 
     const checkboxes = queryAllByRole('checkbox');
-    const showIncomingCheckbox = checkboxes[1];
+    const showIncomingCheckbox = checkboxes[2];
 
     expect(showIncomingCheckbox).toHaveAttribute('value', 'true');
 
@@ -73,7 +73,7 @@ describe('Security Tab', () => {
     const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
 
     const checkboxes = queryAllByRole('checkbox');
-    const showIncomingCheckbox = checkboxes[2];
+    const showIncomingCheckbox = checkboxes[3];
 
     expect(showIncomingCheckbox).toHaveAttribute('value', 'false');
 
@@ -88,7 +88,7 @@ describe('Security Tab', () => {
     const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
 
     const checkboxes = queryAllByRole('checkbox');
-    const tokenDetectionToggle = checkboxes[3];
+    const tokenDetectionToggle = checkboxes[4];
 
     expect(tokenDetectionToggle).toHaveAttribute('value', 'true');
 
@@ -104,4 +104,25 @@ describe('Security Tab', () => {
 
     expect(tokenDetectionToggle).toHaveAttribute('value', 'true');
   });
+
+  it('should toggle global settings', () => {
+    const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
+
+    const checkboxes = queryAllByRole('checkbox');
+    const toggleGlobalSettings = checkboxes[0];
+
+    expect(toggleGlobalSettings).toHaveAttribute('value', 'false');
+
+    fireEvent.change(toggleGlobalSettings, {
+      target: { value: true },
+    });
+
+    expect(toggleGlobalSettings).toHaveAttribute('value', 'true');
+
+    fireEvent.change(toggleGlobalSettings, {
+      target: { value: false },
+    });
+
+    expect(toggleGlobalSettings).toHaveAttribute('value', 'false');
+  });
 });