Merge pull request #22287 from cypress-io/mikep/CLOUD-577-fix-compone…

…nt-tests
cypress-io · Jun 14, 2022 · 24da048 · 24da048
2 parents d181a96 + e3c89b0
commit 24da048
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/packages/app/src/specs/SpecsList.cy.tsx b/packages/app/src/specs/SpecsList.cy.tsx
@@ -4,6 +4,12 @@ import { defaultMessages } from '@cy/i18n'
 
 function mountWithTestingType (testingType: TestingTypeEnum) {
   cy.mountFragment(Specs_SpecsListFragmentDoc, {
+    variableTypes: {
+      hasBranch: 'Boolean',
+    },
+    variables: {
+      hasBranch: true,
+    },
     onResult: (ctx) => {
       if (!ctx.currentProject) throw new Error('need current project')
 
@@ -25,6 +31,12 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
       const showCreateSpecModalSpy = cy.spy().as('showCreateSpecModalSpy')
 
       cy.mountFragment(Specs_SpecsListFragmentDoc, {
+        variableTypes: {
+          hasBranch: 'Boolean',
+        },
+        variables: {
+          hasBranch: true,
+        },
         onResult: (ctx) => {
           specs = ctx.currentProject?.specs || []
 

diff --git a/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts b/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
@@ -81,12 +81,20 @@ export const registerMountFn = ({ plugins }: MountFnOptions = {}) => {
       mountingOptions?.global?.plugins?.push(pluginFn())
     })
 
+    let queryVariablesSegment = ''
+
+    if (options.variableTypes) {
+      queryVariablesSegment = Object.entries(options.variableTypes || {}).map(([name, type]) => `\$${name}: ${type}`).join(',')
+      queryVariablesSegment = `(${queryVariablesSegment})`
+    }
+
     return mount(defineComponent({
       name: `MountFragment`,
       setup () {
         const result = useQuery({
+          variables: options.variables,
           query: `
-            query MountFragmentTest {
+            query MountFragmentTest${queryVariablesSegment} {
               ${fieldName} {
                 ...${(source.definitions[0] as FragmentDefinitionNode).name.value}
               }
@@ -161,6 +169,16 @@ export const registerMountFn = ({ plugins }: MountFnOptions = {}) => {
 }
 
 type MountFragmentConfig<T extends TypedDocumentNode<any, any>> = {
+  /**
+   * Dictionary of GQL variable names to their GQL data type (String, Boolean!, etc)
+   * for any variables that are used in the fragment.
+   * This should be used in conjunction with `variables`
+   */
+  variableTypes?: Record<keyof VariablesOf<T>, string>
+  /**
+   * Dictionary of variable names to their values for any variables that are used in the
+   * fragment. This should be used in conjunction with `variableTypes`
+   */
   variables?: VariablesOf<T>
   /**
    * When we are mounting a GraphQL Fragment, we can use `onResult`
@@ -180,6 +198,7 @@ type MountFragmentListConfig<T extends TypedDocumentNode<any, any>> = {
    * @default 2
    */
   count?: number
+  variableTypes?: Record<keyof VariablesOf<T>, string>
   variables?: VariablesOf<T>
   render: (frag: Exclude<ResultOf<T>, undefined>[]) => JSX.Element
   onResult?: (result: ResultOf<T>, ctx: ClientTestContext) => ResultOf<T> | void