linter

tests/views/MainView/Workspace/Schema/Schema.spec.js

@@ -0,0 +1,230 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from '@vue/test-utils'
+import { createStore } from 'vuex'
+import actions from '@/store/actions'
+import mutations from '@/store/mutations'
+import Schema from '@/views/MainView/Workspace/Schema'
+import TableDescription from '@/views/MainView/Workspace/Schema/TableDescription'
+import database from '@/lib/database'
+import fIo from '@/lib/utils/fileIo'
+import csv from '@/lib/csv'
+import { nextTick } from 'vue'
+
+describe('Schema.vue', () => {
+  let clock
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+  })
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('Renders DB name on initial', () => {
+    // mock store state
+    const state = {
+      db: {
+        dbName: 'fooDB'
+      }
+    }
+    const store = createStore({ state })
+
+    // mout the component
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
+
+    // check DB name and schema visibility
+    expect(wrapper.find('.db-name').text()).to.equal('fooDB')
+    expect(wrapper.find('.schema').isVisible()).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('Schema visibility is toggled when click on DB name', async () => {
+    // mock store state
+    const state = {
+      db: {
+        dbName: 'fooDB'
+      }
+    }
+    const store = createStore({ state })
+
+    // mout the component
+    const wrapper = mount(Schema, {
+      attachTo: document.body,
+      global: {
+        plugins: [store]
+      }
+    })
+
+    // click and check visibility
+    await wrapper.find('.db-name').trigger('click')
+    expect(wrapper.find('.schema').isVisible()).to.equal(false)
+    await wrapper.find('.db-name').trigger('click')
+    expect(wrapper.find('.schema').isVisible()).to.equal(true)
+    wrapper.unmount()
+  })
+
+  it('Schema filter', async () => {
+    // mock store state
+    const state = {
+      db: {
+        dbName: 'fooDB',
+        schema: [
+          {
+            name: 'foo',
+            columns: [
+              { name: 'id', type: 'INTEGER' },
+              { name: 'title', type: 'NVARCHAR(24)' }
+            ]
+          },
+          {
+            name: 'bar',
+            columns: [
+              { name: 'id', type: 'INTEGER' },
+              { name: 'price', type: 'INTEGER' }
+            ]
+          },
+          {
+            name: 'foobar',
+            columns: [
+              { name: 'id', type: 'INTEGER' },
+              { name: 'price', type: 'INTEGER' }
+            ]
+          }
+        ]
+      }
+    }
+    const store = createStore({ state })
+
+    // mount the component
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
+
+    // apply filters and check the list of tables
+    await wrapper.find('#schema-filter input').setValue('foo')
+    let tables = wrapper.findAllComponents(TableDescription)
+    expect(tables).to.have.lengthOf(2)
+    expect(tables[0].vm.name).to.equal('foo')
+    expect(tables[1].vm.name).to.equal('foobar')
+
+    await wrapper.find('#schema-filter input').setValue('bar')
+    tables = wrapper.findAllComponents(TableDescription)
+    expect(tables).to.have.lengthOf(2)
+    expect(tables[0].vm.name).to.equal('bar')
+    expect(tables[1].vm.name).to.equal('foobar')
+
+    await wrapper.find('#schema-filter input').setValue('')
+    tables = wrapper.findAllComponents(TableDescription)
+    expect(tables).to.have.lengthOf(3)
+    expect(tables[0].vm.name).to.equal('foo')
+    expect(tables[1].vm.name).to.equal('bar')
+    expect(tables[2].vm.name).to.equal('foobar')
+    wrapper.unmount()
+  })
+
+  it('exports db', async () => {
+    const state = {
+      db: {
+        dbName: 'fooDB',
+        export: sinon.stub().resolves()
+      }
+    }
+    const store = createStore({ state })
+    const wrapper = mount(Schema, {
+      global: {
+        plugins: [store]
+      }
+    })
+
+    await wrapper
+      .findComponent({ name: 'export-icon' })
+      .find('svg')
+      .trigger('click')
+    expect(state.db.export.calledOnceWith('fooDB'))
+    wrapper.unmount()
+  })
+
+  it('adds table', async () => {
+    const file = new File([], 'test.csv')
+    sinon.stub(fIo, 'getFileFromUser').resolves(file)
+
+    sinon.stub(csv, 'parse').resolves({
+      delimiter: '|',
+      data: {
+        columns: ['col1', 'col2'],
+        values: {
+          col1: [1],
+          col2: ['foo']
+        }
+      },
+      hasErrors: false,
+      messages: []
+    })
+
+    const state = {
+      db: database.getNewDatabase(),
+      tabs: []
+    }
+    state.db.dbName = 'db'
+    state.db.execute('CREATE TABLE foo(id)')
+    state.db.refreshSchema()
+    sinon.spy(state.db, 'refreshSchema')
+
+    const store = createStore({ state, actions, mutations })
+    const wrapper = mount(Schema, {
+      attachTo: document.body,
+      global: {
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
+      }
+    })
+    sinon.spy(wrapper.vm.$refs.addCsvJson, 'preview')
+    sinon.spy(wrapper.vm, 'addCsvJson')
+    sinon.spy(wrapper.vm.$refs.addCsvJson, 'loadToDb')
+
+    await wrapper
+      .findComponent({ name: 'add-table-icon' })
+      .find('svg')
+      .trigger('click')
+    await wrapper.vm.$refs.addCsvJson.preview.returnValues[0]
+    await wrapper.vm.addCsvJson.returnValues[0]
+    await nextTick()
+    await nextTick()
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'CSV import'
+    )
+    await wrapper.find('#import-start').trigger('click')
+    await wrapper.vm.$refs.addCsvJson.loadToDb.returnValues[0]
+    await wrapper.find('#import-finish').trigger('click')
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    await state.db.refreshSchema.returnValues[0]
+
+    expect(wrapper.vm.$store.state.db.schema).to.eql([
+      { name: 'foo', columns: [{ name: 'id', type: 'N/A' }] },
+      {
+        name: 'test',
+        columns: [
+          { name: 'col1', type: 'REAL' },
+          { name: 'col2', type: 'TEXT' }
+        ]
+      }
+    ])
+
+    const res = await wrapper.vm.$store.state.db.execute('select * from test')
+    expect(res.values).to.eql({
+      col1: [1],
+      col2: ['foo']
+    })
+    wrapper.unmount()
+  })
+})

