mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 18:18:53 +08:00
393 lines
11 KiB
JavaScript
393 lines
11 KiB
JavaScript
import { expect } from 'chai'
|
|
import { mount } from '@vue/test-utils'
|
|
import RunResult from '@/views/MainView/Workspace/Tabs/Tab/RunResult'
|
|
import csv from '@/lib/csv'
|
|
import sinon from 'sinon'
|
|
import { nextTick } from 'vue'
|
|
|
|
const $store = { state: { isWorkspaceVisible: true } }
|
|
|
|
describe('RunResult.vue', () => {
|
|
afterEach(() => {
|
|
sinon.restore()
|
|
})
|
|
|
|
it('shows alert when ClipboardItem is not supported', async () => {
|
|
const ClipboardItem = window.ClipboardItem
|
|
delete window.ClipboardItem
|
|
sinon.spy(window, 'alert')
|
|
const wrapper = mount(RunResult, {
|
|
props: {
|
|
tab: { id: 1 },
|
|
result: {
|
|
columns: ['id', 'name'],
|
|
values: {
|
|
id: [1],
|
|
name: ['foo']
|
|
}
|
|
}
|
|
},
|
|
global: {
|
|
mocks: { $store },
|
|
stubs: { teleport: true, transition: false }
|
|
}
|
|
})
|
|
|
|
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
|
|
await copyBtn.trigger('click')
|
|
|
|
expect(
|
|
window.alert.calledOnceWith(
|
|
"Your browser doesn't support copying into the clipboard. " +
|
|
'If you use Firefox you can enable it ' +
|
|
'by setting dom.events.asyncClipboard.clipboardItem to true.'
|
|
)
|
|
).to.equal(true)
|
|
|
|
window.ClipboardItem = ClipboardItem
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('copy to clipboard more than 1 sec', async () => {
|
|
sinon.stub(window.navigator.clipboard, 'writeText').resolves()
|
|
const clock = sinon.useFakeTimers()
|
|
const wrapper = mount(RunResult, {
|
|
attachTo: document.body,
|
|
props: {
|
|
tab: { id: 1 },
|
|
result: {
|
|
columns: ['id', 'name'],
|
|
values: {
|
|
id: [1],
|
|
name: ['foo']
|
|
}
|
|
}
|
|
},
|
|
global: {
|
|
mocks: { $store },
|
|
stubs: { teleport: true, transition: false }
|
|
}
|
|
})
|
|
sinon.stub(csv, 'serialize').callsFake(() => {
|
|
clock.tick(5000)
|
|
})
|
|
|
|
// Click copy to clipboard
|
|
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
|
|
await copyBtn.trigger('click')
|
|
await nextTick()
|
|
|
|
// 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'
|
|
)
|
|
|
|
// ... with Building message...
|
|
expect(wrapper.find('.dialog-body').text()).to.equal('Building CSV...')
|
|
|
|
// Switch to microtasks (let serialize run)
|
|
await clock.tick(0)
|
|
await nextTick()
|
|
|
|
// The dialog is shown...
|
|
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
|
|
|
|
// ... with Ready message...
|
|
expect(wrapper.find('.dialog-body').text()).to.equal('CSV is ready')
|
|
|
|
// Click copy
|
|
await wrapper
|
|
.find('.dialog-buttons-container button.primary')
|
|
.trigger('click')
|
|
await window.navigator.clipboard.writeText.returnValues[0]
|
|
|
|
// The dialog is not shown...
|
|
await clock.tick(100)
|
|
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('copy to clipboard less than 1 sec', async () => {
|
|
sinon.stub(window.navigator.clipboard, 'writeText').resolves()
|
|
const clock = sinon.useFakeTimers()
|
|
const wrapper = mount(RunResult, {
|
|
attachTo: document.body,
|
|
props: {
|
|
tab: { id: 1 },
|
|
result: {
|
|
columns: ['id', 'name'],
|
|
values: {
|
|
id: [1],
|
|
name: ['foo']
|
|
}
|
|
}
|
|
},
|
|
global: {
|
|
mocks: { $store },
|
|
stubs: { teleport: true, transition: false }
|
|
}
|
|
})
|
|
sinon.spy(wrapper.vm, 'copyToClipboard')
|
|
sinon.stub(csv, 'serialize').callsFake(async () => {
|
|
await clock.tick(500)
|
|
})
|
|
|
|
// Click copy to clipboard
|
|
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
|
|
await copyBtn.trigger('click')
|
|
|
|
// Switch to microtasks (let serialize run)
|
|
await clock.tick(0)
|
|
await nextTick()
|
|
|
|
// The dialog is not shown...
|
|
await clock.tick(100)
|
|
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
|
// copyToClipboard is called
|
|
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('cancel long copy', async () => {
|
|
sinon.stub(window.navigator.clipboard, 'writeText').resolves()
|
|
const clock = sinon.useFakeTimers()
|
|
const wrapper = mount(RunResult, {
|
|
attachTo: document.body,
|
|
props: {
|
|
tab: { id: 1 },
|
|
result: {
|
|
columns: ['id', 'name'],
|
|
values: {
|
|
id: [1],
|
|
name: ['foo']
|
|
}
|
|
}
|
|
},
|
|
global: {
|
|
mocks: { $store },
|
|
stubs: { teleport: true, transition: false }
|
|
}
|
|
})
|
|
sinon.spy(wrapper.vm, 'copyToClipboard')
|
|
sinon.stub(csv, 'serialize').callsFake(async () => {
|
|
await clock.tick(5000)
|
|
})
|
|
|
|
// Click copy to clipboard
|
|
const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
|
|
await copyBtn.trigger('click')
|
|
|
|
// Switch to microtasks (let serialize run)
|
|
await clock.tick(0)
|
|
await nextTick()
|
|
|
|
// Click cancel
|
|
await wrapper
|
|
.find('.dialog-buttons-container button.secondary')
|
|
.trigger('click')
|
|
// The dialog is not shown...
|
|
await clock.tick(100)
|
|
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
|
// copyToClipboard is not called
|
|
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('shows value of selected cell - result set', async () => {
|
|
const wrapper = mount(RunResult, {
|
|
props: {
|
|
tab: { id: 1 },
|
|
result: {
|
|
columns: ['id', 'name'],
|
|
values: {
|
|
id: [1, 2],
|
|
name: ['foo', 'bar']
|
|
}
|
|
}
|
|
},
|
|
global: {
|
|
mocks: { $store },
|
|
stubs: { teleport: true, transition: false }
|
|
}
|
|
})
|
|
|
|
// Open cell value panel
|
|
const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
|
|
await viewValueBtn.vm.$emit('click')
|
|
|
|
/*
|
|
Result set:
|
|
|1 | foo
|
|
+--+-----
|
|
|2 | bar
|
|
*/
|
|
|
|
// Click on '1' cell
|
|
const rows = wrapper.findAll('table tbody tr')
|
|
await rows[0].findAll('td')[0].trigger('click')
|
|
|
|
expect(wrapper.find('.value-body').text()).to.equals('1')
|
|
|
|
// Go to 'foo' with right arrow key
|
|
await wrapper.find('table').trigger('keydown.right')
|
|
expect(wrapper.find('.value-body').text()).to.equals('foo')
|
|
|
|
// Go to 'bar' with down arrow key
|
|
await wrapper.find('table').trigger('keydown.down')
|
|
expect(wrapper.find('.value-body').text()).to.equals('bar')
|
|
|
|
// Go to '2' with left arrow key
|
|
await wrapper.find('table').trigger('keydown.left')
|
|
expect(wrapper.find('.value-body').text()).to.equals('2')
|
|
|
|
// Go to '1' with up arrow key
|
|
await wrapper.find('table').trigger('keydown.up')
|
|
expect(wrapper.find('.value-body').text()).to.equals('1')
|
|
|
|
// Click on 'bar' cell
|
|
await rows[1].findAll('td')[1].trigger('click')
|
|
expect(wrapper.find('.value-body').text()).to.equals('bar')
|
|
|
|
// Click on 'bar' cell again
|
|
await rows[1].findAll('td')[1].trigger('click')
|
|
expect(
|
|
wrapper.find('.value-viewer-container .table-preview').text()
|
|
).to.equals('No cell selected to view')
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('shows value of selected cell - record view', async () => {
|
|
const wrapper = mount(RunResult, {
|
|
attachTo: document.body,
|
|
props: {
|
|
tab: { id: 1 },
|
|
result: {
|
|
columns: ['id', 'name'],
|
|
values: {
|
|
id: [1, 2],
|
|
name: ['foo', 'bar']
|
|
}
|
|
}
|
|
},
|
|
global: {
|
|
mocks: { $store }
|
|
}
|
|
})
|
|
|
|
// Open cell value panel
|
|
const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
|
|
await viewValueBtn.vm.$emit('click')
|
|
|
|
// Go to record view
|
|
const vierRecordBtn = wrapper.findComponent({ ref: 'rowBtn' })
|
|
await vierRecordBtn.vm.$emit('click')
|
|
|
|
/*
|
|
Record 1:
|
|
|id | 1
|
|
+-----+-----
|
|
|name | foo
|
|
|
|
Record 2:
|
|
|id | 2
|
|
+-----+-----
|
|
|name | bar
|
|
|
|
*/
|
|
|
|
// Click '1' is selected by default
|
|
expect(wrapper.find('.value-body').text()).to.equals('1')
|
|
|
|
// Go to 'foo' with down arrow key
|
|
await wrapper.find('table').trigger('keydown.down')
|
|
expect(wrapper.find('.value-body').text()).to.equals('foo')
|
|
|
|
// Go to next record
|
|
await wrapper.find('.icon-btn.next').trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.find('.value-body').text()).to.equals('bar')
|
|
|
|
// Go to '2' with up arrow key
|
|
await wrapper.find('table').trigger('keydown.up')
|
|
expect(wrapper.find('.value-body').text()).to.equals('2')
|
|
|
|
// Go to prev record
|
|
await wrapper.find('.icon-btn.prev').trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.find('.value-body').text()).to.equals('1')
|
|
|
|
// Click on 'foo' cell
|
|
const rows = wrapper.findAll('table tbody tr')
|
|
await rows[1].find('td').trigger('click')
|
|
expect(wrapper.find('.value-body').text()).to.equals('foo')
|
|
|
|
// Click on 'foo' cell again
|
|
await rows[1].find('td').trigger('click')
|
|
expect(
|
|
wrapper.find('.value-viewer-container .table-preview').text()
|
|
).to.equals('No cell selected to view')
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('keeps selected cell when switch between record and regular view', async () => {
|
|
const wrapper = mount(RunResult, {
|
|
attachTo: document.body,
|
|
props: {
|
|
tab: { id: 1 },
|
|
result: {
|
|
columns: ['id', 'name'],
|
|
values: {
|
|
id: [...Array(30)].map((x, i) => i),
|
|
name: [...Array(30)].map((x, i) => `name-${i}`)
|
|
}
|
|
}
|
|
},
|
|
global: {
|
|
mocks: { $store }
|
|
}
|
|
})
|
|
|
|
// Open cell value panel
|
|
const viewValueBtn = wrapper.findComponent({ ref: 'viewCellValueBtn' })
|
|
await viewValueBtn.vm.$emit('click')
|
|
|
|
// Click on 'name-1' cell
|
|
const rows = wrapper.findAll('table tbody tr')
|
|
await rows[1].findAll('td')[1].trigger('click')
|
|
|
|
expect(wrapper.find('.value-body').text()).to.equals('name-1')
|
|
|
|
// Go to record view
|
|
const vierRecordBtn = wrapper.findComponent({ ref: 'rowBtn' })
|
|
await vierRecordBtn.vm.$emit('click')
|
|
|
|
// 'name-1' is selected
|
|
expect(wrapper.find('.value-body').text()).to.equals('name-1')
|
|
let selectedCell = wrapper.find(
|
|
'.sqliteviz-table tbody td[aria-selected="true"]'
|
|
)
|
|
expect(selectedCell.text()).to.equals('name-1')
|
|
|
|
// Go to last record
|
|
await wrapper.find('.icon-btn.last').trigger('click')
|
|
await nextTick()
|
|
expect(wrapper.find('.value-body').text()).to.equals('name-29')
|
|
|
|
// Go to '29' with up arrow key
|
|
await wrapper.find('table').trigger('keydown.up')
|
|
expect(wrapper.find('.value-body').text()).to.equals('29')
|
|
|
|
// Go to regular view
|
|
await vierRecordBtn.vm.$emit('click')
|
|
|
|
// '29' is selected
|
|
expect(wrapper.find('.value-body').text()).to.equals('29')
|
|
selectedCell = wrapper.find(
|
|
'.sqliteviz-table tbody td[aria-selected="true"]'
|
|
)
|
|
expect(selectedCell.text()).to.equals('29')
|
|
wrapper.unmount()
|
|
})
|
|
})
|