Merge branch 'marktnoonan/backmerge-develop-3-8-22' of https://github…

….com/cypress-io/cypress into marktnoonan/backmerge-develop-3-8-22

npm/design-system/package.json

@@ -19,11 +19,11 @@
     "watch": "yarn build --watch"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.0.0",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@fortawesome/react-fontawesome": "^0.1.17",
     "@iconify/icons-vscode-icons": "^1.1.4",
     "@iconify/react": "2.0.0-rc.8",
     "@iconify/types": "^1.0.6",

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

@@ -1,5 +1,6 @@
 import type { Interception } from '@packages/net-stubbing/lib/external-types'
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
+import type { SinonStub } from 'sinon'
 
 describe('App: Runs', { viewportWidth: 1200 }, () => {
   beforeEach(() => {
@@ -261,9 +262,10 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.contains('--record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')
     })
 
-    it('displays a copy button', { browser: 'electron' }, () => {
-      cy.withCtx(async (ctx) => {
+    it('displays a copy button', () => {
+      cy.withCtx(async (ctx, o) => {
         await ctx.actions.file.writeFileInProject('cypress.config.js', 'module.exports = {projectId: \'abcdef\'}')
+        ctx.electronApi.copyTextToClipboard = o.sinon.stub()
       })
 
       cy.loginUser()
@@ -283,6 +285,9 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.get('[href="#/runs"]').click()
       cy.get('[data-cy="copy-button"]').click()
       cy.contains('Copied!')
+      cy.withRetryableCtx((ctx) => {
+        expect(ctx.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('cypress run --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa')
+      })
     })
   })
 

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

@@ -42,11 +42,20 @@ describe('App: Settings', () => {
 
   describe('Cloud Settings', () => {
     it('shows the projectId section when there is a projectId', () => {
+      cy.withCtx(async (ctx, o) => {
+        ctx.electronApi.copyTextToClipboard = o.sinon.stub()
+      })
+
       cy.startAppServer('e2e')
       cy.visitApp()
       cy.findByText('Settings').click()
       cy.findByText('Dashboard Settings').click()
       cy.findByText('Project ID').should('be.visible')
+      cy.findByText('Copy').click()
+      cy.findByText('Copied!').should('be.visible')
+      cy.withRetryableCtx((ctx) => {
+        expect(ctx.electronApi.copyTextToClipboard as SinonStub).to.have.been.calledWith('abc123')
+      })
     })
 
     it('shows the Record Keys section', () => {

packages/app/src/runner/selector-playground/SelectorPlayground.vue

@@ -4,30 +4,30 @@
     class="border-t border-b bg-gray-50 border-gray-200 h-56px grid py-12px px-16px gap-12px grid-cols-[40px,1fr,auto] items-center "
   >
     <button
-      class="flex items-center justify-center h-full text-white transition duration-150 border rounded-md outline-none w-40px hover:default-ring"
+      class="border rounded-md flex h-full outline-none text-white transition w-40px duration-150 items-center justify-center hover:default-ring"
       :class="[ selectorPlaygroundStore.isEnabled ? 'default-ring' : 'border-gray-200']"
       data-cy="playground-toggle"
       @click="toggleEnabled"
     >
       <i-cy-selector_x16 :class="{ 'icon-dark-indigo-500': selectorPlaygroundStore.isEnabled, 'icon-dark-gray-500': !selectorPlaygroundStore.isEnabled }" />
     </button>
     <div
-      class="relative flex items-center flex-1 w-full h-full"
+      class="flex h-full flex-1 w-full relative items-center"
       @mouseover="setShowingHighlight"
     >
       <Menu #="{ open }">
         <MenuButton
           :aria-label="t('runner.selectorPlayground.selectorMethodsLabel')"
-          class="flex items-center justify-center h-full text-white border border-gray-200 outline-none rounded-l-md w-40px hocus-default border-r-transparent"
+          class="border border-r-transparent rounded-l-md flex h-full outline-none border-gray-200 text-white w-40px items-center justify-center hocus-default"
           @click.stop
         >
           <i-cy-chevron-down-small_x16
-            class="transition duration-300 transition-color"
+            class="transition transition-color duration-300"
             :class="open ? 'icon-dark-indigo-500' : 'icon-dark-gray-500'"
           />
         </MenuButton>
         <MenuItems
-          class="absolute z-40 flex flex-col overflow-scroll text-white bg-gray-900 rounded outline-transparent top-34px"
+          class="rounded flex flex-col outline-transparent bg-gray-900 text-white top-34px z-40 absolute overflow-scroll"
         >
           <MenuItem
             v-for="method in methods"
@@ -36,18 +36,18 @@
           >
             <button
               :class="{ 'bg-gray-700': active }"
-              class="text-left border-b border-b-gray-800 py-8px px-16px"
+              class="border-b border-b-gray-800 text-left py-8px px-16px"
               @click="selectorPlaygroundStore.setMethod(method.value)"
             >
               {{ method.display }}
             </button>
           </MenuItem>
         </MenuItems>
       </Menu>
-      <code class="relative flex-1 h-full">
+      <code class="h-full flex-1 relative">
         <span
           ref="ghostLeft"
-          class="absolute inset-y-0 flex items-center text-gray-600 pointer-events-none pl-12px"
+          class="flex pl-12px inset-y-0 text-gray-600 absolute items-center pointer-events-none"
           data-cy="selected-playground-method"
         >
           <span class="text-gray-800">cy</span>.<span class="text-purple-500">{{ selectorPlaygroundStore.method }}</span>(‘
@@ -57,20 +57,20 @@
           class="font-medium left-[-9999px] absolute inline-block"
         >{{ selector.replace(/\s/g, '&nbsp;') }}</span>
         <span
-          class="absolute inset-y-0 flex items-center text-gray-600 pointer-events-none"
+          class="flex inset-y-0 text-gray-600 absolute items-center pointer-events-none"
           :style="{left: inputRightOffset + 'px'}"
         >‘)</span>
         <input
           ref="copyText"
           v-model="selector"
           data-cy="playground-selector"
           :style="{paddingLeft: inputLeftOffset + 'px', paddingRight: matcherWidth + 32 + 24 + 'px'}"
-          class="w-full h-full font-medium text-indigo-500 border border-gray-200 outline-none rounded-r-md hocus-default overflow-ellipsis"
+          class="border rounded-r-md font-medium h-full outline-none border-gray-200 w-full text-indigo-500 hocus-default overflow-ellipsis"
           :class="{'hocus-default': selectorPlaygroundStore.isValid, 'hocus-error': !selectorPlaygroundStore.isValid}"
         >
         <div
           ref="match"
-          class="absolute inset-y-0 right-0 flex items-center font-sans text-gray-600 border-l border-l-gray-200 my-6px px-16px"
+          class="border-l flex font-sans border-l-gray-200 my-6px px-16px inset-y-0 right-0 text-gray-600 absolute items-center"
           data-cy="playground-num-elements"
         >
           <template v-if="!selectorPlaygroundStore.isValid">
@@ -84,7 +84,7 @@
     </div>
 
     <div class="flex gap-12px">
-      <SelectorPlaygroundTooltip v-if="isSupported">
+      <SelectorPlaygroundTooltip>
         <Button
           size="md"
           variant="outline"
@@ -134,9 +134,10 @@ import type { AutIframe } from '../aut-iframe'
 import type { EventManager } from '../event-manager'
 import Button from '@packages/frontend-shared/src/components/Button.vue'
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
-import { useClipboard, useElementSize } from '@vueuse/core'
+import { useElementSize } from '@vueuse/core'
 import SelectorPlaygroundTooltip from './SelectorPlaygroundTooltip.vue'
 import { useI18n } from 'vue-i18n'
+import { useClipboard } from '@cy/gql-components/useClipboard'
 
 const { t } = useI18n()
 
@@ -218,7 +219,7 @@ function printSelected () {
   props.getAutIframe().printSelectorElementsToConsole()
 }
 
-const { copy, isSupported } = useClipboard({ copiedDuring: 2000 })
+const { copy } = useClipboard({ copiedDuring: 2000 })
 const copyToClipboard = () => {
   copy(selector.value)
 }

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

@@ -40,8 +40,8 @@
 
 <script lang="ts" setup>
 import { gql } from '@urql/core'
-import CopyButton from '@cy/components/CopyButton.vue'
 import { useI18n } from '@cy/i18n'
+import CopyButton from '@cy/gql-components/CopyButton.vue'
 import IconOctothorpe from '~icons/cy/octothorpe_x16.svg'
 import SettingsSection from '../SettingsSection.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'

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

@@ -46,7 +46,7 @@
 import { computed } from 'vue'
 import { gql } from '@urql/core'
 import Button from '@cy/components/Button.vue'
-import CopyButton from '@cy/components/CopyButton.vue'
+import CopyButton from '@cy/gql-components/CopyButton.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
 import { useExternalLink } from '@cy/gql-components/useExternalLink'
 import IconKey from '~icons/cy/placeholder_x16.svg'

packages/data-context/src/actions/ElectronActions.ts

@@ -10,6 +10,7 @@ export interface ElectronApiShape {
   showItemInFolder(folder: string): void
   showOpenDialog(props: OpenDialogOptions): Promise<OpenDialogReturnValue>
   showSaveDialog(window: BrowserWindow, props: SaveDialogOptions): Promise<SaveDialogReturnValue>
+  copyTextToClipboard(text: string): void
 }
 
 export class ElectronActions {

packages/data-context/src/actions/ProjectActions.ts

@@ -404,7 +404,7 @@ export class ProjectActions {
 
     const [newSpec] = codeGenResults.files
 
-    const cfg = this.ctx.project.getConfig()
+    const cfg = await this.ctx.project.getConfig()
 
     if (cfg && this.ctx.currentProject) {
       const testingType = (codeGenType === 'component' || codeGenType === 'story') ? 'component' : 'e2e'

packages/data-context/src/data/ProjectLifecycleManager.ts

@@ -51,8 +51,8 @@ export interface InjectedConfigApi {
   allowedConfig(config: Cypress.ConfigOptions): Cypress.ConfigOptions
   updateWithPluginValues(config: FullConfig, modifiedConfig: Partial<Cypress.ConfigOptions>): FullConfig
   setupFullConfigWithDefaults(config: SetupFullConfigOptions): Promise<FullConfig>
-  validateRootConfigBreakingChanges<T extends Cypress.ConfigOptions>(config: Partial<T>, onWarning: BreakingValidationFn<CypressError>, onErr: BreakingValidationFn<never>): T
-  validateTestingTypeConfigBreakingChanges<T extends Cypress.ConfigOptions>(config: Partial<T>, testingType: Cypress.TestingType, onWarning: BreakingValidationFn<CypressError>, onErr: BreakingValidationFn<never>): T
+  validateRootConfigBreakingChanges<T extends Cypress.ConfigOptions>(config: Partial<T>, onWarning: BreakingValidationFn<CypressError>, onErr: BreakingValidationFn<never>): void
+  validateTestingTypeConfigBreakingChanges<T extends Cypress.ConfigOptions>(config: Partial<T>, testingType: Cypress.TestingType, onWarning: BreakingValidationFn<CypressError>, onErr: BreakingValidationFn<never>): void
 }
 
 type State<S, V = undefined> = V extends undefined ? {state: S, value?: V } : {state: S, value: V}

packages/data-context/src/data/coreDataShape.ts

@@ -70,7 +70,6 @@ export interface WizardDataShape {
   detectedLanguage: NexusGenEnums['CodeLanguageEnum'] | null
   detectedBundler: Bundler | null
   detectedFramework: typeof FRONTEND_FRAMEWORKS[number]['type'] | null
-  __fakeInstalledPackagesForTesting: string[] | null
 }
 
 export interface MigrationDataShape{
@@ -168,7 +167,6 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
       chosenManualInstall: false,
       detectedBundler: null,
       detectedFramework: null,
-      __fakeInstalledPackagesForTesting: null,
       detectedLanguage: null,
     },
     migration: {

packages/data-context/src/sources/ProjectDataSource.ts

@@ -119,8 +119,8 @@ export class ProjectDataSource {
     return path.basename(projectRoot)
   }
 
-  getConfig () {
-    return this.ctx.lifecycleManager.loadedFullConfig
+  async getConfig () {
+    return await this.ctx.lifecycleManager.getFullInitialConfig()
   }
 
   getCurrentProjectSavedState () {
@@ -145,11 +145,7 @@ export class ProjectDataSource {
   }> {
     const toArray = (val?: string | string[]) => val ? typeof val === 'string' ? [val] : val : undefined
 
-    const config = this.getConfig()
-
-    if (!config) {
-      throw Error(`Config for ${projectRoot} was not loaded`)
-    }
+    const config = await this.getConfig()
 
     return {
       specPattern: toArray(config[testingType]?.specPattern),

packages/data-context/src/sources/WizardDataSource.ts

@@ -66,10 +66,6 @@ export class WizardDataSource {
   }
 
   async installedPackages (): Promise<string[]> {
-    if (this.ctx.coreData.wizard.__fakeInstalledPackagesForTesting) {
-      return this.ctx.coreData.wizard.__fakeInstalledPackagesForTesting
-    }
-
     const packagesInitial = await this.packagesToInstall() || []
 
     if (!this.ctx.currentProject) {

packages/data-context/src/sources/migration/codegen.ts

@@ -211,7 +211,7 @@ function createE2ETemplate (pluginPath: string, createConfigOptions: CreateConfi
   if (!createConfigOptions.hasPluginsFile) {
     return dedent`
       e2e: {
-        setupNodeEvents(on, config) {}
+        setupNodeEvents(on, config) {},${formatObjectForConfig(options)}
       }
     `
   }

packages/data-context/test/unit/helper.ts

@@ -33,7 +33,9 @@ export function createTestDataContext (mode: DataContextConfig['mode'] = 'run')
       getServerPluginHandlers: () => [],
     } as InjectedConfigApi,
     projectApi: {} as ProjectApiShape,
-    electronApi: {} as ElectronApiShape,
+    electronApi: {
+      copyTextToClipboard: (text) => {},
+    } as ElectronApiShape,
     browserApi: {} as BrowserApiShape,
   })
 }

packages/frontend-shared/cypress/e2e/support/e2eProjectDirs.ts

@@ -43,13 +43,14 @@ export const e2eProjectDirs = [
   'migration-e2e-coffeescript',
   'migration-e2e-component-default-everything',
   'migration-e2e-component-default-test-files',
-  'migration-e2e-component-with-json-files',
   'migration-e2e-component-default-with-types',
+  'migration-e2e-component-with-json-files',
   'migration-e2e-custom-integration',
   'migration-e2e-custom-test-files',
   'migration-e2e-defaults',
   'migration-e2e-defaults-no-specs',
   'migration-e2e-export-default',
+  'migration-e2e-false-plugins-support-file',
   'migration-e2e-fully-custom',
   'migration-e2e-no-plugins-support-file',
   'migration-specs-already-migrated',

packages/frontend-shared/src/components/CopyText.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import CopyButton from './CopyButton.vue'
+import CopyButton from '../gql-components/CopyButton.vue'
 
 const props = defineProps<{
   text: string

packages/frontend-shared/src/components/ShikiHighlight.vue

@@ -52,7 +52,7 @@ shikiWrapperClasses computed property.
 
         props.class,
       ]"
-      @click="copyOnClick && isSupported ? () => copyCode() : () => {}"
+      @click="copyOnClick ? () => copyCode() : () => {}"
       v-html="highlightedCode"
     />
     <pre
@@ -61,7 +61,7 @@ shikiWrapperClasses computed property.
       :class="[props.class, lineNumbers ? 'pl-56px' : 'pl-8px' ]"
     >{{ trimmedCode }}</pre>
     <CopyButton
-      v-if="copyButton && isSupported"
+      v-if="copyButton"
       variant="outline"
       tabindex="-1"
       class="bg-white absolute"
@@ -107,8 +107,8 @@ export { highlighter, inheritAttrs }
 <script lang="ts" setup>
 import type { Ref } from 'vue'
 import { computed, onBeforeMount, ref } from 'vue'
-import { useClipboard } from '@vueuse/core'
-import CopyButton from './CopyButton.vue'
+import CopyButton from '../gql-components/CopyButton.vue'
+import { useClipboard } from '../gql-components/useClipboard'
 
 const highlighterInitialized = ref(false)
 
@@ -158,7 +158,7 @@ const highlightedCode = computed(() => {
 
 const codeEl: Ref<HTMLElement | null> = ref(null)
 
-const { copy, isSupported } = useClipboard()
+const { copy } = useClipboard()
 
 const copyCode = () => {
   if (codeEl.value) {

packages/frontend-shared/src/components/TerminalPrompt.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import CopyButton from './CopyButton.vue'
+import CopyButton from '../gql-components/CopyButton.vue'
 
 defineProps<{
   projectFolderName?: string