feat: display framework definition errors (#26183)

Co-authored-by: Mike Plummer <mike-plummer@users.noreply.github.com> Co-authored-by: astone123 <adams@cypress.io> Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
cypress-io · Apr 11, 2023 · 826412d · 826412d · cypress-bot · Apr 11, 2023
1 parent 7a33f5c
commit 826412d
Show file tree

Hide file tree

Showing 26 changed files with 348 additions and 54 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -3,6 +3,10 @@
 
 _Released 04/11/2023 (PENDING)_
 
+**Features:**
+
+- The Component Testing setup wizard will now show a warning message if an issue is encountered with an installed [third party framework definition](https://on.cypress.io/component-integrations). Addresses [#25838](https://github.com/cypress-io/cypress/issues/25838).
+
 **Bugfixes:**
 
  - Capture the [Azure](https://azure.microsoft.com/) CI provider's environment variable [`SYSTEM_PULLREQUEST_PULLREQUESTNUMBER`](https://learn.microsoft.com/en-us/azure/devops/pipelines/build/variables?view=azure-devops&tabs=yaml#system-variables-devops-services) to display the linked PR number in the Cloud. Addressed in [#26215](https://github.com/cypress-io/cypress/pull/26215).

diff --git a/packages/app/src/debug/DebugCommitIcon.vue b/packages/app/src/debug/DebugCommitIcon.vue
@@ -1,6 +1,21 @@
 <template>
-  <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4Z" fill="white"/>
-    <path d="M10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4M10 4C10 2.34315 8.65685 1 7 1C5.34315 1 4 2.34315 4 4M10 4H13M4 4H1" stroke="#747994" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <svg
+    width="14"
+    height="8"
+    viewBox="0 0 14 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4Z"
+      fill="white"
+    />
+    <path
+      d="M10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4M10 4C10 2.34315 8.65685 1 7 1C5.34315 1 4 2.34315 4 4M10 4H13M4 4H1"
+      stroke="#747994"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
   </svg>
-</template>
+</template>
diff --git a/packages/app/src/debug/DebugCurrentRunIcon.vue b/packages/app/src/debug/DebugCurrentRunIcon.vue
@@ -1,5 +1,17 @@
 <template>
-  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1 4.5L3.5 7L7 1" stroke="#4956E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <svg
+    width="8"
+    height="8"
+    viewBox="0 0 8 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 4.5L3.5 7L7 1"
+      stroke="#4956E3"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
   </svg>
-</template>
+</template>
diff --git a/packages/data-context/src/actions/WizardActions.ts b/packages/data-context/src/actions/WizardActions.ts
@@ -169,11 +169,14 @@ export class WizardActions {
     }
 
     const officialFrameworks = CT_FRAMEWORKS.map((framework) => resolveComponentFrameworkDefinition(framework))
-    const thirdParty = await detectThirdPartyCTFrameworks(this.ctx.currentProject)
+    const { frameworks: thirdParty, erroredFrameworks } = await detectThirdPartyCTFrameworks(this.ctx.currentProject)
     const resolvedThirdPartyFrameworks = thirdParty.map(resolveComponentFrameworkDefinition)
 
+    debug('errored third party frameworks %o', erroredFrameworks)
+
     this.ctx.update((d) => {
       d.wizard.frameworks = officialFrameworks.concat(resolvedThirdPartyFrameworks)
+      d.wizard.erroredFrameworks = erroredFrameworks
     })
   }
 

diff --git a/packages/data-context/src/data/coreDataShape.ts b/packages/data-context/src/data/coreDataShape.ts
@@ -1,5 +1,5 @@
 import { FoundBrowser, Editor, AllowedState, AllModeOptions, TestingType, BrowserStatus, PACKAGE_MANAGERS, AuthStateName, MIGRATION_STEPS, MigrationStep, BannerState } from '@packages/types'
-import { WizardBundler, CT_FRAMEWORKS, resolveComponentFrameworkDefinition } from '@packages/scaffold-config'
+import { WizardBundler, CT_FRAMEWORKS, resolveComponentFrameworkDefinition, ErroredFramework } from '@packages/scaffold-config'
 import type { NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
 import type { App, BrowserWindow } from 'electron'
 import type { ChildProcess } from 'child_process'
@@ -71,6 +71,7 @@ export interface WizardDataShape {
   detectedBundler: WizardBundler | null
   detectedFramework: Cypress.ResolvedComponentFrameworkDefinition | null
   frameworks: Cypress.ResolvedComponentFrameworkDefinition[]
+  erroredFrameworks: ErroredFramework[]
 }
 
 export interface MigrationDataShape {
@@ -200,6 +201,7 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
       detectedFramework: null,
       // TODO: API to add third party frameworks to this list.
       frameworks: CT_FRAMEWORKS.map((framework) => resolveComponentFrameworkDefinition(framework)),
+      erroredFrameworks: [],
     },
     migration: {
       step: 'renameAuto',

diff --git a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Wizard.ts b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Wizard.ts
@@ -63,4 +63,5 @@ export const stubWizard: MaybeResolver<Wizard> = {
       isDetected: false,
     }
   }),
+  erroredFrameworks: [],
 }
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
@@ -357,7 +357,11 @@
       "languageLabel": "Language",
       "configFileLanguageLabel": "Cypress config file",
       "detected": "(detected)",
-      "browseIntegrations": "Browse our list of third-party framework integrations"
+      "browseIntegrations": "Browse our list of third-party framework integrations",
+      "communityFrameworkDefinitionProblem": "Community framework definition problem",
+      "communityDependenciesCouldNotBeParsed": "This project has a community framework definition installed that could not be loaded. It is located at the following path: | This project has some community framework definitions installed that could not be loaded. They are located at the following paths:",
+      "seeFrameworkDefinitionDocumentation": "See the {0} for more information about creating, installing, and troubleshooting third party definitions.",
+      "frameworkDefinitionDocumentation": "framework definition documentation"
     },
     "step": {
       "continue": "Continue",

diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
@@ -2357,6 +2357,11 @@ type Wizard {
   """All of the bundlers to choose from"""
   allBundlers: [WizardBundler!]!
   bundler: WizardBundler
+
+  """
+  Framework definitions that had a package.json detected but could not be loaded due to an error
+  """
+  erroredFrameworks: [WizardErroredFramework!]!
   framework: WizardFrontendFramework
 
   """All of the component testing frameworks to choose from"""
@@ -2393,6 +2398,15 @@ enum WizardConfigFileStatusEnum {
   valid
 }
 
+"""Represents a Framework Definition that failed to load when detected"""
+type WizardErroredFramework implements Node {
+  """Relay style Node ID field for the WizardErroredFramework field"""
+  id: ID!
+
+  """The location of the framework's package.json file"""
+  path: String
+}
+
 """A frontend framework that we can setup within the app"""
 type WizardFrontendFramework implements Node {
   """The category (framework, like react-scripts, or library, like react"""

diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Wizard.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Wizard.ts
@@ -3,6 +3,7 @@ import { WizardFrontendFramework } from './gql-WizardFrontendFramework'
 import { WizardNpmPackage } from './gql-WizardNpmPackage'
 import { objectType } from 'nexus'
 import { WIZARD_BUNDLERS } from '@packages/scaffold-config'
+import { WizardErroredFramework } from './gql-WizardErroredFramework'
 
 export const Wizard = objectType({
   name: 'Wizard',
@@ -30,6 +31,12 @@ export const Wizard = objectType({
       resolve: (source, args, ctx) => Array.from(ctx.coreData.wizard.frameworks),
     })
 
+    t.nonNull.list.nonNull.field('erroredFrameworks', {
+      type: WizardErroredFramework,
+      description: 'Framework definitions that had a package.json detected but could not be loaded due to an error',
+      resolve: (source, args, ctx) => Array.from(ctx.coreData.wizard.erroredFrameworks),
+    })
+
     t.nonNull.list.nonNull.field('packagesToInstall', {
       type: WizardNpmPackage,
       description: 'A list of packages to install, null if we have not chosen both a framework and bundler',

diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-WizardErroredFramework.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-WizardErroredFramework.ts
@@ -0,0 +1,12 @@
+import { objectType } from 'nexus'
+
+export const WizardErroredFramework = objectType({
+  name: 'WizardErroredFramework',
+  description: 'Represents a Framework Definition that failed to load when detected',
+  node: 'path',
+  definition (t) {
+    t.string('path', {
+      description: `The location of the framework's package.json file`,
+    })
+  },
+})
diff --git a/packages/graphql/src/schemaTypes/objectTypes/index.ts b/packages/graphql/src/schemaTypes/objectTypes/index.ts
@@ -32,5 +32,6 @@ export * from './gql-Version'
 export * from './gql-VersionData'
 export * from './gql-Wizard'
 export * from './gql-WizardBundler'
+export * from './gql-WizardErroredFramework'
 export * from './gql-WizardFrontendFramework'
 export * from './gql-WizardNpmPackage'
diff --git a/packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts b/packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts
@@ -252,5 +252,34 @@ describe('scaffolding component testing', {
       cy.get(`[data-testid="select-framework"]`).click()
       cy.contains('Qwik').should('be.visible')
     })
+
+    it('Displays a warning message for dependencies that could not be parsed', () => {
+      cy.scaffoldProject('qwik-app')
+      cy.openProject('qwik-app')
+
+      cy.withCtx(async (ctx) => {
+        await ctx.actions.file.removeFileInProject('./node_modules/cypress-ct-bad-missing-value')
+        await ctx.actions.file.moveFileInProject('./cypress-ct-bad-missing-value', './node_modules/cypress-ct-bad-missing-value')
+
+        await ctx.actions.file.removeFileInProject('./node_modules/cypress-ct-bad-syntax')
+        await ctx.actions.file.moveFileInProject('./cypress-ct-bad-syntax', './node_modules/cypress-ct-bad-syntax')
+      })
+
+      cy.visitLaunchpad()
+      cy.skipWelcome()
+
+      cy.contains('Component Testing').click()
+
+      cy.findByTestId('alert-header').should('be.visible').contains('Community framework definition problem')
+
+      cy.findByTestId('alert-body').within(() => {
+        cy.get('li').should('have.length', 2)
+
+        cy.contains('cy-projects/qwik-app/node_modules/cypress-ct-bad-missing-value/package.json').should('be.visible')
+        cy.contains('cy-projects/qwik-app/node_modules/cypress-ct-bad-syntax/package.json').should('be.visible')
+      })
+
+      cy.percySnapshot()
+    })
   })
 })
diff --git a/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx b/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx
@@ -2,7 +2,7 @@ import { EnvironmentSetupFragmentDoc } from '../generated/graphql-test'
 import EnvironmentSetup from './EnvironmentSetup.vue'
 
 describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
-  it('default component', () => {
+  it('displays framework options and links to community defined frameworks', () => {
     cy.mountFragment(EnvironmentSetupFragmentDoc, {
       render: (gqlVal) => (
         <div class='m-10'>
@@ -84,7 +84,7 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
     cy.findByRole('option', { name: 'Create React App (v5) Support is in Alpha (detected)' }).should('be.visible').click()
   })
 
-  it('shows the description of bundler as Dev Server', () => {
+  it('shows the description of bundler', () => {
     cy.mountFragment(EnvironmentSetupFragmentDoc, {
       onResult: (res) => {
         res.framework = {
@@ -103,5 +103,84 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
     })
 
     cy.findByLabelText('Bundler').should('be.visible')
+    cy.findByLabelText('Pick a bundler').should('be.visible')
+  })
+
+  it('shows errored community frameworks', () => {
+    const PATH_1 = '/quite-long/path/to/node_modules/for/definition1/package.json'
+    const PATH_2 = '/quite-long/path/to/node_modules/for/definition2/package.json'
+    const PATH_3 = '/quite-long/path/to/node_modules/for/definition3/package.json'
+    const PLURAL_MESSAGE = 'This project has some community framework definitions installed that could not be loaded. They are located at the following paths:'
+    const SINGULAR_MESSAGE = 'This project has a community framework definition installed that could not be loaded. It is located at the following path:'
+    const DOCS_CTA = 'See the framework definition documentation for more information about creating, installing, and troubleshooting third party definitions.'
+
+    // we will mount with multiple errored frameworks, and then with a single errored framework
+
+    cy.mountFragment(EnvironmentSetupFragmentDoc, {
+      onResult: (res) => {
+        res.erroredFrameworks = [
+          {
+            id: '1',
+            path: PATH_1,
+            __typename: 'WizardErroredFramework',
+          },
+          {
+            id: '2',
+            path: PATH_2,
+            __typename: 'WizardErroredFramework',
+          },
+          {
+            id: '3',
+            path: PATH_3,
+            __typename: 'WizardErroredFramework',
+          },
+        ]
+      },
+      render: (gqlVal) => (
+        <div class='m-10'>
+          <EnvironmentSetup
+            gql={gqlVal}
+            nextFn={cy.stub()}
+          />
+        </div>
+      ),
+    })
+
+    cy.contains('h3', 'Community framework definition problem')
+    cy.contains('p', PLURAL_MESSAGE).should('be.visible')
+    cy.contains('p', SINGULAR_MESSAGE).should('not.exist')
+    cy.contains('li', PATH_1).should('be.visible')
+    cy.contains('li', PATH_2).should('be.visible')
+    cy.contains('li', PATH_3).should('be.visible')
+    cy.contains('p', DOCS_CTA).should('be.visible')
+    cy.contains('a', 'framework definition documentation').should('have.attr', 'href', 'https://on.cypress.io/component-integrations?utm_medium=Framework+Definition+Warning&utm_source=Binary%3A+Launchpad')
+
+    cy.mountFragment(EnvironmentSetupFragmentDoc, {
+      onResult: (res) => {
+        res.erroredFrameworks = [
+          {
+            id: '1',
+            path: PATH_1,
+            __typename: 'WizardErroredFramework',
+          },
+        ]
+      },
+      render: (gqlVal) => (
+        <div class='m-10'>
+          <EnvironmentSetup
+            gql={gqlVal}
+            nextFn={cy.stub()}
+          />
+        </div>
+      ),
+    })
+
+    cy.contains('p', PLURAL_MESSAGE).should('not.exist')
+    cy.contains('p', SINGULAR_MESSAGE).should('be.visible')
+
+    cy.get('li')
+    .should('have.length', 1)
+    .contains(PATH_1)
+    .should('be.visible')
   })
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,4 +63,5 @@ export const stubWizard: MaybeResolver<Wizard> = { @@
           isDetected: false,
         }
       }),
+      erroredFrameworks: [],
     }