Add tests for the Scratchpad view

Author: Vinnl

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   preset: 'ts-jest/presets/js-with-babel',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
   collectCoverage: true,
   // For some reason Jest is not measuring coverage without the below option.
   // Unfortunately, despite `!(.test)`, it still measures coverage of test files as well:

scratchpad/__snapshots__/view.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View mode should properly render the pad's contents 1`] = `"<div>First line<br>Second line<br></div>"`;

scratchpad/view.test.ts

@@ -0,0 +1,70 @@
+/* eslint-env jest */
+import $rdf from 'rdflib'
+import vocab from 'solid-namespace'
+import { view } from './view'
+
+const ns = vocab($rdf)
+
+function addMockPad (mockStore: $rdf.IndexedFormula): $rdf.NamedNode {
+  const mockPad = $rdf.sym('https://mock-pad')
+  const mockFirstLine = $rdf.sym('https://arbitrary-line-1')
+  mockStore.add(mockPad, ns.pad('next'), mockFirstLine, mockPad.doc())
+  mockStore.add(mockFirstLine, ns.sioc('content'), 'First line', mockPad.doc())
+  mockStore.add(mockFirstLine, ns.dc('created'), new Date(0), mockPad.doc())
+  const mockSecondLine = $rdf.sym('https://arbitrary-line-2')
+  mockStore.add(mockFirstLine, ns.pad('next'), mockSecondLine, mockPad.doc())
+  mockStore.add(mockSecondLine, ns.sioc('content'), 'Second line', mockPad.doc())
+  mockStore.add(mockSecondLine, ns.dc('created'), new Date(0), mockPad.doc())
+  mockStore.add(mockSecondLine, ns.pad('next'), mockPad, mockPad.doc())
+
+  return mockPad
+}
+
+describe('View mode', () => {
+  it('should not show an edit button when the user is not logged in', async () => {
+    const mockStore = $rdf.graph()
+    const mockPad = addMockPad(mockStore)
+
+    const container = document.createElement('div')
+
+    view({
+      container: container,
+      subject: mockPad,
+      store: mockStore
+    })
+    const button = container.querySelector('button')
+    expect(button).toBeNull()
+  })
+
+  it('should show an edit button when the user is logged in', async () => {
+    const mockStore = $rdf.graph()
+    const mockPad = addMockPad(mockStore)
+    const mockUser = $rdf.sym('https://mock-user')
+
+    const container = document.createElement('div')
+
+    view({
+      container: container,
+      subject: mockPad,
+      store: mockStore,
+      user: mockUser
+    })
+    const button = container.querySelector('button')
+    expect(button).toBeDefined()
+    expect(button!.textContent).toBe('Edit')
+  })
+
+  it('should properly render the pad\'s contents', async () => {
+    const mockStore = $rdf.graph()
+    const mockPad = addMockPad(mockStore)
+
+    const container = document.createElement('div')
+
+    view({
+      container: container,
+      subject: mockPad,
+      store: mockStore
+    })
+    expect(container.outerHTML).toMatchSnapshot()
+  })
+})