Skip to content

Commit

Permalink
Merge pull request #36 from Satellite-im/sara/minor-updates-customiza…
Browse files Browse the repository at this point in the history 
…tion-cypress

chore(cypress): minor cypress suggestion
  • Loading branch information
@luisecm
luisecm authored Jun 12, 2024
2 parents ff1f02f + 6ce7cd1 commit c7d09d8
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 126 deletions.
162 changes: 36 additions & 126 deletions cypress/e2e/07-settings-customization.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,16 @@ describe("Settings - Customization", () => {
});

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,
);
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")
.and("have.text", "English (USA)");
});

it("K2 - Font dropdown should show expected font names", () => {
const expectedFonts: string[] = [
const expectedFonts = [
"Poppins",
"SpaceMono",
"ChakraPetch",
Expand All @@ -52,56 +43,34 @@ 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);
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);
});

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.",
);
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++) {
settingsCustomizations.fontScalingSectionDecreaseButton.click();
}

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", () => {
Expand All @@ -112,38 +81,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"
];
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);
});

// 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",
Expand All @@ -154,20 +112,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,
);
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);
});

Expand All @@ -176,67 +125,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)");
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)",
);
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)");
});
});
7 changes: 7 additions & 0 deletions cypress/support/commands.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});

0 comments on commit c7d09d8

Please sign in to comment.