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

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

Hide file tree

Showing 4 changed files with 46 additions and 29 deletions.
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
@@ -1,3 +1,4 @@
+import type { ReactNode, ReactElement } from 'react';
 import { mount } from 'cypress/react';
 import { ContextObject, Result, RunOptions } from 'axe-core';
 import { realPress } from 'cypress-real-events/commands/realPress';
@@ -30,7 +31,10 @@ declare global {
       /**
        * Mounts components with a basic `EuiProvider` wrapper
        */
-      mount: typeof mount;
+      mount: (
+        children: ReactNode,
+        options: { wrapper?: ReactElement | false }
+      ) => 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,9 @@ 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 { wrapper: Wrapper = EuiProvider } = options;
+  return cypressMount(
+    Wrapper === false ? children : <Wrapper>{children}</Wrapper>
+  );
 });
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,10 +28,11 @@ describe('useCurrentEuiBreakpoint', () => {
   describe('with default EUI theme breakpoints', () => {
     beforeEach(() => {
       cy.viewport(1600, 600);
-      mount(
+      cy.mount(
         <EuiProvider>
           <MockComponent />
-        </EuiProvider>
+        </EuiProvider>,
+        { wrapper: false }
       );
       cy.wait(50); // Throttle race conditions - won't typically happen in production, but Cypress does everything extremely fast
     });
@@ -71,7 +71,7 @@ describe('useCurrentEuiBreakpoint', () => {
 
   describe('with custom breakpoints', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <EuiProvider
           modify={{
             breakpoint: {
@@ -86,7 +86,8 @@ describe('useCurrentEuiBreakpoint', () => {
           }}
         >
           <MockComponent />
-        </EuiProvider>
+        </EuiProvider>,
+        { wrapper: false }
       );
       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,37 +31,40 @@ describe('useIsWithinBreakpoints', () => {
 
   it('returns true if the current breakpoint size is in the passed sizes array', () => {
     cy.viewport(300, 600);
-    mount(
+    cy.mount(
       <EuiProvider>
         <MockComponent sizes={['xs', 's', 'm']} />
-      </EuiProvider>
+      </EuiProvider>,
+      { wrapper: false }
     );
     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>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('not.exist');
   });
 
   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>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('not.exist');
   });
 
   it('correctly handles custom breakpoint sizes', () => {
     cy.viewport(1500, 600);
-    mount(
+    cy.mount(
       <EuiProvider
         modify={{
           breakpoint: {
@@ -75,7 +77,8 @@ describe('useIsWithinBreakpoints', () => {
         }}
       >
         <MockComponent sizes={['l']} />
-      </EuiProvider>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('exist');
   });
@@ -91,27 +94,29 @@ 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>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('exist');
   });
 
   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>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('not.exist');
   });
 
   it('correctly handles custom breakpoint sizes', () => {
     cy.viewport(1400, 600);
-    mount(
+    cy.mount(
       <EuiProvider
         modify={{
           breakpoint: {
@@ -122,7 +127,8 @@ describe('useIsWithinMaxBreakpoint', () => {
         }}
       >
         <MockComponent size="m" />
-      </EuiProvider>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('exist');
   });
@@ -138,27 +144,29 @@ 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>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('exist');
   });
 
   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>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('not.exist');
   });
 
   it('correctly handles custom breakpoint sizes', () => {
     cy.viewport(600, 600);
-    mount(
+    cy.mount(
       <EuiProvider
         modify={{
           breakpoint: {
@@ -169,7 +177,8 @@ describe('useIsWithinMinBreakpoint', () => {
         }}
       >
         <MockComponent size="m" />
-      </EuiProvider>
+      </EuiProvider>,
+      { wrapper: false }
     );
     cy.get('[data-test-subj]').should('exist');
   });