test: migrate to cypress

Author: Guillaume Chau

.circleci/config.yml

@@ -27,3 +27,8 @@ jobs:
 
       # run tests!
       - run: yarn test
+
+      - store_artifacts:
+          path: packages/@vue/cli-ui/tests/e2e/videos
+      - store_artifacts:
+          path: packages/@vue/cli-ui/tests/e2e/screenshots

.eslintrc

@@ -0,0 +1,15 @@
+module.exports = {
+  'root': true,
+  'env': {
+    'browser': true
+  },
+  'extends': [
+    'plugin:vue-libs/recommended'
+  ],
+  'globals': {
+    'bridge': true,
+    'chrome': true,
+    'localStorage': true,
+    'HTMLDocument': true
+  }
+}

.eslintrc.js

@@ -0,0 +1,5 @@
+{
+  "viewportWidth": 1280,
+  "viewportHeight": 800,
+  "chromeWebSecurity": false
+}

cypress.json

@@ -0,0 +1,12 @@
+module.exports = {
+  'plugins': [
+    'cypress'
+  ],
+  'env': {
+    'mocha': true,
+    'cypress/globals': true
+  },
+  'rules': {
+    'strict': 'off'
+  }
+}

cypress/.eslintrc.js

@@ -0,0 +1,2 @@
+/screenshots
+/videos

cypress/.gitignore

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/fixtures/example.json

@@ -0,0 +1,95 @@
+import { suite } from '../utils/suite'
+
+const baseInstanceCount = 8
+
+suite('components tab', () => {
+  it('should detect instances inside shadow DOM', () => {
+    cy.get('.tree > .instance:last-child').contains('Shadow')
+  })
+
+  it('should select instance', () => {
+    cy.get('.instance .self').eq(0).click().then(el => {
+      expect(el).to.have.class('selected')
+    })
+    cy.get('.tree').should('be.visible')
+    cy.get('.action-header .title').contains('Root')
+    cy.get('.data-field').contains('$route')
+  })
+
+  it('should expand root by default', () => {
+    cy.get('.instance').should('have.length', baseInstanceCount)
+  })
+
+  it('should select child instance', () => {
+    cy.get('.instance .instance:nth-child(1) .self').eq(0).click()
+    cy.get('.action-header .title').contains('Counter')
+    cy.get('.data-el.vuex-bindings .data-field').contains('count:0')
+    cy.get('.data-el.computed .data-field').contains('test:1')
+    cy.get('.data-el.firebase-bindings .data-field').contains('hello:undefined')
+  })
+
+  it('should display prop of different types', () => {
+    cy.get('.instance .instance:nth-child(2) .self').eq(0).click()
+    cy.get('.action-header .title').contains('Target')
+    cy.get('.data-el.props .data-field:nth-child(1)').contains('ins:Object')
+    cy.get('.data-el.props .data-field:nth-child(2)').contains('msg:"hi"')
+    cy.get('.data-el.props .data-field:nth-child(3)').contains('obj:undefined')
+    // Regexp
+    cy.get('.data-el.data .data-field:nth-child(8)').then(el => {
+      expect(el.text()).to.include('regex:/(a\\w+b)/g')
+    })
+    // Literals
+    cy.get('.data-el.data .data-field:nth-child(5)').contains('NaN')
+    cy.get('.data-el.data .data-field:nth-child(2)').contains('Infinity')
+    cy.get('.data-el.data .data-field:nth-child(6)').contains('-Infinity')
+
+    // Classify names
+    cy.get('.instance .instance:nth-child(3)').contains('OtherWithMine')
+    cy.get('.button.classify-names').click()
+    cy.get('.instance .instance:nth-child(3)').contains('other-with-mine')
+    cy.get('.button.classify-names').click()
+    cy.get('.instance .instance:nth-child(3)').contains('OtherWithMine')
+  })
+
+  it('should expand child instance', () => {
+    cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
+    cy.get('.instance').should('have.length', baseInstanceCount + 2)
+  })
+
+  it('should add/remove component from app side', () => {
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.add').click({ force: true })
+    })
+    cy.get('.instance').should('have.length', baseInstanceCount + 5)
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.remove').click({ force: true })
+    })
+    cy.get('.instance').should('have.length', baseInstanceCount + 4)
+  })
+
+  it('should filter components', () => {
+    cy.get('.left .search input').clear().type('counter')
+    cy.get('.instance').should('have.length', 1)
+    cy.get('.left .search input').clear().type('target')
+    cy.get('.instance').should('have.length', 5)
+    cy.get('.left .search input').clear()
+  })
+
+  it('should select component', () => {
+    cy.get('.select-component').click()
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.mine').eq(0)
+        .trigger('mouseover', { force: true })
+        .click({ force: true })
+    })
+    cy.get('.action-header .title').contains('Mine')
+    cy.get('.tree').then(el => {
+      expect(el.text()).to.include('<Mine>')
+    })
+  })
+
+  it('should display render key', () => {
+    cy.get('.instance .self .attr-title').contains('key')
+    cy.get('.instance .self .attr-value').contains('1')
+  })
+})

