feat: add new module to reference DOM elements

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

.mocharc.cjs

@@ -4,4 +4,5 @@ module.exports = {
   color: true,
   recursive: true,
   reporter: 'tap',
+  require: ['./test/fake-browser.js']
 }

src/js/dom.js

@@ -0,0 +1,53 @@
+export const dom = {
+  canvas: getCanvas(),
+  xinput: getXInput(),
+  yinput: getYInput()
+}
+
+/**
+ * Queries the DOM for a reference to the canvas element.
+ *
+ * @returns {HTMLCanvasElement}
+ * @throws {Error}
+ */
+function getCanvas () {
+  const canvas = document.getElementById('game')
+
+  if (!canvas) {
+    throw new Error('Canvas element not found!')
+  }
+
+  return /** @type {HTMLCanvasElement} */(canvas)
+}
+
+/**
+ * Queries the DOM for a reference to the xinput element.
+ *
+ * @returns {HTMLInputElement}
+ * @throws {Error}
+ */
+function getXInput () {
+  const xinput = document.getElementById('xgravity')
+
+  if (!xinput) {
+    throw new Error('Input element xgravity not found!')
+  }
+
+  return /** @type {HTMLInputElement} */(xinput)
+}
+
+/**
+ * Queries the DOM for a reference to the yinput element.
+ *
+ * @returns {HTMLInputElement}
+ * @throws {Error}
+ */
+function getYInput () {
+  const yinput = document.getElementById('ygravity')
+
+  if (!yinput) {
+    throw new Error('Input element ygravity not found!')
+  }
+
+  return /** @type {HTMLInputElement} */(yinput)
+}

test/fake-browser.js

@@ -0,0 +1,11 @@
+// This file is to executed by mocha before the tests are run
+global.document = {
+  createElement: function () {},
+  getElementById: function (id) {
+    // TODO: Decide according to `id` which fake element to return
+    return {
+      id
+    }
+  }
+}
+

test/js/dom.test.js

@@ -0,0 +1,38 @@
+import { expect } from 'chai'
+
+import { dom } from '../../src/js/dom.js'
+
+describe('DOM', function () {
+  it('should get a reference to the canvas element', function () {
+    // Arrange
+    /* Nothing to do */
+
+    // Act
+    const { canvas } = dom
+
+    // Assert
+    expect(canvas).not.to.be.undefined
+  })
+
+  it('should get a reference to the xinput element', function () {
+    // Arrange
+    /* Nothing to do */
+
+    // Act
+    const { xinput } = dom
+
+    // Assert
+    expect(xinput).not.to.be.undefined
+  })
+
+  it('should get a reference to the yinput element', function () {
+    // Arrange
+    /* Nothing to do */
+
+    // Act
+    const { yinput } = dom
+
+    // Assert
+    expect(yinput).not.to.be.undefined
+  })
+})

types/dom.d.ts

@@ -0,0 +1,5 @@
+export namespace dom {
+    const canvas: HTMLCanvasElement;
+    const xinput: HTMLInputElement;
+    const yinput: HTMLInputElement;
+}