Writing tests for chartDashboard.js

tests/javascripts/chartDashboard.test.js

@@ -0,0 +1,61 @@
+beforeAll(done => {
+  // Set up the DOM
+  document.body.innerHTML = `
+    <div id="chartContainer" data-sms-sent="100" data-sms-allowance-remaining="200" style="width: 600px;">
+      <h1 id="chartTitle">Total Messages</h1>
+      <canvas id="totalMessageChart"></canvas>
+    </div>
+    <div id="totalMessageTable"></div>
+    <div id="message"></div>
+  `;
+
+  // Mock the global Chart constructor
+  global.Chart = jest.fn().mockImplementation((context, config) => {
+    return {
+      data: config.data,
+      options: config.options,
+      resize: jest.fn(),
+      update: jest.fn(),
+    };
+  });
+
+  // Ensure instances array is reset for each test
+  global.Chart.mock.instances = [];
+
+  // Trigger the script
+  require('../../app/assets/javascripts/chartDashboard.js');
+
+  // Delay to ensure DOMContentLoaded and script execution
+  setTimeout(done, 100);
+});
+
+test('Canvas element is correctly set up', () => {
+  const canvas = document.getElementById('totalMessageChart');
+  expect(canvas.width).toBe(canvas.parentElement.clientWidth);
+  expect(canvas.height).toBe(100);
+});
+
+test('Populates the accessible table correctly', () => {
+  const table = document.getElementById('totalMessageTable').getElementsByTagName('table')[0];
+  expect(table).toBeDefined();
+
+  const rows = table.getElementsByTagName('tr');
+  expect(rows.length).toBe(3); // Header + 2 data rows
+
+  const headers = rows[0].getElementsByTagName('th');
+  expect(headers[0].textContent).toBe('Label');
+  expect(headers[1].textContent).toBe('Value');
+
+  const firstRowCells = rows[1].getElementsByTagName('td');
+  expect(firstRowCells[0].textContent).toBe('Messages Sent');
+  expect(firstRowCells[1].textContent).toBe('100');
+
+  const secondRowCells = rows[2].getElementsByTagName('td');
+  expect(secondRowCells[0].textContent).toBe('Remaining');
+  expect(secondRowCells[1].textContent).toBe('200');
+});
+
+test('Chart title is correctly set', () => {
+  const chartTitle = document.getElementById('chartTitle').textContent;
+  expect(chartTitle).toBe('Total Messages');
+});

tests/javascripts/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
       statements: 90,
     }
   },
-  setupFiles: ['./support/setup.js'],
+  setupFiles: ['./support/setup.js', './support/jest.setup.js'],
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'https://beta.notify.gov',

tests/javascripts/support/jest.setup.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+const path = require('path');
+
+// Polyfill holes in JSDOM
+require('./polyfills.js');
+
+// Set up jQuery
+global.$ = global.jQuery = require('jquery');
+
+// Load module code
+require('govuk_frontend_toolkit/javascripts/govuk/modules.js');

tests/javascripts/support/setup.js

@@ -1,9 +1,11 @@
+const fs = require('fs');
+const path = require('path');
+
 // Polyfill holes in JSDOM
 require('./polyfills.js');
 
-// set up jQuery
-window.jQuery = require('jquery');
-$ = window.jQuery;
+// Set up jQuery
+global.$ = global.jQuery = require('jquery');
 
-// load module code
+// Load module code
 require('govuk_frontend_toolkit/javascripts/govuk/modules.js');