fix: resolves correctly specPattern (#21057)

* fix: resolves correctly specPattern

* Update test

* Update with feedback

Author: estrada9166

packages/app/cypress/e2e/settings.cy.ts

@@ -194,14 +194,14 @@ describe('App: Settings', () => {
       })
 
       cy.get('[data-cy="config-code"]').within(() => {
-        cy.get('.bg-teal-100').contains('tests/_fixtures')
-        cy.get('.bg-teal-100').contains('abc123')
-        cy.get('.bg-teal-100').contains('tests/**/*')
-        cy.get('.bg-teal-100').contains('tests/_support/spec_helper.js')
-        cy.get('.bg-yellow-100').contains('REMOTE_DEBUGGING_PORT')
-        cy.get('.bg-yellow-100').contains('INTERNAL_E2E_TESTING_SELF')
-        cy.get('.bg-yellow-100').contains('INTERNAL_GRAPHQL_PORT')
-        cy.get('.bg-red-50').contains('4455')
+        cy.get('[data-cy-config="config"]').contains('tests/_fixtures')
+        cy.get('[data-cy-config="config"]').contains('abc123')
+        cy.get('[data-cy-config="config"]').contains('tests/**/*')
+        cy.get('[data-cy-config="config"]').contains('tests/_support/spec_helper.js')
+        cy.get('[data-cy-config="env"]').contains('REMOTE_DEBUGGING_PORT')
+        cy.get('[data-cy-config="env"]').contains('INTERNAL_E2E_TESTING_SELF')
+        cy.get('[data-cy-config="env"]').contains('INTERNAL_GRAPHQL_PORT')
+        cy.get('[data-cy-config="cli"]').contains('4455')
       })
     })
 
@@ -219,6 +219,35 @@ describe('App: Settings', () => {
         expect((ctx.actions.file.openFile as SinonStub).lastCall.args[0]).to.eq(ctx.lifecycleManager.configFilePath)
       })
     })