tests/views/MainView/Workspace/Schema/TableDescription.spec.js

@@ -0,0 +1,46 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import TableDescription from '@/views/MainView/Workspace/Schema/TableDescription'
+
+describe('TableDescription.vue', () => {
+  it('Initially the columns are hidden and table name is rendered', () => {
+    const wrapper = shallowMount(TableDescription, {
+      attachTo: document.body,
+      props: {
+        name: 'Test table',
+        columns: [
+          { name: 'id', type: 'number' },
+          { name: 'title', type: 'nvarchar(24)' }
+        ]
+      }
+    })
+    expect(wrapper.find('.table-name').text()).to.equal('Test table')
+    expect(wrapper.find('.columns').isVisible()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('Columns are visible and correct when click on table name', async () => {
+    const wrapper = shallowMount(TableDescription, {
+      global: {
+        stubs: ['router-link']
+      },
+      props: {
+        name: 'Test table',
+        columns: [
+          { name: 'id', type: 'number' },
+          { name: 'title', type: 'nvarchar(24)' }
+        ]
+      }
+    })
+    await wrapper.find('.table-name').trigger('click')
+
+    expect(wrapper.find('.columns').isVisible()).to.equal(true)
+    expect(wrapper.findAll('.column').length).to.equal(2)
+    expect(wrapper.findAll('.column')[0].text())
+      .to.include('id')
+      .and.include('number')
+    expect(wrapper.findAll('.column')[1].text())
+      .to.include('title')
+      .and.include('nvarchar(24)')
+  })
+})