@toptal/davinci-qa 9.0.1 → 10.0.1-alpha-FX-2187-component-testing-support.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 10.0.0
+
+### Major Changes
+
+- [#1355](https://github.com/toptal/davinci/pull/1355) [`a59617c3`](https://github.com/toptal/davinci/commit/a59617c33ad153b1aaff797dd3492dc3d3678ca0) Thanks [@TomasSlama](https://github.com/TomasSlama)! - Update Cypress to v10. Follow [migration guide](https://docs.cypress.io/guides/references/migration-guide)
+
 ## 9.0.1
 
 ### Patch Changes

package/README.md

@@ -29,12 +29,12 @@ Example of execution unit tests in two separate threads:
 ```
 GROUP_INDEX=0 GROUP_TOTAL=2 davinci qa unit --ci
 GROUP_INDEX=1 GROUP_TOTAL=2 davinci qa unit --ci
-````
+```
 
 To specify a Sequencer, need to specify two environment variables:
 
-* `GROUP_INDEX` — The current worker index
-* `GROUP_TOTAL` — Total amount of workers
+- `GROUP_INDEX` — The current worker index
+- `GROUP_TOTAL` — Total amount of workers
 
 [Jest CLI docs](https://jestjs.io/docs/en/cli)
 
@@ -42,38 +42,33 @@ To specify a Sequencer, need to specify two environment variables:
 
 #### Integration
 
-To run integration tests go to the root directory of your project and run
-
-`davinci qa integration`
+| command                       | description                              |
+| ----------------------------- | ---------------------------------------- |
+| `davinci qa integration open` | Open Cypress Test Runner app             |
+| `davinci qa integration run`  | Run cypress tests without the cypress ui |
 
 Options:
 
-- `--open` - opens the Cypress Test Runner
+- `--anvilTag`(_run only_): the project name matching Anvil's expected tag to generate Anvil Reports
+- `--baseUrl`: URL used as prefix for cy.visit() or cy.request() command's URL
 - Any other cypress option (ex. `--parallel`)
 
 [Cypress CLI docs](https://docs.cypress.io/guides/guides/command-line.html)
 
 #### Extending Cypress config
 
-By default [cypress.config.json](https://github.com/toptal/davinci/blob/0f1f1485433573baeca66cf0c379259ca21b3f2f/packages/qa/src/configs/cypress.config.json#L1) is used.
+By default [cypress.config.js](https://github.com/toptal/davinci/blob/0f1f1485433573baeca66cf0c379259ca21b3f2f/packages/qa/src/configs/cypress.config.js#L1) is used.
 
-To extend default config, create `/cypress.json` file in the root of the project and use `extends`:
-```json
-{
-  "extends": "@toptal/davinci-qa/src/configs/cypress.config.json",
-  ...other custom configs
-}
-````
+To extend default config, create `/cypress.config.js` file in the root of the project and spread the default config into yours:
 
-In `/cypress/plugins/index.js` file add:
 ```js
-const plugins = require('@toptal/davinci-qa/src/configs/cypress/plugins')
-...
-module.exports = (on, config) => {
-  plugins(on, config)
-  ...
-  // rest of plugins
-}
+const davinciConfig = require('@toptal/davinci-qa/src/configs/cypress.config.js')
+
+export default defineConfig({
+  ...davinciConfig,
+  e2e: { ...davinciConfig.e2e, ...custom },
+  component: { ...davinciConfig.component, ...custom },
+})
 ```
 
 ### Alias

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/davinci-qa",
-  "version": "9.0.1",
+  "version": "10.0.1-alpha-FX-2187-component-testing-support.6+093204cf",
   "description": "QA package to test your application",
   "publishConfig": {
     "access": "public"
@@ -33,15 +33,14 @@
     "@babel/preset-env": "^7.18.0",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
-    "@bahmutov/cypress-extends": "^1.1.0",
-    "@cypress/code-coverage": "^3.9.12",
-    "@cypress/webpack-preprocessor": "^5.11.0",
+    "@cypress/code-coverage": "^3.10.0",
+    "@cypress/webpack-preprocessor": "^5.12.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.2",
-    "@toptal/davinci-cli-shared": "1.5.2",
+    "@toptal/davinci-cli-shared": "1.5.3-alpha-FX-2187-component-testing-support.18+093204cf",
     "@types/jest": "^27.5.1",
     "babel-jest": "^28.1.0",
-    "cypress": "^9.7.0",
+    "cypress": "^10.0.3",
     "enhanced-resolve": "^5.9.2",
     "fs-extra": "^10.0.0",
     "glob": "^8.0.3",
@@ -58,5 +57,6 @@
   "devDependencies": {
     "json5": "^2.2.1",
     "mocha": "^10.0.0"
-  }
+  },
+  "gitHead": "093204cf21a6042384d26ddce00f103dcb3f3795"
 }

package/src/commands/integration-open.js

@@ -0,0 +1,47 @@
+const {
+  runSync,
+  print,
+  convertToCLIParameters,
+  files,
+} = require('@toptal/davinci-cli-shared')
+
+const integrationOpenCommand = ({
+  options: { baseUrl, ...cypressOptions } = {},
+  files: testFiles = [],
+}) => {
+  print.green('Running integration tests...')
+
+  const configPath = files.getPackageFilePath(
+    '@toptal/davinci-qa',
+    'src/configs/cypress.config.json'
+  )
+
+  runSync('yarn', [
+    'cypress',
+    'open',
+    '--config-file',
+    configPath,
+    ...testFiles,
+    ...(baseUrl ? ['--config', `baseUrl=${baseUrl}`] : []),
+    ...convertToCLIParameters(cypressOptions),
+  ])
+}
+
+const integrationOpenCommandCreator = {
+  action: ({ options, files: filesArg }) => {
+    return integrationOpenCommand({
+      files: filesArg,
+      options: { ...options },
+    })
+  },
+  allowUnknownOptions: true,
+  command: 'integration open [files...]',
+  options: [
+    {
+      label: "URL used as prefix for cy.visit() or cy.request() command's URL",
+      name: '--baseUrl <baseUrl>',
+    },
+  ],
+}
+
+module.exports = integrationOpenCommandCreator

package/src/commands/{integration-tests.js → integration-run.js}

@@ -5,31 +5,29 @@ const {
   files,
 } = require('@toptal/davinci-cli-shared')
 
-const integrationTestCommand = ({
-  options: { open = false, baseUrl, anvilTag, ...cypressOptions } = {},
+const integrationRunCommand = ({
+  options: { baseUrl, anvilTag, ...cypressOptions } = {},
   files: testFiles = [],
 }) => {
   print.green('Running integration tests...')
 
   const configPath = files.getPackageFilePath(
     '@toptal/davinci-qa',
-    'src/configs/cypress.config.json'
+    'src/configs/cypress.config.js'
   )
   const cypressReporterPath = files.getPackageFilePath(
     '@toptal/davinci-qa',
     'src/reporters/cypress-anvil-reporter.js'
   )
 
-  const mode = open ? 'open' : 'run'
-
   runSync('yarn', [
     'cypress',
-    mode,
+    'run',
     '--config-file',
     configPath,
     ...testFiles,
     ...(baseUrl ? ['--config', `baseUrl=${baseUrl}`] : []),
-    ...(!open && anvilTag
+    ...(anvilTag
       ? [
           '--reporter',
           cypressReporterPath,
@@ -41,17 +39,16 @@ const integrationTestCommand = ({
   ])
 }
 
-const integrationCommandCreator = {
+const integrationRunCommandCreator = {
   action: ({ options, files: filesArg }) => {
-    return integrationTestCommand({ files: filesArg, options })
+    return integrationRunCommand({
+      files: filesArg,
+      options: { ...options },
+    })
   },
   allowUnknownOptions: true,
-  command: 'integration [files...]',
+  command: 'integration run [files...]',
   options: [
-    {
-      label: 'opens the Cypress Test Runner',
-      name: '--open',
-    },
     {
       label: "URL used as prefix for cy.visit() or cy.request() command's URL",
       name: '--baseUrl <baseUrl>',
@@ -64,4 +61,4 @@ const integrationCommandCreator = {
   ],
 }
 
-module.exports = integrationCommandCreator
+module.exports = integrationRunCommandCreator

package/src/configs/cypress.config.js

@@ -0,0 +1,39 @@
+const { defineConfig } = require('cypress')
+
+const {
+  webpackPreprocessor,
+} = require('./cypress/plugins/webpack-preprocessor')
+const parallelization = require('./cypress/plugins/parallelization')
+
+module.exports = defineConfig({
+  defaultCommandTimeout: 6000,
+  fixturesFolder: './cypress/fixtures',
+  chromeWebSecurity: false,
+  screenshotsFolder: './cypress/screenshots',
+  video: false,
+
+  component: {
+    viewportWidth: 1280,
+    viewportHeight: 1024,
+    slowTestThreshold: 250,
+    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/component.{js,ts}',
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // generate code coverage
+      require('@cypress/code-coverage/task')(on, config)
+
+      // split spec files in CI
+      parallelization(config)
+
+      // instrument code for code coverage
+      on('file:preprocessor', webpackPreprocessor)
+    },
+    baseUrl: 'http://0.0.0.0:3000',
+    slowTestThreshold: 10000,
+    specPattern: 'cypress/integration/**/*.spec.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/e2e.{js,ts}',
+  },
+})

package/src/index.js

@@ -1,11 +1,13 @@
 const unitTestsCommandCreator = require('./commands/unit-tests')
-const integrationTestsCommandCreator = require('./commands/integration-tests')
+const integrationOpenCommandCreator = require('./commands/integration-open')
+const integrationRunCommandCreator = require('./commands/integration-run')
 const codeMetricsCommandCreator = require('./commands/code-metrics')
 
 module.exports = {
   commands: [
     unitTestsCommandCreator,
-    integrationTestsCommandCreator,
+    integrationOpenCommandCreator,
+    integrationRunCommandCreator,
     codeMetricsCommandCreator,
   ],
 }

package/dist-package/package.json

@@ -1,62 +0,0 @@
-{
-  "name": "@toptal/davinci-qa",
-  "version": "9.0.1",
-  "description": "QA package to test your application",
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "qa",
-    "testing"
-  ],
-  "author": "Toptal",
-  "homepage": "https://github.com/toptal/davinci/tree/master/packages/qa#readme",
-  "license": "ISC",
-  "bin": {
-    "davinci-qa": "./bin/davinci-qa.js"
-  },
-  "main": "./src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/toptal/davinci.git"
-  },
-  "scripts": {
-    "build:package": "../../bin/build-package.js",
-    "prepublishOnly": "../../bin/prepublish.js",
-    "test": "echo \"Error: run tests from root\" && exit 1"
-  },
-  "bugs": {
-    "url": "https://github.com/toptal/davinci/issues"
-  },
-  "dependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/preset-env": "^7.18.0",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.17.12",
-    "@bahmutov/cypress-extends": "^1.1.0",
-    "@cypress/code-coverage": "^3.9.12",
-    "@cypress/webpack-preprocessor": "^5.11.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.2",
-    "@toptal/davinci-cli-shared": "1.5.2",
-    "@types/jest": "^27.5.1",
-    "babel-jest": "^28.1.0",
-    "cypress": "^9.7.0",
-    "enhanced-resolve": "^5.9.2",
-    "fs-extra": "^10.0.0",
-    "glob": "^8.0.3",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
-    "jest-html-reporters": "^3.0.6",
-    "jest-junit": "^13.1.0",
-    "jest-silent-reporter": "^0.5.0",
-    "jest-styled-components": "^7.0.8",
-    "jsdom": "^19.0.0",
-    "matchmedia-polyfill": "^0.3.2",
-    "semver": "^7.3.2"
-  },
-  "devDependencies": {
-    "json5": "^2.2.1",
-    "mocha": "^10.0.0"
-  }
-}

package/src/commands/integration-tests.test.js

@@ -1,69 +0,0 @@
-const convertToCLIParametersMock = jest.fn()
-const getPackageFilePathMock = jest.fn()
-
-jest.mock('@toptal/davinci-cli-shared', () => ({
-  runSync: jest.fn(),
-  print: {
-    green: jest.fn(),
-  },
-  convertToCLIParameters: convertToCLIParametersMock,
-  files: {
-    getPackageFilePath: getPackageFilePathMock,
-  },
-}))
-
-const { runSync } = require('@toptal/davinci-cli-shared')
-
-const { action } = require('./integration-tests')
-
-describe('integrationTestCommand', () => {
-  it('runs cypress with default options', () => {
-    convertToCLIParametersMock.mockReturnValueOnce([])
-    getPackageFilePathMock.mockReturnValueOnce(
-      'packages/qa/src/configs/cypress.config.json'
-    )
-
-    action({ options: {} })
-
-    expect(runSync).toHaveBeenCalledWith('yarn', [
-      'cypress',
-      'run',
-      '--config-file',
-      'packages/qa/src/configs/cypress.config.json',
-    ])
-
-    expect(convertToCLIParametersMock).toHaveBeenCalledWith({})
-    expect(getPackageFilePathMock).toHaveBeenCalledWith(
-      '@toptal/davinci-qa',
-      'src/configs/cypress.config.json'
-    )
-  })
-
-  it('runs cypress with custom options', () => {
-    const spec = 'cypress/integration/activation_flow.spec.ts'
-
-    convertToCLIParametersMock.mockReturnValueOnce(['--spec', spec])
-    getPackageFilePathMock.mockReturnValueOnce(
-      'packages/qa/src/configs/cypress.config.json'
-    )
-
-    action({ options: { spec } })
-
-    expect(runSync).toHaveBeenCalledWith('yarn', [
-      'cypress',
-      'run',
-      '--config-file',
-      'packages/qa/src/configs/cypress.config.json',
-      '--spec',
-      spec,
-    ])
-
-    expect(convertToCLIParametersMock).toHaveBeenCalledWith({
-      spec,
-    })
-    expect(getPackageFilePathMock).toHaveBeenCalledWith(
-      '@toptal/davinci-qa',
-      'src/configs/cypress.config.json'
-    )
-  })
-})

package/src/commands/unit-tests.test.js

@@ -1,213 +0,0 @@
-const jestRunCLIMock = jest
-  .fn()
-  .mockResolvedValue({ results: { success: true } })
-const getPackageFilePathMock = jest.fn()
-const getProjectRootFilePathMock = jest.fn()
-const getProjectRootFileContentMock = jest.fn().mockReturnValue({
-  devDependencies: {},
-  dependencies: {},
-})
-
-jest.mock('@toptal/davinci-cli-shared', () => ({
-  runSync: jest.fn(),
-  print: {
-    green: jest.fn(),
-    grey: jest.fn(),
-    red: jest.fn(),
-  },
-  files: {
-    getPackageFilePath: getPackageFilePathMock,
-    getProjectRootFileContent: getProjectRootFileContentMock,
-    getProjectRootFilePath: getProjectRootFilePathMock,
-  },
-}))
-
-jest.mock('jest', () => ({
-  runCLI: jestRunCLIMock,
-}))
-
-const { action } = require('./unit-tests')
-const originalEnv = process.env
-
-describe('unitTestsCommand', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  afterEach(() => {
-    process.env = originalEnv
-  })
-
-  describe('when running locally', () => {
-    beforeEach(() => {
-      delete process.env.CI
-    })
-
-    it('calls the jest CLI without additional reporters', async () => {
-      const davinciJestConfigPath = 'packages/qa/src/configs/jest.config.js'
-
-      getPackageFilePathMock.mockReturnValueOnce(davinciJestConfigPath)
-
-      await action({})
-
-      expect(jestRunCLIMock).toHaveBeenCalledWith(
-        { config: davinciJestConfigPath, testPathPattern: [] },
-        expect.anything()
-      )
-    })
-  })
-
-  describe('when running on CI', () => {
-    beforeEach(() => {
-      process.env.CI = true
-    })
-
-    it('calls the jest CLI with default Davinci reporters', async () => {
-      const davinciJestConfigPath = 'packages/qa/src/configs/jest.config.js'
-
-      getPackageFilePathMock.mockReturnValueOnce(davinciJestConfigPath)
-
-      await action({})
-
-      expect(jestRunCLIMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          reporters: [
-            [
-              'jest-silent-reporter',
-              {
-                useDots: true,
-                showPaths: true,
-                showWarnings: true,
-              },
-            ],
-            [
-              'jest-junit',
-              {
-                outputDirectory: 'reports',
-              },
-            ],
-            [
-              'jest-html-reporters',
-              {
-                publicPath: './reports',
-              },
-            ],
-          ],
-        }),
-        expect.anything()
-      )
-    })
-
-    it('returns the anvil reporter when anvilTag is set', async () => {
-      const davinciJestConfigPath = 'packages/qa/src/configs/jest.config.js'
-
-      getPackageFilePathMock.mockReturnValueOnce(davinciJestConfigPath)
-
-      await action({ options: { anvilTag: 'platform' } })
-
-      expect(jestRunCLIMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          reporters: [
-            [
-              'jest-silent-reporter',
-              {
-                useDots: true,
-                showPaths: true,
-                showWarnings: true,
-              },
-            ],
-            [
-              'jest-junit',
-              {
-                outputDirectory: 'reports',
-              },
-            ],
-            [
-              'jest-html-reporters',
-              {
-                publicPath: './reports',
-              },
-            ],
-            [
-              expect.stringContaining(
-                'davinci/packages/qa/src/reporters/jest-anvil-reporter.js'
-              ),
-              {
-                anvilTag: 'platform',
-              },
-            ],
-          ],
-        }),
-        expect.anything()
-      )
-    })
-
-    it('allows overriding of the default Davinci reporters via custom configuration', async () => {
-      const davinciJestConfigPath = 'packages/qa/src/configs/jest.config.js'
-
-      getPackageFilePathMock.mockReturnValueOnce(davinciJestConfigPath)
-      const customCLIReporter = 'My-CLI-Reporter'
-
-      await action({
-        options: {
-          anvilTag: 'MyTag',
-          reporters: customCLIReporter,
-        },
-      })
-
-      expect(jestRunCLIMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          reporters: [customCLIReporter],
-        }),
-        expect.anything()
-      )
-    })
-
-    it('allows overriding the default Davinci reporters via custom jest config', async () => {
-      const davinciJestConfigPath = 'packages/qa/src/configs/jest.config.js'
-
-      getPackageFilePathMock.mockReturnValueOnce(davinciJestConfigPath)
-      const customJestConfigReporter = 'My-Jest-Config-Reporter'
-
-      getProjectRootFileContentMock.mockReturnValue({
-        reporters: customJestConfigReporter,
-      })
-
-      await action({ options: { config: {} } })
-
-      expect(jestRunCLIMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          reporters: [customJestConfigReporter],
-        }),
-        expect.anything()
-      )
-    })
-
-    it('prioritizes the CLI reporters over the custom jest config or the default Davinci reporters', async () => {
-      const davinciJestConfigPath = 'packages/qa/src/configs/jest.config.js'
-
-      getPackageFilePathMock.mockReturnValueOnce(davinciJestConfigPath)
-      const customCLIReporter = 'My-CLI-Reporter'
-      const customJestConfigReporter = 'My-Jest-Config-Reporter'
-
-      getProjectRootFileContentMock.mockReturnValue({
-        reporters: customJestConfigReporter,
-      })
-
-      await action({
-        options: {
-          anvilTag: 'MyTag',
-          reporters: customCLIReporter,
-          config: {},
-        },
-      })
-
-      expect(jestRunCLIMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          reporters: [customCLIReporter],
-        }),
-        expect.anything()
-      )
-    })
-  })
-})

package/src/configs/cypress/plugins/__snapshots__/extends.test.js.snap

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`cypress extends tests when "extends" key exists in the source config file merges extended config into source config 1`] = `
-"{
-  configFile: '@toptal/davinci-qa/src/configs/cypress/plugins/config-with-extends.test.json',
-  fixturesFolder: './cypress/fixtures',
-  integrationFolder: '.',
-  screenshotsFolder: './cypress/screenshots',
-  testFiles: [
-    'cypress/**/spec.{js,ts}',
-    'cypress/**/*.spec.{js,ts}',
-  ],
-  ignoreTestFiles: '**/node_modules/**/*',
-  pluginsFile: './cypress/plugins/index.js',
-  baseUrl: 'http://0.0.0.0:3000',
-  chromeWebSecurity: false,
-  defaultCommandTimeout: 1000,
-  video: false,
-  extends: '@toptal/davinci-qa/src/configs/cypress.config.json',
-}"
-`;
-
-exports[`cypress extends tests when no "extends" exist in the source config file returns source config file without any change 1`] = `
-"{
-  configFile: '@toptal/davinci-qa/src/configs/cypress/plugins/config-without-extends.test.json',
-  defaultCommandTimeout: 1000,
-}"
-`;

package/src/configs/cypress/plugins/config-with-extends.test.json

@@ -1,4 +0,0 @@
-{
-  "extends": "@toptal/davinci-qa/src/configs/cypress.config.json",
-  "defaultCommandTimeout": 1000
-}

package/src/configs/cypress/plugins/config-without-extends.test.json

@@ -1,3 +0,0 @@
-{
-  "defaultCommandTimeout": 1000
-}