+
+    it('highlights values set via config file, envFile, env, or CLI in the appropriate color with default specPattern', () => {
+      cy.scaffoldProject('config-with-js')
+      cy.openProject('config-with-js')
+      cy.startAppServer('e2e')
+      cy.loginUser()
+
+      cy.visitApp()
+      cy.findByText('Settings').click()
+      cy.findByText('Project Settings').click()
+      cy.get('[data-cy="config-legend"]').within(() => {
+        cy.get('.bg-gray-50').contains('default')
+        cy.get('.bg-teal-100').contains('config')
+        cy.get('.bg-yellow-100').contains('env')
+        cy.get('.bg-red-50').contains('cli')
+      })
+
+      cy.get('[data-cy="config-code"]').within(() => {
+        cy.get('[data-cy-config="default"]').contains('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}')
+        cy.get('[data-cy-config="config"]').contains('500')
+        cy.get('[data-cy-config="config"]').contains('10000')
+        cy.get('[data-cy-config="config"]').contains('false')
+        cy.get('[data-cy-config="config"]').contains('20')
+        cy.get('[data-cy-config="env"]').contains('REMOTE_DEBUGGING_PORT')
+        cy.get('[data-cy-config="env"]').contains('INTERNAL_E2E_TESTING_SELF')
+        cy.get('[data-cy-config="env"]').contains('INTERNAL_GRAPHQL_PORT')
+        cy.get('[data-cy-config="cli"]').contains('4455')
+      })
+    })
   })
 
   describe('external editor', () => {

packages/app/src/settings/project/ConfigCode.vue

@@ -28,16 +28,19 @@
             v-if="field === 'browsers' && Array.isArray(value)"
             :browsers="value"
             :color-classes="`rounded-sm px-2px ${colorMap[from]}`"
+            :data-cy-config="from"
           />
           <RenderObject
             v-else-if="value && typeof value === 'object'"
             :value="value"
             :color-classes="`rounded-sm px-2px ${colorMap[from]}`"
+            :from="from"
           />
           <span
             v-else
             class="rounded-sm px-2px"
             :class="colorMap[from]"
+            :data-cy-config="from"
           >{{ renderPrimitive(value) }}</span>,
           <br>
         </span>

packages/app/src/settings/project/renderers/RenderObject.vue

@@ -4,29 +4,35 @@
     :value="value"
     :depth="props.depth"
     :color-classes="props.colorClasses"
+    :data-cy-config="props.from"
   /><template v-else>
     <span
       :class="props.colorClasses"
+      :data-cy-config="props.from"
     >{</span><br><template
       v-for="(val, k) in value"
       :key="k"
     >
       <span
         :class="props.colorClasses"
         :style="`margin-left:${(props.depth + 1) * 24}px`"
+        :data-cy-config="props.from"
       >{{ k }}: </span><RenderObject
         v-if="typeof val === 'object'"
         :record-key="k"
         :value="val"
         :color-classes="props.colorClasses"
         :depth="props.depth + 1"
+        :from="props.from"
       /><span
         v-else
         :class="props.colorClasses"
+        :data-cy-config="props.from"
       >{{ renderPrimitive(val) }},</span><br>
     </template>
     <span
       :class="props.colorClasses"
+      :data-cy-config="props.from"
       :style="`margin-left:${props.depth * 24}px`"
     >}</span>
   </template>
@@ -40,6 +46,7 @@ const props = withDefaults(defineProps<{
   value: Record<string, any> | any[]
   colorClasses?: string
   depth?: number
+  from: string
 }>(), {
   colorClasses: '',
   depth: 0,

packages/config/__snapshots__/index.spec.ts.js

@@ -153,3 +153,81 @@ exports['src/index .getPublicConfigKeys returns list of public config keys 1'] =
   "modifyObstructiveCode",
   "specPattern"
 ]
+
+exports['src/index .getDefaultValues returns list of public config keys for selected testing type 1'] = {
+  "animationDistanceThreshold": 5,
+  "baseUrl": null,
+  "blockHosts": null,
+  "chromeWebSecurity": true,
+  "clientCertificates": [],
+  "component": {
+    "specPattern": "**/*.cy.{js,jsx,ts,tsx}",
+    "indexHtmlFile": "cypress/support/component-index.html"
+  },
+  "defaultCommandTimeout": 4000,
+  "downloadsFolder": "cypress/downloads",
+  "e2e": {
+    "specPattern": "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}"
+  },
+  "env": {},
+  "execTimeout": 60000,
+  "experimentalFetchPolyfill": false,
+  "experimentalInteractiveRunEvents": false,
+  "experimentalSessionSupport": false,
+  "experimentalSourceRewriting": false,
+  "fileServerFolder": "",
+  "fixturesFolder": "cypress/fixtures",
+  "excludeSpecPattern": "*.hot-update.js",
+  "includeShadowDom": false,
+  "keystrokeDelay": 0,
+  "modifyObstructiveCode": true,
+  "numTestsKeptInMemory": 50,
+  "pageLoadTimeout": 60000,
+  "port": null,
+  "projectId": null,
+  "redirectionLimit": 20,
+  "reporter": "spec",
+  "reporterOptions": null,
+  "requestTimeout": 5000,
+  "resolvedNodePath": null,
+  "resolvedNodeVersion": null,
+  "responseTimeout": 30000,
+  "retries": {
+    "runMode": 0,
+    "openMode": 0
+  },
+  "screenshotOnRunFailure": true,
+  "screenshotsFolder": "cypress/screenshots",
+  "slowTestThreshold": 10000,
+  "scrollBehavior": "top",
+  "supportFile": "cypress/support/e2e.{js,jsx,ts,tsx}",
+  "supportFolder": false,
+  "taskTimeout": 60000,
+  "trashAssetsBeforeRuns": true,
+  "userAgent": null,
+  "video": true,
+  "videoCompression": 32,
+  "videosFolder": "cypress/videos",
+  "videoUploadOnPasses": true,
+  "viewportHeight": 660,
+  "viewportWidth": 1000,
+  "waitForAnimations": true,
+  "watchForFileChanges": true,
+  "autoOpen": false,
+  "browsers": [],
+  "clientRoute": "/__/",
+  "configFile": "cypress.config.js",
+  "cypressBinaryRoot": "/root/cypress",
+  "devServerPublicPathRoute": "/__cypress/src",
+  "hosts": null,
+  "isInteractive": true,
+  "isTextTerminal": false,
+  "morgan": true,
+  "namespace": "__cypress",
+  "reporterRoute": "/__cypress/reporter",
+  "socketId": null,
+  "socketIoCookie": "__socket",
+  "socketIoRoute": "/__socket",
+  "xhrRoute": "/xhrs/",
+  "specPattern": "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}"
+}

packages/config/src/index.ts

@@ -98,11 +98,15 @@ export const getBreakingRootKeys = () => {
   return breakingRootOptions
 }
 
-export const getDefaultValues = (runtimeOptions = {}) => {
+export const getDefaultValues = (runtimeOptions: { [k: string]: any } = {}) => {
   // Default values can be functions, in which case they are evaluated
   // at runtime - for example, slowTestThreshold where the default value
   // varies between e2e and component testing.
-  return _.mapValues(defaultValues, (value) => (typeof value === 'function' ? value(runtimeOptions) : value))
+  const defaultsForRuntime = _.mapValues(defaultValues, (value) => (typeof value === 'function' ? value(runtimeOptions) : value))
+
+  // As we normalize the config based on the selected testing type, we need
+  // to do the same with the default values to resolve those correctly
+  return { ...defaultsForRuntime, ...defaultsForRuntime[runtimeOptions.testingType] }
 }
 
 export const getPublicConfigKeys = () => {

packages/config/test/unit/index.spec.ts

@@ -54,6 +54,26 @@ describe('src/index', () => {
 
       snapshot(defaultValues)
     })
+
+    it('returns list of public config keys for selected testing type', () => {
+      const defaultValues = configUtil.getDefaultValues({ testingType: 'e2e' })
+
+      expect(defaultValues).to.deep.include({
+        defaultCommandTimeout: 4000,
+        scrollBehavior: 'top',
+        watchForFileChanges: true,
+      })
+
+      expect(defaultValues.env).to.deep.eq({})
+
+      // remove these since they are different depending on your machine
+      ;['platform', 'arch', 'version'].forEach((x) => {
+        expect(defaultValues[x]).to.exist
+        delete defaultValues[x]
+      })
+
+      snapshot(defaultValues)
+    })
   })
 
   describe('.getPublicConfigKeys', () => {

packages/server/lib/config.ts

@@ -148,7 +148,11 @@ export function mergeDefaults (
     additionalIgnorePattern = config.e2e.specPattern
   }
 
-  config = { ...config, ...config[options.testingType], additionalIgnorePattern }
+  config = {
+    ...config,
+    ...config[options.testingType],
+    additionalIgnorePattern,
+  }
 
   // split out our own app wide env from user env variables
   // and delete envFile