mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 10:08:52 +08:00
720 lines
18 KiB
JavaScript
720 lines
18 KiB
JavaScript
import { expect } from 'chai'
|
|
import sinon from 'sinon'
|
|
import { shallowMount, mount } from '@vue/test-utils'
|
|
import mutations from '@/store/mutations'
|
|
import { createStore } from 'vuex'
|
|
import Tabs from '@/views/MainView/Workspace/Tabs'
|
|
import eventBus from '@/lib/eventBus'
|
|
import { nextTick } from 'vue'
|
|
import cIo from '@/lib/utils/clipboardIo'
|
|
import csv from '@/lib/csv'
|
|
|
|
describe('Tabs.vue', () => {
|
|
let clock
|
|
|
|
beforeEach(() => {
|
|
clock = sinon.useFakeTimers()
|
|
sinon.spy(eventBus, '$emit')
|
|
})
|
|
|
|
afterEach(() => {
|
|
sinon.restore()
|
|
})
|
|
|
|
it('Renders start guide when there is no opened tabs', () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: []
|
|
}
|
|
const store = createStore({ state })
|
|
|
|
// mount the component
|
|
const wrapper = shallowMount(Tabs, {
|
|
global: {
|
|
stubs: ['router-link'],
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
// check start-guide visibility
|
|
expect(wrapper.find('#start-guide').isVisible()).to.equal(true)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('Renders tabs', () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
const store = createStore({ state })
|
|
|
|
// mount the component
|
|
const wrapper = shallowMount(Tabs, {
|
|
attachTo: document.body,
|
|
global: {
|
|
stubs: ['router-link'],
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
// check start-guide visibility
|
|
expect(wrapper.find('#start-guide').isVisible()).to.equal(false)
|
|
|
|
// check tabs
|
|
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(2)
|
|
|
|
const firstTab = wrapper.findAll('.tab')[0]
|
|
expect(firstTab.text()).to.include('foo')
|
|
expect(firstTab.find('.star').isVisible()).to.equal(false)
|
|
expect(firstTab.classes()).to.not.include('tab-selected')
|
|
|
|
const secondTab = wrapper.findAll('.tab')[1]
|
|
expect(secondTab.text()).to.include('Untitled')
|
|
expect(secondTab.find('.star').isVisible()).to.equal(true)
|
|
expect(secondTab.classes()).to.include('tab-selected')
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('Selects the tab on click', async () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
|
|
const store = createStore({ state, mutations })
|
|
|
|
// mount the component
|
|
const wrapper = shallowMount(Tabs, {
|
|
global: {
|
|
stubs: ['router-link'],
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
// click on the first tab
|
|
const firstTab = wrapper.findAll('.tab')[0]
|
|
await firstTab.trigger('click')
|
|
|
|
// check that first tab is the current now
|
|
expect(firstTab.classes()).to.include('tab-selected')
|
|
const secondTab = wrapper.findAll('.tab')[1]
|
|
expect(secondTab.classes()).to.not.include('tab-selected')
|
|
expect(state.currentTabId).to.equal(1)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it("Deletes the tab on close if it's saved", async () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
viewOptions: {},
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
viewOptions: {},
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
|
|
const store = createStore({ state, mutations })
|
|
|
|
// mount the component
|
|
const wrapper = mount(Tabs, {
|
|
global: {
|
|
stubs: ['router-link'],
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
// click on the close icon of the first tab
|
|
const firstTabCloseIcon = wrapper.findAll('.tab')[0].find('.close-icon')
|
|
await firstTabCloseIcon.trigger('click')
|
|
|
|
// check that the only one tab left and it's opened
|
|
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
|
|
|
|
const firstTab = wrapper.findAll('.tab')[0]
|
|
expect(firstTab.text()).to.include('Untitled')
|
|
expect(firstTab.find('.star').isVisible()).to.equal(true)
|
|
expect(firstTab.classes()).to.include('tab-selected')
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it("Doesn't delete tab on close if user cancel closing", async () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
viewOptions: {},
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
viewOptions: {},
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
|
|
const store = createStore({ state, mutations })
|
|
|
|
// mount the component
|
|
const wrapper = mount(Tabs, {
|
|
attachTo: document.body,
|
|
global: {
|
|
stubs: {
|
|
'router-link': true,
|
|
teleport: true,
|
|
transition: false
|
|
},
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
// click on the close icon of the second tab
|
|
const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
|
|
await secondTabCloseIcon.trigger('click')
|
|
|
|
// check that Close Tab dialog is visible
|
|
const modal = wrapper.find('.dialog.vfm')
|
|
expect(modal.exists()).to.equal(true)
|
|
expect(modal.find('.dialog-header').text()).to.contain('Close tab')
|
|
|
|
// find Cancel in the dialog
|
|
const cancelBtn = wrapper
|
|
.findAll('.dialog-buttons-container button')
|
|
.find(button => button.text() === "Don't close")
|
|
|
|
// click Cancel in the dialog
|
|
await cancelBtn.trigger('click')
|
|
|
|
// check that tab is still opened
|
|
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(2)
|
|
|
|
// check that the dialog is closed
|
|
await clock.tick(100)
|
|
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('Closes without saving', async () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
viewOptions: {},
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
viewOptions: {},
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
|
|
const store = createStore({ state, mutations })
|
|
|
|
// mount the component
|
|
const wrapper = mount(Tabs, {
|
|
attachTo: document.body,
|
|
global: {
|
|
stubs: {
|
|
'router-link': true,
|
|
teleport: true,
|
|
transition: false
|
|
},
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
// click on the close icon of the second tab
|
|
const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
|
|
await secondTabCloseIcon.trigger('click')
|
|
|
|
// find 'Close without saving' in the dialog
|
|
const closeBtn = wrapper
|
|
.findAll('.dialog-buttons-container button')
|
|
.find(button => button.text() === 'Close without saving')
|
|
|
|
// click 'Close without saving' in the dialog
|
|
await closeBtn.trigger('click')
|
|
|
|
// check that tab is closed
|
|
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
|
|
const firstTab = wrapper.findAll('.tab')[0]
|
|
expect(firstTab.text()).to.include('foo')
|
|
expect(firstTab.find('.star').isVisible()).to.equal(false)
|
|
expect(firstTab.classes()).to.include('tab-selected')
|
|
|
|
// check that 'saveInquiry' event was not emited
|
|
expect(eventBus.$emit.calledWith('saveInquiry')).to.equal(false)
|
|
|
|
// check that the dialog is closed
|
|
await clock.tick(100)
|
|
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('Closes with saving', async () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
viewOptions: {},
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
viewOptions: {},
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
|
|
const store = createStore({ state, mutations })
|
|
|
|
// mount the component
|
|
const wrapper = mount(Tabs, {
|
|
attachTo: document.body,
|
|
global: {
|
|
stubs: {
|
|
'router-link': true,
|
|
teleport: true,
|
|
transition: false
|
|
},
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
// click on the close icon of the second tab
|
|
const secondTabCloseIcon = wrapper.findAll('.tab')[1].find('.close-icon')
|
|
await secondTabCloseIcon.trigger('click')
|
|
|
|
// find 'Save and close' in the dialog
|
|
const closeBtn = wrapper
|
|
.findAll('.dialog-buttons-container button')
|
|
.find(button => button.text() === 'Save and close')
|
|
|
|
// click 'Save and close' in the dialog
|
|
await closeBtn.trigger('click')
|
|
|
|
// pretend like saving is completed - trigger 'inquirySaved' on eventBus
|
|
await eventBus.$emit('inquirySaved')
|
|
|
|
// check that tab is closed
|
|
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
|
|
const firstTab = wrapper.findAll('.tab')[0]
|
|
expect(firstTab.text()).to.include('foo')
|
|
expect(firstTab.find('.star').isVisible()).to.equal(false)
|
|
expect(firstTab.classes()).to.include('tab-selected')
|
|
|
|
// check that 'saveInquiry' event was emited
|
|
expect(eventBus.$emit.calledWith('saveInquiry')).to.equal(true)
|
|
|
|
// check that the dialog is closed
|
|
await clock.tick(100)
|
|
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('Prevents closing a tab of a browser if there is unsaved inquiry', () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
|
|
const store = createStore({ state, mutations })
|
|
|
|
// mount the component
|
|
const wrapper = shallowMount(Tabs, {
|
|
global: {
|
|
stubs: ['router-link'],
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
const event = new Event('beforeunload')
|
|
sinon.spy(event, 'preventDefault')
|
|
wrapper.vm.leavingSqliteviz(event)
|
|
|
|
expect(event.preventDefault.calledOnce).to.equal(true)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it("Doesn't prevent closing a tab of a browser if there is unsaved inquiry", () => {
|
|
// mock store state
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
isSaved: true
|
|
}
|
|
],
|
|
currentTabId: 1
|
|
}
|
|
|
|
const store = createStore({ state, mutations })
|
|
|
|
// mount the component
|
|
const wrapper = shallowMount(Tabs, {
|
|
global: {
|
|
stubs: ['router-link'],
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
const event = new Event('beforeunload')
|
|
sinon.spy(event, 'preventDefault')
|
|
wrapper.vm.leavingSqliteviz(event)
|
|
|
|
expect(event.preventDefault.calledOnce).to.equal(false)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('Copy image to clipboard dialog works in the context of the tab', async () => {
|
|
// mock store state - 2 inquiries open
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
viewOptions: undefined,
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'hidden',
|
|
dataView: 'bottom'
|
|
},
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
viewOptions: undefined,
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'hidden',
|
|
dataView: 'bottom'
|
|
},
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
const store = createStore({ state })
|
|
sinon.stub(cIo, 'copyImage')
|
|
|
|
// mount the component
|
|
const wrapper = mount(Tabs, {
|
|
attachTo: document.body,
|
|
global: {
|
|
stubs: { teleport: true, transition: true, RouterLink: true },
|
|
plugins: [store]
|
|
}
|
|
})
|
|
const firstTabDataView = wrapper
|
|
.findAllComponents({ name: 'Tab' })[0]
|
|
.findComponent({ name: 'DataView' })
|
|
|
|
const secondTabDataView = wrapper
|
|
.findAllComponents({ name: 'Tab' })[1]
|
|
.findComponent({ name: 'DataView' })
|
|
|
|
// Stub prepareCopy method so it takes long and copy dialog will be shown
|
|
sinon
|
|
.stub(firstTabDataView.vm.$refs.viewComponent, 'prepareCopy')
|
|
.callsFake(async () => {
|
|
await clock.tick(5000)
|
|
return 'prepareCopy result in tab 1'
|
|
})
|
|
|
|
sinon
|
|
.stub(secondTabDataView.vm.$refs.viewComponent, 'prepareCopy')
|
|
.callsFake(async () => {
|
|
await clock.tick(5000)
|
|
return 'prepareCopy result in tab 2'
|
|
})
|
|
|
|
// Click Copy to clipboard button in the second tab
|
|
const copyBtn = secondTabDataView.findComponent({
|
|
ref: 'copyToClipboardBtn'
|
|
})
|
|
await copyBtn.trigger('click')
|
|
|
|
// The dialog is shown...
|
|
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
|
|
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
|
'Copy to clipboard'
|
|
)
|
|
|
|
// Switch to microtasks (let prepareCopy run)
|
|
await clock.tick(0)
|
|
// Wait untill prepareCopy is finished
|
|
await secondTabDataView.vm.$refs.viewComponent.prepareCopy.returnValues[0]
|
|
|
|
await nextTick()
|
|
|
|
// Click copy button in the dialog
|
|
await wrapper
|
|
.find('.dialog-buttons-container button.primary')
|
|
.trigger('click')
|
|
|
|
// The dialog is not shown...
|
|
await clock.tick(100)
|
|
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
|
|
|
// copyImage is called with prepare copy result calculated in tab 2, not null
|
|
// i.e. the dialog works in the tab 2 context
|
|
expect(
|
|
cIo.copyImage.calledOnceWith('prepareCopy result in tab 2')
|
|
).to.equal(true)
|
|
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('Copy CSV to clipboard dialog works in the context of the tab', async () => {
|
|
// mock store state - 2 inquiries open
|
|
const state = {
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: 'foo',
|
|
query: 'select * from foo',
|
|
viewType: 'chart',
|
|
viewOptions: undefined,
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
result: {
|
|
columns: ['id', 'name'],
|
|
values: {
|
|
id: [1, 2, 3],
|
|
name: ['Gryffindor', 'Hufflepuff']
|
|
}
|
|
},
|
|
isSaved: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: null,
|
|
tempName: 'Untitled',
|
|
query: '',
|
|
viewType: 'chart',
|
|
viewOptions: undefined,
|
|
layout: {
|
|
sqlEditor: 'above',
|
|
table: 'bottom',
|
|
dataView: 'hidden'
|
|
},
|
|
result: {
|
|
columns: ['name', 'points'],
|
|
values: {
|
|
name: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
|
|
points: [100, 90, 95, 80]
|
|
}
|
|
},
|
|
isSaved: false
|
|
}
|
|
],
|
|
currentTabId: 2
|
|
}
|
|
const store = createStore({ state })
|
|
sinon.stub(cIo, 'copyText')
|
|
|
|
// mount the component
|
|
const wrapper = mount(Tabs, {
|
|
attachTo: document.body,
|
|
global: {
|
|
stubs: { teleport: true, transition: true, RouterLink: true },
|
|
plugins: [store]
|
|
}
|
|
})
|
|
|
|
const secondTabRunResult = wrapper
|
|
.findAllComponents({ name: 'Tab' })[1]
|
|
.findComponent({ name: 'RunResult' })
|
|
|
|
// Stub prepareCopy method so it takes long and copy dialog will be shown
|
|
sinon.stub(csv, 'serialize').callsFake(() => {
|
|
clock.tick(5000)
|
|
return 'csv serialize result'
|
|
})
|
|
|
|
// Click Copy to clipboard button in the second tab
|
|
const copyBtn = secondTabRunResult.findComponent({
|
|
ref: 'copyToClipboardBtn'
|
|
})
|
|
await copyBtn.trigger('click')
|
|
|
|
// The dialog is shown...
|
|
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
|
|
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
|
'Copy to clipboard'
|
|
)
|
|
|
|
// Switch to microtasks (let prepareCopy run)
|
|
await clock.tick(0)
|
|
await nextTick()
|
|
|
|
// Click copy button in the dialog
|
|
await wrapper
|
|
.find('.dialog-buttons-container button.primary')
|
|
.trigger('click')
|
|
|
|
// The dialog is not shown...
|
|
await clock.tick(100)
|
|
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
|
|
|
// copyText is called with 'csv serialize result' calculated in tab 2, not null
|
|
// i.e. the dialog works in the tab 2 context
|
|
expect(
|
|
cIo.copyText.calledOnceWith(
|
|
'csv serialize result',
|
|
'CSV copied to clipboard successfully'
|
|
)
|
|
).to.equal(true)
|
|
|
|
wrapper.unmount()
|
|
})
|
|
})
|