Merge branch 'develop' into feature-multidomain

cli/lib/VerboseRenderer.js

@@ -0,0 +1,72 @@
+// Vendored from @cypress/listr-verbose-renderer
+const figures = require('figures')
+const cliCursor = require('cli-cursor')
+const chalk = require('chalk')
+const dayjs = require('dayjs')
+
+const formattedLog = (options, output) => {
+  const timestamp = dayjs().format(options.dateFormat)
+
+  // eslint-disable-next-line no-console
+  console.log(`${chalk.dim(`[${timestamp}]`) } ${output}`)
+}
+
+const renderHelper = (task, event, options) => {
+  const log = formattedLog.bind(undefined, options)
+
+  if (event.type === 'STATE') {
+    const message = task.isPending() ? 'started' : task.state
+
+    log(`${task.title} [${message}]`)
+
+    if (task.isSkipped() && task.output) {
+      log(`${figures.arrowRight} ${task.output}`)
+    }
+  } else if (event.type === 'TITLE') {
+    log(`${task.title} [title changed]`)
+  }
+}
+
+const render = (tasks, options) => {
+  for (const task of tasks) {
+    task.subscribe(
+      (event) => {
+        if (event.type === 'SUBTASKS') {
+          render(task.subtasks, options)
+
+          return
+        }
+
+        renderHelper(task, event, options)
+      },
+      (err) => {
+        // eslint-disable-next-line no-console
+        console.log(err)
+      },
+    )
+  }
+}
+
+class VerboseRenderer {
+  constructor (tasks, options) {
+    this._tasks = tasks
+    this._options = Object.assign({
+      dateFormat: 'HH:mm:ss',
+    }, options)
+  }
+
+  static get nonTTY () {
+    return true
+  }
+
+  render () {
+    cliCursor.hide()
+    render(this._tasks, this._options)
+  }
+
+  end () {
+    cliCursor.show()
+  }
+}
+
+module.exports = VerboseRenderer

cli/lib/tasks/install.js

@@ -5,7 +5,6 @@ const path = require('path')
 const chalk = require('chalk')
 const debug = require('debug')('cypress:cli')
 const { Listr } = require('listr2')
-const verbose = require('@cypress/listr-verbose-renderer')
 const Promise = require('bluebird')
 const logSymbols = require('log-symbols')
 const { stripIndent } = require('common-tags')
@@ -16,6 +15,7 @@ const state = require('./state')
 const unzip = require('./unzip')
 const logger = require('../logger')
 const { throwFormErrorText, errors } = require('../errors')
