#29: Write template unit test for PixelUnit

Once file storage is implemented, the config file can be loaded for the
test as well, which will allow testing of the page's function

app/src/pages/metamine/PixelUnit/PixelUnit.html

@@ -12,7 +12,7 @@ <h2>Data from Caltech and Duke composed of 32K simulated results for static and
       <md-button class="md-layout-item md-size-10 md-primary" @click="handleReset()">Reset</md-button>
     </div>
     <div class="md-layout-item md-size-35 md-small-size-100" style="min-width:310px;">
-      <canvas id="unit-cell" width="300" height="300"></canvas>
+      <canvas id="unit-cell" ref="unit-cell" width="300" height="300"></canvas>
     </div>
 
     <div class="md-layout-item md-size-60 md-small-size-100 md-layout md-gutter">

app/src/pages/metamine/PixelUnit/PixelUnit.js

@@ -57,7 +57,7 @@ export default {
 
   mounted: function () {
     const vm = this
-    this.canvas = document.getElementById('unit-cell')
+    this.canvas = this.$refs['unit-cell']
     this.ctx = this.canvas.getContext('2d')
     this.lw = 4 // line width
 
@@ -84,10 +84,7 @@ export default {
         vm.pixelUnit.drawGrid()
         vm.updateFields()
       })
-      .catch(function (err) {
-        const msg = 'error obtaining pixelunit data. Error: ' + err
-        console.trace(msg)
-      })
+      // TODO add a catch to this promise
   },
   methods: {
     onGeometryEntered () {

app/tests/unit/pages/metamine/pixelunit.spec.js

@@ -0,0 +1,28 @@
+import createWrapper from '../../../jest/script/wrapper'
+import PixelUnit from '@/pages/metamine/PixelUnit/PixelUnit.vue'
+
+// TODO handle config file loading once it has a location
+
+// import { promises } from 'fs'
+
+var wrapper = null
+
+describe('PixelUnit.vue', () => {
+  beforeAll(async () => {
+    // const configData = await promises.readFile('@/assets/lin-bilal-liu-10x10-c4v-15bit-static-dynamic.txt', { encoding: 'utf-8' })
+    global.fetch.mockReturnValueOnce(Promise.resolve({
+      text: () => ''
+    }))
+    wrapper = createWrapper(PixelUnit, {})
+  })
+
+  it('mounts properly', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it.skip('responds to clicks', () => {
+    const grid = wrapper.find('#unit-cell')
+    grid.trigger('click', { layerX: 15, layerY: 15 })
+    expect(wrapper.vm.geometryItems[0].value).toBe('000000000000001')
+  })
+})