feat: make cypress.config.js available

circle.yml

@@ -1347,10 +1347,6 @@ jobs:
  name: Run component tests
  command: yarn test:ci:ct
  working_directory: npm/vue
- - run:
- name: Run e2e tests
- command: yarn test:ci:e2e
- working_directory: npm/vue
  - store_test_results:
  path: npm/vue/test_results
  - store_artifacts:

cli/lib/cypress.js

@@ -68,6 +68,19 @@ const cypressModuleApi = {
  return cli.parseRunCommand(args)
  },
  },
+
+ /**
+ * This function should not be used in pure JavaScript
+ * By the type of its argument it allows autocompletion and
+ * type checking of the configuration given by users.
+ *
+ * @see ../types/cypress-npm-api.d.ts
+ * @param {Cypress.ConfigOptions} config
+ * @returns {Cypress.ConfigOptions} the configuration passed in parameter
+ */
+ defineConfig (config) {
+ return config
+ },
 }
 
 module.exports = cypressModuleApi

cli/types/cypress-npm-api.d.ts

@@ -138,7 +138,7 @@ declare namespace CypressCommandLine {
  /**
  * Specify configuration
  */
- config: Cypress.ConfigOptions
+ config: Cypress.ConfigOptionsMergedWithTestingTypes
  /**
  * Path to the config file to be used.
  *
@@ -335,8 +335,7 @@ declare namespace CypressCommandLine {
  }
 }
 
-declare module 'cypress' {
- /**
+/**
  * Cypress NPM module interface.
  * @see https://on.cypress.io/module-api
  * @example
@@ -345,41 +344,46 @@ declare module 'cypress' {
  cypress.run().then(results => ...)
  ```
  */
- interface CypressNpmApi {
-  /**
-  * Execute a headless Cypress test run.
-  * @see https://on.cypress.io/module-api#cypress-run
-  * @example
-  ```
-  const cypress = require('cypress')
-  // runs all spec files matching a wildcard
-  cypress.run({
-  spec: 'cypress/integration/admin*-spec.js'
-  }).then(results => {
-  if (results.status === 'failed') {
-  // Cypress could not run
-  } else {
-  // inspect results object
-  }
-  })
-  ```
-  */
-   run(options?: Partial<CypressCommandLine.CypressRunOptions>): Promise<CypressCommandLine.CypressRunResult | CypressCommandLine.CypressFailedRunResult>
-  /**
-  * Opens Cypress GUI. Resolves with void when the
-  * GUI is closed.
-  * @see https://on.cypress.io/module-api#cypress-open
-  */
-   open(options?: Partial<CypressCommandLine.CypressOpenOptions>): Promise<void>
+declare module 'cypress' {
+ /**
+ * Execute a headless Cypress test run.
+ * @see https://on.cypress.io/module-api#cypress-run
+ * @example
+ ```
+ const cypress = require('cypress')
+ // runs all spec files matching a wildcard
+ cypress.run({
+ spec: 'cypress/integration/admin*-spec.js'
+ }).then(results => {
+ if (results.status === 'failed') {
+ // Cypress could not run
+ } else {
+ // inspect results object
+ }
+ })
+ ```
+ */
+ function run(options?: Partial<CypressCommandLine.CypressRunOptions>): Promise<CypressCommandLine.CypressRunResult | CypressCommandLine.CypressFailedRunResult>
+ /**
+ * Opens Cypress GUI. Resolves with void when the
+ * GUI is closed.
+ * @see https://on.cypress.io/module-api#cypress-open
+ */
+ function open(options?: Partial<CypressCommandLine.CypressOpenOptions>): Promise<void>
 
- /**
- * Utility functions for parsing CLI arguments the same way
- * Cypress does
- */
- cli: CypressCommandLine.CypressCliParser
- }
+ /**
+ * Utility functions for parsing CLI arguments the same way
+ * Cypress does
+ */
+ const cli: CypressCommandLine.CypressCliParser
 
- // export Cypress NPM module interface
- const cypress: CypressNpmApi
- export = cypress
+ /**
+ * Type helper to make writing `cypress.config.ts` easier
+ */
+ function defineConfig(config: Cypress.ConfigOptions): Cypress.ConfigOptions
+
+ /**
+ * Types for configuring cypress in cypress.config.ts
+ */
+ type ConfigOptions = Cypress.ConfigOptions
 }

cli/types/cypress.d.ts

@@ -9,7 +9,7 @@ declare namespace Cypress {
  type ViewportOrientation = 'portrait' | 'landscape'
  type PrevSubject = 'optional' | 'element' | 'document' | 'window'
  type TestingType = 'e2e' | 'component'
- type PluginConfig = (on: PluginEvents, config: PluginConfigOptions) => void | ConfigOptions | Promise<ConfigOptions>
+ type PluginConfig = (on: PluginEvents, config: PluginConfigOptions) => void | ConfigOptionsMergedWithTestingTypes | Promise<ConfigOptionsMergedWithTestingTypes>
 
  interface CommandOptions {
  prevSubject: boolean | PrevSubject | PrevSubject[]
@@ -310,7 +310,7 @@ declare namespace Cypress {
  // 60000
  ```
  */
- config<K extends keyof ConfigOptions>(key: K): ResolvedConfigOptions[K]
+ config<K extends keyof ResolvedConfigOptions>(key: K): ResolvedConfigOptions[K]
  /**
  * Sets one configuration value.
  * @see https://on.cypress.io/config
@@ -319,7 +319,7 @@ declare namespace Cypress {
  Cypress.config('viewportWidth', 800)
  ```
  */
- config<K extends keyof ConfigOptions>(key: K, value: ResolvedConfigOptions[K]): void
+ config<K extends keyof ResolvedConfigOptions>(key: K, value: ResolvedConfigOptions[K]): void
  /**
  * Sets multiple configuration values at once.
  * @see https://on.cypress.io/config
@@ -331,7 +331,7 @@ declare namespace Cypress {
  })
  ```
  */
- config(Object: ConfigOptions): void
+ config(Object: ConfigOptionsMergedWithTestingTypes): void
 
  // no real way to type without generics
  /**
@@ -2488,6 +2488,17 @@ declare namespace Cypress {
  cmdKey: boolean
  }
 
+ type PluginsFunction = ((on: PluginEvents, config: PluginConfigOptions) => Promise<ConfigOptionsMergedWithTestingTypes> | ConfigOptionsMergedWithTestingTypes | undefined | void)
+
+ type TestingTypeConfig = Omit<ResolvedConfigOptions, TestingType> & { setupNodeEvents?: PluginsFunction }
+ type TestingTypeConfigComponent = TestingTypeConfig & {
+ /**
+ * Return the setup of your server
+ * @param options the dev server options to pass directly to the dev-server
+ */
+ setupDevServer(options: DevServerOptions): Promise<ResolvedDevServerConfig> | ResolvedDevServerConfig
+ }
+
  interface ResolvedConfigOptions {
  /**
  * Url used as prefix for [cy.visit()](https://on.cypress.io/visit) or [cy.request()](https://on.cypress.io/request) command’s url
@@ -2521,7 +2532,7 @@ declare namespace Cypress {
  reporter: string
  /**
  * Some reporters accept [reporterOptions](https://on.cypress.io/reporters) that customize their behavior
- * @default "spec"
+ * @default {}
  */
  reporterOptions: { [key: string]: any }
  /**
@@ -2561,7 +2572,7 @@ declare namespace Cypress {
  taskTimeout: number
  /**
  * Path to folder where application files will attempt to be served from
- * @default root project folder
+ * @default "root project folder"
  */
  fileServerFolder: string
  /**
@@ -2572,6 +2583,7 @@ declare namespace Cypress {
  /**
  * Path to folder containing integration test files
  * @default "cypress/integration"
+ * @deprecated use the testFiles glob in the e2e object
  */
  integrationFolder: string
  /**
@@ -2582,6 +2594,7 @@ declare namespace Cypress {
  /**
  * If set to `system`, Cypress will try to find a `node` executable on your path to use when executing your plugins. Otherwise, Cypress will use the Node version bundled with Cypress.
  * @default "bundled"
+ * @deprecated nodeVersion will soon be fixed to "system" to avoid confusion
  */
  nodeVersion: 'system' | 'bundled'
  /**
@@ -2716,6 +2729,7 @@ declare namespace Cypress {
  blockHosts: null | string | string[]
  /**
  * Path to folder containing component test files.
+ * @deprecated use the testFiles pattern inside the component object instead
  */
  componentFolder: false | string
  /**
@@ -2724,6 +2738,7 @@ declare namespace Cypress {
  projectId: null | string
  /**
  * Path to the support folder.
+ * @deprecated use supportFile instead
  */
  supportFolder: string
  /**
@@ -2740,16 +2755,16 @@ declare namespace Cypress {
  experimentalFetchPolyfill: boolean
 
  /**
- * Override default config options for Component Testing runner.
+ * Override default config options for E2E Testing runner.
  * @default {}
  */
- component: Omit<ResolvedConfigOptions, TestingType>
+ e2e: TestingTypeConfig
 
  /**
- * Override default config options for E2E Testing runner.
+ * Override default config options for Component Testing runner.
  * @default {}
  */
- e2e: Omit<ResolvedConfigOptions, TestingType>
+ component: TestingTypeConfigComponent
  }
 
  /**
@@ -2827,16 +2842,27 @@ declare namespace Cypress {
  xhrUrl: string
  }
 
- interface TestConfigOverrides extends Partial<Pick<ConfigOptions, 'animationDistanceThreshold' | 'baseUrl' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>> {
+ interface TestConfigOverrides extends Partial<Pick<ConfigOptionsMergedWithTestingTypes, 'animationDistanceThreshold' | 'baseUrl' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>> {
  browser?: IsBrowserMatcher | IsBrowserMatcher[]
  keystrokeDelay?: number
  }
 
+ // here we need to use the `Function` type to type setup functions options properly
+ // if we don't, they will be typed as any
+ /* tslint:disable-next-line ban-types */
+ type DeepPartial<T> = T extends Function ? T : T extends object ? { [P in keyof T]?: DeepPartial<T[P]>; } : T
+
+ /**
+ * ConfigOptions after the current testingType has been merget into the root.
+ */
+ type ConfigOptionsMergedWithTestingTypes = DeepPartial<ResolvedConfigOptions>
+
  /**
- * All configuration items are optional.
+ * Config model of cypress. To be used in `cypress.config.js`
  */
- type CoreConfigOptions = Partial<Omit<ResolvedConfigOptions, TestingType>>
- type ConfigOptions = CoreConfigOptions & {e2e?: CoreConfigOptions, component?: CoreConfigOptions }
+ type ConfigOptions = Omit<ConfigOptionsMergedWithTestingTypes, 'pluginsFile' | 'supportFile' | 'supportFolder'>
+ // make setupDevServer required in component
+ & {component?: {setupDevServer: TestingTypeConfigComponent['setupDevServer'] }}
 
  interface PluginConfigOptions extends ResolvedConfigOptions {
  /**
@@ -5252,7 +5278,7 @@ declare namespace Cypress {
 
  interface BeforeRunDetails {
  browser?: Browser
- config: ConfigOptions
+ config: ConfigOptionsMergedWithTestingTypes
  cypressVersion: string
  group?: string
  parallel?: boolean

npm/angular/cypress.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'cypress'
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin'
+import { startDevServer } from '@cypress/webpack-dev-server'
+import webpackConfig from './cypress/plugins/webpack.config'
+
+export default defineConfig({
+ experimentalFetchPolyfill: true,
+ fixturesFolder: false,
+ includeShadowDom: true,
+ fileServerFolder: 'src',
+ projectId: 'nf7zag',
+ component: {
+ componentFolder: 'src',
+ testFiles: '**/*cy-spec.ts',
+ setupDevServer (options) {
+ return startDevServer({
+ options,
+ webpackConfig,
+ })
+ },
+ setupNodeEvents (on, config) {
+ addMatchImageSnapshotPlugin(on, config)
+
+ require('@cypress/code-coverage/task')(on, config)
+
+ return config
+ },
+ },
+})