From 0fadabd5e2cd8ea2677ea2d0c86224c165ef9649 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 17 Jul 2023 09:42:53 -0700 Subject: [PATCH] [PR feedback] Allow `cy.mount` to have a configurable provider props --- cypress/support/index.d.ts | 7 +- cypress/support/setup/mount.js | 5 +- .../breakpoint/current_breakpoint.spec.tsx | 37 ++---- .../breakpoint/is_within_hooks.spec.tsx | 111 ++++++------------ 4 files changed, 55 insertions(+), 105 deletions(-) diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts index f20e645816e..b2d2eb20f2b 100644 --- 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[0]; type RealPressOptions = Parameters[1]; @@ -30,7 +32,10 @@ declare global { /** * Mounts components with a basic `EuiProvider` wrapper */ - mount: typeof mount; + mount: ( + children: ReactNode, + options?: { providerProps?: Partial> } + ) => ReturnType; /** * 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 index 192ce0641b6..c0f7edf3e3f 100644 --- 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({children}); +Cypress.Commands.add('mount', (children, options = {}) => { + const { providerProps } = options; + return cypressMount({children}); }); diff --git a/src/services/breakpoint/current_breakpoint.spec.tsx b/src/services/breakpoint/current_breakpoint.spec.tsx index d64842bdf5f..74998e9a88c 100644 --- a/src/services/breakpoint/current_breakpoint.spec.tsx +++ b/src/services/breakpoint/current_breakpoint.spec.tsx @@ -11,9 +11,7 @@ /// import React from 'react'; -import { mount } from 'cypress/react'; // cy.mount is configured to automatically wrap , which we're already using manually here -import { EuiProvider } from '../../components/provider'; import { useCurrentEuiBreakpoint } from './'; describe('useCurrentEuiBreakpoint', () => { @@ -29,11 +27,7 @@ describe('useCurrentEuiBreakpoint', () => { describe('with default EUI theme breakpoints', () => { beforeEach(() => { cy.viewport(1600, 600); - mount( - - - - ); + cy.mount(); cy.wait(50); // Throttle race conditions - won't typically happen in production, but Cypress does everything extremely fast }); @@ -71,23 +65,18 @@ describe('useCurrentEuiBreakpoint', () => { describe('with custom breakpoints', () => { beforeEach(() => { - mount( - - - - ); + const customBreakpoints = { + xxs: 0, + xs: 250, + s: 500, + m: 1000, + l: 1500, + xl: 2000, + xxl: 2500, + }; + cy.mount(, { + 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 index ca685a27cb8..33e9d2cbd28 100644 --- a/src/services/breakpoint/is_within_hooks.spec.tsx +++ b/src/services/breakpoint/is_within_hooks.spec.tsx @@ -11,9 +11,7 @@ /// import React, { FunctionComponent } from 'react'; -import { mount } from 'cypress/react'; // mount is configured to automatically wrap , which we're already using manually here -import { EuiProvider } from '../../components/provider'; import { _EuiThemeBreakpoint } from '../../global_styling/variables/breakpoint'; import { useIsWithinBreakpoints, @@ -32,51 +30,34 @@ describe('useIsWithinBreakpoints', () => { it('returns true if the current breakpoint size is in the passed sizes array', () => { cy.viewport(300, 600); - mount( - - - - ); + cy.mount(); 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(); 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(); cy.get('[data-test-subj]').should('not.exist'); }); it('correctly handles custom breakpoint sizes', () => { + const customBreakpoints = { + xs: 0, + s: 500, + m: 1000, + l: 1500, + xl: 2000, + }; cy.viewport(1500, 600); - mount( - - - - ); + cy.mount(, { + providerProps: { modify: { breakpoint: customBreakpoints } }, + }); cy.get('[data-test-subj]').should('exist'); }); }); @@ -91,39 +72,26 @@ describe('useIsWithinMaxBreakpoint', () => { it('returns true if the current breakpoint size is smaller than the passed max size', () => { cy.viewport(300, 600); - mount( - - - - ); + cy.mount(); 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(); cy.get('[data-test-subj]').should('not.exist'); }); it('correctly handles custom breakpoint sizes', () => { + const customBreakpoints = { + m: 1500, + l: 1800, + xl: 2000, + }; cy.viewport(1400, 600); - mount( - - - - ); + cy.mount(, { + providerProps: { modify: { breakpoint: customBreakpoints } }, + }); cy.get('[data-test-subj]').should('exist'); }); }); @@ -138,39 +106,26 @@ describe('useIsWithinMinBreakpoint', () => { it('returns true if the current breakpoint size is larger than the passed min size', () => { cy.viewport(800, 600); - mount( - - - - ); + cy.mount(); 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(); cy.get('[data-test-subj]').should('not.exist'); }); it('correctly handles custom breakpoint sizes', () => { + const customBreakpoints = { + m: 600, + l: 800, + xl: 1000, + }; cy.viewport(600, 600); - mount( - - - - ); + cy.mount(, { + providerProps: { modify: { breakpoint: customBreakpoints } }, + }); cy.get('[data-test-subj]').should('exist'); }); });