Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 13 additions & 73 deletions packages/data-context/src/actions/WizardActions.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { CodeLanguageEnum, NexusGenEnums, NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
import { CODE_LANGUAGES } from '@packages/types'
import { detect, WIZARD_FRAMEWORKS, WIZARD_BUNDLERS } from '@packages/scaffold-config'
import { detect, WIZARD_FRAMEWORKS, WIZARD_BUNDLERS, commandsFileBody, supportFileComponent, supportFileE2E } from '@packages/scaffold-config'
import assert from 'assert'
import dedent from 'dedent'
import path from 'path'
Expand Down Expand Up @@ -210,7 +210,18 @@ export class WizardActions {
// @ts-ignore
await this.ctx.fs.mkdir(supportDir, { recursive: true })

const fileContent = fileName === 'commands' ? this.commandsFileBody(language) : this.supportFileBody(fileName, language)
let fileContent: string | undefined

if (fileName === 'commands') {
fileContent = commandsFileBody(language)
} else if (fileName === 'e2e') {
fileContent = supportFileE2E(language)
} else if (fileName === 'component') {
assert(this.ctx.coreData.wizard.chosenFramework)
fileContent = supportFileComponent(language, this.ctx.coreData.wizard.chosenFramework)
}

assert(fileContent)

await this.scaffoldFile(supportFile, fileContent, 'Scaffold default support file')

Expand Down Expand Up @@ -392,79 +403,8 @@ export class WizardActions {
private ensureDir (type: 'component' | 'e2e' | 'fixtures') {
return this.ctx.fs.ensureDir(path.join(this.projectRoot, 'cypress', type))
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to packages/scaffold-config, trying to consolidate all the scaffolding code in one place.

private supportFileBody (fileName: 'e2e' | 'component', language: CodeLanguageEnum) {
return dedent`
// ***********************************************************
// This example support/${fileName}.${language} is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
`
}

private commandsFileBody (language: CodeLanguageEnum) {
return dedent`
${language === 'ts' ? '/// <reference types="cypress" />' : ''}
// ***********************************************
// This example commands.${language} shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
${language === 'ts' ? COMMAND_TYPES : ''}
`
}
}

const COMMAND_TYPES = dedent`
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }
`

const E2E_SCAFFOLD_BODY = dedent`
e2e: {
setupNodeEvents(on, config) {
Expand Down
2 changes: 1 addition & 1 deletion packages/launchpad/src/setup/OpenBrowserList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@
size="sm"
variant="text"
:prefix-icon="ArrowRightIcon"
prefix-icon-class="icon-dark-gray-500 transform transition-transform ease-in -translate-y-1px duration-200 inline-block group-hocus:icon-dark-indigo-500 rotate-180 group-hocus:translate-x-2px"
prefix-icon-class="icon-dark-gray-500 transform transition-transform ease-in duration-200 inline-block group-hocus:icon-dark-indigo-500 rotate-180 group-hocus:-translate-x-2px"
class="font-medium mx-auto text-gray-600 hocus-link-default group hocus:text-indigo-500"
@click="emit('navigatedBack')"
>
Expand Down
48 changes: 48 additions & 0 deletions packages/scaffold-config/src/commandFile.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import type { CodeLanguage } from '@packages/types'
import dedent from 'dedent'

const COMMAND_TYPES = dedent`
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }
`

export function commandsFileBody (language: CodeLanguage['type']) {
return dedent`
${language === 'ts' ? '/// <reference types="cypress" />' : ''}
// ***********************************************
// This example commands.${language} shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
${language === 'ts' ? COMMAND_TYPES : ''}
`
}
8 changes: 8 additions & 0 deletions packages/scaffold-config/src/frameworks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ export const WIZARD_FRAMEWORKS = [
createCypressConfig,
codeGenFramework: 'react',
glob: '*.{js,jsx,tsx}',
mountModule: 'cypress/react',
},
{
type: 'vueclivue2',
Expand All @@ -140,6 +141,7 @@ export const WIZARD_FRAMEWORKS = [
createCypressConfig,
codeGenFramework: 'vue',
glob: '*.vue',
mountModule: 'cypress/vue2',
},
{
type: 'vueclivue3',
Expand All @@ -159,6 +161,7 @@ export const WIZARD_FRAMEWORKS = [
createCypressConfig,
codeGenFramework: 'vue',
glob: '*.vue',
mountModule: 'cypress/vue',
},
{
type: 'nextjs',
Expand All @@ -177,6 +180,7 @@ export const WIZARD_FRAMEWORKS = [
createCypressConfig,
codeGenFramework: 'react',
glob: '*.{js,jsx,tsx}',
mountModule: 'cypress/react',
},
{
type: 'nuxtjs',
Expand All @@ -195,6 +199,7 @@ export const WIZARD_FRAMEWORKS = [
createCypressConfig,
codeGenFramework: 'vue',
glob: '*.vue',
mountModule: 'cypress/vue2',
},
{
type: 'vue2',
Expand All @@ -213,6 +218,7 @@ export const WIZARD_FRAMEWORKS = [
createCypressConfig,
codeGenFramework: 'vue',
glob: '*.vue',
mountModule: 'cypress/vue2',
},
{
type: 'vue3',
Expand All @@ -231,6 +237,7 @@ export const WIZARD_FRAMEWORKS = [
createCypressConfig,
codeGenFramework: 'vue',
glob: '*.vue',
mountModule: 'cypress/vue',
},
{
type: 'react',
Expand All @@ -249,5 +256,6 @@ export const WIZARD_FRAMEWORKS = [
createCypressConfig,
codeGenFramework: 'react',
glob: '*.{js,jsx,tsx}',
mountModule: 'cypress/react',
},
] as const
2 changes: 2 additions & 0 deletions packages/scaffold-config/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
/* eslint-disable padding-line-between-statements */
// created by autobarrel, do not modify directly

export * from './commandFile'
export * from './dependencies'
export * from './detect'
export * from './frameworks'
export * from './supportFile'
91 changes: 91 additions & 0 deletions packages/scaffold-config/src/supportFile.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import type { CodeLanguage } from '@packages/types'
import dedent from 'dedent'
import type { WizardFrontendFramework } from '.'

export function supportFileE2E (language: CodeLanguage['type']) {
return dedent`
// ***********************************************************
// This example support/e2e.${language} is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
`
}

export function supportFileComponent (language: CodeLanguage['type'], framework: WizardFrontendFramework) {
const supportFileTemplate = dedent`
// ***********************************************************
// This example support/component.${language} is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
`

const exampleUse = dedent`
// Example use:
// cy.mount(${framework.mountModule === 'cypress/react' ? '<MyComponent />' : 'MyComponent'})
`

const NEWLINE = '\n\n'

if (language === 'ts') {
const registerMount = dedent`
import { mount } from '${framework.mountModule}'
import type { MountReturn } from '${framework.mountModule}'

// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount
}
}
}

Cypress.Commands.add('mount', mount)
`

return [supportFileTemplate, registerMount, exampleUse].join(NEWLINE)
}

const registerMount = dedent`
import { mount } from '${framework.mountModule}'

Cypress.Commands.add('mount', mount)
`

return [supportFileTemplate, registerMount, exampleUse].join(NEWLINE)
}
Loading