[Page / Modal] Add destructive tests (#11079)

.changeset/seven-shoes-obey.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added tests for destructive mapping in `Page` and `Modal`

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(

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 = [
         {

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,
         },
       ]}
     />

polaris-react/src/components/PageActions/tests/PageActions.test.tsx

@@ -55,7 +55,6 @@ describe('<PageActions />', () => {
       {
         content: 'Delete',
         destructive: true,
-        outline: true,
       },
     ];