|
|
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', 6) |
|
|
cy.get('[data-id="load-vuex-state"]').click() |
|
|
cy.get('.recording-vuex-state').should('not.be.visible') |
|
|
cy.get('.loading-vuex-state').should('not.be.visible') |
|
|
cy.get('.vuex-state-inspector') |
|
|
.should('contain', 'type:"DECREMENT"') |
|
|
.should('contain', 'count:1') |
|
|
cy.get('.history .entry').eq(5).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', 2) |
|
|
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[data-active="true"]').should('have.length', 2) |
|
|
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0) |
|
|
cy.get('.history .entry[data-active="true"].active').should('have.length', 0) |
|
|
|
|
|
cy.get('.left .search input').clear().type('/dec/i') |
|
|
cy.get('.history .entry[data-active="true"]').should('have.length', 1) |
|
|
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0) |
|
|
cy.get('.history .entry[data-active="true"].active').should('have.length', 0) |
|
|
|
|
|
cy.get('.left .search input').clear().type('/dec)/i') |
|
|
cy.get('.history .entry[data-active="true"]').should('have.length', 5) |
|
|
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0) |
|
|
cy.get('.history .entry[data-active="true"].active').should('have.length', 1) |
|
|
|
|
|
cy.get('.left .search input').clear() |
|
|
}) |
|
|
|
|
|
it('should inspect state', () => { |
|
|
cy.get('.history .entry .mutation-type').eq(2).click() |
|
|
cy.get('.history .entry').eq(2) |
|
|
.should('have.class', 'inspected') |
|
|
.should('not.have.class', 'active') |
|
|
cy.get('.recording-vuex-state').should('not.be.visible') |
|
|
cy.get('.loading-vuex-state').should('not.be.visible') |
|
|
cy.get('.vuex-state-inspector').then((el) => { |
|
|
expect(el.text()).to.include('type:"INCREMENT"') |
|
|
expect(el.text()).to.include('count:2') |
|
|
expect(el.text()).to.include('Error from getter') |
|
|
}) |
|
|
cy.get('.data-field .key').contains('lastCountPayload').click() |
|
|
cy.get('.vuex-state-inspector').then((el) => { |
|
|
expect(el.text()).to.include('a:1') |
|
|
expect(el.text()).to.include('b:Object') |
|
|
}) |
|
|
cy.get('#target').iframe().then(({ get }) => { |
|
|
get('#counter p').contains('1') |
|
|
}) |
|
|
}) |
|
|
|
|
|
it('should time-travel', () => { |
|
|
cy.get('.history .entry[data-index="4"] .entry-actions .action-time-travel').click({ force: true }) |
|
|
cy.get('.history .entry[data-index="4"]') |
|
|
.should('have.class', 'inspected') |
|
|
.should('have.class', 'active') |
|
|
cy.get('#target').iframe().then(({ get }) => { |
|
|
get('#counter p').contains('2') |
|
|
}) |
|
|
|
|
|
cy.get('.history .entry[data-index="3"] .mutation-type').click({ force: true }) |
|
|
cy.get('.history .entry[data-index="3"]') |
|
|
.should('have.class', 'inspected') |
|
|
.should('not.have.class', 'active') |
|
|
cy.get('.history .entry[data-index="4"]') |
|
|
.should('not.have.class', 'inspected') |
|
|
.should('have.class', 'active') |
|
|
cy.get('.recording-vuex-state').should('not.be.visible') |
|
|
cy.get('.loading-vuex-state').should('not.be.visible') |
|
|
cy.get('.recording-vuex-state').should('not.be.visible') |
|
|
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[data-index="3"] .entry-actions .action-time-travel').click({ force: true }) |
|
|
cy.get('.history .entry[data-index="3"]') |
|
|
.should('have.class', 'inspected') |
|
|
.should('have.class', 'active') |
|
|
cy.get('.history .entry[data-index="4"]') |
|
|
.should('not.have.class', 'inspected') |
|
|
.should('not.have.class', 'active') |
|
|
cy.get('#target').iframe().then(({ get }) => { |
|
|
get('#counter p').contains('1') |
|
|
}) |
|
|
|
|
|
|
|
|
cy.get('.history .entry[data-index="0"] .mutation-type').click({ force: true }) |
|
|
cy.get('.history .entry[data-index="0"]') |
|
|
.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[data-index="2"] .entry-actions .action-time-travel').click({ force: true }) |
|
|
cy.get('.history .entry[data-index="2"]') |
|
|
.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[data-index="5"] .mutation-type').click({ force: true }) |
|
|
cy.get('.history .entry[data-index="5"]').find('.action-revert').click({ force: true }) |
|
|
cy.get('.history .entry[data-active="true"]').should('have.length', 5) |
|
|
cy.get('.history .entry[data-index="4"]') |
|
|
.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[data-index="4"] .action-commit').click({ force: true }) |
|
|
cy.get('.history .entry[data-active="true"]').should('have.length', 1) |
|
|
cy.get('.history .entry[data-index="0"]') |
|
|
.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').within(() => { |
|
|
cy.get('.key').contains('count').parent().contains('2') |
|
|
cy.get('.key').contains('isPositive').parent().contains('true') |
|
|
}) |
|
|
cy.get('#target').iframe().then(({ get }) => { |
|
|
get('.decrement') |
|
|
.click({ force: true }) |
|
|
.click({ force: true }) |
|
|
.click({ force: true }) |
|
|
get('#counter p').contains('-1') |
|
|
}) |
|
|
cy.get('.history .entry[data-index="3"]').click({ force: true }) |
|
|
cy.get('.recording-vuex-state').should('not.be.visible') |
|
|
cy.get('.loading-vuex-state').should('not.be.visible') |
|
|
cy.get('.vuex-state-inspector').within(() => { |
|
|
cy.get('.key').contains('count').parent().contains('-1') |
|
|
cy.get('.key').contains('isPositive').parent().contains('false') |
|
|
}) |
|
|
}) |
|
|
|
|
|
it('should toggle recording', () => { |
|
|
cy.get('.toggle-recording') |
|
|
.click() |
|
|
.contains('Paused') |
|
|
cy.get('.toggle-recording .svg-icon').should('not.have.class', 'enabled') |
|
|
|
|
|
cy.get('#target').iframe().then(({ get }) => { |
|
|
get('.increment').click({ force: true }) |
|
|
}) |
|
|
cy.get('.history .entry[data-active="true"]').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: 5000 }) |
|
|
}) |
|
|
|
|
|
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)]","nested":{{}"foo":"meow"},"instant":{{}"hey":"hi"}}') |
|
|
cy.wait(500) |
|
|
cy.get('.message.invalid-json').should('not.be.visible') |
|
|
cy.wait(500) |
|
|
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') |
|
|
}) |
|
|
}) |
|
|
|
