From ad2151b637141ac325605b14862bb45e01441cab Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Tue, 6 Aug 2024 17:28:14 -0700 Subject: [PATCH 01/12] fix 400 errors --- app/__init__.py | 2 +- app/assets/javascripts/activityChart.js | 6 +++++- app/main/views/dashboard.py | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/app/__init__.py b/app/__init__.py index f32a98b6c..55942769c 100644 --- a/app/__init__.py +++ b/app/__init__.py @@ -177,7 +177,7 @@ def create_app(application): init_govuk_frontend(application) init_jinja(application) - socketio.init_app(application) + socketio.init_app(application, cors_allowed_origins=['http://localhost:6012']) for client in ( csrf, diff --git a/app/assets/javascripts/activityChart.js b/app/assets/javascripts/activityChart.js index 84e5e3d51..75913c145 100644 --- a/app/assets/javascripts/activityChart.js +++ b/app/assets/javascripts/activityChart.js @@ -185,7 +185,7 @@ return; } - var socket = io(); + var socket = io("/services"); var eventType = type === 'service' ? 'fetch_daily_stats' : 'fetch_daily_stats_by_user'; var socketConnect = type === 'service' ? 'daily_stats_update' : 'daily_stats_by_user_update'; @@ -193,6 +193,10 @@ socket.emit(eventType); }); + socket.on('connect_error', function(error) { + console.error('WebSocket connection error:', error); + }); + socket.on(socketConnect, function(data) { var labels = []; diff --git a/app/main/views/dashboard.py b/app/main/views/dashboard.py index 32a0e46e2..9c3eb6527 100644 --- a/app/main/views/dashboard.py +++ b/app/main/views/dashboard.py @@ -32,7 +32,7 @@ from app.utils.user import user_has_permissions from notifications_utils.recipients import format_phone_number_human_readable -@socketio.on("fetch_daily_stats") +@socketio.on("fetch_daily_stats", namespace="/services") def handle_fetch_daily_stats(): service_id = session.get("service_id") if service_id: @@ -45,7 +45,7 @@ def handle_fetch_daily_stats(): emit("error", {"error": "No service_id provided"}) -@socketio.on("fetch_daily_stats_by_user") +@socketio.on("fetch_daily_stats_by_user", namespace="/services") def handle_fetch_daily_stats_by_user(): service_id = session.get("service_id") user_id = session.get("user_id") From 65d339fb8aafccf516e0122aef4269d5c021defe Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 15:16:09 -0700 Subject: [PATCH 02/12] fix jest testing errors --- tests/javascripts/totalMessagesChart.test.js | 45 +++++++++++--------- 1 file changed, 26 insertions(+), 19 deletions(-) diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index f0d7ee55d..6f74d0630 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -15,10 +15,11 @@ function loadScript(scriptContent) { Object.defineProperty(HTMLElement.prototype, 'clientWidth', { value: 600, writable: true, + configurable: true, }); // beforeAll hook to set up the DOM and load D3.js script -beforeAll(done => { +beforeEach(() => { // Set up the DOM with the D3 script included document.body.innerHTML = `
@@ -33,15 +34,13 @@ beforeAll(done => { loadScript(d3ScriptContent); // Wait a bit to ensure the script is executed - setTimeout(() => { - // Require the actual JavaScript file you are testing - require('../../app/assets/javascripts/totalMessagesChart.js'); - - // Call the function to create the chart - window.createTotalMessagesChart(); - - done(); - }, 100); + return new Promise(resolve => { + setTimeout(() => { + // Require the actual JavaScript file you are testing + require('../../app/assets/javascripts/totalMessagesChart.js'); + resolve(); + }, 100); + }); }); // Single test to check if D3 is loaded correctly @@ -52,15 +51,20 @@ test('D3 is loaded correctly', () => { }); // Test to check if the SVG element is correctly set up -test('SVG element is correctly set up', () => { - const svg = document.getElementById('totalMessageChart'); - expect(svg).not.toBeNull(); - expect(svg.getAttribute('width')).toBe('600'); - expect(svg.getAttribute('height')).toBe('64'); +test('SVG element is correctly set up', done => { + window.createTotalMessagesChart(); + + setTimeout(() => { + const svg = document.getElementById('totalMessageChart'); + expect(svg.getAttribute('width')).toBe('600'); + expect(svg.getAttribute('height')).toBe('64'); + done(); + }, 1000); // Ensure enough time for the DOM updates }); // Test to check if the table is created and populated correctly test('Populates the accessible table correctly', () => { + window.createTotalMessagesChart(); const table = document.getElementById('totalMessageTable').getElementsByTagName('table')[0]; expect(table).toBeDefined(); @@ -84,6 +88,8 @@ test('Chart title is correctly set', () => { // Test to check if the chart resizes correctly on window resize test('Chart resizes correctly on window resize', done => { + window.createTotalMessagesChart(); + setTimeout(() => { const svg = document.getElementById('totalMessageChart'); const chartContainer = document.getElementById('totalMessageChartContainer'); @@ -92,7 +98,7 @@ test('Chart resizes correctly on window resize', done => { expect(svg.getAttribute('width')).toBe('600'); // Set new container width - Object.defineProperty(chartContainer, 'clientWidth', { value: 800 }); + Object.defineProperty(chartContainer, 'clientWidth', { value: 800, configurable: true }); // Trigger resize event window.dispatchEvent(new Event('resize')); @@ -101,9 +107,9 @@ test('Chart resizes correctly on window resize', done => { // Check if SVG width is updated expect(svg.getAttribute('width')).toBe('800'); done(); - }, 500); // Adjust the timeout if necessary + }, 1000); // Adjust the timeout if necessary }, 1000); // Initial wait for the chart to render -}, 10000); // Adjust the overall test timeout if necessary +}, 15000); // Adjust the overall test timeout if necessary // Testing the tooltip test('Tooltip displays on hover', () => { @@ -148,6 +154,7 @@ test('Tooltip displays on hover', () => { // Test to ensure SVG bars are created and animated correctly test('SVG bars are created and animated correctly', done => { + window.createTotalMessagesChart(); const svg = document.getElementById('totalMessageChart'); // Initial check @@ -176,7 +183,7 @@ test('Handles zero width chart container', () => { Object.defineProperty(document.getElementById('totalMessageChartContainer'), 'clientWidth', { value: 0 }); // Call the function to create the chart - createTotalMessagesChart(); + window.createTotalMessagesChart(); // Check if the console error was called expect(consoleSpy).toHaveBeenCalledWith('Chart container width is 0, cannot set SVG width.'); From 4bfbd9f71f337953d5b18722f91135419948786e Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 15:27:43 -0700 Subject: [PATCH 03/12] fixing console errors --- app/assets/javascripts/totalMessagesChart.js | 4 ++-- tests/javascripts/totalMessagesChart.test.js | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index ff409c969..f437cfc4c 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -25,10 +25,10 @@ // Ensure the width is set correctly if (width === 0) { - console.error('Chart container width is 0, cannot set SVG width.'); - return; + throw new Error('Chart container width is 0, cannot set SVG width.'); } + svg.attr("width", width).attr("height", height); var x = d3.scaleLinear() diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index 6f74d0630..e4a3708c5 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -182,14 +182,14 @@ test('Handles zero width chart container', () => { // Set chart container width to 0 Object.defineProperty(document.getElementById('totalMessageChartContainer'), 'clientWidth', { value: 0 }); + try { // Call the function to create the chart window.createTotalMessagesChart(); - - // Check if the console error was called - expect(consoleSpy).toHaveBeenCalledWith('Chart container width is 0, cannot set SVG width.'); - - consoleSpy.mockRestore(); - }); + } catch (error) { + // Check if the error message is as expected + expect(error.message).toBe('Chart container width is 0, cannot set SVG width.'); + } +}); test('Creates chart on DOMContentLoaded', () => { const createTotalMessagesChartSpy = jest.spyOn(window, 'createTotalMessagesChart'); From 5797e989fdd97e64657716c4d6bd346deb8c8d2d Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 15:33:08 -0700 Subject: [PATCH 04/12] fixing console errors --- app/assets/javascripts/totalMessagesChart.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index f437cfc4c..aec3e8ba3 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -28,7 +28,6 @@ throw new Error('Chart container width is 0, cannot set SVG width.'); } - svg.attr("width", width).attr("height", height); var x = d3.scaleLinear() From f65655e56c91aefa840b6a6bff5e4fb27a614aa7 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 15:42:46 -0700 Subject: [PATCH 05/12] fixing console errors --- app/assets/javascripts/totalMessagesChart.js | 3 ++- tests/javascripts/totalMessagesChart.test.js | 19 ++++++++++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index aec3e8ba3..ff409c969 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -25,7 +25,8 @@ // Ensure the width is set correctly if (width === 0) { - throw new Error('Chart container width is 0, cannot set SVG width.'); + console.error('Chart container width is 0, cannot set SVG width.'); + return; } svg.attr("width", width).attr("height", height); diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index e4a3708c5..bb2e770d5 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -179,16 +179,17 @@ test('Handles zero width chart container', () => { // Mock console.error const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - // Set chart container width to 0 - Object.defineProperty(document.getElementById('totalMessageChartContainer'), 'clientWidth', { value: 0 }); + // Set chart container width to 0 + const chartContainer = document.getElementById('totalMessageChartContainer'); + Object.defineProperty(chartContainer, 'clientWidth', { value: 0, configurable: true }); - try { - // Call the function to create the chart - window.createTotalMessagesChart(); - } catch (error) { - // Check if the error message is as expected - expect(error.message).toBe('Chart container width is 0, cannot set SVG width.'); - } + // Call the function to create the chart + window.createTotalMessagesChart(); + + // Check if the console error was called + expect(consoleSpy).toHaveBeenCalledWith('Chart container width is 0, cannot set SVG width.'); + + consoleSpy.mockRestore(); }); test('Creates chart on DOMContentLoaded', () => { From c6f1ae37a44681b8991405af89f68cf7fa18eee2 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 15:47:33 -0700 Subject: [PATCH 06/12] fixing console errors --- app/assets/javascripts/totalMessagesChart.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index ff409c969..d83c66841 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -23,12 +23,6 @@ var width = chartContainer.clientWidth; var height = 64; - // Ensure the width is set correctly - if (width === 0) { - console.error('Chart container width is 0, cannot set SVG width.'); - return; - } - svg.attr("width", width).attr("height", height); var x = d3.scaleLinear() From a6ac7086da69380aeee15c11520f1dd8fac32981 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 15:48:35 -0700 Subject: [PATCH 07/12] fixing console errors --- tests/javascripts/totalMessagesChart.test.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index bb2e770d5..a8f9fe65d 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -174,23 +174,6 @@ test('SVG bars are created and animated correctly', done => { }, 1500); // Duration of the animation + buffer time }); -// Test to check console error when chart container width is 0 -test('Handles zero width chart container', () => { - // Mock console.error - const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - - // Set chart container width to 0 - const chartContainer = document.getElementById('totalMessageChartContainer'); - Object.defineProperty(chartContainer, 'clientWidth', { value: 0, configurable: true }); - - // Call the function to create the chart - window.createTotalMessagesChart(); - - // Check if the console error was called - expect(consoleSpy).toHaveBeenCalledWith('Chart container width is 0, cannot set SVG width.'); - - consoleSpy.mockRestore(); -}); test('Creates chart on DOMContentLoaded', () => { const createTotalMessagesChartSpy = jest.spyOn(window, 'createTotalMessagesChart'); From 92026a83aab18c1a115db4b65543e9628b6d42e3 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 15:54:21 -0700 Subject: [PATCH 08/12] fixing console errors --- tests/javascripts/totalMessagesChart.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index a8f9fe65d..ca4fd16ad 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -173,8 +173,7 @@ test('SVG bars are created and animated correctly', done => { done(); }, 1500); // Duration of the animation + buffer time }); - - +console.log('update') test('Creates chart on DOMContentLoaded', () => { const createTotalMessagesChartSpy = jest.spyOn(window, 'createTotalMessagesChart'); From 2bb398a962d2f693e3e7ca95e0911d48f47257d6 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 15:54:54 -0700 Subject: [PATCH 09/12] fixing console errors --- app/assets/javascripts/totalMessagesChart.js | 1 + tests/javascripts/totalMessagesChart.test.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index d83c66841..0ccbf71e8 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -22,6 +22,7 @@ var svg = d3.select("#totalMessageChart"); var width = chartContainer.clientWidth; var height = 64; + console.log('update') svg.attr("width", width).attr("height", height); diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index ca4fd16ad..17c09a87f 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -173,7 +173,7 @@ test('SVG bars are created and animated correctly', done => { done(); }, 1500); // Duration of the animation + buffer time }); -console.log('update') + test('Creates chart on DOMContentLoaded', () => { const createTotalMessagesChartSpy = jest.spyOn(window, 'createTotalMessagesChart'); From 1a75fc51429e2971bb5c3f862b0c1027a72a43be Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 16:44:02 -0700 Subject: [PATCH 10/12] fixed coverage report --- tests/javascripts/activityChart.test.js | 41 +++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/tests/javascripts/activityChart.test.js b/tests/javascripts/activityChart.test.js index a8b520aa7..830534b66 100644 --- a/tests/javascripts/activityChart.test.js +++ b/tests/javascripts/activityChart.test.js @@ -124,3 +124,44 @@ test('Check HTML content after chart creation', () => { expect(container.querySelector('svg')).not.toBeNull(); expect(container.querySelectorAll('rect').length).toBeGreaterThan(0); }); + + +test('Initial fetch data populates chart and table', done => { + const mockData = { + '2024-07-01': { sms: { delivered: 50, failed: 5 } }, + '2024-07-02': { sms: { delivered: 60, failed: 2 } }, + '2024-07-03': { sms: { delivered: 70, failed: 1 } }, + '2024-07-04': { sms: { delivered: 80, failed: 0 } }, + '2024-07-05': { sms: { delivered: 90, failed: 3 } }, + '2024-07-06': { sms: { delivered: 100, failed: 4 } }, + '2024-07-07': { sms: { delivered: 110, failed: 2 } }, + }; + + const socket = { + on: jest.fn((event, callback) => { + if (event === 'daily_stats_update') { + console.log('Mock data:', mockData); + callback(mockData); + done(); + } + }), + emit: jest.fn(), + }; + window.io = jest.fn(() => socket); + + document.dispatchEvent(new Event('DOMContentLoaded')); + + setTimeout(() => { + const table = document.getElementById('weeklyTable'); + expect(table).toBeDefined(); + + const rows = table.getElementsByTagName('tr'); + expect(rows.length).toBe(8); + + const firstRowCells = rows[1].getElementsByTagName('td'); + console.log('First row cells:', firstRowCells); + expect(firstRowCells[0].textContent).toBe('07/01/24'); + expect(firstRowCells[1].textContent).toBe('50'); + expect(firstRowCells[2].textContent).toBe('5'); + }, 100); +}); From 86748c331702bd1627bcbf9a81ca197440861bad Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 17:03:25 -0700 Subject: [PATCH 11/12] js lint --- app/assets/javascripts/totalMessagesChart.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index 0ccbf71e8..ff409c969 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -22,7 +22,12 @@ var svg = d3.select("#totalMessageChart"); var width = chartContainer.clientWidth; var height = 64; - console.log('update') + + // Ensure the width is set correctly + if (width === 0) { + console.error('Chart container width is 0, cannot set SVG width.'); + return; + } svg.attr("width", width).attr("height", height); From b426a17cf86d49f9060fb455f59219524e261ad8 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Wed, 7 Aug 2024 17:15:15 -0700 Subject: [PATCH 12/12] fix activity jtest test --- tests/javascripts/activityChart.test.js | 1 - tests/javascripts/totalMessagesChart.test.js | 17 +++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/tests/javascripts/activityChart.test.js b/tests/javascripts/activityChart.test.js index 830534b66..2bca46d0f 100644 --- a/tests/javascripts/activityChart.test.js +++ b/tests/javascripts/activityChart.test.js @@ -140,7 +140,6 @@ test('Initial fetch data populates chart and table', done => { const socket = { on: jest.fn((event, callback) => { if (event === 'daily_stats_update') { - console.log('Mock data:', mockData); callback(mockData); done(); } diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index 17c09a87f..22bc39500 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -174,6 +174,23 @@ test('SVG bars are created and animated correctly', done => { }, 1500); // Duration of the animation + buffer time }); +// Test to check console error when chart container width is 0 +test('Handles zero width chart container', () => { + // Mock console.error + const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + + // Set chart container width to 0 + Object.defineProperty(document.getElementById('totalMessageChartContainer'), 'clientWidth', { value: 0 }); + + // Call the function to create the chart + createTotalMessagesChart(); + + // Check if the console error was called + expect(consoleSpy).toHaveBeenCalledWith('Chart container width is 0, cannot set SVG width.'); + + consoleSpy.mockRestore(); + }); + test('Creates chart on DOMContentLoaded', () => { const createTotalMessagesChartSpy = jest.spyOn(window, 'createTotalMessagesChart');