Merge branch 'develop' into agg23/RerenderRecipe

npm/create-cypress-tests/src/component-testing/babel/babelTransform.ts

@@ -18,6 +18,13 @@ function tryRequirePrettier () {
  return null
  }
 }
+const sharedBabelOptions = {
+ // disable user config
+ configFile: false,
+ babelrc: false,
+ presets: [],
+ root: process.env.BABEL_TEST_ROOT, // for testing
+}
 
 async function transformFileViaPlugin (filePath: string, babelPlugin: babel.PluginObj) {
  try {
@@ -27,7 +34,7 @@ async function transformFileViaPlugin (filePath: string, babelPlugin: babel.Plug
  filename: path.basename(filePath),
  filenameRelative: path.relative(process.cwd(), filePath),
  plugins: [babelPlugin],
- presets: [],
+ ...sharedBabelOptions,
  })
 
  if (!updatedResult) {
@@ -127,7 +134,7 @@ export async function getPluginsSourceExample (ast: PluginsConfigAst) {
  const babelResult = await babel.transformAsync(exampleCode, {
  filename: 'nothing.js',
  plugins: [createTransformPluginsFileBabelPlugin(ast)],
- presets: [],
+ ...sharedBabelOptions,
  })
 
  if (!babelResult?.code) {

npm/create-cypress-tests/src/component-testing/init-component-testing.test.ts

@@ -32,6 +32,8 @@ describe('init component tests script', () => {
 
  await fs.remove(e2eTestOutputPath)
  await fs.mkdir(e2eTestOutputPath)
+
+ process.env.BABEL_TEST_ROOT = e2eTestOutputPath
  })
 
  afterEach(() => {
@@ -170,7 +172,7 @@ describe('init component tests script', () => {
  createTempFiles({
  '/cypress.json': '{}',
  '/webpack.config.js': 'module.exports = { }',
- '/package.json': JSON.stringify({ dependencies: { react: '*', vue: '*' } }),
+ '/package.json': JSON.stringify({ dependencies: { react: '*', vue: '^2.4.5' } }),
  })
 
  promptSpy = sinon.stub(inquirer, 'prompt')
@@ -187,12 +189,44 @@ describe('init component tests script', () => {
  await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
 
  expect(
- someOfSpyCallsIncludes(global.console.log, `It looks like all these frameworks: ${chalk.yellow('react, vue')} are available from this directory.`),
+ someOfSpyCallsIncludes(global.console.log, `It looks like all these frameworks: ${chalk.yellow('react, vue@2')} are available from this directory.`),
  ).to.be.true
  })
 
- it('installs the right adapter', () => {
+ it('installs the right adapter', async () => {
+ createTempFiles({
+ '/cypress.json': '{}',
+ '/webpack.config.js': 'module.exports = { }',
+ '/package.json': JSON.stringify({ dependencies: { react: '16.4.5' } }),
+ })
+
+ promptSpy = sinon.stub(inquirer, 'prompt')
+ .onCall(0)
+ .returns(Promise.resolve({
+ chosenTemplateName: 'vite',
+ componentFolder: 'src',
+ }) as any)
 
+ await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
+ expect(execStub).to.be.calledWith('yarn add @cypress/react --dev')
+ })
+
+ it('installs the right adapter for vue 3', async () => {
+ createTempFiles({
+ '/cypress.json': '{}',
+ '/vite.config.js': 'module.exports = { }',
+ '/package.json': JSON.stringify({ dependencies: { vue: '^3.0.0' } }),
+ })
+
+ promptSpy = sinon.stub(inquirer, 'prompt')
+ .onCall(0)
+ .returns(Promise.resolve({
+ chosenTemplateName: 'vite',
+ componentFolder: 'src',
+ }) as any)
+
+ await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
+ expect(execStub).to.be.calledWith('yarn add @cypress/vue@3 --dev')
  })
 
  it('suggest the right instruction based on user template choice', async () => {
@@ -272,4 +306,36 @@ describe('init component tests script', () => {
  ),
  ).to.be.true
  })
+
+ it('Doesn\'t affect injected code if user has custom babel.config.js', async () => {
+ createTempFiles({
+ '/cypress/plugins/index.js': 'module.exports = (on, config) => {}',
+ '/cypress.json': '{}',
+ 'babel.config.js': `module.exports = ${JSON.stringify({
+ presets: [
+ '@babel/preset-env',
+ ],
+ })}`,
+ '/package.json': JSON.stringify({
+ dependencies: {
+ babel: '*',
+ react: '^16.0.0',
+ },
+ }),
+ })
+
+ sinon.stub(inquirer, 'prompt').returns(Promise.resolve({
+ chosenTemplateName: 'create-react-app',
+ componentFolder: 'cypress/component',
+ }) as any)
+
+ await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
+ const babelPluginsOutput = await fs.readFile(
+ path.join(e2eTestOutputPath, 'cypress', 'plugins', 'index.js'),
+ 'utf-8',
+ )
+
+ expect(babelPluginsOutput).not.to.contain('use strict')
+ expect(babelPluginsOutput).to.contain('module.exports = (on, config) => {')
+ })
 })

npm/create-cypress-tests/src/component-testing/installFrameworkAdapter.ts

@@ -6,8 +6,9 @@ import { installDependency } from '../utils'
 async function guessOrAskForFramework (cwd: string): Promise<'react' | 'vue'> {
  // please sort this alphabetically
  const frameworks = {
- react: () => scanFSForAvailableDependency(cwd, ['react', 'react-dom']),
- vue: () => scanFSForAvailableDependency(cwd, ['vue']),
+ react: () => scanFSForAvailableDependency(cwd, { react: '*', 'react-dom': '*' }),
+ 'vue@2': () => scanFSForAvailableDependency(cwd, { vue: '2.x' }),
+ 'vue@3': () => scanFSForAvailableDependency(cwd, { vue: '3.x' }),
  }
 
  const guesses = Object.keys(frameworks).filter((framework) => {

npm/create-cypress-tests/src/component-testing/templates/_shared/vite.ts

@@ -20,7 +20,7 @@ export const ViteTemplate: Template = {
  },
  test: (root) => {
  return {
- success: scanFSForAvailableDependency(root, ['vite']),
+ success: scanFSForAvailableDependency(root, { vite: '*' }),
  }
  },
 }

npm/create-cypress-tests/src/component-testing/templates/vue/vueCli.ts

@@ -20,7 +20,7 @@ export const VueCliTemplate: Template = {
  }
  },
  test: (root) => {
- const hasVueCliService = scanFSForAvailableDependency(root, ['@vue/cli-service'])
+ const hasVueCliService = scanFSForAvailableDependency(root, { '@vue/cli-service': '>=4' })
 
  return {
  success: hasVueCliService,

npm/create-cypress-tests/src/findPackageJson.ts

@@ -1,6 +1,7 @@
 import path from 'path'
 import fs from 'fs'
 import findUp from 'find-up'
+import { validateSemverVersion } from './utils'
 
 type PackageJsonLike = {
  name?: string
@@ -91,16 +92,21 @@ export function createFindPackageJsonIterator (rootPath = process.cwd()) {
  }
 }
 
-export function scanFSForAvailableDependency (cwd: string, deps: string[]) {
+export function scanFSForAvailableDependency (cwd: string, lookingForDeps: Record<string, string>) {
  const { success } = createFindPackageJsonIterator(cwd)
  .map(({ dependencies, devDependencies }, path) => {
  if (!dependencies && !devDependencies) {
  return { success: false }
  }
 
  return {
- success: Object.keys({ ...dependencies, ...devDependencies })
- .some((dependency) => deps.includes(dependency)),
+ success: Object.entries({ ...dependencies, ...devDependencies })
+ .some(([dependency, version]) => {
+ return (
+ Boolean(lookingForDeps[dependency])
+ && validateSemverVersion(version, lookingForDeps[dependency], dependency)
+ )
+ }),
  }
  })
 

npm/create-cypress-tests/src/main.ts

@@ -38,7 +38,7 @@ async function shouldUseYarn () {
 }
 
 function shouldUseTypescript () {
- return scanFSForAvailableDependency(process.cwd(), ['typescript'])
+ return scanFSForAvailableDependency(process.cwd(), { typescript: '*' })
 }
 
 async function askForComponentTesting () {