fix: Importing @cypress/vue and fixing README links (cypress-io#8710)

circle.yml

@@ -1045,6 +1045,28 @@ jobs:
           name: Release
           command: yarn semantic-release @cypress/webpack-preprocessor
 
+  npm-vue:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Build
+          command: yarn workspace @cypress/vue build
+      - run:
+          name: Run tests
+          command: yarn workspace @cypress/vue test
+      - store-npm-logs
+
+  npm-vue-release:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Release
+          command: yarn semantic-release @cypress/vue
+
   npm-eslint-plugin-dev:
     <<: *defaults
     steps:
@@ -1841,7 +1863,7 @@ linux-workflow: &linux-workflow
 
     - npm-webpack-preprocessor:
         requires:
-            - build
+          - build
     - npm-webpack-preprocessor-release:
         filters:
           branches:
@@ -1850,6 +1872,19 @@ linux-workflow: &linux-workflow
         requires:
           - build
           - npm-webpack-preprocessor
+
+    - npm-vue:
+        requires:
+          - build
+    - npm-vue-release:
+        filters:
+          branches:
+            only:
+              - master
+        requires:
+          - build
+          - npm-vue
+
     - npm-eslint-plugin-dev:
         requires:
           - build

cli/__snapshots__/spawn_spec.js

@@ -5,7 +5,7 @@ exports['lib/exec/spawn .start forces colors and streams when supported 1'] = {
   "FORCE_STDIN_TTY": "1",
   "FORCE_STDOUT_TTY": "1",
   "FORCE_STDERR_TTY": "1",
-  "NODE_OPTIONS": "--max-http-header-size=1048576 --http-parser=legacy"
+  "NODE_OPTIONS": "--max-http-header-size=1048576"
 }
 
 exports['lib/exec/spawn .start does not force colors and streams when not supported 1'] = {
@@ -14,7 +14,7 @@ exports['lib/exec/spawn .start does not force colors and streams when not suppor
   "FORCE_STDIN_TTY": "0",
   "FORCE_STDOUT_TTY": "0",
   "FORCE_STDERR_TTY": "0",
-  "NODE_OPTIONS": "--max-http-header-size=1048576 --http-parser=legacy"
+  "NODE_OPTIONS": "--max-http-header-size=1048576"
 }
 
 exports['lib/exec/spawn .start detects kill signal exits with error on SIGKILL 1'] = `

cli/lib/util.js

@@ -295,7 +295,7 @@ const util = {
     }
 
     // https://github.com/cypress-io/cypress/issues/5431
-    const NODE_OPTIONS = `--max-http-header-size=${1024 ** 2} --http-parser=legacy`
+    const NODE_OPTIONS = `--max-http-header-size=${1024 ** 2}`
 
     if (_.isString(process.env.NODE_OPTIONS)) {
       return {

cli/test/lib/util_spec.js

@@ -13,7 +13,7 @@ const util = require(`${lib}/util`)
 const logger = require(`${lib}/logger`)
 
 // https://github.com/cypress-io/cypress/issues/5431
-const expectedNodeOptions = `--max-http-header-size=${1024 * 1024} --http-parser=legacy`
+const expectedNodeOptions = `--max-http-header-size=${1024 * 1024}`
 
 describe('util', () => {
   beforeEach(() => {

npm/vue/.eslintrc

@@ -0,0 +1,17 @@
+{
+  "plugins": [
+    "cypress"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/tests"
+  ],
+  "env": {
+    "cypress/globals": true
+  },
+  "rules": {
+    "mocha/no-global-tests": "off",
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": "off"
+  }
+}

npm/vue/README.md

@@ -2,16 +2,14 @@
 
 [![NPM][npm-icon] ][npm-url]
 
-[![Build status][ci-image] ][ci-url]
-[![Cypress dashboard][cypress-badge] ][cypress-dashboard]
 [![semantic-release][semantic-image] ][semantic-url]
 [![renovate-app badge][renovate-badge]][renovate-app]
 
 > Browser-based Component Testing for Vue.js with the Open-Source [Cypress.io](https://www.cypress.io/) Test Runner ✌️🌲
 
 **Jump to:** [Comparison](#comparison), [Blog posts](#blog-posts), Examples: [basic](#basic-examples), [advanced](#advanced-examples), [full](#full-examples), [external](#external-examples), [Code coverage](#code-coverage), [Development](#development)
 
-**🚧 Notice** We are in the middle of moving into the Cypress NPM org, so any references to `cypress-vue-unit-test` should be switched to `@cypress/vue`. Once complete, this repository will be archived.
+**🚧 Notice** We are in the middle of moving into the Cypress NPM org, so any references to `@cypress/vue` should be switched to `@cypress/vue`. Once complete, this repository will be archived.
 
 ### What is @cypress/vue?
 This package allows you to use the [Cypress](https://www.cypress.io/) test runner to mount and test your components within Cypress. It is built on top of the [Vue Test Utils](https://github.com/vuejs/vue-test-utils) package.
@@ -196,7 +194,7 @@ var app4 = new Vue({
 Let's test it. Simple.
 
 ```js
-import { mountCallback } from 'cypress-vue-unit-test'
+import { mountCallback } from '@cypress/vue'
 
 describe('Declarative rendering', () => {
   // List example from https://vuejs.org/v2/guide/#Declarative-Rendering
@@ -684,21 +682,14 @@ Run Cypress with environment variable
 
 ```
 DEBUG=@cypress/vue
-```
+``` 
 
 If some deeply nested objects are abbreviated and do not print fully, set the maximum logging depth
 
 ```
 DEBUG=@cypress/vue DEBUG_DEPTH=10
 ```
 
-<a name="#faq"/>
-
-## FAQ
-
-- If your component's static assets are not loading, you probably need
-  to start and proxy Webpack dev server. See [issue #4](https://github.com/bahmutov/cypress-vue-unit-test/issues/4)
-
 <a name="#related"/>
 
 ## Related info
@@ -709,12 +700,6 @@ DEBUG=@cypress/vue DEBUG_DEPTH=10
 - [Learn TDD in Vue](https://learntdd.in/vue)
 - [@cypress/vue vs vue-test-utils](https://codingitwrong.com/2018/03/04/comparing-vue-component-testing-tools.html)
 
-## Migration guide
-
-### From v2 to v3
-
-- update `cypress/plugins/index.js` file to pass the `on, config` arguments when creating the default preprocessor. See [change](https://github.com/bahmutov/cypress-vue-unit-test/pull/331/files#diff-4bcea4966f5e62ded90298c2b0907445), in general the new way is:
-
 ```js
 const {
   onFileDefaultPreprocessor,
@@ -770,11 +755,8 @@ Let the world know your project is using Cypress.io to test with this cool badge
 
 [npm-icon]: https://nodei.co/npm/@cypress/vue.svg?downloads=true
 [npm-url]: https://npmjs.org/package/@cypress/vue
-[ci-image]: https://circleci.com/gh/bahmutov/cypress-vue-unit-test/tree/master.svg?style=svg
-[ci-url]: https://circleci.com/gh/bahmutov/cypress-vue-unit-test/tree/master
 [semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
 [semantic-url]: https://github.com/semantic-release/semantic-release
 [cypress-badge]: https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square
-[cypress-dashboard]: https://dashboard.cypress.io/#/projects/134ej7
 [renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
 [renovate-app]: https://renovateapp.com/

npm/vue/circle.yml

@@ -88,33 +88,3 @@ workflows:
 #            ls -la
 #          store_artifacts: true
 
-#      Turning off semantic release until merged into monorepo
-#      # this job attaches the workspace left by the install job
-#      # so it is ready to run Cypress tests
-#      # only we will run semantic release script instead
-#      - cypress/run:
-#          name: NPM release
-#          # only run NPM release from specific branch(es)
-#          filters:
-#            branches:
-#              only:
-#                - master
-#          # we need newer Node for semantic release
-#          executor: cypress/base-12
-#          requires:
-#            - Install
-#            - Test
-#            - Example CLI
-#          install-command: echo 'Already installed'
-#          verify-command: echo 'Already verified'
-#          no-workspace: true
-#          # instead of "cypress run" do NPM release 😁
-#          # clear environment variables to trick semantic-release
-#          # into thinking this is NOT a pull request.
-#          # (under the hood the module env-ci is used to check if this is a PR)
-#          command: |
-#            npm run build
-#            CIRCLE_PR_NUMBER= \
-#            CIRCLE_PULL_REQUEST= \
-#            CI_PULL_REQUEST= \
-#            npm run semantic-release

npm/vue/cypress/component/advanced/access-component/message-spec.js

@@ -54,24 +54,26 @@ describe('Message', () => {
       // need to spy on the _original_ method before it gets
       // passed to the Vue.extend and gets into private closuer
       const spy = cy.spy(Message.methods, 'handleClick')
+
       createCmp({ message: 'Cat' })
       cy.get('.message')
-        .click()
-        .then(() => {
-          expect(spy).to.be.calledOnce
-        })
+      .click()
+      .then(() => {
+        expect(spy).to.be.calledOnce
+      })
     })
 
     it('triggers a message-clicked event clicked', () => {
       createCmp({ message: 'Cat' }).then(() => {
         const stub = cy.spy()
+
         Cypress.vue.$on('message-clicked', stub)
         cy.get('.message')
-          .click()
-          .then(() => {
-            expect(stub).to.be.calledOnce
-            expect(stub).to.be.calledWith('Cat')
-          })
+        .click()
+        .then(() => {
+          expect(stub).to.be.calledOnce
+          expect(stub).to.be.calledWith('Cat')
+        })
       })
     })
   })

npm/vue/cypress/component/advanced/fetch-polyfill/Users.spec.js

@@ -14,10 +14,10 @@ describe('Fetching users with polyfill', () => {
     cy.route('/users?_limit=3').as('users')
     mount(Users)
     cy.wait('@users')
-      .its('responseBody.length')
-      .then((length) => {
-        cy.get('.user').should('have.length', length)
-      })
+    .its('responseBody.length')
+    .then((length) => {
+      cy.get('.user').should('have.length', length)
+    })
   })
 
   it('shows loading UI while fetch is happening', () => {

npm/vue/cypress/component/advanced/i18n/spec.js

@@ -6,7 +6,7 @@ import VueI18n from 'vue-i18n'
 import { mount } from '@cypress/vue'
 import messages from './translations.json'
 
-function expectHelloWorldGreeting() {
+function expectHelloWorldGreeting () {
   cy.viewport(400, 200)
   const allLocales = Cypress.vue.$i18n.availableLocales
 
@@ -16,6 +16,7 @@ function expectHelloWorldGreeting() {
   allLocales.forEach((locale) => {
     cy.get('select').select(locale).should('have.value', locale)
     const hello = messages[locale].hello
+
     cy.contains(hello)
   })
 }
@@ -26,6 +27,7 @@ describe('VueI18n', () => {
   describe('with i18n block', () => {
     beforeEach(() => {
       const i18n = new VueI18n({ locale: 'en' })
+
       mount(TranslatedMessageI18nBlock, { i18n })
     })
 
@@ -35,6 +37,7 @@ describe('VueI18n', () => {
   describe('with messages argument', () => {
     beforeEach(() => {
       const i18n = new VueI18n({ locale: 'en', messages })
+
       mount(TranslatedMessageWithJSON, { i18n })
     })
 

npm/vue/cypress/component/advanced/mocking-axios/1-Users.spec.js

@@ -11,15 +11,15 @@ const Axios = require('axios')
 describe('Mocking get import from Axios', () => {
   it('renders mocked data', () => {
     cy.stub(Axios, 'get')
-      .resolves({
-        data: [
-          {
-            id: 101,
-            name: 'Test User',
-          },
-        ],
-      })
-      .as('get')
+    .resolves({
+      data: [
+        {
+          id: 101,
+          name: 'Test User',
+        },
+      ],
+    })
+    .as('get')
 
     mount(Users)
     // mock response is used
@@ -29,10 +29,10 @@ describe('Mocking get import from Axios', () => {
 
   it('stubs with JSON loaded from fixture file', () => {
     cy.stub(Axios, 'get')
-      .resolves({
-        data: mockUsers,
-      })
-      .as('get')
+    .resolves({
+      data: mockUsers,
+    })
+    .as('get')
 
     mount(Users)
     // mock response is used