add tests for Value Viewer

src/components/Graph/index.vue

@@ -40,7 +40,7 @@
         <value-viewer
           :empty="!selectedItem"
           empty-message="No node or edge selected to view"
-          :cellValue="JSON.stringify(selectedItem)"
+          :value="JSON.stringify(selectedItem)"
           default-format="json"
         />
       </template>

src/components/RunResult/index.vue

@@ -51,7 +51,7 @@
         <value-viewer
           :empty="!selectedCell"
           empty-message="No cell selected to view"
-          :cellValue="
+          :value="
             selectedCell
               ? result.values[result.columns[selectedCell.dataset.col]][
                   selectedCell.dataset.row

src/components/ValueViewer.vue

@@ -73,7 +73,7 @@ export default {
     Logs
   },
   props: {
-    cellValue: [String, Number, Uint8Array],
+    value: [String, Number, Uint8Array],
     empty: Boolean,
     emptyMessage: String,
     defaultFormat: {
@@ -108,13 +108,13 @@ export default {
       }
     },
     isBlob() {
-      return this.cellValue && ArrayBuffer.isView(this.cellValue)
+      return this.value && ArrayBuffer.isView(this.value)
     },
     isNull() {
-      return this.cellValue === null
+      return this.value === null
     },
     cellText() {
-      const value = this.cellValue
+      const value = this.value
       if (this.isNull) {
         return 'NULL'
       }
@@ -131,16 +131,16 @@ export default {
         this.messages = []
         this.formattedJson = ''
         if (this.currentFormat === 'json') {
-          this.formatJson(this.cellValue)
+          this.formatJson(this.value)
         }
       }
     },
-    cellValue: {
+    value: {
       immediate: true,
       handler() {
         this.messages = []
         if (this.currentFormat === 'json') {
-          this.formatJson(this.cellValue)
+          this.formatJson(this.value)
         }
       }
     }
@@ -161,7 +161,7 @@ export default {
     },
     copyToClipboard() {
       cIo.copyText(
-        this.currentFormat === 'json' ? this.formattedJson : this.cellValue,
+        this.currentFormat === 'json' ? this.formattedJson : this.value,
         'The value is copied to clipboard.'
       )
     }

tests/components/ValueViewer.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { mount } from '@vue/test-utils'
-import ValueViewer from '@/components/RunResult/ValueViewer.vue'
+import ValueViewer from '@/components/ValueViewer.vue'
 import sinon from 'sinon'
 
 describe('ValueViewer.vue', () => {
@@ -11,28 +11,45 @@ describe('ValueViewer.vue', () => {
   it('shows value in text mode', () => {
     const wrapper = mount(ValueViewer, {
       props: {
-        cellValue: 'foo'
+        value: 'foo'
       }
     })
 
     expect(wrapper.find('.value-body').text()).to.equals('foo')
+    expect(wrapper.find('button.text').attributes('aria-selected')).to.equal(
+      'true'
+    )
+  })
+
+  it('shows meta values', async () => {
+    const wrapper = mount(ValueViewer, {
+      props: {
+        value: new Uint8Array()
+      }
+    })
+
+    expect(wrapper.find('.value-body').text()).to.equals('BLOB')
+
+    await wrapper.setProps({ value: null })
+    expect(wrapper.find('.value-body').text()).to.equals('NULL')
   })
 
   it('shows error in json mode if the value is not json', async () => {
     const wrapper = mount(ValueViewer, {
       props: {
-        cellValue: 'foo'
+        value: 'foo',
+        defaultFormat: 'json'
       }
     })
-    await wrapper.find('button.json').trigger('click')
     expect(wrapper.find('.value-body').text()).to.equals("Can't parse JSON.")
+    expect(wrapper.find('button[aria-selected="true"]').text()).contains('JSON')
   })
 
   it('copy to clipboard', async () => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves()
     const wrapper = mount(ValueViewer, {
       props: {
-        cellValue: 'foo'
+        value: 'foo'
       }
     })
 
@@ -41,13 +58,20 @@ describe('ValueViewer.vue', () => {
     expect(window.navigator.clipboard.writeText.calledOnceWith('foo')).to.equal(
       true
     )
+
+    await wrapper.setProps({ value: '{"foo": "bar"}' })
+    await wrapper.find('button.json').trigger('click')
+    await wrapper.find('button.copy').trigger('click')
+    expect(window.navigator.clipboard.writeText.args[1][0]).to.equal(
+      '{\n    "foo": "bar"\n}'
+    )
   })
 
   it('wraps lines', async () => {
     const wrapper = mount(ValueViewer, {
       attachTo: document.body,
       props: {
-        cellValue: 'foo'
+        value: 'foo'
       }
     })
 
@@ -55,7 +79,7 @@ describe('ValueViewer.vue', () => {
     const valueBody = wrapper.find('.value-body').wrapperElement
     expect(valueBody.scrollWidth).to.equal(valueBody.clientWidth)
 
-    await wrapper.setProps({ cellValue: 'foo'.repeat(100) })
+    await wrapper.setProps({ value: 'foo'.repeat(100) })
     expect(valueBody.scrollWidth).not.to.equal(valueBody.clientWidth)
 
     await wrapper.find('button.line-wrap').trigger('click')
@@ -67,7 +91,7 @@ describe('ValueViewer.vue', () => {
     const wrapper = mount(ValueViewer, {
       attachTo: document.body,
       props: {
-        cellValue: '{"foo": "foofoofoofoofoofoofoofoofoofoo"}'
+        value: '{"foo": "foofoofoofoofoofoofoofoofoofoo"}'
       }
     })
 
@@ -83,4 +107,15 @@ describe('ValueViewer.vue', () => {
     expect(codeMirrorScroll.scrollWidth).to.equal(codeMirrorScroll.clientWidth)
     wrapper.unmount()
   })
+
+  it('shows empty message if empty is true', () => {
+    const wrapper = mount(ValueViewer, {
+      props: {
+        empty: true,
+        emptyMessage: 'I am empty'
+      }
+    })
+
+    expect(wrapper.find('.value-viewer').text()).to.equals('I am empty')
+  })
 })