mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 18:18:53 +08:00
linter
This commit is contained in:
lana-k
124
tests/views/MainView/Workspace/Tabs/Tab/RunResult/Record.spec.js
Normal file
124
tests/views/MainView/Workspace/Tabs/Tab/RunResult/Record.spec.js
Normal file
@@ -0,0 +1,124 @@
|
||||
import { expect } from 'chai'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Record from '@/views/MainView/Workspace/Tabs/Tab/RunResult/Record'
|
||||
|
||||
describe('Record.vue', () => {
|
||||
it('shows record with selected cell', async () => {
|
||||
const wrapper = mount(Record, {
|
||||
props: {
|
||||
dataSet: {
|
||||
columns: ['id', 'name'],
|
||||
values: {
|
||||
id: [1, 2],
|
||||
name: ['foo', 'bar']
|
||||
}
|
||||
},
|
||||
rowIndex: 1,
|
||||
selectedColumnIndex: 1
|
||||
}
|
||||
})
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows).to.have.lengthOf(2)
|
||||
expect(rows[0].findAll('th')[0].text()).to.equals('id')
|
||||
expect(rows[0].findAll('td')[0].text()).to.equals('2')
|
||||
expect(rows[1].findAll('th')[0].text()).to.equals('name')
|
||||
expect(rows[1].findAll('td')[0].text()).to.equals('bar')
|
||||
|
||||
const selectedCell = wrapper.find(
|
||||
'.sqliteviz-table tbody td[aria-selected="true"]'
|
||||
)
|
||||
expect(selectedCell.text()).to.equals('bar')
|
||||
})
|
||||
|
||||
it('switches to the next or previous row', async () => {
|
||||
const wrapper = mount(Record, {
|
||||
props: {
|
||||
dataSet: {
|
||||
columns: ['id', 'name'],
|
||||
values: {
|
||||
id: [1, 2, 3],
|
||||
name: ['foo', 'bar', 'baz']
|
||||
}
|
||||
},
|
||||
rowIndex: 0,
|
||||
selectedColumnIndex: 0
|
||||
}
|
||||
})
|
||||
|
||||
let rows = wrapper.findAll('tbody tr')
|
||||
expect(rows).to.have.lengthOf(2)
|
||||
expect(rows[0].findAll('td')[0].text()).to.equals('1')
|
||||
expect(rows[1].findAll('td')[0].text()).to.equals('foo')
|
||||
let selectedCell = wrapper.find(
|
||||
'.sqliteviz-table tbody td[aria-selected="true"]'
|
||||
)
|
||||
expect(selectedCell.text()).to.equals('1')
|
||||
|
||||
await wrapper.find('.next').trigger('click')
|
||||
|
||||
rows = wrapper.findAll('tbody tr')
|
||||
expect(rows[0].findAll('td')[0].text()).to.equals('2')
|
||||
expect(rows[1].findAll('td')[0].text()).to.equals('bar')
|
||||
selectedCell = wrapper.find(
|
||||
'.sqliteviz-table tbody td[aria-selected="true"]'
|
||||
)
|
||||
expect(selectedCell.text()).to.equals('2')
|
||||
|
||||
await wrapper.find('.prev').trigger('click')
|
||||
|
||||
rows = wrapper.findAll('tbody tr')
|
||||
expect(rows[0].findAll('td')[0].text()).to.equals('1')
|
||||
expect(rows[1].findAll('td')[0].text()).to.equals('foo')
|
||||
selectedCell = wrapper.find(
|
||||
'.sqliteviz-table tbody td[aria-selected="true"]'
|
||||
)
|
||||
expect(selectedCell.text()).to.equals('1')
|
||||
|
||||
await wrapper.find('.last').trigger('click')
|
||||
|
||||
rows = wrapper.findAll('tbody tr')
|
||||
expect(rows[0].findAll('td')[0].text()).to.equals('3')
|
||||
expect(rows[1].findAll('td')[0].text()).to.equals('baz')
|
||||
selectedCell = wrapper.find(
|
||||
'.sqliteviz-table tbody td[aria-selected="true"]'
|
||||
)
|
||||
expect(selectedCell.text()).to.equals('3')
|
||||
|
||||
await wrapper.find('.first').trigger('click')
|
||||
|
||||
rows = wrapper.findAll('tbody tr')
|
||||
expect(rows[0].findAll('td')[0].text()).to.equals('1')
|
||||
expect(rows[1].findAll('td')[0].text()).to.equals('foo')
|
||||
selectedCell = wrapper.find(
|
||||
'.sqliteviz-table tbody td[aria-selected="true"]'
|
||||
)
|
||||
expect(selectedCell.text()).to.equals('1')
|
||||
})
|
||||
|
||||
it('removes selection when click on selected cell', async () => {
|
||||
const wrapper = mount(Record, {
|
||||
props: {
|
||||
dataSet: {
|
||||
columns: ['id', 'name'],
|
||||
values: {
|
||||
id: [1, 2],
|
||||
name: ['foo', 'bar']
|
||||
}
|
||||
},
|
||||
rowIndex: 1,
|
||||
selectedColumnIndex: 1
|
||||
}
|
||||
})
|
||||
|
||||
const selectedCell = wrapper.find(
|
||||
'.sqliteviz-table tbody td[aria-selected="true"]'
|
||||
)
|
||||
await selectedCell.trigger('click')
|
||||
|
||||
const selectedCellAfterClick = wrapper.find(
|
||||
'.sqliteviz-table tbody td[aria-selected="true"]'
|
||||
)
|
||||
expect(selectedCellAfterClick.exists()).to.equals(false)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,392 @@
|
||||
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').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').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').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').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').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()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,86 @@
|
||||
import { expect } from 'chai'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import ValueViewer from '@/views/MainView/Workspace/Tabs/Tab/RunResult/ValueViewer.vue'
|
||||
import sinon from 'sinon'
|
||||
|
||||
describe('ValueViewer.vue', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('shows value in text mode', () => {
|
||||
const wrapper = mount(ValueViewer, {
|
||||
props: {
|
||||
cellValue: 'foo'
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.find('.value-body').text()).to.equals('foo')
|
||||
})
|
||||
|
||||
it('shows error in json mode if the value is not json', async () => {
|
||||
const wrapper = mount(ValueViewer, {
|
||||
props: {
|
||||
cellValue: 'foo'
|
||||
}
|
||||
})
|
||||
await wrapper.find('button.json').trigger('click')
|
||||
expect(wrapper.find('.value-body').text()).to.equals("Can't parse JSON.")
|
||||
})
|
||||
|
||||
it('copy to clipboard', async () => {
|
||||
sinon.stub(window.navigator.clipboard, 'writeText').resolves()
|
||||
const wrapper = mount(ValueViewer, {
|
||||
props: {
|
||||
cellValue: 'foo'
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('button.copy').trigger('click')
|
||||
|
||||
expect(window.navigator.clipboard.writeText.calledOnceWith('foo')).to.equal(
|
||||
true
|
||||
)
|
||||
})
|
||||
|
||||
it('wraps lines', async () => {
|
||||
const wrapper = mount(ValueViewer, {
|
||||
attachTo: document.body,
|
||||
props: {
|
||||
cellValue: 'foo'
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.wrapperElement.parentElement.style.width = '50px'
|
||||
const valueBody = wrapper.find('.value-body').wrapperElement
|
||||
expect(valueBody.scrollWidth).to.equal(valueBody.clientWidth)
|
||||
|
||||
await wrapper.setProps({ cellValue: 'foo'.repeat(100) })
|
||||
expect(valueBody.scrollWidth).not.to.equal(valueBody.clientWidth)
|
||||
|
||||
await wrapper.find('button.line-wrap').trigger('click')
|
||||
expect(valueBody.scrollWidth).to.equal(valueBody.clientWidth)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('wraps lines in code mirror', async () => {
|
||||
const wrapper = mount(ValueViewer, {
|
||||
attachTo: document.body,
|
||||
props: {
|
||||
cellValue: '{"foo": "foofoofoofoofoofoofoofoofoofoo"}'
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('button.json').trigger('click')
|
||||
|
||||
wrapper.wrapperElement.parentElement.style.width = '50px'
|
||||
const codeMirrorScroll = wrapper.find('.CodeMirror-scroll').wrapperElement
|
||||
expect(codeMirrorScroll.scrollWidth).not.to.equal(
|
||||
codeMirrorScroll.clientWidth
|
||||
)
|
||||
|
||||
await wrapper.find('button.line-wrap').trigger('click')
|
||||
expect(codeMirrorScroll.scrollWidth).to.equal(codeMirrorScroll.clientWidth)
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user