From 5b0d465d30e48955fbb8e833e0fff5ef6b9ecb3f Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 21 Apr 2022 14:18:03 -0230
Subject: [PATCH] Fix the alerts toggles in settings (#14498)

---
 ui/pages/settings/alerts-tab/alerts-tab.js    |  1 +
 .../settings/alerts-tab/alerts-tab.test.js    | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 ui/pages/settings/alerts-tab/alerts-tab.test.js

diff --git a/ui/pages/settings/alerts-tab/alerts-tab.js b/ui/pages/settings/alerts-tab/alerts-tab.js
index 465f43a49..9eecef497 100644
--- a/ui/pages/settings/alerts-tab/alerts-tab.js
+++ b/ui/pages/settings/alerts-tab/alerts-tab.js
@@ -69,6 +69,7 @@ const AlertsTab = () => {
       {Object.entries(alertConfig).map(
         ([alertId, { title, description }], _) => (
           <AlertSettingsEntry
+            alertId={alertId}
             description={description}
             key={alertId}
             title={title}
diff --git a/ui/pages/settings/alerts-tab/alerts-tab.test.js b/ui/pages/settings/alerts-tab/alerts-tab.test.js
new file mode 100644
index 000000000..0de3611ff
--- /dev/null
+++ b/ui/pages/settings/alerts-tab/alerts-tab.test.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../test/jest/rendering';
+import { ALERT_TYPES } from '../../../../shared/constants/alerts';
+import AlertsTab from '.';
+
+const mockSetAlertEnabledness = jest.fn();
+
+jest.mock('../../../store/actions', () => ({
+  setAlertEnabledness: (...args) => mockSetAlertEnabledness(...args),
+}));
+
+describe('Alerts Tab', () => {
+  const store = configureMockStore([])({
+    metamask: {
+      alertEnabledness: {
+        unconnectedAccount: false,
+        web3ShimUsage: false,
+      },
+    },
+  });
+
+  it('calls setAlertEnabledness with the correct params method when the toggles are clicked', () => {
+    renderWithProvider(<AlertsTab />, store);
+
+    expect(mockSetAlertEnabledness.mock.calls).toHaveLength(0);
+    fireEvent.click(screen.getAllByRole('checkbox')[0]);
+    expect(mockSetAlertEnabledness.mock.calls).toHaveLength(1);
+    expect(mockSetAlertEnabledness.mock.calls[0][0]).toBe(
+      ALERT_TYPES.unconnectedAccount,
+    );
+    expect(mockSetAlertEnabledness.mock.calls[0][1]).toBe(true);
+
+    fireEvent.click(screen.getAllByRole('checkbox')[1]);
+    expect(mockSetAlertEnabledness.mock.calls).toHaveLength(2);
+    expect(mockSetAlertEnabledness.mock.calls[1][0]).toBe(
+      ALERT_TYPES.web3ShimUsage,
+    );
+    expect(mockSetAlertEnabledness.mock.calls[1][1]).toBe(true);
+  });
+});