[PR feedback] Allow cy.mount to have a configurable wrapper

elastic · Jul 17, 2023 · e03d477 · e03d477
1 parent 1db5f22
commit e03d477
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 75 deletions.
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
@@ -1,6 +1,8 @@
+import type { ReactNode } from 'react';
 import { mount } from 'cypress/react';
 import { ContextObject, Result, RunOptions } from 'axe-core';
 import { realPress } from 'cypress-real-events/commands/realPress';
+import type { EuiProviderProps } from '../../src/components/provider';
 
 type KeyOrShortcut = Parameters<typeof realPress>[0];
 type RealPressOptions = Parameters<typeof realPress>[1];
@@ -30,7 +32,10 @@ declare global {
       /**
        * Mounts components with a basic `EuiProvider` wrapper
        */
-      mount: typeof mount;
+      mount: <T = {}>(
+        children: ReactNode,
+        options?: { providerProps?: Partial<EuiProviderProps<T>> }
+      ) => ReturnType<typeof mount>;
 
       /**
        * This ensures the correct testing window has focus when using Cypress Real Events.

diff --git a/cypress/support/setup/mount.js b/cypress/support/setup/mount.js
@@ -10,6 +10,7 @@ import React from 'react';
 import { mount as cypressMount } from 'cypress/react';
 import { EuiProvider } from '../../../src';
 
-Cypress.Commands.add('mount', (children) => {
-  return cypressMount(<EuiProvider>{children}</EuiProvider>);
+Cypress.Commands.add('mount', (children, options = {}) => {
+  const { providerProps } = options;
+  return cypressMount(<EuiProvider {...providerProps}>{children}</EuiProvider>);
 });
diff --git a/src/services/breakpoint/current_breakpoint.spec.tsx b/src/services/breakpoint/current_breakpoint.spec.tsx
@@ -11,7 +11,6 @@
 /// <reference types="../../../cypress/support" />
 
 import React from 'react';
-import { mount } from 'cypress/react'; // cy.mount is configured to automatically wrap <EuiProvider>, which we're already using manually here
 
 import { EuiProvider } from '../../components/provider';
 import { useCurrentEuiBreakpoint } from './';
@@ -29,7 +28,7 @@ describe('useCurrentEuiBreakpoint', () => {
   describe('with default EUI theme breakpoints', () => {
     beforeEach(() => {
       cy.viewport(1600, 600);
-      mount(
+      cy.mount(
         <EuiProvider>
           <MockComponent />
         </EuiProvider>
@@ -71,23 +70,18 @@ describe('useCurrentEuiBreakpoint', () => {
 
   describe('with custom breakpoints', () => {
     beforeEach(() => {
-      mount(
-        <EuiProvider
-          modify={{
-            breakpoint: {
-              xxs: 0,
-              xs: 250,
-              s: 500,
-              m: 1000,
-              l: 1500,
-              xl: 2000,
-              xxl: 2500,
-            },
-          }}
-        >
-          <MockComponent />
-        </EuiProvider>
-      );
+      const customBreakpoints = {
+        xxs: 0,
+        xs: 250,
+        s: 500,
+        m: 1000,
+        l: 1500,
+        xl: 2000,
+        xxl: 2500,
+      };
+      cy.mount(<MockComponent />, {
+        providerProps: { modify: { breakpoint: customBreakpoints } },
+      });
       cy.wait(50); // Throttle race conditions - won't typically happen in production, but Cypress does everything extremely fast
     });
 

diff --git a/src/services/breakpoint/is_within_hooks.spec.tsx b/src/services/breakpoint/is_within_hooks.spec.tsx
@@ -11,7 +11,6 @@
 /// <reference types="../../../cypress/support" />
 
 import React, { FunctionComponent } from 'react';
-import { mount } from 'cypress/react'; // mount is configured to automatically wrap <EuiProvider>, which we're already using manually here
 
 import { EuiProvider } from '../../components/provider';
 import { _EuiThemeBreakpoint } from '../../global_styling/variables/breakpoint';
@@ -32,17 +31,13 @@ describe('useIsWithinBreakpoints', () => {
 
   it('returns true if the current breakpoint size is in the passed sizes array', () => {
     cy.viewport(300, 600);
-    mount(
-      <EuiProvider>
-        <MockComponent sizes={['xs', 's', 'm']} />
-      </EuiProvider>
-    );
+    cy.mount(<MockComponent sizes={['xs', 's', 'm']} />);
     cy.get('[data-test-subj]').should('exist');
   });
 
   it('returns false if the current breakpoint size is outside the passed sizes array', () => {
     cy.viewport(1400, 600);
-    mount(
+    cy.mount(
       <EuiProvider>
         <MockComponent sizes={['xs', 's', 'm']} />
       </EuiProvider>
@@ -52,7 +47,7 @@ describe('useIsWithinBreakpoints', () => {
 
   it('returns false always if isResponsive is passed as false', () => {
     cy.viewport(300, 600);
-    mount(
+    cy.mount(
       <EuiProvider>
         <MockComponent sizes={['xs', 's', 'm']} isResponsive={false} />
       </EuiProvider>
@@ -61,22 +56,17 @@ describe('useIsWithinBreakpoints', () => {
   });
 
   it('correctly handles custom breakpoint sizes', () => {
+    const customBreakpoints = {
+      xs: 0,
+      s: 500,
+      m: 1000,
+      l: 1500,
+      xl: 2000,
+    };
     cy.viewport(1500, 600);
-    mount(
-      <EuiProvider
-        modify={{
-          breakpoint: {
-            xs: 0,
-            s: 500,
-            m: 1000,
-            l: 1500,
-            xl: 2000,
-          },
-        }}
-      >
-        <MockComponent sizes={['l']} />
-      </EuiProvider>
-    );
+    cy.mount(<MockComponent sizes={['l']} />, {
+      providerProps: { modify: { breakpoint: customBreakpoints } },
+    });
     cy.get('[data-test-subj]').should('exist');
   });
 });
@@ -91,7 +81,7 @@ describe('useIsWithinMaxBreakpoint', () => {
 
   it('returns true if the current breakpoint size is smaller than the passed max size', () => {
     cy.viewport(300, 600);
-    mount(
+    cy.mount(
       <EuiProvider>
         <MockComponent size="m" />
       </EuiProvider>
@@ -101,7 +91,7 @@ describe('useIsWithinMaxBreakpoint', () => {
 
   it('returns false if the current breakpoint size is larger than the passed max size', () => {
     cy.viewport(1400, 600);
-    mount(
+    cy.mount(
       <EuiProvider>
         <MockComponent size="m" />
       </EuiProvider>
@@ -110,20 +100,15 @@ describe('useIsWithinMaxBreakpoint', () => {
   });
 
   it('correctly handles custom breakpoint sizes', () => {
+    const customBreakpoints = {
+      m: 1500,
+      l: 1800,
+      xl: 2000,
+    };
     cy.viewport(1400, 600);
-    mount(
-      <EuiProvider
-        modify={{
-          breakpoint: {
-            m: 1500,
-            l: 1800,
-            xl: 2000,
-          },
-        }}
-      >
-        <MockComponent size="m" />
-      </EuiProvider>
-    );
+    cy.mount(<MockComponent size="m" />, {
+      providerProps: { modify: { breakpoint: customBreakpoints } },
+    });
     cy.get('[data-test-subj]').should('exist');
   });
 });
@@ -138,7 +123,7 @@ describe('useIsWithinMinBreakpoint', () => {
 
   it('returns true if the current breakpoint size is larger than the passed min size', () => {
     cy.viewport(800, 600);
-    mount(
+    cy.mount(
       <EuiProvider>
         <MockComponent size="m" />
       </EuiProvider>
@@ -148,7 +133,7 @@ describe('useIsWithinMinBreakpoint', () => {
 
   it('returns false if the current breakpoint size is smaller than the passed min size', () => {
     cy.viewport(600, 600);
-    mount(
+    cy.mount(
       <EuiProvider>
         <MockComponent size="m" />
       </EuiProvider>
@@ -157,20 +142,15 @@ describe('useIsWithinMinBreakpoint', () => {
   });
 
   it('correctly handles custom breakpoint sizes', () => {
+    const customBreakpoints = {
+      m: 600,
+      l: 800,
+      xl: 1000,
+    };
     cy.viewport(600, 600);
-    mount(
-      <EuiProvider
-        modify={{
-          breakpoint: {
-            m: 600,
-            l: 800,
-            xl: 1000,
-          },
-        }}
-      >
-        <MockComponent size="m" />
-      </EuiProvider>
-    );
+    cy.mount(<MockComponent size="m" />, {
+      providerProps: { modify: { breakpoint: customBreakpoints } },
+    });
     cy.get('[data-test-subj]').should('exist');
   });
 });