cypress/integration/components-tab.js

@@ -0,0 +1,35 @@
+import { suite } from '../utils/suite'
+
+suite('events tab', () => {
+  it('should display new events counter', () => {
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.btn-emit-event').click({ force: true })
+      get('.btn-emit-event1').click({ force: true })
+      get('.btn-emit-event2').click({ force: true })
+    })
+    cy.get('.events-tab .tag').contains(3)
+    cy.get('.events-tab').click()
+    cy.get('.events-tab .tag').should('not.be.visible')
+  })
+
+  it('should display events', () => {
+    cy.get('.history .entry').should('have.length', 3)
+  })
+
+  it('should add event', () => {
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.btn-emit-log-event').click({ force: true })
+    })
+    cy.get('.history .entry').should('have.length', 4)
+  })
+
+  it('should search events', () => {
+    cy.get('.left .search input').clear().type('event')
+    cy.get('.history .entry').should('have.length', 3)
+    cy.get('.left .search input').clear().type('<eventchild1>')
+    cy.get('.history .entry').should('have.length', 1)
+    cy.get('.left .search input').clear()
+    cy.get('.button.reset').click()
+    cy.get('.history .entry').should('have.length', 0)
+  })
+})

cypress/integration/events.tab.js

@@ -0,0 +1,193 @@
+import { suite } from '../utils/suite'
+
+suite('vuex tab', () => {
+  it('should display mutations history', () => {
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.increment')
+        .click({ force: true })
+        .click({ force: true })
+      get('.decrement').click({ force: true })
+      get('#counter p').contains('1')
+    })
+    cy.get('.vuex-tab').click()
+    cy.get('.history .entry').should('have.length', 4)
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('type:"DECREMENT"')
+      expect(el.text()).to.include('count:1')
+    })
+    cy.get('.history .entry:nth-child(4)').should('have.class', 'inspected').should('have.class', 'active')
+  })
+
+  it('should filter state & getters', () => {
+    cy.get('.right .search input').clear().type('cou')
+    cy.get('.data-field').should('have.length', 1)
+    cy.get('.right .search input').clear().type('no value')
+    cy.get('.data-field').should('have.length', 0)
+    cy.get('.right .search input').clear()
+  })
+
+  it('should filter history', () => {
+    cy.get('.left .search input').clear().type('inc')
+    cy.get('.history .entry').should('have.length', 3)
+    cy.get('.history .entry.inspected').should('have.length', 0)
+    cy.get('.history .entry.active').should('have.length', 0)
+
+    cy.get('.left .search input').clear().type('/dec/i')
+    cy.get('.history .entry').should('have.length', 2)
+    cy.get('.history .entry.inspected.active').should('have.length', 1)
+
+    cy.get('.left .search input').clear().type('/dec)/i')
+    cy.get('.history .entry').should('have.length', 4)
+    cy.get('.history .entry.inspected.active').should('have.length', 1)
+
+    cy.get('.left .search input').clear()
+  })
+
+  it('should inspect state', () => {
+    cy.get('.history .entry:nth-child(3) .mutation-type').click()
+    cy.get('.history .entry:nth-child(3)')
+      .should('have.class', 'inspected')
+      .should('not.have.class', 'active')
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('type:"INCREMENT"')
+      expect(el.text()).to.include('count:2')
+    })
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('1')
+    })
+  })
+
+  it('should time-travel', () => {
+    cy.get('.history .entry:nth-child(3) .entry-actions .action:nth-child(3)').click({ force: true })
+    cy.get('.history .entry:nth-child(3)')
+      .should('have.class', 'inspected')
+      .should('have.class', 'active')
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('2')
+    })
+
+    cy.get('.history .entry:nth-child(2) .mutation-type').click({ force: true })
+    cy.get('.history .entry:nth-child(2)')
+      .should('have.class', 'inspected')
+      .should('not.have.class', 'active')
+    cy.get('.history .entry:nth-child(3)')
+      .should('not.have.class', 'inspected')
+      .should('have.class', 'active')
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('type:"INCREMENT"')
+      expect(el.text()).to.include('count:1')
+    })
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('2')
+    })
+    cy.get('.history .entry:nth-child(2) .entry-actions .action:nth-child(3)').click({ force: true })
+    cy.get('.history .entry:nth-child(2)')
+      .should('have.class', 'inspected')
+      .should('have.class', 'active')
+    cy.get('.history .entry:nth-child(3)')
+      .should('not.have.class', 'inspected')
+      .should('not.have.class', 'active')
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('1')
+    })
+
+    // Base state
+    cy.get('.history .entry:nth-child(1) .mutation-type').click({ force: true })
+    cy.get('.history .entry:nth-child(1)')
+      .should('have.class', 'inspected')
+      .should('not.have.class', 'active')
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('count:0')
+    })
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('1')
+    })
+    cy.get('.history .entry:nth-child(1) .entry-actions .action:nth-child(1)').click({ force: true })
+    cy.get('.history .entry:nth-child(1)')
+      .should('have.class', 'inspected')
+      .should('have.class', 'active')
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('0')
+    })
+  })
+
+  it('should revert', () => {
+    cy.get('.history .entry:nth-child(4) .mutation-type').click({ force: true })
+    cy.get('.history .entry:nth-child(4) .action:nth-child(2)').click({ force: true })
+    cy.get('.history .entry').should('have.length', 3)
+    cy.get('.history .entry:nth-child(3)')
+      .should('have.class', 'inspected')
+      .should('have.class', 'active')
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('count:2')
+    })
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('2')
+    })
+  })
+
+  it('should commit', () => {
+    cy.get('.history .entry:nth-child(3) .mutation-type').click({ force: true })
+    cy.get('.history .entry:nth-child(3) .action:nth-child(1)').click({ force: true })
+    cy.get('.history .entry').should('have.length', 1)
+    cy.get('.history .entry:nth-child(1)')
+      .should('have.class', 'inspected')
+      .should('have.class', 'active')
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('count:2')
+    })
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('2')
+    })
+  })
+
+  it('should display getters', () => {
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('isPositive:true')
+    })
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.decrement')
+        .click({ force: true })
+        .click({ force: true })
+        .click({ force: true })
+    })
+    cy.get('.history .entry:nth-child(4)').click({ force: true })
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('isPositive:false')
+    })
+  })
+
+  it('should toggle recording', () => {
+    cy.get('.toggle-recording')
+      .click()
+      .contains('Paused')
+    cy.get('.toggle-recording .svg-icon').should('not.have.class', 'enabled')
+    // should not record
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.increment').click({ force: true })
+    })
+    cy.get('.history .entry').should('have.length', 4)
+  })
+
+  it('should copy vuex state', () => {
+    cy.get('.export').click()
+    cy.get('.export .message')
+      .contains('(Copied to clipboard!)')
+      .should('not.be.visible', { timeout: 3000 })
+  })
+
+  it('should import vuex state', () => {
+    cy.get('.import').click()
+    cy.get('.import-state').should('be.visible')
+    cy.get('.import-state textarea').clear().type('{{}invalid: json}')
+    cy.get('.message.invalid-json').should('be.visible')
+    cy.get('.import-state textarea').clear().type('{{}"count":42,"date":"[native Date Fri Dec 22 2017 10:12:04 GMT+0100 (CET)]"}')
+    cy.get('.message.invalid-json').should('not.be.visible')
+    cy.get('.vuex-state-inspector').then(el => {
+      expect(el.text()).to.include('count:42')
+      expect(el.text()).to.include('date:' + new Date('Fri Dec 22 2017 10:12:04 GMT+0100 (CET)'))
+    })
+    cy.get('.import').click()
+    cy.get('.import-state').should('not.be.visible')
+  })
+})