mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-07 02:28:54 +08:00
Compare commits
4 Commits
218ab52ab3
...
4232f15c04
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4232f15c04 | ||
|
|
9d562d11b8 | ||
|
|
54cdbbc8b9 | ||
|
|
1601514cca |
5
.github/workflows/test.yml
vendored
5
.github/workflows/test.yml
vendored
@@ -11,7 +11,7 @@ on:
|
||||
jobs:
|
||||
test:
|
||||
name: Run tests
|
||||
runs-on: ubuntu-24.04
|
||||
runs-on: ubuntu-20.04
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js
|
||||
@@ -21,9 +21,8 @@ jobs:
|
||||
- name: Install browsers
|
||||
run: |
|
||||
export DEBIAN_FRONTEND=noninteractive
|
||||
sudo add-apt-repository -y ppa:mozillateam/ppa
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y chromium-browser firefox-esr
|
||||
sudo apt-get install -y chromium-browser firefox
|
||||
|
||||
- name: Update npm
|
||||
run: npm install -g npm@10
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
# docker build -t sqliteviz/test -f Dockerfile.test .
|
||||
#
|
||||
|
||||
FROM node:12.22-bullseye
|
||||
FROM node:12.22-buster
|
||||
|
||||
RUN set -ex; \
|
||||
apt update; \
|
||||
|
||||
@@ -10,7 +10,7 @@ from pathlib import Path
|
||||
from urllib import request
|
||||
|
||||
|
||||
amalgamation_url = 'https://sqlite.org/2025/sqlite-amalgamation-3500300.zip'
|
||||
amalgamation_url = 'https://sqlite.org/2023/sqlite-amalgamation-3410000.zip'
|
||||
|
||||
# Extension-functions
|
||||
# ===================
|
||||
@@ -22,15 +22,15 @@ contrib_functions_url = 'https://sqlite.org/contrib/download/extension-functions
|
||||
extension_urls = (
|
||||
# Miscellaneous extensions
|
||||
# ========================
|
||||
('https://sqlite.org/src/raw/e212edb2?at=series.c', 'sqlite3_series_init'),
|
||||
('https://sqlite.org/src/raw/5559daf1?at=closure.c', 'sqlite3_closure_init'),
|
||||
('https://sqlite.org/src/raw/8d79354f?at=series.c', 'sqlite3_series_init'),
|
||||
('https://sqlite.org/src/raw/dbfd8543?at=closure.c', 'sqlite3_closure_init'),
|
||||
('https://sqlite.org/src/raw/5bb2264c?at=uuid.c', 'sqlite3_uuid_init'),
|
||||
('https://sqlite.org/src/raw/388e7f23?at=regexp.c', 'sqlite3_regexp_init'),
|
||||
('https://sqlite.org/src/raw/72e05a21?at=percentile.c', 'sqlite3_percentile_init'),
|
||||
('https://sqlite.org/src/raw/228d47e9?at=decimal.c', 'sqlite3_decimal_init'),
|
||||
('https://sqlite.org/src/raw/5853b0e5?at=regexp.c', 'sqlite3_regexp_init'),
|
||||
('https://sqlite.org/src/raw/b9086e22?at=percentile.c', 'sqlite3_percentile_init'),
|
||||
('https://sqlite.org/src/raw/09f967dc?at=decimal.c', 'sqlite3_decimal_init'),
|
||||
# Third-party extension
|
||||
# =====================
|
||||
('https://github.com/jakethaw/pivot_vtab/raw/e7705f34/pivot_vtab.c', 'sqlite3_pivotvtab_init'),
|
||||
('https://github.com/jakethaw/pivot_vtab/raw/9323ef93/pivot_vtab.c', 'sqlite3_pivotvtab_init'),
|
||||
('https://github.com/nalgeon/sqlean/raw/95e8d21a/src/pearson.c', 'sqlite3_pearson_init'),
|
||||
# Third-party extension with own dependencies
|
||||
# ===========================================
|
||||
|
||||
2
lib/sql-js/dist/sql-wasm.js
vendored
2
lib/sql-js/dist/sql-wasm.js
vendored
File diff suppressed because one or more lines are too long
BIN
lib/sql-js/dist/sql-wasm.wasm
vendored
BIN
lib/sql-js/dist/sql-wasm.wasm
vendored
Binary file not shown.
6
package-lock.json
generated
6
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "sqliteviz",
|
||||
"version": "0.27.1",
|
||||
"lockfileVersion": 3,
|
||||
"version": "0.26.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "sqliteviz",
|
||||
"version": "0.27.1",
|
||||
"version": "0.26.0",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@sigma/export-image": "^3.0.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sqliteviz",
|
||||
"version": "0.27.1",
|
||||
"version": "0.26.0",
|
||||
"license": "Apache-2.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
<modals-container />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storedInquiries from '@/lib/storedInquiries'
|
||||
import { ModalsContainer } from 'vue-final-modal'
|
||||
|
||||
export default {
|
||||
components: { ModalsContainer },
|
||||
computed: {
|
||||
inquiries() {
|
||||
return this.$store.state.inquiries
|
||||
@@ -23,11 +26,6 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
|
||||
addEventListener('storage', event => {
|
||||
if (event.key === storedInquiries.myInquiriesKey) {
|
||||
this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<modal
|
||||
v-model="show"
|
||||
:modalId="name"
|
||||
class="dialog"
|
||||
:clickToClose="false"
|
||||
:contentTransition="{ name: 'loading-dialog' }"
|
||||
:overlayTransition="{ name: 'loading-dialog' }"
|
||||
@update:model-value="$emit('update:modelValue', $event)"
|
||||
>
|
||||
<div class="dialog-header">
|
||||
{{ title }}
|
||||
<close-icon :disabled="loading" @click="cancel" />
|
||||
<close-icon :disabled="loading" @click="$emit('cancel')" />
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div v-if="loading" class="loading-dialog-body">
|
||||
@@ -29,7 +28,7 @@
|
||||
class="secondary"
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
@click="cancel"
|
||||
@click="$emit('cancel')"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -53,33 +52,24 @@ export default {
|
||||
name: 'LoadingDialog',
|
||||
components: { LoadingIndicator, CloseIcon },
|
||||
props: {
|
||||
modelValue: Boolean,
|
||||
loadingMsg: String,
|
||||
successMsg: String,
|
||||
actionBtnName: String,
|
||||
name: String,
|
||||
title: String,
|
||||
loading: Boolean
|
||||
},
|
||||
emits: ['cancel', 'action', 'update:modelValue'],
|
||||
data() {
|
||||
return {
|
||||
show: this.modelValue
|
||||
}
|
||||
},
|
||||
emits: ['cancel', 'action'],
|
||||
watch: {
|
||||
modelValue() {
|
||||
this.show = this.modelValue
|
||||
},
|
||||
loading() {
|
||||
if (this.loading) {
|
||||
this.$emit('update:modelValue', true)
|
||||
this.$modal.show(this.name)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
this.$emit('update:modelValue', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,13 +4,11 @@ import events from '@/lib/utils/events'
|
||||
import migration from './_migrations'
|
||||
|
||||
const migrate = migration._migrate
|
||||
const myInquiriesKey = 'myInquiries'
|
||||
|
||||
export default {
|
||||
version: 2,
|
||||
myInquiriesKey,
|
||||
getStoredInquiries() {
|
||||
let myInquiries = JSON.parse(localStorage.getItem(myInquiriesKey))
|
||||
let myInquiries = JSON.parse(localStorage.getItem('myInquiries'))
|
||||
if (!myInquiries) {
|
||||
const oldInquiries = localStorage.getItem('myQueries')
|
||||
if (oldInquiries) {
|
||||
@@ -28,8 +26,7 @@ export default {
|
||||
const newInquiry = JSON.parse(JSON.stringify(baseInquiry))
|
||||
newInquiry.name = newInquiry.name + ' Copy'
|
||||
newInquiry.id = nanoid()
|
||||
newInquiry.createdAt = new Date().toJSON()
|
||||
newInquiry.updatedAt = new Date().toJSON()
|
||||
newInquiry.createdAt = new Date()
|
||||
delete newInquiry.isPredefined
|
||||
|
||||
return newInquiry
|
||||
@@ -41,7 +38,7 @@ export default {
|
||||
|
||||
updateStorage(inquiries) {
|
||||
localStorage.setItem(
|
||||
myInquiriesKey,
|
||||
'myInquiries',
|
||||
JSON.stringify({ version: this.version, inquiries })
|
||||
)
|
||||
},
|
||||
|
||||
@@ -28,7 +28,6 @@ export default class Tab {
|
||||
|
||||
this.isSaved = !!inquiry.id
|
||||
this.state = state
|
||||
this.updatedAt = inquiry.updatedAt
|
||||
}
|
||||
|
||||
async execute() {
|
||||
|
||||
@@ -7,7 +7,7 @@ import LoadView from '@/views/LoadView'
|
||||
import store from '@/store'
|
||||
import database from '@/lib/database'
|
||||
|
||||
export const routes = [
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Welcome',
|
||||
|
||||
@@ -17,33 +17,28 @@ export default {
|
||||
},
|
||||
async saveInquiry({ state }, { inquiryTab, newName }) {
|
||||
const value = {
|
||||
id: inquiryTab.isPredefined || newName ? nanoid() : inquiryTab.id,
|
||||
id: inquiryTab.isPredefined ? nanoid() : inquiryTab.id,
|
||||
query: inquiryTab.query,
|
||||
viewType: inquiryTab.dataView.mode,
|
||||
viewOptions: inquiryTab.dataView.getOptionsForSave(),
|
||||
name: newName || inquiryTab.name,
|
||||
updatedAt: new Date().toJSON()
|
||||
name: newName || inquiryTab.name
|
||||
}
|
||||
|
||||
// Get inquiries from local storage
|
||||
const myInquiries = state.inquiries
|
||||
let inquiryIndex
|
||||
|
||||
// Set createdAt
|
||||
if (newName) {
|
||||
value.createdAt = new Date().toJSON()
|
||||
value.createdAt = new Date()
|
||||
} else {
|
||||
inquiryIndex = myInquiries.findIndex(
|
||||
var inquiryIndex = myInquiries.findIndex(
|
||||
oldInquiry => oldInquiry.id === inquiryTab.id
|
||||
)
|
||||
|
||||
value.createdAt =
|
||||
inquiryIndex !== -1
|
||||
? myInquiries[inquiryIndex].createdAt
|
||||
: new Date().toJSON()
|
||||
value.createdAt = myInquiries[inquiryIndex].createdAt
|
||||
}
|
||||
|
||||
// Insert in inquiries list
|
||||
if (newName || inquiryIndex === -1) {
|
||||
if (newName) {
|
||||
myInquiries.push(value)
|
||||
} else {
|
||||
myInquiries.splice(inquiryIndex, 1, value)
|
||||
|
||||
@@ -7,8 +7,7 @@ export default {
|
||||
},
|
||||
|
||||
updateTab(state, { tab, newValues }) {
|
||||
const { name, id, query, viewType, viewOptions, isSaved, updatedAt } =
|
||||
newValues
|
||||
const { name, id, query, viewType, viewOptions, isSaved } = newValues
|
||||
const oldId = tab.id
|
||||
|
||||
if (id && state.currentTabId === oldId) {
|
||||
@@ -37,9 +36,6 @@ export default {
|
||||
// Saved inquiry is not predefined
|
||||
delete tab.isPredefined
|
||||
}
|
||||
if (updatedAt) {
|
||||
tab.updatedAt = updatedAt
|
||||
}
|
||||
},
|
||||
|
||||
deleteTab(state, tab) {
|
||||
|
||||
@@ -10,22 +10,14 @@
|
||||
</div>
|
||||
<div id="nav-buttons">
|
||||
<button
|
||||
v-show="currentInquiryTab && $route.path === '/workspace'"
|
||||
v-show="currentInquiry && $route.path === '/workspace'"
|
||||
id="save-btn"
|
||||
class="primary"
|
||||
:disabled="isSaved"
|
||||
@click="onSave(false)"
|
||||
@click="checkInquiryBeforeSave"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
v-show="currentInquiryTab && $route.path === '/workspace'"
|
||||
id="save-as-btn"
|
||||
class="primary"
|
||||
@click="onSaveAs"
|
||||
>
|
||||
Save as
|
||||
</button>
|
||||
<button id="create-btn" class="primary" @click="createNewInquiry">
|
||||
Create
|
||||
</button>
|
||||
@@ -53,34 +45,7 @@
|
||||
</div>
|
||||
<div class="dialog-buttons-container">
|
||||
<button class="secondary" @click="cancelSave">Cancel</button>
|
||||
<button class="primary" @click="validateSaveFormAndSaveInquiry">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
<!-- Inquiery saving conflict dialog -->
|
||||
<modal
|
||||
modalId="inquiry-conflict"
|
||||
class="dialog"
|
||||
contentStyle="width: 560px;"
|
||||
>
|
||||
<div class="dialog-header">
|
||||
Inquiry saving conflict
|
||||
<close-icon @click="cancelSave" />
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div id="save-note">
|
||||
<img src="~@/assets/images/info.svg" />
|
||||
This inquiry has been modified in the mean time. This can happen if an
|
||||
inquiry is saved in another window or browser tab. Do you want to
|
||||
overwrite that changes or save the current state as a new inquiry?
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-buttons-container">
|
||||
<button class="secondary" @click="cancelSave">Cancel</button>
|
||||
<button class="primary" @click="onSave(true)">Overwrite</button>
|
||||
<button class="primary" @click="onSaveAs">Save as new</button>
|
||||
<button class="primary" @click="saveInquiry">Save</button>
|
||||
</div>
|
||||
</modal>
|
||||
</nav>
|
||||
@@ -108,28 +73,25 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inquiries() {
|
||||
return this.$store.state.inquiries
|
||||
},
|
||||
currentInquiryTab() {
|
||||
currentInquiry() {
|
||||
return this.$store.state.currentTab
|
||||
},
|
||||
isSaved() {
|
||||
return this.currentInquiryTab && this.currentInquiryTab.isSaved
|
||||
return this.currentInquiry && this.currentInquiry.isSaved
|
||||
},
|
||||
isPredefined() {
|
||||
return this.currentInquiryTab && this.currentInquiryTab.isPredefined
|
||||
return this.currentInquiry && this.currentInquiry.isPredefined
|
||||
},
|
||||
runDisabled() {
|
||||
return (
|
||||
this.currentInquiryTab &&
|
||||
(!this.$store.state.db || !this.currentInquiryTab.query)
|
||||
this.currentInquiry &&
|
||||
(!this.$store.state.db || !this.currentInquiry.query)
|
||||
)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
eventBus.$on('createNewInquiry', this.createNewInquiry)
|
||||
eventBus.$on('saveInquiry', this.onSave)
|
||||
eventBus.$on('saveInquiry', this.checkInquiryBeforeSave)
|
||||
document.addEventListener('keydown', this._keyListener)
|
||||
},
|
||||
beforeUnmount() {
|
||||
@@ -147,84 +109,63 @@ export default {
|
||||
events.send('inquiry.create', null, { auto: false })
|
||||
},
|
||||
cancelSave() {
|
||||
this.errorMsg = null
|
||||
this.name = ''
|
||||
this.$modal.hide('save')
|
||||
this.$modal.hide('inquiry-conflict')
|
||||
eventBus.$off('inquirySaved')
|
||||
},
|
||||
onSave(skipConcurrentEditingCheck = false) {
|
||||
if (storedInquiries.isTabNeedName(this.currentInquiryTab)) {
|
||||
this.openSaveModal()
|
||||
return
|
||||
}
|
||||
|
||||
if (!skipConcurrentEditingCheck) {
|
||||
const inquiryInStore = this.inquiries.find(
|
||||
inquiry => inquiry.id === this.currentInquiryTab.id
|
||||
)
|
||||
|
||||
if (
|
||||
inquiryInStore &&
|
||||
inquiryInStore.updatedAt !== this.currentInquiryTab.updatedAt
|
||||
) {
|
||||
this.$modal.show('inquiry-conflict')
|
||||
return
|
||||
}
|
||||
}
|
||||
this.saveInquiry()
|
||||
},
|
||||
onSaveAs() {
|
||||
this.openSaveModal()
|
||||
},
|
||||
openSaveModal() {
|
||||
this.$modal.hide('inquiry-conflict')
|
||||
checkInquiryBeforeSave() {
|
||||
this.errorMsg = null
|
||||
this.name = ''
|
||||
|
||||
if (storedInquiries.isTabNeedName(this.currentInquiry)) {
|
||||
this.$modal.show('save')
|
||||
} else {
|
||||
this.saveInquiry()
|
||||
}
|
||||
},
|
||||
validateSaveFormAndSaveInquiry() {
|
||||
if (!this.name) {
|
||||
async saveInquiry() {
|
||||
const isNeedName = storedInquiries.isTabNeedName(this.currentInquiry)
|
||||
if (isNeedName && !this.name) {
|
||||
this.errorMsg = "Inquiry name can't be empty"
|
||||
return
|
||||
}
|
||||
this.saveInquiry()
|
||||
},
|
||||
async saveInquiry() {
|
||||
const eventName =
|
||||
this.currentInquiryTab.name && this.name
|
||||
? 'inquiry.saveAs'
|
||||
: 'inquiry.save'
|
||||
const dataSet = this.currentInquiry.result
|
||||
const tabView = this.currentInquiry.view
|
||||
|
||||
// Save inquiry
|
||||
const value = await this.$store.dispatch('saveInquiry', {
|
||||
inquiryTab: this.currentInquiryTab,
|
||||
inquiryTab: this.currentInquiry,
|
||||
newName: this.name
|
||||
})
|
||||
|
||||
// Update tab in store
|
||||
this.$store.commit('updateTab', {
|
||||
tab: this.currentInquiryTab,
|
||||
tab: this.currentInquiry,
|
||||
newValues: {
|
||||
name: value.name,
|
||||
id: value.id,
|
||||
query: value.query,
|
||||
viewType: value.viewType,
|
||||
viewOptions: value.viewOptions,
|
||||
isSaved: true,
|
||||
updatedAt: value.updatedAt
|
||||
isSaved: true
|
||||
}
|
||||
})
|
||||
|
||||
// Hide dialogs
|
||||
// Restore data:
|
||||
// e.g. if we save predefined inquiry the tab will be created again
|
||||
// (because of new id) and
|
||||
// it will be without sql result and has default view - table.
|
||||
// That's why we need to restore data and view
|
||||
this.$nextTick(() => {
|
||||
this.currentInquiry.result = dataSet
|
||||
this.currentInquiry.view = tabView
|
||||
})
|
||||
|
||||
// Hide dialog
|
||||
this.$modal.hide('save')
|
||||
this.$modal.hide('inquiry-conflict')
|
||||
this.errorMsg = null
|
||||
this.name = ''
|
||||
|
||||
// Signal about saving
|
||||
eventBus.$emit('inquirySaved')
|
||||
events.send(eventName)
|
||||
events.send('inquiry.save')
|
||||
},
|
||||
_keyListener(e) {
|
||||
if (this.$route.path === '/workspace') {
|
||||
@@ -232,25 +173,19 @@ export default {
|
||||
if ((e.key === 'r' || e.key === 'Enter') && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault()
|
||||
if (!this.runDisabled) {
|
||||
this.currentInquiryTab.execute()
|
||||
this.currentInquiry.execute()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Save inquiry Ctrl+S
|
||||
if (e.key === 's' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault()
|
||||
if (!this.isSaved) {
|
||||
this.onSave()
|
||||
this.checkInquiryBeforeSave()
|
||||
}
|
||||
return
|
||||
}
|
||||
// Save inquiry as Ctrl+Shift+S
|
||||
if (e.key === 'S' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
|
||||
e.preventDefault()
|
||||
this.onSaveAs()
|
||||
return
|
||||
}
|
||||
}
|
||||
// New (blank) inquiry Ctrl+B
|
||||
if (e.key === 'b' && (e.ctrlKey || e.metaKey)) {
|
||||
|
||||
@@ -167,8 +167,11 @@ export default {
|
||||
'text/html'
|
||||
)
|
||||
},
|
||||
prepareCopy(type = 'png') {
|
||||
return chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
|
||||
async prepareCopy(type = 'png') {
|
||||
return await chartHelper.getImageDataUrl(
|
||||
this.$refs.plotlyEditor.$el,
|
||||
type
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,10 +82,10 @@
|
||||
</side-tool-bar>
|
||||
|
||||
<loading-dialog
|
||||
v-model="showLoadingDialog"
|
||||
loadingMsg="Rendering the visualisation..."
|
||||
successMsg="Image is ready"
|
||||
actionBtnName="Copy"
|
||||
name="prepareCopy"
|
||||
title="Copy to clipboard"
|
||||
:loading="preparingCopy"
|
||||
@action="copyToClipboard"
|
||||
@@ -95,9 +95,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './Chart/index.vue'
|
||||
import Pivot from './Pivot/index.vue'
|
||||
import Graph from './Graph/index.vue'
|
||||
import Chart from './Chart'
|
||||
import Pivot from './Pivot'
|
||||
import Graph from './Graph'
|
||||
import SideToolBar from '../SideToolBar'
|
||||
import IconButton from '@/components/IconButton'
|
||||
import ChartIcon from '@/components/svg/chart'
|
||||
@@ -108,7 +108,7 @@ import ExportToSvgIcon from '@/components/svg/exportToSvg'
|
||||
import PngIcon from '@/components/svg/png'
|
||||
import ClipboardIcon from '@/components/svg/clipboard'
|
||||
import cIo from '@/lib/utils/clipboardIo'
|
||||
import loadingDialog from '@/components/LoadingDialog.vue'
|
||||
import loadingDialog from '@/components/LoadingDialog'
|
||||
import time from '@/lib/utils/time'
|
||||
import events from '@/lib/utils/events'
|
||||
|
||||
@@ -149,8 +149,7 @@ export default {
|
||||
chart: this.initMode === 'chart' ? this.initOptions : null,
|
||||
pivot: this.initMode === 'pivot' ? this.initOptions : null,
|
||||
graph: this.initMode === 'graph' ? this.initOptions : null
|
||||
},
|
||||
showLoadingDialog: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -192,13 +191,14 @@ export default {
|
||||
async prepareCopy() {
|
||||
if ('ClipboardItem' in window) {
|
||||
this.preparingCopy = true
|
||||
this.showLoadingDialog = true
|
||||
this.$modal.show('prepareCopy')
|
||||
const t0 = performance.now()
|
||||
|
||||
await time.sleep(0)
|
||||
this.dataToCopy = await this.$refs.viewComponent.prepareCopy()
|
||||
const t1 = performance.now()
|
||||
if (t1 - t0 < 950) {
|
||||
this.$modal.hide('prepareCopy')
|
||||
this.copyToClipboard()
|
||||
} else {
|
||||
this.preparingCopy = false
|
||||
@@ -211,13 +211,14 @@ export default {
|
||||
)
|
||||
}
|
||||
},
|
||||
copyToClipboard() {
|
||||
async copyToClipboard() {
|
||||
cIo.copyImage(this.dataToCopy)
|
||||
this.showLoadingDialog = false
|
||||
this.$modal.hide('prepareCopy')
|
||||
this.exportSignal('clipboard')
|
||||
},
|
||||
cancelCopy() {
|
||||
this.dataToCopy = null
|
||||
this.$modal.hide('prepareCopy')
|
||||
},
|
||||
|
||||
saveAsSvg() {
|
||||
|
||||
@@ -80,10 +80,10 @@
|
||||
</side-tool-bar>
|
||||
|
||||
<loading-dialog
|
||||
v-model="showLoadingDialog"
|
||||
loadingMsg="Building CSV..."
|
||||
successMsg="CSV is ready"
|
||||
actionBtnName="Copy"
|
||||
name="prepareCSVCopy"
|
||||
title="Copy to clipboard"
|
||||
:loading="preparingCopy"
|
||||
@action="copyToClipboard"
|
||||
@@ -190,8 +190,7 @@ export default {
|
||||
viewRecord: false,
|
||||
defaultPage: 1,
|
||||
defaultSelectedCell: null,
|
||||
enableTeleport: this.$store.state.isWorkspaceVisible,
|
||||
showLoadingDialog: false
|
||||
enableTeleport: this.$store.state.isWorkspaceVisible
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -265,13 +264,14 @@ export default {
|
||||
|
||||
if ('ClipboardItem' in window) {
|
||||
this.preparingCopy = true
|
||||
this.showLoadingDialog = true
|
||||
this.$modal.show('prepareCSVCopy')
|
||||
const t0 = performance.now()
|
||||
|
||||
await time.sleep(0)
|
||||
this.dataToCopy = csv.serialize(this.result)
|
||||
const t1 = performance.now()
|
||||
if (t1 - t0 < 950) {
|
||||
this.$modal.hide('prepareCSVCopy')
|
||||
this.copyToClipboard()
|
||||
} else {
|
||||
this.preparingCopy = false
|
||||
@@ -287,11 +287,12 @@ export default {
|
||||
|
||||
copyToClipboard() {
|
||||
cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
|
||||
this.showLoadingDialog = false
|
||||
this.$modal.hide('prepareCSVCopy')
|
||||
},
|
||||
|
||||
cancelCopy() {
|
||||
this.dataToCopy = null
|
||||
this.$modal.hide('prepareCSVCopy')
|
||||
},
|
||||
|
||||
toggleViewValuePanel() {
|
||||
|
||||
@@ -1,22 +1,13 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import { shallowMount, mount } from '@vue/test-utils'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import { createStore } from 'vuex'
|
||||
import App from '@/App.vue'
|
||||
import App from '@/App'
|
||||
import storedInquiries from '@/lib/storedInquiries'
|
||||
import actions from '@/store/actions'
|
||||
import mutations from '@/store/mutations'
|
||||
import { nextTick } from 'vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { routes } from '@/router'
|
||||
|
||||
describe('App.vue', () => {
|
||||
let clock
|
||||
|
||||
beforeEach(() => {
|
||||
clock = sinon.useFakeTimers()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
@@ -68,167 +59,4 @@ describe('App.vue', () => {
|
||||
{ id: 3, name: 'bar' }
|
||||
])
|
||||
})
|
||||
|
||||
it('Updates store when inquirires change in local storage', async () => {
|
||||
sinon.stub(storedInquiries, 'getStoredInquiries').returns([
|
||||
{ id: 1, name: 'foo' },
|
||||
{ id: 2, name: 'baz' },
|
||||
{ id: 3, name: 'bar' }
|
||||
])
|
||||
|
||||
const state = {
|
||||
predefinedInquiries: [],
|
||||
inquiries: []
|
||||
}
|
||||
const store = createStore({ state, mutations })
|
||||
shallowMount(App, {
|
||||
global: { stubs: ['router-view'], plugins: [store] }
|
||||
})
|
||||
|
||||
expect(state.inquiries).to.eql([
|
||||
{ id: 1, name: 'foo' },
|
||||
{ id: 2, name: 'baz' },
|
||||
{ id: 3, name: 'bar' }
|
||||
])
|
||||
|
||||
storedInquiries.getStoredInquiries.returns([
|
||||
{ id: 1, name: 'foo' },
|
||||
{ id: 3, name: 'bar' }
|
||||
])
|
||||
window.dispatchEvent(new StorageEvent('storage', { key: 'myInquiries' }))
|
||||
expect(state.inquiries).to.eql([
|
||||
{ id: 1, name: 'foo' },
|
||||
{ id: 3, name: 'bar' }
|
||||
])
|
||||
})
|
||||
|
||||
it('Closes with saving and does not change the next tab', async () => {
|
||||
const inquiries = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: {},
|
||||
createdAt: '2020-11-07T20:57:04.492Z'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: 'SELECT * FROM bar',
|
||||
viewType: 'chart',
|
||||
viewOptions: {},
|
||||
createdAt: '2020-11-07T20:57:04.492Z'
|
||||
}
|
||||
]
|
||||
sinon.stub(storedInquiries, 'getStoredInquiries').returns(inquiries)
|
||||
const tab1 = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: {},
|
||||
layout: {
|
||||
sqlEditor: 'above',
|
||||
table: 'bottom',
|
||||
dataView: 'hidden'
|
||||
},
|
||||
result: {
|
||||
columns: ['name', 'points'],
|
||||
values: {
|
||||
name: ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'],
|
||||
points: [100, 90, 95, 80]
|
||||
}
|
||||
},
|
||||
isSaved: false
|
||||
}
|
||||
const tab2 = {
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
query: 'SELECT * FROM bar',
|
||||
viewType: 'chart',
|
||||
viewOptions: {},
|
||||
layout: {
|
||||
sqlEditor: 'above',
|
||||
table: 'hidden',
|
||||
dataView: 'bottom'
|
||||
},
|
||||
result: {
|
||||
columns: ['id'],
|
||||
values: {
|
||||
id: [1, 2, 3]
|
||||
}
|
||||
},
|
||||
isSaved: true
|
||||
}
|
||||
// mock store state
|
||||
const state = {
|
||||
tabs: [tab1, tab2],
|
||||
currentTabId: 1,
|
||||
currentTab: tab1,
|
||||
db: {},
|
||||
inquiries
|
||||
}
|
||||
|
||||
const store = createStore({ state, mutations, actions })
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: routes
|
||||
})
|
||||
router.push('/workspace')
|
||||
|
||||
// After this line, router is ready
|
||||
await router.isReady()
|
||||
|
||||
const wrapper = mount(App, {
|
||||
attachTo: document.body,
|
||||
global: {
|
||||
stubs: {
|
||||
'router-link': true,
|
||||
teleport: true,
|
||||
transition: false,
|
||||
schema: true,
|
||||
AppDiagnosticInfo: true,
|
||||
DataView: {
|
||||
template: '<div></div>',
|
||||
methods: { getOptionsForSave: sinon.stub() }
|
||||
}
|
||||
},
|
||||
plugins: [store, router]
|
||||
}
|
||||
})
|
||||
// click on the close icon of the first tab
|
||||
const firstTabCloseIcon = wrapper.findAll('.tab')[0].find('.close-icon')
|
||||
await firstTabCloseIcon.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')
|
||||
|
||||
await nextTick()
|
||||
await nextTick()
|
||||
|
||||
// check that tab is closed
|
||||
expect(wrapper.findAllComponents({ name: 'Tab' })).to.have.lengthOf(1)
|
||||
// check that the open tab didn't change
|
||||
const firstTab = wrapper.findComponent({ name: 'Tab' })
|
||||
expect(firstTab.props('tab').name).to.equal('bar')
|
||||
expect(firstTab.props('tab').result).to.eql({
|
||||
columns: ['id'],
|
||||
values: {
|
||||
id: [1, 2, 3]
|
||||
}
|
||||
})
|
||||
expect(firstTab.props('tab')).to.eql(tab2)
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
await nextTick()
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -413,7 +413,7 @@ describe('SQLite extensions', function () {
|
||||
WHERE ip.id <= p.id
|
||||
) AS path
|
||||
FROM tmp, json_each(filename_array) AS p
|
||||
WHERE p.key > 0 -- because the filenames start with the separator
|
||||
WHERE p.id > 1 -- because the filenames start with the separator
|
||||
`)
|
||||
expect(actual.values).to.eql({
|
||||
path: [
|
||||
|
||||
@@ -71,7 +71,7 @@ describe('storedInquiries.js', () => {
|
||||
query: 'SELECT * from foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
createdAt: new Date(2021, 0, 1).toJSON(),
|
||||
createdAt: new Date(2021, 0, 1),
|
||||
isPredefined: true
|
||||
}
|
||||
|
||||
@@ -83,8 +83,7 @@ describe('storedInquiries.js', () => {
|
||||
expect(copy).to.have.property('query').which.equal(base.query)
|
||||
expect(copy).to.have.property('viewType').which.equal(base.viewType)
|
||||
expect(copy).to.have.property('viewOptions').which.eql(base.viewOptions)
|
||||
expect(copy).to.have.property('createdAt')
|
||||
expect(new Date(copy.createdAt)).within(now, nowPlusMinute)
|
||||
expect(copy).to.have.property('createdAt').which.within(now, nowPlusMinute)
|
||||
expect(copy).to.not.have.property('isPredefined')
|
||||
})
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@ describe('tab.js', () => {
|
||||
query: undefined,
|
||||
viewOptions: undefined,
|
||||
isPredefined: undefined,
|
||||
updatedAt: undefined,
|
||||
viewType: 'chart',
|
||||
result: null,
|
||||
isGettingResults: false,
|
||||
@@ -43,8 +42,7 @@ describe('tab.js', () => {
|
||||
viewType: 'pivot',
|
||||
viewOptions: 'this is view options object',
|
||||
name: 'Foo inquiry',
|
||||
createdAt: '2022-12-05T18:30:30',
|
||||
updatedAt: '2022-12-06T18:30:30'
|
||||
createdAt: '2022-12-05T18:30:30'
|
||||
}
|
||||
|
||||
const newTab = new Tab(state, inquiry)
|
||||
@@ -55,7 +53,6 @@ describe('tab.js', () => {
|
||||
query: 'SELECT * from foo',
|
||||
viewOptions: 'this is view options object',
|
||||
isPredefined: undefined,
|
||||
updatedAt: '2022-12-06T18:30:30',
|
||||
viewType: 'pivot',
|
||||
result: null,
|
||||
isGettingResults: false,
|
||||
|
||||
@@ -19,8 +19,7 @@ describe('actions', () => {
|
||||
tempName: 'Untitled',
|
||||
viewType: 'chart',
|
||||
viewOptions: undefined,
|
||||
isSaved: false,
|
||||
updatedAt: undefined
|
||||
isSaved: false
|
||||
})
|
||||
expect(state.untitledLastIndex).to.equal(1)
|
||||
|
||||
@@ -31,8 +30,7 @@ describe('actions', () => {
|
||||
tempName: 'Untitled 1',
|
||||
viewType: 'chart',
|
||||
viewOptions: undefined,
|
||||
isSaved: false,
|
||||
updatedAt: undefined
|
||||
isSaved: false
|
||||
})
|
||||
expect(state.untitledLastIndex).to.equal(2)
|
||||
})
|
||||
@@ -42,16 +40,16 @@ describe('actions', () => {
|
||||
tabs: [],
|
||||
untitledLastIndex: 0
|
||||
}
|
||||
const inquiry = {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: 'test',
|
||||
query: 'SELECT * from foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: 'an object with view options',
|
||||
updatedAt: '2025-05-16T20:15:00Z'
|
||||
isSaved: true
|
||||
}
|
||||
await addTab({ state }, inquiry)
|
||||
expect(state.tabs[0]).to.include(inquiry)
|
||||
await addTab({ state }, tab)
|
||||
expect(state.tabs[0]).to.include(tab)
|
||||
expect(state.untitledLastIndex).to.equal(0)
|
||||
})
|
||||
|
||||
@@ -168,26 +166,21 @@ describe('actions', () => {
|
||||
newName: 'foo'
|
||||
}
|
||||
)
|
||||
expect(value.id).not.to.equal(tab.id)
|
||||
expect(value.id).to.equal(tab.id)
|
||||
expect(value.name).to.equal('foo')
|
||||
expect(value.query).to.equal(tab.query)
|
||||
expect(value.viewOptions).to.eql(['chart'])
|
||||
expect(value).to.have.property('createdAt')
|
||||
expect(new Date(value.createdAt)).within(now, nowPlusMinute)
|
||||
expect(new Date(value.updatedAt)).within(now, nowPlusMinute)
|
||||
expect(value).to.have.property('createdAt').which.within(now, nowPlusMinute)
|
||||
expect(state.inquiries).to.eql([value])
|
||||
})
|
||||
|
||||
it('saveInquiry updates existing inquiry in the storage', async () => {
|
||||
const now = new Date()
|
||||
const nowPlusMinute = new Date(now.getTime() + 60 * 1000)
|
||||
it('save updates existing inquiry in the storage', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
name: 'foo',
|
||||
updatedAt: '2025-05-16T20:15:00Z',
|
||||
name: null,
|
||||
dataView: {
|
||||
getOptionsForSave() {
|
||||
return ['chart']
|
||||
@@ -196,34 +189,34 @@ describe('actions', () => {
|
||||
}
|
||||
|
||||
const state = {
|
||||
inquiries: [
|
||||
{
|
||||
id: 1,
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
name: 'foo',
|
||||
createdAt: '2025-05-15T16:30:00Z',
|
||||
updatedAt: '2025-05-16T20:15:00Z'
|
||||
}
|
||||
],
|
||||
inquiries: [],
|
||||
tabs: [tab]
|
||||
}
|
||||
|
||||
tab.query = 'select * from bar'
|
||||
await saveInquiry({ state }, { inquiryTab: tab, newName: '' })
|
||||
const first = await saveInquiry(
|
||||
{ state },
|
||||
{
|
||||
inquiryTab: tab,
|
||||
newName: 'foo'
|
||||
}
|
||||
)
|
||||
|
||||
tab.name = 'foo'
|
||||
tab.query = 'select * from foo'
|
||||
await saveInquiry({ state }, { inquiryTab: tab })
|
||||
const inquiries = state.inquiries
|
||||
const updatedTab = inquiries[0]
|
||||
const second = inquiries[0]
|
||||
expect(inquiries).has.lengthOf(1)
|
||||
expect(updatedTab.id).to.equal(updatedTab.id)
|
||||
expect(updatedTab.name).to.equal(updatedTab.name)
|
||||
expect(updatedTab.query).to.equal(tab.query)
|
||||
expect(updatedTab.viewOptions).to.eql(['chart'])
|
||||
expect(updatedTab.createdAt).to.equal('2025-05-15T16:30:00Z')
|
||||
expect(new Date(updatedTab.updatedAt)).to.be.within(now, nowPlusMinute)
|
||||
expect(second.id).to.equal(first.id)
|
||||
expect(second.name).to.equal(first.name)
|
||||
expect(second.query).to.equal(tab.query)
|
||||
expect(second.viewOptions).to.eql(['chart'])
|
||||
expect(new Date(second.createdAt).getTime()).to.equal(
|
||||
first.createdAt.getTime()
|
||||
)
|
||||
})
|
||||
|
||||
it("saveInquiry adds a new inquiry with new id if it's based on predefined inquiry", async () => {
|
||||
it("save adds a new inquiry with new id if it's based on predefined inquiry", async () => {
|
||||
const now = new Date()
|
||||
const nowPlusMinute = new Date(now.getTime() + 60 * 1000)
|
||||
const tab = {
|
||||
@@ -259,95 +252,6 @@ describe('actions', () => {
|
||||
expect(inquiries[0].name).to.equal('foo')
|
||||
expect(inquiries[0].query).to.equal(tab.query)
|
||||
expect(inquiries[0].viewOptions).to.eql(['chart'])
|
||||
expect(new Date(inquiries[0].updatedAt)).to.be.within(now, nowPlusMinute)
|
||||
expect(new Date(inquiries[0].createdAt)).to.be.within(now, nowPlusMinute)
|
||||
})
|
||||
|
||||
it('saveInquiry adds new inquiry if newName is provided', async () => {
|
||||
const now = new Date()
|
||||
const nowPlusMinute = new Date(now.getTime() + 60 * 1000)
|
||||
|
||||
const tab = {
|
||||
id: 1,
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
name: 'foo',
|
||||
updatedAt: '2025-05-16T20:15:00Z',
|
||||
dataView: {
|
||||
getOptionsForSave() {
|
||||
return ['chart']
|
||||
}
|
||||
}
|
||||
}
|
||||
const inquiry = {
|
||||
id: 1,
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
name: 'foo',
|
||||
createdAt: '2025-05-15T16:30:00Z',
|
||||
updatedAt: '2025-05-16T20:15:00Z'
|
||||
}
|
||||
const state = {
|
||||
inquiries: [inquiry],
|
||||
tabs: [tab]
|
||||
}
|
||||
|
||||
const value = await saveInquiry(
|
||||
{ state },
|
||||
{
|
||||
inquiryTab: tab,
|
||||
newName: 'foo_new'
|
||||
}
|
||||
)
|
||||
expect(value.id).not.to.equal(tab.id)
|
||||
expect(value.name).to.equal('foo_new')
|
||||
expect(value.query).to.equal(tab.query)
|
||||
expect(value.viewOptions).to.eql(['chart'])
|
||||
expect(value).to.have.property('createdAt')
|
||||
expect(new Date(value.createdAt)).within(now, nowPlusMinute)
|
||||
expect(new Date(value.updatedAt)).within(now, nowPlusMinute)
|
||||
expect(state.inquiries).to.eql([inquiry, value])
|
||||
})
|
||||
|
||||
it('saveInquiry adds new inquiry if the inquiry is not in the storeage anymore', async () => {
|
||||
const now = new Date()
|
||||
const nowPlusMinute = new Date(now.getTime() + 60 * 1000)
|
||||
|
||||
const tab = {
|
||||
id: 1,
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
name: 'foo',
|
||||
updatedAt: '2025-05-16T20:15:00Z',
|
||||
dataView: {
|
||||
getOptionsForSave() {
|
||||
return ['chart']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const state = {
|
||||
inquiries: [],
|
||||
tabs: [tab]
|
||||
}
|
||||
|
||||
const value = await saveInquiry(
|
||||
{ state },
|
||||
{
|
||||
inquiryTab: tab,
|
||||
newName: ''
|
||||
}
|
||||
)
|
||||
expect(value.id).to.equal(tab.id)
|
||||
expect(value.name).to.equal('foo')
|
||||
expect(value.query).to.equal(tab.query)
|
||||
expect(value.viewOptions).to.eql(['chart'])
|
||||
expect(value).to.have.property('createdAt')
|
||||
expect(new Date(value.createdAt)).within(now, nowPlusMinute)
|
||||
expect(new Date(value.updatedAt)).within(now, nowPlusMinute)
|
||||
expect(state.inquiries).to.eql([value])
|
||||
})
|
||||
})
|
||||
|
||||
@@ -34,8 +34,7 @@ describe('mutations', () => {
|
||||
viewType: 'chart',
|
||||
viewOptions: { here_are: 'chart settings' },
|
||||
isSaved: false,
|
||||
isPredefined: false,
|
||||
updatedAt: '2025-05-15T15:30:00Z'
|
||||
isPredefined: false
|
||||
}
|
||||
|
||||
const newValues = {
|
||||
@@ -44,7 +43,6 @@ describe('mutations', () => {
|
||||
query: 'SELECT * from bar',
|
||||
viewType: 'pivot',
|
||||
viewOptions: { here_are: 'pivot settings' },
|
||||
updatedAt: '2025-05-15T16:30:00Z',
|
||||
isSaved: true
|
||||
}
|
||||
|
||||
@@ -60,7 +58,6 @@ describe('mutations', () => {
|
||||
query: 'SELECT * from bar',
|
||||
viewType: 'pivot',
|
||||
viewOptions: { here_are: 'pivot settings' },
|
||||
updatedAt: '2025-05-15T16:30:00Z',
|
||||
isSaved: true
|
||||
})
|
||||
})
|
||||
|
||||
@@ -6,8 +6,6 @@ import MainMenu from '@/views/MainView/MainMenu'
|
||||
import storedInquiries from '@/lib/storedInquiries'
|
||||
import { nextTick } from 'vue'
|
||||
import eventBus from '@/lib/eventBus'
|
||||
import actions from '@/store/actions'
|
||||
import mutations from '@/store/mutations'
|
||||
|
||||
let wrapper = null
|
||||
|
||||
@@ -28,7 +26,7 @@ describe('MainMenu.vue', () => {
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('Create, Save and Save as are visible only on /workspace page', async () => {
|
||||
it('Create and Save are visible only on /workspace page', async () => {
|
||||
const state = {
|
||||
currentTab: { query: '', execute: sinon.stub() },
|
||||
tabs: [{}],
|
||||
@@ -47,8 +45,6 @@ describe('MainMenu.vue', () => {
|
||||
})
|
||||
expect(wrapper.find('#save-btn').exists()).to.equal(true)
|
||||
expect(wrapper.find('#save-btn').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('#save-as-btn').exists()).to.equal(true)
|
||||
expect(wrapper.find('#save-as-btn').isVisible()).to.equal(true)
|
||||
expect(wrapper.find('#create-btn').exists()).to.equal(true)
|
||||
expect(wrapper.find('#create-btn').isVisible()).to.equal(true)
|
||||
wrapper.unmount()
|
||||
@@ -69,7 +65,7 @@ describe('MainMenu.vue', () => {
|
||||
expect(wrapper.find('#create-btn').isVisible()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Save and Save as are not visible if there is no tabs', () => {
|
||||
it('Save is not visible if there is no tabs', () => {
|
||||
const state = {
|
||||
currentTab: null,
|
||||
tabs: [],
|
||||
@@ -87,8 +83,6 @@ describe('MainMenu.vue', () => {
|
||||
})
|
||||
expect(wrapper.find('#save-btn').exists()).to.equal(true)
|
||||
expect(wrapper.find('#save-btn').isVisible()).to.equal(false)
|
||||
expect(wrapper.find('#save-as-btn').exists()).to.equal(true)
|
||||
expect(wrapper.find('#save-as-btn').isVisible()).to.equal(false)
|
||||
expect(wrapper.find('#create-btn').exists()).to.equal(true)
|
||||
expect(wrapper.find('#create-btn').isVisible()).to.equal(true)
|
||||
})
|
||||
@@ -117,12 +111,10 @@ describe('MainMenu.vue', () => {
|
||||
})
|
||||
const vm = wrapper.vm
|
||||
expect(wrapper.find('#save-btn').element.disabled).to.equal(false)
|
||||
expect(wrapper.find('#save-as-btn').element.disabled).to.equal(false)
|
||||
|
||||
store.state.tabs[0].isSaved = true
|
||||
await vm.$nextTick()
|
||||
expect(wrapper.find('#save-btn').element.disabled).to.equal(true)
|
||||
expect(wrapper.find('#save-as-btn').element.disabled).to.equal(false)
|
||||
})
|
||||
|
||||
it('Creates a tab', async () => {
|
||||
@@ -340,7 +332,7 @@ describe('MainMenu.vue', () => {
|
||||
expect(wrapper.vm.createNewInquiry.callCount).to.equal(4)
|
||||
})
|
||||
|
||||
it('Ctrl S calls onSave if the tab is unsaved and route path is /workspace', async () => {
|
||||
it('Ctrl S calls checkInquiryBeforeSave if the tab is unsaved and route path is /workspace', async () => {
|
||||
const tab = {
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
@@ -361,34 +353,36 @@ describe('MainMenu.vue', () => {
|
||||
plugins: [store]
|
||||
}
|
||||
})
|
||||
sinon.stub(wrapper.vm, 'onSave')
|
||||
sinon.stub(wrapper.vm, 'checkInquiryBeforeSave')
|
||||
|
||||
const ctrlS = new KeyboardEvent('keydown', { key: 's', ctrlKey: true })
|
||||
const metaS = new KeyboardEvent('keydown', { key: 's', metaKey: true })
|
||||
// tab is unsaved and route is /workspace
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.onSave.calledOnce).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledOnce).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.onSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
|
||||
// tab is saved and route is /workspace
|
||||
store.state.tabs[0].isSaved = true
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.onSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.onSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
|
||||
// tab is unsaved and route is not /workspace
|
||||
wrapper.vm.$route.path = '/inquiries'
|
||||
store.state.tabs[0].isSaved = false
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.onSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.onSave.calledTwice).to.equal(true)
|
||||
expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
|
||||
})
|
||||
|
||||
it('Ctrl Shift S calls onSaveAs if route path is /workspace', async () => {
|
||||
it('Saves the inquiry when no need the new name', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
isSaved: false
|
||||
@@ -398,81 +392,6 @@ describe('MainMenu.vue', () => {
|
||||
tabs: [tab],
|
||||
db: {}
|
||||
}
|
||||
const store = createStore({ state })
|
||||
const $route = { path: '/workspace' }
|
||||
|
||||
wrapper = shallowMount(MainMenu, {
|
||||
global: {
|
||||
mocks: { $route },
|
||||
stubs: ['router-link'],
|
||||
plugins: [store]
|
||||
}
|
||||
})
|
||||
sinon.stub(wrapper.vm, 'onSaveAs')
|
||||
|
||||
const ctrlS = new KeyboardEvent('keydown', {
|
||||
key: 'S',
|
||||
ctrlKey: true,
|
||||
shiftKey: true
|
||||
})
|
||||
const metaS = new KeyboardEvent('keydown', {
|
||||
key: 'S',
|
||||
metaKey: true,
|
||||
shiftKey: true
|
||||
})
|
||||
// tab is unsaved and route is /workspace
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.onSaveAs.calledOnce).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.onSaveAs.calledTwice).to.equal(true)
|
||||
|
||||
// tab is saved and route is /workspace
|
||||
store.state.tabs[0].isSaved = true
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.onSaveAs.calledThrice).to.equal(true)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.onSaveAs.callCount).to.equal(4)
|
||||
|
||||
// tab is unsaved and route is not /workspace
|
||||
wrapper.vm.$route.path = '/inquiries'
|
||||
store.state.tabs[0].isSaved = false
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.onSaveAs.callCount).to.equal(4)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.onSaveAs.callCount).to.equal(4)
|
||||
|
||||
// tab is saved and route is not /workspace
|
||||
wrapper.vm.$route.path = '/inquiries'
|
||||
store.state.tabs[0].isSaved = true
|
||||
document.dispatchEvent(ctrlS)
|
||||
expect(wrapper.vm.onSaveAs.callCount).to.equal(4)
|
||||
document.dispatchEvent(metaS)
|
||||
expect(wrapper.vm.onSaveAs.callCount).to.equal(4)
|
||||
})
|
||||
|
||||
it('Saves the inquiry when no need the new name and no update conflict', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM foo',
|
||||
updatedAt: '2025-05-15T15:30:00Z',
|
||||
execute: sinon.stub(),
|
||||
isSaved: false
|
||||
}
|
||||
const state = {
|
||||
currentTab: tab,
|
||||
inquiries: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM foo',
|
||||
updatedAt: '2025-05-15T15:30:00Z',
|
||||
createdAt: '2025-05-14T15:30:00Z'
|
||||
}
|
||||
],
|
||||
tabs: [tab],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
@@ -482,8 +401,7 @@ describe('MainMenu.vue', () => {
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
updatedAt: '2025-05-16T15:30:00Z'
|
||||
viewOptions: []
|
||||
})
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
@@ -528,8 +446,7 @@ describe('MainMenu.vue', () => {
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true,
|
||||
updatedAt: '2025-05-16T15:30:00Z'
|
||||
isSaved: true
|
||||
}
|
||||
})
|
||||
)
|
||||
@@ -539,396 +456,6 @@ describe('MainMenu.vue', () => {
|
||||
expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
|
||||
})
|
||||
|
||||
it('Inquiry conflict: overwrite', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM foo',
|
||||
updatedAt: '2025-05-15T15:30:00Z',
|
||||
execute: sinon.stub(),
|
||||
isSaved: false
|
||||
}
|
||||
const state = {
|
||||
currentTab: tab,
|
||||
inquiries: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM bar',
|
||||
updatedAt: '2025-05-15T16:30:00Z',
|
||||
createdAt: '2025-05-14T15:30:00Z'
|
||||
}
|
||||
],
|
||||
tabs: [tab],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const actions = {
|
||||
saveInquiry: sinon.stub().returns({
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
updatedAt: '2025-05-16T17:30:00Z',
|
||||
createdAt: '2025-05-14T15:30:00Z'
|
||||
})
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
attachTo: document.body,
|
||||
global: {
|
||||
mocks: { $route },
|
||||
stubs: {
|
||||
'router-link': true,
|
||||
'app-diagnostic-info': true,
|
||||
teleport: true,
|
||||
transition: false
|
||||
},
|
||||
plugins: [store]
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// check that the conflict dialog is open
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
||||
'Inquiry saving conflict'
|
||||
)
|
||||
|
||||
// find Overwrite in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button')
|
||||
.find(button => button.text() === 'Overwrite')
|
||||
.trigger('click')
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
|
||||
// check that the inquiry was saved via saveInquiry (newName='')
|
||||
expect(actions.saveInquiry.calledOnce).to.equal(true)
|
||||
expect(actions.saveInquiry.args[0][1]).to.eql({
|
||||
inquiryTab: state.currentTab,
|
||||
newName: ''
|
||||
})
|
||||
|
||||
// check that the tab was updated
|
||||
expect(
|
||||
mutations.updateTab.calledOnceWith(
|
||||
state,
|
||||
sinon.match({
|
||||
tab,
|
||||
newValues: {
|
||||
name: 'foo',
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true,
|
||||
updatedAt: '2025-05-16T17:30:00Z'
|
||||
}
|
||||
})
|
||||
)
|
||||
).to.equal(true)
|
||||
|
||||
// check that 'inquirySaved' event was triggered on eventBus
|
||||
expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
|
||||
})
|
||||
|
||||
it('Inquiry conflict after saving new inquiry: overwrite', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: null,
|
||||
query: 'SELECT * FROM foo',
|
||||
updatedAt: undefined,
|
||||
execute: sinon.stub(),
|
||||
dataView: { getOptionsForSave: sinon.stub() },
|
||||
isSaved: false
|
||||
}
|
||||
const state = {
|
||||
currentTab: tab,
|
||||
inquiries: [],
|
||||
tabs: [tab],
|
||||
db: {}
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
const $route = { path: '/workspace' }
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
attachTo: document.body,
|
||||
global: {
|
||||
mocks: { $route },
|
||||
stubs: {
|
||||
'router-link': true,
|
||||
'app-diagnostic-info': true,
|
||||
teleport: true,
|
||||
transition: false
|
||||
},
|
||||
plugins: [store]
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// check that Save dialog is open
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
||||
'Save inquiry'
|
||||
)
|
||||
|
||||
// enter the name
|
||||
await wrapper.find('.dialog-body input').setValue('foo')
|
||||
|
||||
// find Save in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button')
|
||||
.find(button => button.text() === 'Save')
|
||||
.trigger('click')
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
|
||||
// check that now there is one inquiry saved
|
||||
expect(state.inquiries.length).to.equal(1)
|
||||
expect(state.inquiries[0].name).to.equal('foo')
|
||||
expect(state.tabs[0].name).to.equal('foo')
|
||||
|
||||
// change the inquiry in store (like it's updated in another tab)
|
||||
store.state.inquiries[0].query = 'SELECT * FROM foo_updated_in_another_tab'
|
||||
store.state.inquiries[0].updatedAt = '2025-05-15T00:00:10Z'
|
||||
store.state.currentTab.query = 'SELECT * FROM foo_new'
|
||||
store.state.currentTab.isSaved = false
|
||||
await nextTick()
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// check that the conflict dialog is open
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
||||
'Inquiry saving conflict'
|
||||
)
|
||||
|
||||
// find Overwrite in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button')
|
||||
.find(button => button.text() === 'Overwrite')
|
||||
.trigger('click')
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
|
||||
// check that it's still one inquiry saved
|
||||
expect(state.inquiries.length).to.equal(1)
|
||||
expect(state.inquiries[0].name).to.equal('foo')
|
||||
expect(state.tabs[0].name).to.equal('foo')
|
||||
expect(state.inquiries[0].query).to.equal('SELECT * FROM foo_new')
|
||||
expect(state.tabs[0].query).to.equal('SELECT * FROM foo_new')
|
||||
})
|
||||
|
||||
it('Inquiry conflict: save as new', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM foo',
|
||||
updatedAt: '2025-05-15T15:30:00Z',
|
||||
execute: sinon.stub(),
|
||||
isSaved: false
|
||||
}
|
||||
const state = {
|
||||
currentTab: tab,
|
||||
inquiries: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM bar',
|
||||
updatedAt: '2025-05-15T16:30:00Z',
|
||||
createdAt: '2025-05-14T15:30:00Z'
|
||||
}
|
||||
],
|
||||
tabs: [tab]
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const actions = {
|
||||
saveInquiry: sinon.stub().returns({
|
||||
name: 'foo_new',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
updatedAt: '2025-05-16T17:30:00Z',
|
||||
createdAt: '2025-05-16T17:30:00Z'
|
||||
})
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
attachTo: document.body,
|
||||
global: {
|
||||
mocks: { $route },
|
||||
stubs: {
|
||||
'router-link': true,
|
||||
'app-diagnostic-info': true,
|
||||
teleport: true,
|
||||
transition: false
|
||||
},
|
||||
plugins: [store]
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
// check that the conflict dialog is open
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
||||
'Inquiry saving conflict'
|
||||
)
|
||||
|
||||
await clock.tick(100)
|
||||
|
||||
// find "Save as new" in the dialog and click
|
||||
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button')
|
||||
.find(button => button.text() === 'Save as new')
|
||||
.trigger('click')
|
||||
|
||||
// Hiding any dialog is done with tiny animation. Give time to finish it:
|
||||
await clock.tick(100)
|
||||
// Note: don't call nextTick before clock.tick. That leads to extra trap in
|
||||
// trapStack and the test fails with focus-trap error in afterEach hook
|
||||
// when unmount the component
|
||||
|
||||
// check that only one dialog open
|
||||
expect(wrapper.findAll('.dialog.vfm').length).to.equal(1)
|
||||
// enter the new name
|
||||
await wrapper.find('.dialog-body input').setValue('foo_new')
|
||||
|
||||
// find Save in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button')
|
||||
.find(button => button.text() === 'Save')
|
||||
.trigger('click')
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
|
||||
// check that the inquiry was saved via saveInquiry (newName='foo_new')
|
||||
expect(actions.saveInquiry.calledOnce).to.equal(true)
|
||||
expect(actions.saveInquiry.args[0][1]).to.eql({
|
||||
inquiryTab: state.currentTab,
|
||||
newName: 'foo_new'
|
||||
})
|
||||
|
||||
// check that the tab was updated
|
||||
expect(
|
||||
mutations.updateTab.calledOnceWith(
|
||||
state,
|
||||
sinon.match({
|
||||
tab,
|
||||
newValues: {
|
||||
name: 'foo_new',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true,
|
||||
updatedAt: '2025-05-16T17:30:00Z'
|
||||
}
|
||||
})
|
||||
)
|
||||
).to.equal(true)
|
||||
|
||||
// check that 'inquirySaved' event was triggered on eventBus
|
||||
expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
|
||||
})
|
||||
|
||||
it('Inquiry conflict: cancel', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM foo',
|
||||
updatedAt: '2025-05-15T15:30:00Z',
|
||||
execute: sinon.stub(),
|
||||
isSaved: false
|
||||
}
|
||||
const state = {
|
||||
currentTab: tab,
|
||||
inquiries: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM bar',
|
||||
updatedAt: '2025-05-15T16:30:00Z',
|
||||
createdAt: '2025-05-14T15:30:00Z'
|
||||
}
|
||||
],
|
||||
tabs: [tab],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const actions = {
|
||||
saveInquiry: sinon.stub()
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
attachTo: document.body,
|
||||
global: {
|
||||
mocks: { $route },
|
||||
stubs: {
|
||||
'router-link': true,
|
||||
'app-diagnostic-info': true,
|
||||
teleport: true,
|
||||
transition: false
|
||||
},
|
||||
plugins: [store]
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('#save-btn').trigger('click')
|
||||
|
||||
// check that the conflict dialog is open
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
||||
'Inquiry saving conflict'
|
||||
)
|
||||
|
||||
// find Cancel in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button')
|
||||
.find(button => button.text() === 'Cancel')
|
||||
.trigger('click')
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
|
||||
// check that the inquiry was not saved via storedInquiries.save
|
||||
expect(actions.saveInquiry.called).to.equal(false)
|
||||
|
||||
// check that the tab was not updated
|
||||
expect(mutations.updateTab.called).to.equal(false)
|
||||
|
||||
// check that 'inquirySaved' event is not listened on eventBus
|
||||
expect(eventBus.$off.calledOnceWith('inquirySaved')).to.equal(true)
|
||||
})
|
||||
|
||||
it('Shows en error when the new name is needed but not specifyied', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
@@ -936,8 +463,7 @@ describe('MainMenu.vue', () => {
|
||||
tempName: 'Untitled',
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
isSaved: false,
|
||||
updatedAt: '2025-05-15T15:30:00Z'
|
||||
isSaved: false
|
||||
}
|
||||
const state = {
|
||||
currentTab: tab,
|
||||
@@ -953,8 +479,7 @@ describe('MainMenu.vue', () => {
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
updatedAt: '2025-05-16T15:30:00Z'
|
||||
viewOptions: []
|
||||
})
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
@@ -997,15 +522,14 @@ describe('MainMenu.vue', () => {
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
})
|
||||
|
||||
it('Saves the new inquiry with a new name', async () => {
|
||||
it('Saves the inquiry with a new name', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: null,
|
||||
tempName: 'Untitled',
|
||||
query: 'SELECT * FROM foo',
|
||||
execute: sinon.stub(),
|
||||
isSaved: false,
|
||||
updatedAt: undefined
|
||||
isSaved: false
|
||||
}
|
||||
const state = {
|
||||
currentTab: tab,
|
||||
@@ -1018,11 +542,10 @@ describe('MainMenu.vue', () => {
|
||||
const actions = {
|
||||
saveInquiry: sinon.stub().returns({
|
||||
name: 'foo',
|
||||
id: 2,
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
updatedAt: '2025-05-15T15:30:00Z'
|
||||
viewOptions: []
|
||||
})
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
@@ -1060,6 +583,8 @@ describe('MainMenu.vue', () => {
|
||||
.find(button => button.text() === 'Save')
|
||||
.trigger('click')
|
||||
|
||||
await nextTick()
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
@@ -1079,12 +604,11 @@ describe('MainMenu.vue', () => {
|
||||
tab,
|
||||
newValues: {
|
||||
name: 'foo',
|
||||
id: 2,
|
||||
id: 1,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true,
|
||||
updatedAt: '2025-05-15T15:30:00Z'
|
||||
isSaved: true
|
||||
}
|
||||
})
|
||||
)
|
||||
@@ -1126,8 +650,7 @@ describe('MainMenu.vue', () => {
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
updatedAt: '2025-05-15T15:30:00Z'
|
||||
viewOptions: []
|
||||
})
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
@@ -1168,6 +691,8 @@ describe('MainMenu.vue', () => {
|
||||
.find(button => button.text() === 'Save')
|
||||
.trigger('click')
|
||||
|
||||
await nextTick()
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
@@ -1191,8 +716,7 @@ describe('MainMenu.vue', () => {
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true,
|
||||
updatedAt: '2025-05-15T15:30:00Z'
|
||||
isSaved: true
|
||||
}
|
||||
})
|
||||
)
|
||||
@@ -1200,6 +724,19 @@ describe('MainMenu.vue', () => {
|
||||
|
||||
// check that 'inquirySaved' event was triggered on eventBus
|
||||
expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
|
||||
|
||||
// We saved predefined inquiry, so the tab will be created again
|
||||
// (because of new id) and it will be without sql result and has default view - table.
|
||||
// That's why we need to restore data and view.
|
||||
// Check that result and view are preserved in the currentTab:
|
||||
expect(state.currentTab.viewType).to.equal('chart')
|
||||
expect(state.currentTab.result).to.eql({
|
||||
columns: ['id', 'name'],
|
||||
values: [
|
||||
[1, 'Harry Potter'],
|
||||
[2, 'Drako Malfoy']
|
||||
]
|
||||
})
|
||||
})
|
||||
|
||||
it('Cancel saving', async () => {
|
||||
@@ -1224,7 +761,7 @@ describe('MainMenu.vue', () => {
|
||||
name: 'bar',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart'
|
||||
chart: []
|
||||
})
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
@@ -1272,110 +809,4 @@ describe('MainMenu.vue', () => {
|
||||
// check that 'inquirySaved' event is not listened on eventBus
|
||||
expect(eventBus.$off.calledOnceWith('inquirySaved')).to.equal(true)
|
||||
})
|
||||
|
||||
it('Save the inquiry as new', async () => {
|
||||
const tab = {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM foo',
|
||||
updatedAt: '2025-05-15T15:30:00Z',
|
||||
execute: sinon.stub(),
|
||||
isSaved: true
|
||||
}
|
||||
const state = {
|
||||
currentTab: tab,
|
||||
inquiries: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'SELECT * FROM bar',
|
||||
updatedAt: '2025-05-15T16:30:00Z',
|
||||
createdAt: '2025-05-14T15:30:00Z'
|
||||
}
|
||||
],
|
||||
tabs: [tab],
|
||||
db: {}
|
||||
}
|
||||
const mutations = {
|
||||
updateTab: sinon.stub()
|
||||
}
|
||||
const actions = {
|
||||
saveInquiry: sinon.stub().returns({
|
||||
name: 'foo_new',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
updatedAt: '2025-05-16T17:30:00Z',
|
||||
createdAt: '2025-05-16T17:30:00Z'
|
||||
})
|
||||
}
|
||||
const store = createStore({ state, mutations, actions })
|
||||
const $route = { path: '/workspace' }
|
||||
sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
|
||||
|
||||
wrapper = mount(MainMenu, {
|
||||
attachTo: document.body,
|
||||
global: {
|
||||
mocks: { $route },
|
||||
stubs: {
|
||||
'router-link': true,
|
||||
'app-diagnostic-info': true,
|
||||
teleport: true,
|
||||
transition: false
|
||||
},
|
||||
plugins: [store]
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('#save-as-btn').trigger('click')
|
||||
|
||||
// check that Save dialog is open
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
||||
'Save inquiry'
|
||||
)
|
||||
|
||||
// enter the new name
|
||||
await wrapper.find('.dialog-body input').setValue('foo_new')
|
||||
|
||||
// find Save in the dialog and click
|
||||
await wrapper
|
||||
.findAll('.dialog-buttons-container button')
|
||||
.find(button => button.text() === 'Save')
|
||||
.trigger('click')
|
||||
|
||||
// check that the dialog is closed
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
|
||||
// check that the inquiry was saved via saveInquiry (newName='foo_new')
|
||||
expect(actions.saveInquiry.calledOnce).to.equal(true)
|
||||
expect(actions.saveInquiry.args[0][1]).to.eql({
|
||||
inquiryTab: state.currentTab,
|
||||
newName: 'foo_new'
|
||||
})
|
||||
|
||||
// check that the tab was updated
|
||||
expect(
|
||||
mutations.updateTab.calledOnceWith(
|
||||
state,
|
||||
sinon.match({
|
||||
tab,
|
||||
newValues: {
|
||||
name: 'foo_new',
|
||||
id: 2,
|
||||
query: 'SELECT * FROM foo',
|
||||
viewType: 'chart',
|
||||
viewOptions: [],
|
||||
isSaved: true,
|
||||
updatedAt: '2025-05-16T17:30:00Z'
|
||||
}
|
||||
})
|
||||
)
|
||||
).to.equal(true)
|
||||
|
||||
// check that 'inquirySaved' event was triggered on eventBus
|
||||
expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -3,7 +3,6 @@ import { mount } from '@vue/test-utils'
|
||||
import DataView from '@/views/MainView/Workspace/Tabs/Tab/DataView'
|
||||
import sinon from 'sinon'
|
||||
import { nextTick } from 'vue'
|
||||
import cIo from '@/lib/utils/clipboardIo'
|
||||
|
||||
describe('DataView.vue', () => {
|
||||
const $store = { state: { isWorkspaceVisible: true } }
|
||||
@@ -65,7 +64,7 @@ describe('DataView.vue', () => {
|
||||
|
||||
// Find chart and spy the method
|
||||
const chart = wrapper.findComponent({ name: 'Chart' }).vm
|
||||
sinon.stub(chart, 'saveAsSvg')
|
||||
sinon.spy(chart, 'saveAsSvg')
|
||||
|
||||
// Export to svg
|
||||
const svgBtn = wrapper.findComponent({ ref: 'svgExportBtn' })
|
||||
@@ -78,7 +77,7 @@ describe('DataView.vue', () => {
|
||||
|
||||
// Find pivot and spy the method
|
||||
const pivot = wrapper.findComponent({ name: 'pivot' }).vm
|
||||
sinon.stub(pivot, 'saveAsSvg')
|
||||
sinon.spy(pivot, 'saveAsSvg')
|
||||
|
||||
// Switch to Custom Chart renderer
|
||||
pivot.pivotOptions.rendererName = 'Custom chart'
|
||||
@@ -147,7 +146,6 @@ describe('DataView.vue', () => {
|
||||
|
||||
it('copy to clipboard more than 1 sec', async () => {
|
||||
sinon.stub(window.navigator.clipboard, 'write').resolves()
|
||||
sinon.stub(cIo, 'copyImage')
|
||||
const clock = sinon.useFakeTimers()
|
||||
const wrapper = mount(DataView, {
|
||||
attachTo: document.body,
|
||||
@@ -167,7 +165,7 @@ describe('DataView.vue', () => {
|
||||
await copyBtn.trigger('click')
|
||||
|
||||
// The dialog is shown...
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
||||
'Copy to clipboard'
|
||||
)
|
||||
@@ -182,10 +180,11 @@ describe('DataView.vue', () => {
|
||||
// Wait untill prepareCopy is finished
|
||||
await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
|
||||
|
||||
await nextTick()
|
||||
await nextTick()
|
||||
|
||||
// The dialog is shown...
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
|
||||
// ... with Ready message...
|
||||
expect(wrapper.find('.dialog-body').text()).to.equal('Image is ready')
|
||||
@@ -197,13 +196,12 @@ describe('DataView.vue', () => {
|
||||
|
||||
// The dialog is not shown...
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
||||
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, 'write').resolves()
|
||||
sinon.stub(cIo, 'copyImage')
|
||||
const clock = sinon.useFakeTimers()
|
||||
const wrapper = mount(DataView, {
|
||||
attachTo: document.body,
|
||||
@@ -228,9 +226,10 @@ describe('DataView.vue', () => {
|
||||
// Wait untill prepareCopy is finished
|
||||
await wrapper.vm.$refs.viewComponent.prepareCopy.returnValues[0]
|
||||
|
||||
await nextTick()
|
||||
// The dialog is not shown...
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
// copyToClipboard is called
|
||||
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
|
||||
wrapper.unmount()
|
||||
@@ -271,7 +270,7 @@ describe('DataView.vue', () => {
|
||||
|
||||
// The dialog is not shown...
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
// copyToClipboard is not called
|
||||
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
|
||||
wrapper.unmount()
|
||||
|
||||
@@ -78,7 +78,7 @@ describe('RunResult.vue', () => {
|
||||
await nextTick()
|
||||
|
||||
// The dialog is shown...
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
|
||||
'Copy to clipboard'
|
||||
)
|
||||
@@ -91,7 +91,7 @@ describe('RunResult.vue', () => {
|
||||
await nextTick()
|
||||
|
||||
// The dialog is shown...
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(true)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
|
||||
|
||||
// ... with Ready message...
|
||||
expect(wrapper.find('.dialog-body').text()).to.equal('CSV is ready')
|
||||
@@ -104,7 +104,7 @@ describe('RunResult.vue', () => {
|
||||
|
||||
// The dialog is not shown...
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
@@ -139,10 +139,11 @@ describe('RunResult.vue', () => {
|
||||
|
||||
// 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)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
// copyToClipboard is called
|
||||
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
|
||||
wrapper.unmount()
|
||||
@@ -187,7 +188,7 @@ describe('RunResult.vue', () => {
|
||||
.trigger('click')
|
||||
// The dialog is not shown...
|
||||
await clock.tick(100)
|
||||
expect(wrapper.find('.dialog.vfm .vfm__content').exists()).to.equal(false)
|
||||
expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
|
||||
// copyToClipboard is not called
|
||||
expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
|
||||
wrapper.unmount()
|
||||
|
||||
@@ -5,9 +5,6 @@ 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
|
||||
@@ -49,7 +46,7 @@ describe('Tabs.vue', () => {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
chart: [],
|
||||
isSaved: true
|
||||
},
|
||||
{
|
||||
@@ -57,7 +54,7 @@ describe('Tabs.vue', () => {
|
||||
name: null,
|
||||
tempName: 'Untitled',
|
||||
query: '',
|
||||
viewType: 'chart',
|
||||
chart: [],
|
||||
isSaved: false
|
||||
}
|
||||
],
|
||||
@@ -100,7 +97,7 @@ describe('Tabs.vue', () => {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
chart: [],
|
||||
isSaved: true
|
||||
},
|
||||
{
|
||||
@@ -108,7 +105,7 @@ describe('Tabs.vue', () => {
|
||||
name: null,
|
||||
tempName: 'Untitled',
|
||||
query: '',
|
||||
viewType: 'chart',
|
||||
chart: [],
|
||||
isSaved: false
|
||||
}
|
||||
],
|
||||
@@ -439,7 +436,7 @@ describe('Tabs.vue', () => {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
chart: [],
|
||||
isSaved: true
|
||||
},
|
||||
{
|
||||
@@ -447,7 +444,7 @@ describe('Tabs.vue', () => {
|
||||
name: null,
|
||||
tempName: 'Untitled',
|
||||
query: '',
|
||||
viewType: 'chart',
|
||||
chart: [],
|
||||
isSaved: false
|
||||
}
|
||||
],
|
||||
@@ -480,7 +477,7 @@ describe('Tabs.vue', () => {
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
query: 'select * from foo',
|
||||
viewType: 'chart',
|
||||
chart: [],
|
||||
isSaved: true
|
||||
}
|
||||
],
|
||||
@@ -504,216 +501,4 @@ describe('Tabs.vue', () => {
|
||||
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()
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user