+const verbose = require('../VerboseRenderer')
 
 const getNpmArgv = () => {
   const json = process.env.npm_config_argv

cli/lib/tasks/verify.js

@@ -2,13 +2,13 @@ const _ = require('lodash')
 const chalk = require('chalk')
 const { Listr } = require('listr2')
 const debug = require('debug')('cypress:cli')
-const verbose = require('@cypress/listr-verbose-renderer')
 const { stripIndent } = require('common-tags')
 const Promise = require('bluebird')
 const logSymbols = require('log-symbols')
 const path = require('path')
 const os = require('os')
 
+const verbose = require('../VerboseRenderer')
 const { throwFormErrorText, errors } = require('../errors')
 const util = require('../util')
 const logger = require('../logger')

cli/package.json

@@ -20,7 +20,6 @@
     "unit": "cross-env BLUEBIRD_DEBUG=1 NODE_ENV=test mocha --reporter mocha-multi-reporters --reporter-options configFile=../mocha-reporter-config.json"
   },
   "dependencies": {
-    "@cypress/listr-verbose-renderer": "^0.4.1",
     "@cypress/request": "^2.88.5",
     "@cypress/xvfb": "^1.2.4",
     "@types/node": "^14.14.31",
@@ -32,6 +31,7 @@
     "cachedir": "^2.3.0",
     "chalk": "^4.1.0",
     "check-more-types": "^2.24.0",
+    "cli-cursor": "^3.1.0",
     "cli-table3": "~0.6.0",
     "commander": "^5.1.0",
     "common-tags": "^1.8.0",
@@ -41,6 +41,7 @@
     "execa": "4.1.0",
     "executable": "^4.1.1",
     "extract-zip": "2.0.1",
+    "figures": "^3.2.0",
     "fs-extra": "^9.1.0",
     "getos": "^3.2.1",
     "is-ci": "^3.0.0",

npm/angular/README.md

@@ -1,14 +1,17 @@
 # @cypress/angular
 
-[![npm version](https://badge.fury.io/js/@cypress/angular.svg)](https://badge.fury.io/js/@cypress/angular) [![renovate-app badge][renovate-badge]][renovate-app] ![cypress version](https://img.shields.io/badge/cypress-6.9.1-brightgreen) [![ci status][ci image]][ci url] [![@cypress/angular](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/nf7zag/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/nf7zag/runs)
-
 ## Installation
 
+NOTE: this is not published on npm yet. It's a work in progress. Consider [Cypress Angular
+](https://github.com/jscutlery/test-utils/tree/main/packages/cypress-angular) by [JS Cutlery](https://github.com/jscutlery) for a version that's currently working and available on npm.
+
 ```shell
-npm install -D cypress @cypress/angular @cypress/webpack-preprocessor
+npm install -D cypress @cypress/angular @cypress/webpack-dev-server
 ```
 
-Add to your support file
+Ensure you have a version of Cypress > 7. 
+
+Add the following to your support file:
 
 ```js
 // cypress/support/index.js
@@ -19,12 +22,6 @@ require('core-js/es7/reflect');
 require('@cypress/angular/support');
 ```
 
-### Cypress >= v7
-
-```shell
-npm install -D @cypress/webpack-dev-server
-```
-
 Enable component testing in `cypress.json`.
 
 ```json
@@ -53,59 +50,38 @@ module.exports = (on, config) => {
 };
 ```
 
-The `webpack.config.ts` file is [here](cypress/plugins/webpack.config.ts)
-
-### Cypress < v7
-
-Enable experimental component testing mode in `cypress.json` and point at the spec files. Usually they are alongside your application files in `src` folder.
-
-```json
-{
-  "experimentalComponentTesting": true,
-  "componentFolder": "src",
-  "testFiles": "**/*cy-spec.*"
-}
-```
-
-Configure `cypress/plugins/index.js` to transpile Angular code.
-
-```javascript
-const wp = require('@cypress/webpack-preprocessor');
-import * as webpackOptions from './webpack.config';
-module.exports = (on, config) => {
-  const options = {
-    webpackOptions,
-  };
-  on('file:preprocessor', wp(options));
-  return config;
-};
-```
-
-The `webpack.config.ts` file is [here](cypress/plugins/webpack.config.ts)
+The `webpack.config.ts` file is [here](cypress/plugins/webpack.config.ts).
 
 ## Use
 
 ```js
-import { mount } from '@cypress/angular';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  it('shows the input', () => {
-    // Init Angular stuff
-    initEnv(AppComponent);
-    // You can also :
-    // initEnv({declarations: [AppComponent]});
-    // initEnv({imports: [MyModule]});
-
-    // component + any inputs object
-    mount(AppComponent, { title: 'World' });
-    // use any Cypress command afterwards
-    cy.contains('Welcome to World!');
-  });
-});
+import { initEnv, mount } from '@cypress/angular'
+import { AppModule } from '../app.module'
+import { InputComponent } from './input.component'
+
+describe('InputComponent', () => {
+  it('should show default value input', () => {
+    initEnv(InputComponent)
+    mount(InputComponent)
+    cy.contains('My input value 4')
+  })
+
+  it('should replace default value input', () => {
+    initEnv({ declarations: [InputComponent] })
+    mount(InputComponent, { myInput: 9 })
+    cy.contains('My input value 9')
+  })
+
+  it('should show default value input with AppModule', () => {
+    initEnv({ imports: [AppModule] })
+    mount(InputComponent)
+    cy.contains('My input value 4')
+  })
+})
+
 ```
 
-![Demo](images/demo.gif)
+![Demo](images/demo.png)
 
 ## Examples
 
@@ -219,41 +195,22 @@ rules: [
 
 You can find the HTML report at `coverage/lcov-report/index.html`
 
-## Working
-
-I have successfully used this mounting approach to test components in other frameworks.
-
-- [cypress-vue-unit-test](https://github.com/bahmutov/cypress-vue-unit-test)
-- [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test)
-- [cypress-cycle-unit-test](https://github.com/bahmutov/cypress-cycle-unit-test)
-- [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test)
-- [@cypress/angular](https://github.com/bahmutov/@cypress/angular)
-- [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test)
-- [cypress-angularjs-unit-test](https://github.com/bahmutov/cypress-angularjs-unit-test)
-
 ## Debugging
 
 You can turn on debugging log by setting environment variable :
 
 ```bash
 // Unix
-export DEBUG="@cypress/angular,cypress:webpack:stats"
+export DEBUG="@cypress/angular,cypress:webpack:dev-server"
 
 // PowerShell
-$env:DEBUG="@cypress/angular,cypress:webpack:stats"
+$env:DEBUG="@cypress/angular,cypress:webpack:dev-server"
 ```
 
 ## Development
 
 This project only transpiles the library, to see it in action:
 
-- Install dependencies `npm i`
-- Compile the library `npm run build`
-- Open Cypress with `npx cypress open`
-
-Pick any component test spec file to run
-
-[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
-[renovate-app]: https://renovateapp.com/
-[ci image]: https://github.com/bahmutov/@cypress/angular/workflows/ci/badge.svg?branch=master
-[ci url]: https://github.com/bahmutov/@cypress/angular/actions
+- Install dependencies `yarn`
+- Compile the library `yarn build` or `yarn watch` for watch mode
+- Open Cypress with `yarn cy:open`

packages/desktop-gui/package.json

@@ -22,6 +22,7 @@
     "@cypress/react": "0.0.0-development",
     "@cypress/react-tooltip": "0.5.3",
     "@cypress/webpack-preprocessor": "0.0.0-development",
+    "@fontsource/fira-sans": "4.3.0",
     "@fontsource/poppins": "4.3.0",
     "@fortawesome/fontawesome-free": "5.11.2",
     "@packages/web-config": "0.0.0-development",
@@ -34,7 +35,6 @@
     "cypress-multi-reporters": "1.4.0",
     "cypress-real-events": "1.4.0",
     "dayjs": "^1.9.3",
-    "fira": "cypress-io/fira#fb63362742eea8cdce0d90825ab9264d77719e3d",
     "gravatar": "1.8.0",
     "human-interval": "1.0.0",
     "lodash": "4.17.21",

packages/desktop-gui/src/styles/vendor.scss

@@ -42,7 +42,7 @@
 @import "~@fortawesome/fontawesome-free/scss/solid.scss";
 @import "~@fortawesome/fontawesome-free/scss/brands.scss";
 @import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "~fira/fira";
+@import "~@fontsource/fira-sans/latin.css";
 @import "~@fontsource/poppins/latin.css";
 
 // Tooltip

packages/reporter/package.json

@@ -12,6 +12,8 @@
   },
   "devDependencies": {
     "@cypress/react-tooltip": "0.5.3",
+    "@fontsource/mulish": "4.3.0",
+    "@fontsource/open-sans": "4.3.0",
     "@fortawesome/fontawesome-free": "5.11.2",
     "@packages/driver": "0.0.0-development",
     "@packages/socket": "0.0.0-development",

packages/reporter/src/errors/errors.scss

@@ -103,7 +103,7 @@
   .runnable-err-docs-url {
     margin-left: 0.5em;
     cursor: pointer;
-    font-family: $muli;
+    font-family: $font-sans;
   }
 
   .runnable-err-message {

packages/reporter/src/header/header.scss

@@ -49,7 +49,7 @@
 
     button {
       border-right: 1px solid #ddd;
-      font-weight: normal;
+      font-weight: 400;
       padding: 10px 12px;
       width: auto !important;
 
@@ -72,7 +72,6 @@
     li {
       display: block;
       font-size: 16px;
-      font-weight: 500;
       height: 46px;
       line-height: 26px;
       list-style-type: none;

packages/reporter/src/instruments/instruments.scss

@@ -29,10 +29,6 @@
     table {
       margin-bottom: 0;
 
-      th {
-        font-weight: 200;
-      }
-
       td {
         font-family: $monospace;
         font-size: 11px;

packages/reporter/src/lib/base.scss

@@ -34,7 +34,7 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
   &,
   input,
   textarea {
-    font-family: $muli;
+    font-family: $font-sans;
   }
 
   p {

packages/reporter/src/lib/tooltip.scss

@@ -2,7 +2,7 @@ $cy-tooltip-class: 'cy-tooltip';
 @import '../../node_modules/@cypress/react-tooltip/dist/tooltip.scss';
 
 .cy-tooltip {
-  font-family: $muli;
+  font-family: $font-sans;
   word-wrap: break-word;
   background-color: #242424;
 

packages/reporter/src/lib/variables.scss

@@ -18,6 +18,6 @@ $err-header-text: #cc3943;
 $header-height: 46px;
 $reporter-contents-min-width: 170px;
 
-$muli: 'Muli', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-sans: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $monospace: Consolas, Monaco, 'Andale Mono', monospace;