#128 tests

tests/App.spec.js

@@ -1,13 +1,22 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import { createStore } from 'vuex'
 import App from '@/App.vue'
 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()
   })
@@ -92,4 +101,134 @@ describe('App.vue', () => {
       { 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()
+  })
 })