From 870f872ed810f63ac21f4076208d97c32470f868 Mon Sep 17 00:00:00 2001 From: stavares843 Date: Wed, 12 Jun 2024 21:22:32 +0100 Subject: [PATCH 1/2] minor suggestion --- cypress/e2e/07-settings-customization.cy.ts | 168 +++++--------------- 1 file changed, 42 insertions(+), 126 deletions(-) diff --git a/cypress/e2e/07-settings-customization.cy.ts b/cypress/e2e/07-settings-customization.cy.ts index fe4ba01a..32604547 100644 --- a/cypress/e2e/07-settings-customization.cy.ts +++ b/cypress/e2e/07-settings-customization.cy.ts @@ -17,26 +17,23 @@ describe("Settings - Customization", () => { settingsProfile.buttonCustomization.click(); }); + const assertText = (element, text, message) => { + element.should("have.text", text, { log: false }).then(($el) => { + expect($el.text()).to.eq(text, message); + }); + }; + it("K1 - Language dropdown should display English", () => { - settingsCustomizations.appLanguageSectionLabel.should( - "have.text", - "App Language", - ); - settingsCustomizations.appLanguageSectionText.should( - "have.text", - "Change language.", - ); - settingsCustomizations.appLanguageSectionSelectorOption.should( - "have.length", - 1, - ); + assertText(settingsCustomizations.appLanguageSectionLabel, "App Language", "App Language label should be present"); + assertText(settingsCustomizations.appLanguageSectionText, "Change language.", "App Language text should be present"); + settingsCustomizations.appLanguageSectionSelectorOption.should("have.length", 1); settingsCustomizations.appLanguageSectionSelectorOption .should("have.value", "english") .and("have.text", "English (USA)"); }); it("K2 - Font dropdown should show expected font names", () => { - const expectedFonts: string[] = [ + const expectedFonts = [ "Poppins", "SpaceMono", "ChakraPetch", @@ -52,44 +49,26 @@ describe("Settings - Customization", () => { "MajorMono", "Merriweather", "PoiretOne", - "OpenDyslexic", + "OpenDyslexic" ]; - settingsCustomizations.fontSectionLabel.should("have.text", "Font"); - settingsCustomizations.fontSectionText.should( - "have.text", - "Change the font used in the app.", - ); - settingsCustomizations.fontSectionSelectorOption.should("have.length", 16); + assertText(settingsCustomizations.fontSectionLabel, "Font", "Font label should be present"); + assertText(settingsCustomizations.fontSectionText, "Change the font used in the app.", "Font text should be present"); + settingsCustomizations.fontSectionSelectorOption.should("have.length", expectedFonts.length); settingsCustomizations.validateFontNames(expectedFonts); }); it("K3 - Selected Fonts should be applied everywhere throughout the app", () => { settingsCustomizations.selectFont("JosefinSans"); - settingsCustomizations.fontSectionText.should( - "have.css", - "font-family", - "JosefinSans", - ); + settingsCustomizations.fontSectionText.should("have.css", "font-family", "JosefinSans"); settingsCustomizations.goToChat(); - cy.contains("Let's get something started!").should( - "have.css", - "font-family", - "JosefinSans", - ); + cy.contains("Let's get something started!").should("have.css", "font-family", "JosefinSans"); }); - // Cannot be tested for now since its not working on Uplink Web it.skip("K4 - Clicking OpenFolder should open the Fonts folder", () => {}); it("K5 - Font size should have a minimum of .82", () => { - settingsCustomizations.fontScalingSectionLabel.should( - "have.text", - "Font Scaling", - ); - settingsCustomizations.fontScalingSectionText.should( - "have.text", - "Scale the font size up or down to your liking.", - ); + assertText(settingsCustomizations.fontScalingSectionLabel, "Font Scaling", "Font Scaling label should be present"); + assertText(settingsCustomizations.fontScalingSectionText, "Scale the font size up or down to your liking.", "Font Scaling text should be present"); settingsCustomizations.fontScalingSectionInput.should("have.value", "1.00"); for (let i = 0; i < 10; i++) { @@ -97,11 +76,7 @@ describe("Settings - Customization", () => { } settingsCustomizations.fontScalingSectionInput.should("have.value", "0.82"); - settingsCustomizations.fontScalingSectionText.should( - "have.css", - "font-size", - "13.12px", - ); + settingsCustomizations.fontScalingSectionText.should("have.css", "font-size", "13.12px"); }); it("K6, K7 - Font size should have a maximum of 1.50 and can be applied correctly everywhere through the app", () => { @@ -112,38 +87,27 @@ describe("Settings - Customization", () => { } settingsCustomizations.fontScalingSectionInput.should("have.value", "1.50"); - settingsCustomizations.fontScalingSectionText.should( - "have.css", - "font-size", - "24px", - ); + settingsCustomizations.fontScalingSectionText.should("have.css", "font-size", "24px"); settingsCustomizations.goToChat(); - cy.contains("Let's get something started!").should( - "have.css", - "font-size", - "24px", - ); + cy.contains("Let's get something started!").should("have.css", "font-size", "24px"); }); - // Cannot be tested for now since its not working on Uplink Web it.skip("K8 - Clicking the moon button should change theme of the app from Dark to Light", () => {}); it("K9 - Themes dropdown should display Default", () => { - const expectedThemes: string[] = ["Default"]; - settingsCustomizations.themeSectionLabel.should("have.text", "Theme"); - settingsCustomizations.themeSectionText.should( - "have.text", - "Change the theme of the app.", - ); + const expectedThemes = [ + "Default" + ]; + assertText(settingsCustomizations.themeSectionLabel, "Theme", "Theme label should be present"); + assertText(settingsCustomizations.themeSectionText, "Change the theme of the app.", "Theme text should be present"); settingsCustomizations.themeSectionSelectorOption.should("have.length", 1); settingsCustomizations.validateThemes(expectedThemes); }); - // Cannot be tested for now since its not working on Uplink Web it.skip("K10 - Themes folder button should open the themes folder", () => {}); it("K11 - Primary Colors should display expected values", () => { - const expectedPrimaryColors: string[] = [ + const expectedPrimaryColors = [ "Neo Orbit", "Creamy Peach", "Neon Sunflower", @@ -154,20 +118,11 @@ describe("Settings - Customization", () => { "Rogue Pink", "Squeaky", "Apple Valley", - "Pencil Lead", + "Pencil Lead" ]; - settingsCustomizations.primaryColorSectionLabel.should( - "have.text", - "Primary Color", - ); - settingsCustomizations.primaryColorSectionText.should( - "have.text", - "Change the primary color of the app.", - ); - settingsCustomizations.primaryColorSectionColorSwatchButton.should( - "have.length", - 11, - ); + assertText(settingsCustomizations.primaryColorSectionLabel, "Primary Color", "Primary Color label should be present"); + assertText(settingsCustomizations.primaryColorSectionText, "Change the primary color of the app.", "Primary Color text should be present"); + settingsCustomizations.primaryColorSectionColorSwatchButton.should("have.length", expectedPrimaryColors.length); settingsCustomizations.validatePrimaryColors(expectedPrimaryColors); }); @@ -176,67 +131,28 @@ describe("Settings - Customization", () => { settingsCustomizations.customColorPicker.should("be.visible"); settingsCustomizations.customColorInput.clear().type("#ff8fb8"); settingsCustomizations.buttonCustomization.click({ force: true }); - settingsCustomizations.buttonCustomization.should( - "have.css", - "background-color", - "rgb(255, 143, 184)", - ); + settingsCustomizations.buttonCustomization.should("have.css", "background-color", "rgb(255, 143, 184)"); }); it("K13 - Selected primary color should be applied throughout the entire app", () => { - // Button selected has initially default color - settingsCustomizations.buttonCustomization.should( - "have.css", - "background-color", - "rgb(77, 77, 255)", - ); - - // Select Traffic Cone as primary color and validate that button selected has new background color + settingsCustomizations.buttonCustomization.should("have.css", "background-color", "rgb(77, 77, 255)"); + settingsCustomizations.selectColorSwatch("Traffic Cone"); - settingsCustomizations.buttonCustomization.should( - "have.css", - "background-color", - "rgb(255, 60, 0)", - ); + settingsCustomizations.buttonCustomization.should("have.css", "background-color", "rgb(255, 60, 0)"); settingsCustomizations.goToChat(); - chatsMain.buttonAddFriends.should( - "have.css", - "background-color", - "rgb(255, 60, 0)", - ); + chatsMain.buttonAddFriends.should("have.css", "background-color", "rgb(255, 60, 0)"); }); it("K14 - User should be able to add additional custom CSS to the application", () => { - settingsCustomizations.sidebar.should( - "have.css", - "background-color", - "rgba(0, 0, 0, 0)", - ); - settingsCustomizations.customCSSSectionLabel.should( - "have.text", - "Custom CSS", - ); - settingsCustomizations.customCSSSectionText.should( - "have.text", - "Add additional custom CSS to the application.", - ); - settingsCustomizations.customCSSSectionTextArea.type( - ".sidebar {background-color: rgb(255, 0, 141)}", - { parseSpecialCharSequences: false }, - ); + settingsCustomizations.sidebar.should("have.css", "background-color", "rgba(0, 0, 0, 0)"); + assertText(settingsCustomizations.customCSSSectionLabel, "Custom CSS", "Custom CSS label should be present"); + assertText(settingsCustomizations.customCSSSectionText, "Add additional custom CSS to the application.", "Custom CSS text should be present"); + settingsCustomizations.customCSSSectionTextArea.type(".sidebar {background-color: rgb(255, 0, 141)}", { parseSpecialCharSequences: false }); settingsCustomizations.buttonCustomization.click(); - settingsCustomizations.sidebar.should( - "have.css", - "background-color", - "rgb(255, 0, 141)", - ); + settingsCustomizations.sidebar.should("have.css", "background-color", "rgb(255, 0, 141)"); settingsCustomizations.goToChat(); - chatsMain.sidebar.should( - "have.css", - "background-color", - "rgb(255, 0, 141)", - ); + chatsMain.sidebar.should("have.css", "background-color", "rgb(255, 0, 141)"); }); }); From 6ce7cd1c1f7a94e8df3e6b1fd0ecad431de7da1f Mon Sep 17 00:00:00 2001 From: stavares843 Date: Wed, 12 Jun 2024 22:31:16 +0100 Subject: [PATCH 2/2] address review --- cypress/e2e/07-settings-customization.cy.ts | 30 +++++++++------------ cypress/support/commands.ts | 7 +++++ 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/cypress/e2e/07-settings-customization.cy.ts b/cypress/e2e/07-settings-customization.cy.ts index 32604547..203a453c 100644 --- a/cypress/e2e/07-settings-customization.cy.ts +++ b/cypress/e2e/07-settings-customization.cy.ts @@ -17,15 +17,9 @@ describe("Settings - Customization", () => { settingsProfile.buttonCustomization.click(); }); - const assertText = (element, text, message) => { - element.should("have.text", text, { log: false }).then(($el) => { - expect($el.text()).to.eq(text, message); - }); - }; - it("K1 - Language dropdown should display English", () => { - assertText(settingsCustomizations.appLanguageSectionLabel, "App Language", "App Language label should be present"); - assertText(settingsCustomizations.appLanguageSectionText, "Change language.", "App Language text should be present"); + cy.assertText(settingsCustomizations.appLanguageSectionLabel, "App Language", "App Language label should be present"); + cy.assertText(settingsCustomizations.appLanguageSectionText, "Change language.", "App Language text should be present"); settingsCustomizations.appLanguageSectionSelectorOption.should("have.length", 1); settingsCustomizations.appLanguageSectionSelectorOption .should("have.value", "english") @@ -51,8 +45,8 @@ describe("Settings - Customization", () => { "PoiretOne", "OpenDyslexic" ]; - assertText(settingsCustomizations.fontSectionLabel, "Font", "Font label should be present"); - assertText(settingsCustomizations.fontSectionText, "Change the font used in the app.", "Font text should be present"); + cy.assertText(settingsCustomizations.fontSectionLabel, "Font", "Font label should be present"); + cy.assertText(settingsCustomizations.fontSectionText, "Change the font used in the app.", "Font text should be present"); settingsCustomizations.fontSectionSelectorOption.should("have.length", expectedFonts.length); settingsCustomizations.validateFontNames(expectedFonts); }); @@ -67,8 +61,8 @@ describe("Settings - Customization", () => { it.skip("K4 - Clicking OpenFolder should open the Fonts folder", () => {}); it("K5 - Font size should have a minimum of .82", () => { - assertText(settingsCustomizations.fontScalingSectionLabel, "Font Scaling", "Font Scaling label should be present"); - assertText(settingsCustomizations.fontScalingSectionText, "Scale the font size up or down to your liking.", "Font Scaling text should be present"); + cy.assertText(settingsCustomizations.fontScalingSectionLabel, "Font Scaling", "Font Scaling label should be present"); + cy.assertText(settingsCustomizations.fontScalingSectionText, "Scale the font size up or down to your liking.", "Font Scaling text should be present"); settingsCustomizations.fontScalingSectionInput.should("have.value", "1.00"); for (let i = 0; i < 10; i++) { @@ -98,8 +92,8 @@ describe("Settings - Customization", () => { const expectedThemes = [ "Default" ]; - assertText(settingsCustomizations.themeSectionLabel, "Theme", "Theme label should be present"); - assertText(settingsCustomizations.themeSectionText, "Change the theme of the app.", "Theme text should be present"); + cy.assertText(settingsCustomizations.themeSectionLabel, "Theme", "Theme label should be present"); + cy.assertText(settingsCustomizations.themeSectionText, "Change the theme of the app.", "Theme text should be present"); settingsCustomizations.themeSectionSelectorOption.should("have.length", 1); settingsCustomizations.validateThemes(expectedThemes); }); @@ -120,8 +114,8 @@ describe("Settings - Customization", () => { "Apple Valley", "Pencil Lead" ]; - assertText(settingsCustomizations.primaryColorSectionLabel, "Primary Color", "Primary Color label should be present"); - assertText(settingsCustomizations.primaryColorSectionText, "Change the primary color of the app.", "Primary Color text should be present"); + cy.assertText(settingsCustomizations.primaryColorSectionLabel, "Primary Color", "Primary Color label should be present"); + cy.assertText(settingsCustomizations.primaryColorSectionText, "Change the primary color of the app.", "Primary Color text should be present"); settingsCustomizations.primaryColorSectionColorSwatchButton.should("have.length", expectedPrimaryColors.length); settingsCustomizations.validatePrimaryColors(expectedPrimaryColors); }); @@ -146,8 +140,8 @@ describe("Settings - Customization", () => { it("K14 - User should be able to add additional custom CSS to the application", () => { settingsCustomizations.sidebar.should("have.css", "background-color", "rgba(0, 0, 0, 0)"); - assertText(settingsCustomizations.customCSSSectionLabel, "Custom CSS", "Custom CSS label should be present"); - assertText(settingsCustomizations.customCSSSectionText, "Add additional custom CSS to the application.", "Custom CSS text should be present"); + cy.assertText(settingsCustomizations.customCSSSectionLabel, "Custom CSS", "Custom CSS label should be present"); + cy.assertText(settingsCustomizations.customCSSSectionText, "Add additional custom CSS to the application.", "Custom CSS text should be present"); settingsCustomizations.customCSSSectionTextArea.type(".sidebar {background-color: rgb(255, 0, 141)}", { parseSpecialCharSequences: false }); settingsCustomizations.buttonCustomization.click(); settingsCustomizations.sidebar.should("have.css", "background-color", "rgb(255, 0, 141)"); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index ba7c21a3..e6b7ff54 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -56,3 +56,10 @@ Cypress.Commands.add('getClipboardTextAndTriggerCopy', () => { }); }); }); + +// Command to assert text +Cypress.Commands.add('assertText', (element, text, message) => { + element.should("have.text", text, { log: false }).then(($el) => { + expect($el.text()).to.eq(text, message); + }); +});