From d2e9c05a4fc0286755a23386771afa8bab4e5b81 Mon Sep 17 00:00:00 2001
From: kyledurand <kyle.durand@shopify.com>
Date: Wed, 1 Nov 2023 13:17:21 -0400
Subject: [PATCH] chore: Add destructive tests for page / modal

---
 .changeset/seven-shoes-obey.md                |  5 +++
 .../src/components/Modal/tests/Modal.test.tsx | 38 +++++++++++++++++++
 .../src/components/Page/tests/Page.test.tsx   | 30 +++++++++++++++
 .../PageActions/PageActions.stories.tsx       |  6 +--
 .../PageActions/tests/PageActions.test.tsx    |  1 -
 5 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/seven-shoes-obey.md

diff --git a/.changeset/seven-shoes-obey.md b/.changeset/seven-shoes-obey.md
new file mode 100644
index 00000000000..b83b90c4d88
--- /dev/null
+++ b/.changeset/seven-shoes-obey.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added tests for destructive mapping in `Page` and `Modal`
diff --git a/polaris-react/src/components/Modal/tests/Modal.test.tsx b/polaris-react/src/components/Modal/tests/Modal.test.tsx
index 3559e5ff69e..857e3021e16 100644
--- a/polaris-react/src/components/Modal/tests/Modal.test.tsx
+++ b/polaris-react/src/components/Modal/tests/Modal.test.tsx
@@ -354,6 +354,26 @@ describe('<Modal>', () => {
       expect(modal).toContainReactComponent(Footer);
     });
 
+    it('renders a destructive primaryAction', () => {
+      const modal = mountWithApp(
+        <Modal
+          title="foo"
+          onClose={jest.fn()}
+          open
+          primaryAction={{
+            content: 'Save',
+            onAction: jest.fn(),
+            destructive: true,
+          }}
+        />,
+      );
+
+      expect(modal).toContainReactComponent(Button, {
+        variant: 'primary',
+        tone: 'critical',
+      });
+    });
+
     it('renders if secondaryActions are passed in', () => {
       const modal = mountWithApp(
         <Modal
@@ -368,6 +388,24 @@ describe('<Modal>', () => {
     });
   });
 
+  it('renders destructive secondaryActions', () => {
+    const modal = mountWithApp(
+      <Modal
+        title="foo"
+        onClose={jest.fn()}
+        open
+        secondaryActions={[
+          {content: 'Discard', onAction: jest.fn(), destructive: true},
+        ]}
+      />,
+    );
+
+    expect(modal).toContainReactComponent(Button, {
+      variant: 'primary',
+      tone: 'critical',
+    });
+  });
+
   describe('body', () => {
     it('limits dialog height from limitHeight prop', () => {
       const modal = mountWithApp(
diff --git a/polaris-react/src/components/Page/tests/Page.test.tsx b/polaris-react/src/components/Page/tests/Page.test.tsx
index 0aeb6274ad1..e8bbc4c54bc 100644
--- a/polaris-react/src/components/Page/tests/Page.test.tsx
+++ b/polaris-react/src/components/Page/tests/Page.test.tsx
@@ -9,6 +9,7 @@ import {LegacyCard} from '../../LegacyCard';
 import {Page} from '../Page';
 import type {PageProps} from '../Page';
 import {Header} from '../components';
+import {Button} from '../../Button';
 
 window.matchMedia =
   window.matchMedia ||
@@ -91,6 +92,20 @@ describe('<Page />', () => {
       expect(page).toContainReactComponent(Header);
     });
 
+    it('renders a critical button when destructive is true', () => {
+      const primaryAction = {
+        content: 'Save',
+        destructive: true,
+      };
+      const page = mountWithApp(
+        <Page {...mockProps} primaryAction={primaryAction} />,
+      );
+      expect(page).toContainReactComponent(Button, {
+        tone: 'critical',
+        variant: 'primary',
+      });
+    });
+
     it('gets passed into the <Header />', () => {
       const primaryAction = {
         content: 'Save',
@@ -117,6 +132,21 @@ describe('<Page />', () => {
       expect(page).toContainReactComponent(Header);
     });
 
+    it('renders a critical button when destructive is true', () => {
+      const secondaryActions = [
+        {
+          content: 'Preview',
+          destructive: true,
+        },
+      ];
+      const page = mountWithApp(
+        <Page {...mockProps} secondaryActions={secondaryActions} />,
+      );
+      expect(page).toContainReactComponent(Button, {
+        tone: 'critical',
+      });
+    });
+
     it('gets passed into the <Header />', () => {
       const secondaryActions = [
         {
diff --git a/polaris-react/src/components/PageActions/PageActions.stories.tsx b/polaris-react/src/components/PageActions/PageActions.stories.tsx
index d84450b9593..4cf9301d2c9 100644
--- a/polaris-react/src/components/PageActions/PageActions.stories.tsx
+++ b/polaris-react/src/components/PageActions/PageActions.stories.tsx
@@ -15,8 +15,7 @@ export function Default() {
       secondaryActions={[
         {
           content: 'Delete',
-          tone: 'critical',
-          variant: 'primary',
+          destructive: true,
         },
       ]}
     />
@@ -40,8 +39,7 @@ export function WithCustomPrimaryAction() {
       secondaryActions={[
         {
           content: 'Delete',
-          tone: 'critical',
-          variant: 'primary',
+          destructive: true,
         },
       ]}
     />
diff --git a/polaris-react/src/components/PageActions/tests/PageActions.test.tsx b/polaris-react/src/components/PageActions/tests/PageActions.test.tsx
index 69cab9c1e47..285c3d87feb 100644
--- a/polaris-react/src/components/PageActions/tests/PageActions.test.tsx
+++ b/polaris-react/src/components/PageActions/tests/PageActions.test.tsx
@@ -55,7 +55,6 @@ describe('<PageActions />', () => {
       {
         content: 'Delete',
         destructive: true,
-        outline: true,
       },
     ];