From cdba3e31b56848d097b086e9a48bb1ce76b8e180 Mon Sep 17 00:00:00 2001
From: Steven Huss-Lederman <huss@beloit.edu>
Date: Sun, 12 Jan 2025 09:00:49 -0600
Subject: [PATCH 1/3] formatting
- Convert space indenting to tabs.
- Autoformat to fix up.
---
cypress.config.ts | 18 +--
src/cypress/e2e/general_ui.cy.ts | 181 ++++++++++++++---------------
src/cypress/e2e/hideOptions.cy.ts | 46 ++++----
src/cypress/e2e/initLangTest.cy.ts | 32 ++---
src/cypress/e2e/line.cy.ts | 132 ++++++++++-----------
src/cypress/e2e/pagesGroups.cy.ts | 32 ++---
src/cypress/e2e/pagesMeters.cy.ts | 34 +++---
src/cypress/e2e/tooltipIcon.cy.ts | 39 +++----
src/cypress/support/commands.ts | 4 +-
9 files changed, 258 insertions(+), 260 deletions(-)
diff --git a/cypress.config.ts b/cypress.config.ts
index 340228efb..92ee458d6 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -5,12 +5,12 @@
import { defineConfig } from "cypress";
export default defineConfig({
- e2e: {
- setupNodeEvents(on, config) {
- // implement node event listeners here
- },
- specPattern: 'src/cypress/e2e/*.cy.ts',
- supportFile: 'src/cypress/support/e2e.ts',
- screenshotsFolder: 'cypress/screenshots/e2e',
- },
-});
\ No newline at end of file
+ e2e: {
+ setupNodeEvents(on, config) {
+ // implement node event listeners here
+ },
+ specPattern: 'src/cypress/e2e/*.cy.ts',
+ supportFile: 'src/cypress/support/e2e.ts',
+ screenshotsFolder: 'cypress/screenshots/e2e',
+ }
+});
diff --git a/src/cypress/e2e/general_ui.cy.ts b/src/cypress/e2e/general_ui.cy.ts
index 5c092d666..330c33f20 100644
--- a/src/cypress/e2e/general_ui.cy.ts
+++ b/src/cypress/e2e/general_ui.cy.ts
@@ -1,96 +1,95 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+
describe('UI Functionality Tests for Open Energy Dashboard', () => {
- beforeEach(() => {
- // Visit the page before each test
- cy.visit('/');
- });
-
- it('Tests all buttons functionality', () => {
- // Ensure buttons are visible and clickable
- cy.get('button').should('have.length.greaterThan', 0); // Ensure buttons exist
- cy.get('button').each((button) => {
- cy.wrap(button).should('be.visible'); // Check visibility
- cy.wrap(button).click({ force: true }); // Test click
- });
- });
-
- it('Tests all form inputs', () => {
- // Test text and email inputs
- cy.get('input[type="text"], input[type="email"]').each((input) => {
- cy.wrap(input).should('be.visible').type("Sample Text"); // Check visibility and type
- });
-
- // Test password inputs
- cy.get('input[type="password"]').each((input) => {
- cy.wrap(input).should('be.visible').type('SamplePassword123');
- });
-
- // Test textareas
- cy.get('textarea').each((textarea) => {
- cy.wrap(textarea).should('be.visible').type('Sample description text');
- });
-
- // Submit forms
- cy.get('form').each((form) => {
- cy.wrap(form).within(() => {
- cy.get('button[type="submit"], input[type="submit"]').click({ force: true });
- });
- });
- });
+ beforeEach(() => {
+ // Visit the page before each test
+ cy.visit('/');
+ });
+
+ it('Tests all buttons functionality', () => {
+ // Ensure buttons are visible and clickable
+ cy.get('button').should('have.length.greaterThan', 0); // Ensure buttons exist
+ cy.get('button').each((button) => {
+ cy.wrap(button).should('be.visible'); // Check visibility
+ cy.wrap(button).click({ force: true }); // Test click
+ });
+ });
+
+ it('Tests all form inputs', () => {
+ // Test text and email inputs
+ cy.get('input[type="text"], input[type="email"]').each((input) => {
+ cy.wrap(input).should('be.visible').type("Sample Text"); // Check visibility and type
+ });
+
+ // Test password inputs
+ cy.get('input[type="password"]').each((input) => {
+ cy.wrap(input).should('be.visible').type('SamplePassword123');
+ });
+
+ // Test textareas
+ cy.get('textarea').each((textarea) => {
+ cy.wrap(textarea).should('be.visible').type('Sample description text');
+ });
+
+ // Submit forms
+ cy.get('form').each((form) => {
+ cy.wrap(form).within(() => {
+ cy.get('button[type="submit"], input[type="submit"]').click({ force: true });
+ });
+ });
+ });
+
+ it('Tests dropdown menus', () => {
+ // Ensure dropdowns are visible and options are selectable
+ cy.get('select').should('have.length.greaterThan', 0); // Ensure dropdowns exist
+ cy.get('select').each((dropdown) => {
+ cy.wrap(dropdown)
+ .should('be.visible') // Check visibility
+ .find('option')
+ .should('have.length.greaterThan', 1); // Ensure options exist
+
+ // Select the first option (change index as needed)
+ cy.wrap(dropdown).select(0);
+ });
+ });
+
+ it('Tests links for navigation', () => {
+ // Ensure links have valid href attributes
+ cy.get('a[href]').each((link) => {
+ cy.wrap(link).should('have.attr', 'href').and('not.be.empty'); // Check href exists
+ });
+ });
- it('Tests dropdown menus', () => {
- // Ensure dropdowns are visible and options are selectable
- cy.get('select').should('have.length.greaterThan', 0); // Ensure dropdowns exist
- cy.get('select').each((dropdown) => {
- cy.wrap(dropdown)
- .should('be.visible') // Check visibility
- .find('option')
- .should('have.length.greaterThan', 1); // Ensure options exist
-
- // Select the first option (change index as needed)
- cy.wrap(dropdown).select(0);
- });
- });
-
- it('Tests links for navigation', () => {
- // Ensure links have valid href attributes
- cy.get('a[href]').each((link) => {
- cy.wrap(link).should('have.attr', 'href').and('not.be.empty'); // Check href exists
- });
- });
-
- it('Tests modals for correct behavior', () => {
- // Ensure modals can be triggered and closed
- cy.get('[data-bs-toggle="modal"]').each((modalTrigger) => {
- cy.wrap(modalTrigger).should('be.visible').click(); // Trigger modal
- cy.get('.modal').should('be.visible'); // Check modal is visible
- cy.get('.modal .close').click(); // Close modal
- cy.get('.modal').should('not.be.visible'); // Check modal is closed
- });
- });
- it('Tests tables for data population', () => {
- // Ensure tables are populated with rows
- cy.get('table').should('have.length.greaterThan', 0); // Ensure tables exist
- cy.get('table').each((table) => {
- cy.wrap(table).find('tr').should('have.length.greaterThan', 1); // At least one row
- });
- });
- it('Tests interactive inputs (checkboxes and radio)', () => {
- // Check and uncheck checkboxes
- cy.get('input[type="checkbox"]').each((checkbox) => {
- cy.wrap(checkbox).check({ force: true }).should('be.checked'); // Check it
- cy.wrap(checkbox).uncheck({ force: true }).should('not.be.checked'); // Uncheck it
- });
- cy.get('input[type="radio"]').each((radio) => {
- cy.wrap(radio).check({ force: true }).should('be.checked'); // Check radio
- });
- });
- it('Tests for dynamic elements', () => {
- // Ensure dynamically loaded elements exist and are visible
- cy.get('[data-dynamic]').should('exist').and('be.visible');
- });
- });
-
\ No newline at end of file
+ it('Tests modals for correct behavior', () => {
+ // Ensure modals can be triggered and closed
+ cy.get('[data-bs-toggle="modal"]').each((modalTrigger) => {
+ cy.wrap(modalTrigger).should('be.visible').click(); // Trigger modal
+ cy.get('.modal').should('be.visible'); // Check modal is visible
+ cy.get('.modal .close').click(); // Close modal
+ cy.get('.modal').should('not.be.visible'); // Check modal is closed
+ });
+ });
+ it('Tests tables for data population', () => {
+ // Ensure tables are populated with rows
+ cy.get('table').should('have.length.greaterThan', 0); // Ensure tables exist
+ cy.get('table').each((table) => {
+ cy.wrap(table).find('tr').should('have.length.greaterThan', 1); // At least one row
+ });
+ });
+ it('Tests interactive inputs (checkboxes and radio)', () => {
+ // Check and uncheck checkboxes
+ cy.get('input[type="checkbox"]').each((checkbox) => {
+ cy.wrap(checkbox).check({ force: true }).should('be.checked'); // Check it
+ cy.wrap(checkbox).uncheck({ force: true }).should('not.be.checked'); // Uncheck it
+ });
+ cy.get('input[type="radio"]').each((radio) => {
+ cy.wrap(radio).check({ force: true }).should('be.checked'); // Check radio
+ });
+ });
+ it('Tests for dynamic elements', () => {
+ // Ensure dynamically loaded elements exist and are visible
+ cy.get('[data-dynamic]').should('exist').and('be.visible');
+ });
+});
diff --git a/src/cypress/e2e/hideOptions.cy.ts b/src/cypress/e2e/hideOptions.cy.ts
index 184101a4c..c869f5341 100644
--- a/src/cypress/e2e/hideOptions.cy.ts
+++ b/src/cypress/e2e/hideOptions.cy.ts
@@ -1,38 +1,38 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+
describe("Options Menu Tests", () => {
- beforeEach(() => {
- // Visit the OED application
- cy.visit("/");
- });
+ beforeEach(() => {
+ // Visit the OED application
+ cy.visit("/");
+ });
+
+ it("should toggle the visibility of graph configuration options when 'Hide options' is clicked", () => {
+ // Open the Options dropdown
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(3) > a").click();
- it("should toggle the visibility of graph configuration options when 'Hide options' is clicked", () => {
- // Open the Options dropdown
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(3) > a").click();
+ // Click "Hide options"
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li.dropdown.show.nav-item > div > button:nth-child(2)").click();
- // Click "Hide options"
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li.dropdown.show.nav-item > div > button:nth-child(2)").click();
+ // Verify that graph configuration options are hidden
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(2) > a").should("not.exist"); // pages
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(3) > a").should("not.exist"); // options
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > a:nth-child(4)").should("not.exist"); // help
- // Verify that graph configuration options are hidden
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(2) > a").should("not.exist"); // pages
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(3) > a").should("not.exist"); // options
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > a:nth-child(4)").should("not.exist"); // help
-
- // Click "Menu" again to toggle visibility back
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > button").click();
- cy.get("body > div:nth-child(4) > div > div.modal.fade.show > div > div > div.modal-header > div > h6 > div > nav > div > ul > li:nth-child(3) > a").click();
- cy.get("body > div:nth-child(4) > div > div.modal.fade.show > div > div > div.modal-header > div > h6 > div > nav > div > ul > li.dropdown.show.nav-item > div > button:nth-child(2)").click();
+ // Click "Menu" again to toggle visibility back
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > button").click();
+ cy.get("body > div:nth-child(4) > div > div.modal.fade.show > div > div > div.modal-header > div > h6 > div > nav > div > ul > li:nth-child(3) > a").click();
+ cy.get("body > div:nth-child(4) > div > div.modal.fade.show > div > div > div.modal-header > div > h6 > div > nav > div > ul > li.dropdown.show.nav-item > div > button:nth-child(2)").click();
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(2) > a").should("be.visible"); // pages
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(3) > a").should("be.visible"); // options
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > a:nth-child(4)").should("be.visible"); // help
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(2) > a").should("be.visible"); // pages
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(3) > a").should("be.visible"); // options
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > a:nth-child(4)").should("be.visible"); // help
- });
+ });
});
diff --git a/src/cypress/e2e/initLangTest.cy.ts b/src/cypress/e2e/initLangTest.cy.ts
index 1f520ad04..baf6a2b7a 100644
--- a/src/cypress/e2e/initLangTest.cy.ts
+++ b/src/cypress/e2e/initLangTest.cy.ts
@@ -1,25 +1,25 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
- describe("Language Selector Tests", () => {
- beforeEach(() => {
- // Visit the OED application
- cy.visit("/");
- });
- it("should update the UI and React state when the language is changed", () => {
- // Open the language selection dropdown
+describe("Language Selector Tests", () => {
+ beforeEach(() => {
+ // Visit the OED application
+ cy.visit("/");
+ });
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(3) > a").click();
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li.dropdown.show.nav-item > div > div.dropdown.dropstart > a").click();
+ it("should update the UI and React state when the language is changed", () => {
+ // Open the language selection dropdown
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(3) > a").click();
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li.dropdown.show.nav-item > div > div.dropdown.dropstart > a").click();
- // Select a specific language (e.g., Spanish)
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li.dropdown.show.nav-item > div > div.dropdown.dropstart.show > div").contains("Español").click();
- // Verify that UI elements are updated to the selected language
- cy.get("body").should("contain", "Tipo de gráfico"); // Example text in Spanish for "Graph Type"
+ // Select a specific language (e.g., Spanish)
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li.dropdown.show.nav-item > div > div.dropdown.dropstart.show > div").contains("Español").click();
- });
-});
\ No newline at end of file
+ // Verify that UI elements are updated to the selected language
+ cy.get("body").should("contain", "Tipo de gráfico"); // Example text in Spanish for "Graph Type"
+
+ });
+});
diff --git a/src/cypress/e2e/line.cy.ts b/src/cypress/e2e/line.cy.ts
index ed857e347..e8ecb9a15 100644
--- a/src/cypress/e2e/line.cy.ts
+++ b/src/cypress/e2e/line.cy.ts
@@ -8,78 +8,78 @@ describe('template spec', () => {
cy.visit('/');
});
- // Graph Type is Line
- it('should display a line graph type automatically', () => {
- // Find the line chart
- cy.get('#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-2.d-none.d-lg-block > div > div.dropdown > button').should('have.text', 'Line');
- cy.screenshot('ShowLineTypeOption')
+ // Graph Type is Line
+ it('should display a line graph type automatically', () => {
+ // Find the line chart
+ cy.get('#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-2.d-none.d-lg-block > div > div.dropdown > button').should('have.text', 'Line');
+ cy.screenshot('ShowLineTypeOption')
- });
- // Checking all group options
- it('groups should be clickable and display 10 options and 1 incompatiable option', () => {
- // Find and click the group
- cy.get('#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-2.d-none.d-lg-block > div > div:nth-child(4) > div:nth-child(2) > div > div.css-1fdsijx-ValueContainer').click().should('be.visible');
- // Check if the 10 options are there
- cy.get('#react-select-2-listbox > div:nth-child(1) > div:nth-child(2)').children().should('have.length', 10);
- cy.get('#react-select-2-group-0-heading > div > span.badge.bg-primary.rounded-pill').should('have.text', '10');
- // check if the incompatiable option is visible and not clickable
- cy.get('#react-select-2-option-1-0').should('exist')
- .should('have.attr', 'aria-disabled', 'true') // Check the aria-disabled attribute
- .should('have.attr', 'tabindex', '-1') // Validate tabindex to confirm it’s not focusable
- });
- it('selecting menu option should display 25 options and plotly graph', () => {
- //open menu option
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-2.d-none.d-lg-block > div > div:nth-child(4) > div:nth-child(4) > div > div.css-1fdsijx-ValueContainer").click().should('be.visible');
- // Verify all options
- cy.get("#react-select-3-listbox > div > div:nth-child(2)").children().should('have.length', 25);
- // click on Cos 23 Min KWH
- cy.get("#react-select-3-option-0-0").should('exist').click();
-
- // plotly element show be dynamically created: check for plotly display
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div")
- .should('exist');
+ });
+ // Checking all group options
+ it('groups should be clickable and display 10 options and 1 incompatiable option', () => {
+ // Find and click the group
+ cy.get('#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-2.d-none.d-lg-block > div > div:nth-child(4) > div:nth-child(2) > div > div.css-1fdsijx-ValueContainer').click().should('be.visible');
+ // Check if the 10 options are there
+ cy.get('#react-select-2-listbox > div:nth-child(1) > div:nth-child(2)').children().should('have.length', 10);
+ cy.get('#react-select-2-group-0-heading > div > span.badge.bg-primary.rounded-pill').should('have.text', '10');
+ // check if the incompatiable option is visible and not clickable
+ cy.get('#react-select-2-option-1-0').should('exist')
+ .should('have.attr', 'aria-disabled', 'true') // Check the aria-disabled attribute
+ .should('have.attr', 'tabindex', '-1') // Validate tabindex to confirm it’s not focusable
+ });
+ it('selecting menu option should display 25 options and plotly graph', () => {
+ //open menu option
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-2.d-none.d-lg-block > div > div:nth-child(4) > div:nth-child(4) > div > div.css-1fdsijx-ValueContainer").click().should('be.visible');
+ // Verify all options
+ cy.get("#react-select-3-listbox > div > div:nth-child(2)").children().should('have.length', 25);
+ // click on Cos 23 Min KWH
+ cy.get("#react-select-3-option-0-0").should('exist').click();
+
+ // plotly element show be dynamically created: check for plotly display
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div")
+ .should('exist');
- //meter name should be displayed
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(3) > g.infolayer > g.legend > g > g > g > text").should('have.text', 'Cos 23 Min kWh');
+ //meter name should be displayed
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(3) > g.infolayer > g.legend > g > g > g > text").should('have.text', 'Cos 23 Min kWh');
- // checking x-axis labels
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(1) > text").should('have.text', 'Mar 2020');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(2) > text").should('have.text', 'May 2020');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(3) > text").should('have.text', 'Jul 2020');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(4) > text").should('have.text', 'Sep 2020');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(5) > text").should('have.text', 'Nov 2020');
+ // checking x-axis labels
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(1) > text").should('have.text', 'Mar 2020');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(2) > text").should('have.text', 'May 2020');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(3) > text").should('have.text', 'Jul 2020');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(4) > text").should('have.text', 'Sep 2020');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.xaxislayer-above > g:nth-child(5) > text").should('have.text', 'Nov 2020');
- // checking y-axis labels
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(1) > text").should('have.text', '0');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(2) > text").should('have.text', '0.5');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(3) > text").should('have.text', '1');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(4) > text").should('have.text', '1.5');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(5) > text").should('have.text', '2');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(6) > text").should('have.text', '2.5');
- cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(7) > text").should('have.text', '3');
+ // checking y-axis labels
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(1) > text").should('have.text', '0');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(2) > text").should('have.text', '0.5');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(3) > text").should('have.text', '1');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(4) > text").should('have.text', '1.5');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(5) > text").should('have.text', '2');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(6) > text").should('have.text', '2.5');
+ cy.get("#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.yaxislayer-above > g:nth-child(7) > text").should('have.text', '3');
-
- /*
- TODO: We want to check if the graph displays correct information.
- After a meter or group is selected a get request is made to the server to get the data for the graph to the following endpoint:
- http://localhost:3000/api/unitReadings/line/meters/21?timeInterval=all&graphicUnitId=1
- The response is a json object with the data that is used to plot the graph.
- It might be possible to check the json object to see if the data is correct.
- Testing methods to
- The line in the graph is rendered as path class ="js-line"
+ /*
+ TODO: We want to check if the graph displays correct information.
+ After a meter or group is selected a get request is made to the server to get the data for the graph to the following endpoint:
+ http://localhost:3000/api/unitReadings/line/meters/21?timeInterval=all&graphicUnitId=1
+ The response is a json object with the data that is used to plot the graph.
+ It might be possible to check the json object to see if the data is correct.
- Main Graph:
- #root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.plot > g > g > g.lines > path
+ Testing methods to
+ The line in the graph is rendered as path class ="js-line"
- Drag Bar:
- #root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(3) > g.infolayer > g.rangeslider-container > g.rangeslider-rangeplot.xy > g.plot > g > g > g.lines > path
+ Main Graph:
+ #root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.plot > g > g > g.lines > path
+
+ Drag Bar:
+ #root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-12.col-lg-10.align-self-auto.text-center > div > div.js-plotly-plot > div > div > svg:nth-child(3) > g.infolayer > g.rangeslider-container > g.rangeslider-rangeplot.xy > g.plot > g > g > g.lines > path
+
+ We could possibly simulate moving a mouse over the graph to check if the data is correct.
+ Clicking and dragging the bottom drag bar then refreshing the page
+
+ And checking the time interval in which the data is displayed. (From seconds to day...)
+ */
+ });
- We could possibly simulate moving a mouse over the graph to check if the data is correct.
- Clicking and dragging the bottom drag bar then refreshing the page
-
- And checking the time interval in which the data is displayed. (From seconds to day...)
- */
- });
-
-});
\ No newline at end of file
+});
diff --git a/src/cypress/e2e/pagesGroups.cy.ts b/src/cypress/e2e/pagesGroups.cy.ts
index d8984d7c5..fcec0073d 100644
--- a/src/cypress/e2e/pagesGroups.cy.ts
+++ b/src/cypress/e2e/pagesGroups.cy.ts
@@ -1,25 +1,25 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+
describe("Navigation to Groups Page", () => {
- beforeEach(() => {
- // Visit the application home page
- cy.visit("/");
- });
+ beforeEach(() => {
+ // Visit the application home page
+ cy.visit("/");
+ });
- it("should navigate to the Groups page when 'Groups' is clicked from the Pages dropdown", () => {
- // Open the Pages dropdown
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(2) > a").click();
+ it("should navigate to the Groups page when 'Groups' is clicked from the Pages dropdown", () => {
+ // Open the Pages dropdown
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(2) > a").click();
- // Click the 'Groups' option in the dropdown
- cy.contains("Groups").click();
+ // Click the 'Groups' option in the dropdown
+ cy.contains("Groups").click();
- // Verify that the Groups page has the correct title
- cy.get("h2").should("have.text", "Groups");
+ // Verify that the Groups page has the correct title
+ cy.get("h2").should("have.text", "Groups");
- // Verify the tooltip icon is present in the title
- cy.get("h2 > div > i").should("have.attr", "data-for", "groups");
- cy.get("h2 > div > i").should("have.attr", "data-tip", "help.groups.groupview");
- });
+ // Verify the tooltip icon is present in the title
+ cy.get("h2 > div > i").should("have.attr", "data-for", "groups");
+ cy.get("h2 > div > i").should("have.attr", "data-tip", "help.groups.groupview");
+ });
});
diff --git a/src/cypress/e2e/pagesMeters.cy.ts b/src/cypress/e2e/pagesMeters.cy.ts
index 341ff3494..260214417 100644
--- a/src/cypress/e2e/pagesMeters.cy.ts
+++ b/src/cypress/e2e/pagesMeters.cy.ts
@@ -1,26 +1,26 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
- describe("Navigation to Meters Page", () => {
- beforeEach(() => {
- // Visit the application home page
- cy.visit("/");
- });
- it("should navigate to the Meters page when 'Meters' is clicked from the Pages dropdown", () => {
- // Open the Pages dropdown
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(2) > a").click();
+describe("Navigation to Meters Page", () => {
+ beforeEach(() => {
+ // Visit the application home page
+ cy.visit("/");
+ });
- // Click the 'Meters' option in the dropdown
- cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li.dropdown.show.nav-item > div > a:nth-child(6)").click();
+ it("should navigate to the Meters page when 'Meters' is clicked from the Pages dropdown", () => {
+ // Open the Pages dropdown
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li:nth-child(2) > a").click();
+ // Click the 'Meters' option in the dropdown
+ cy.get("#header > div > div.col-4.justify-content-end.d-lg-flex.d-none > div > nav > div > ul > li.dropdown.show.nav-item > div > a:nth-child(6)").click();
- // Verify that the Meters page has the correct title
- cy.get("h2").should("have.text", "Meters");
- // Verify the tooltip icon is present in the title
- cy.get("h2 > div > i").should("have.attr", "data-for", "meters");
- cy.get("h2 > div > i").should("have.attr", "data-tip", "help.meters.meterview");
- });
+ // Verify that the Meters page has the correct title
+ cy.get("h2").should("have.text", "Meters");
+
+ // Verify the tooltip icon is present in the title
+ cy.get("h2 > div > i").should("have.attr", "data-for", "meters");
+ cy.get("h2 > div > i").should("have.attr", "data-tip", "help.meters.meterview");
+ });
});
diff --git a/src/cypress/e2e/tooltipIcon.cy.ts b/src/cypress/e2e/tooltipIcon.cy.ts
index c68fca2b4..366b16e72 100644
--- a/src/cypress/e2e/tooltipIcon.cy.ts
+++ b/src/cypress/e2e/tooltipIcon.cy.ts
@@ -1,23 +1,22 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
- describe('Tooltip Attribute Test', () => {
- it('should add aria-describedby attribute after clicking the element', () => {
- // Visit the page
- cy.visit('/');
-
- // Locate the element with the tooltip
- cy.get('i[data-for="all"][data-tip="help.home.navigation"]')
- .should('exist') // Ensure the element exists
- .and('not.have.attr', 'aria-describedby'); // Verify aria-describedby is not present initially
-
- // Click the element
- cy.get('i[data-for="all"][data-tip="help.home.navigation"]').click();
-
- // Verify aria-describedby is added after clicking
- cy.get('i[data-for="all"][data-tip="help.home.navigation"]')
- .should('have.attr', 'aria-describedby', 'all'); // Confirm the correct attribute value
- });
- });
-
\ No newline at end of file
+
+describe('Tooltip Attribute Test', () => {
+ it('should add aria-describedby attribute after clicking the element', () => {
+ // Visit the page
+ cy.visit('/');
+
+ // Locate the element with the tooltip
+ cy.get('i[data-for="all"][data-tip="help.home.navigation"]')
+ .should('exist') // Ensure the element exists
+ .and('not.have.attr', 'aria-describedby'); // Verify aria-describedby is not present initially
+
+ // Click the element
+ cy.get('i[data-for="all"][data-tip="help.home.navigation"]').click();
+
+ // Verify aria-describedby is added after clicking
+ cy.get('i[data-for="all"][data-tip="help.home.navigation"]')
+ .should('have.attr', 'aria-describedby', 'all'); // Confirm the correct attribute value
+ });
+});
diff --git a/src/cypress/support/commands.ts b/src/cypress/support/commands.ts
index dfd4619ed..f5f8a0aaf 100644
--- a/src/cypress/support/commands.ts
+++ b/src/cypress/support/commands.ts
@@ -1,7 +1,7 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
@@ -38,4 +38,4 @@
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
-// }
\ No newline at end of file
+// }
From ad2d1f629fb072b658c3fa976ef457c8c8c5a9d5 Mon Sep 17 00:00:00 2001
From: Steven Huss-Lederman <huss@beloit.edu>
Date: Sun, 12 Jan 2025 09:05:39 -0600
Subject: [PATCH 2/3] location of screenshots
- Modify .gitignore so actual location of cyprus screenshots.
- Remove unneeded training comma.
---
.gitignore | 2 +-
cypress.config.ts | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/.gitignore b/.gitignore
index dfe96eab9..fb4a1099a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,4 +58,4 @@ nohup.out
src/server/tmp/*
#ui-testing screenshots
-src/cypress/screenshots/*
\ No newline at end of file
+cypress/screenshots/*
diff --git a/cypress.config.ts b/cypress.config.ts
index 92ee458d6..6ae2d3173 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -11,6 +11,6 @@ export default defineConfig({
},
specPattern: 'src/cypress/e2e/*.cy.ts',
supportFile: 'src/cypress/support/e2e.ts',
- screenshotsFolder: 'cypress/screenshots/e2e',
+ screenshotsFolder: 'cypress/screenshots/e2e'
}
});
From ed465497660f61a61041362fd0999cb2bbf70ade Mon Sep 17 00:00:00 2001
From: Steven Huss-Lederman <huss@beloit.edu>
Date: Sun, 12 Jan 2025 14:53:26 -0600
Subject: [PATCH 3/3] TODO for default line graphic
---
src/cypress/e2e/line.cy.ts | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/cypress/e2e/line.cy.ts b/src/cypress/e2e/line.cy.ts
index e8ecb9a15..1c977d615 100644
--- a/src/cypress/e2e/line.cy.ts
+++ b/src/cypress/e2e/line.cy.ts
@@ -8,7 +8,9 @@ describe('template spec', () => {
cy.visit('/');
});
- // Graph Type is Line
+ // Graph Type is Line.
+ // TODO This is the default line type when OED is created but can be changed by the admin. It might be good
+ // to first set it to this value at some point (but it does make another possible failure).
it('should display a line graph type automatically', () => {
// Find the line chart
cy.get('#root > div:nth-child(2) > div.container-fluid.flexGrowOne > div > div.col-2.d-none.d-lg-block > div > div.dropdown > button').should('have.text', 'Line');