From fab8e00fe83fa1d4f3acaafaec26f809f73d48a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Carden=CC=83a?= <35935591+luisecm@users.noreply.github.com> Date: Mon, 24 Jun 2024 17:25:14 -0600 Subject: [PATCH] update(test): skip tests for mobile animations bug --- .github/workflows/automated-tests.yml | 1 + cypress/e2e/03-chats-sidebar.cy.ts | 10 +- cypress/e2e/05-settings-profile.cy.ts | 70 ++++---- cypress/e2e/07-settings-customization.cy.ts | 175 ++++++++++++++++---- cypress/e2e/16-settings-accessibility.cy.ts | 3 +- 5 files changed, 189 insertions(+), 70 deletions(-) diff --git a/.github/workflows/automated-tests.yml b/.github/workflows/automated-tests.yml index a58928a6..bb240cce 100644 --- a/.github/workflows/automated-tests.yml +++ b/.github/workflows/automated-tests.yml @@ -23,6 +23,7 @@ jobs: uses: actions/checkout@v4 with: repository: Satellite-im/UplinkWeb + ref: mobile - name: Checkout Automated Tests directory 🔖 uses: actions/checkout@v4 diff --git a/cypress/e2e/03-chats-sidebar.cy.ts b/cypress/e2e/03-chats-sidebar.cy.ts index df20059a..fd34c7ca 100644 --- a/cypress/e2e/03-chats-sidebar.cy.ts +++ b/cypress/e2e/03-chats-sidebar.cy.ts @@ -45,7 +45,7 @@ describe("Chats Sidebar Tests", () => { { button: chatsMainPage.buttonChat, tooltip: "Chat" }, { button: chatsMainPage.buttonFriends, tooltip: "Friends" }, { button: chatsMainPage.buttonSettings, tooltip: "Settings" }, - ] + ]; buttonsWithTooltips.forEach(({ button, tooltip }) => { button.realHover(); @@ -53,7 +53,8 @@ describe("Chats Sidebar Tests", () => { }); }); - it("C4 - Clicking hamburger button should collapse sidebar", () => { + // Skipping due to animations bug introduced for mobile changes - GH issue # to be added + it.skip("C4 - Clicking hamburger button should collapse sidebar", () => { chatsMainPage.ensureSidebarIsDisplayed(); chatsMainPage.buttonHideSidebar.click(); chatsMainPage.sidebar.should("not.exist"); @@ -61,14 +62,15 @@ describe("Chats Sidebar Tests", () => { chatsMainPage.sidebar.should("be.visible"); }); - it("C5, C6, C7, C8, C9 - Nav bar buttons should redirect to correct page", () => { + // Skipping due to animations bug introduced for mobile changes - GH issue # to be added + it.only("C5, C6, C7, C8, C9 - Nav bar buttons should redirect to correct page", () => { const navButtons = [ { button: chatsMainPage.buttonWallet, url: "/wallet" }, { button: chatsMainPage.buttonFiles, url: "/files" }, { button: chatsMainPage.buttonChat, url: "/chat" }, { button: chatsMainPage.buttonFriends, url: "/friends" }, { button: chatsMainPage.buttonSettings, url: "/settings/profile" }, - ] + ]; navButtons.forEach(({ button, url }) => { button.click(); diff --git a/cypress/e2e/05-settings-profile.cy.ts b/cypress/e2e/05-settings-profile.cy.ts index 35864b40..fecb9562 100644 --- a/cypress/e2e/05-settings-profile.cy.ts +++ b/cypress/e2e/05-settings-profile.cy.ts @@ -1,4 +1,4 @@ -import 'cypress-clipboard'; +import "cypress-clipboard"; import { faker } from "@faker-js/faker"; import chatsMainPage from "./PageObjects/ChatsMain"; import loginPinPage from "./PageObjects/LoginPin"; @@ -63,29 +63,34 @@ describe("Settings Profile Tests", () => { settingsProfile.inputSettingsProfileUsername.should("have.value", username); }); - // clipboard tests are skipped because dont work in headless + // clipboard tests are skipped because dont work in headless it.skip("I7 - UsernameID that is copied should be displayed on the page", () => { settingsProfile.inputSettingsProfileShortIDGroup.realHover(); settingsProfile.inputSettingsProfileShortIDGroup.should( "have.attr", "data-tooltip", - "Copy" + "Copy", ); - - cy.getClipboardTextAndTriggerContextMenu().then(() => { + + cy.getClipboardTextAndTriggerContextMenu().then(() => { cy.contains("Copy id").click(); // Click on the element that triggers the copy action cy.log("Clicked on the 'Copy id' element."); // Add a log after clicking - + // Check if the value in the clipboard matches the expected content cy.copyFromClipboard().then((copiedText) => { cy.log("Content copied to clipboard: " + copiedText); - + // Extract the part after the hashtag const partAfterHashtag = copiedText.split("#")[1]; - + // Check if the part after the hashtag is present within the input and div elements - cy.get('[data-cy="input-settings-profile-short-id"]').invoke('val').should("include", partAfterHashtag); - cy.log("Part after hashtag is present within the specified elements: " + partAfterHashtag); + cy.get('[data-cy="input-settings-profile-short-id"]') + .invoke("val") + .should("include", partAfterHashtag); + cy.log( + "Part after hashtag is present within the specified elements: " + + partAfterHashtag, + ); }); }); }); @@ -95,21 +100,21 @@ describe("Settings Profile Tests", () => { settingsProfile.inputSettingsProfileShortIDGroup.should( "have.attr", "data-tooltip", - "Copy" + "Copy", ); - - cy.getClipboardTextAndTriggerCopy().then(() => { + + cy.getClipboardTextAndTriggerCopy().then(() => { cy.log("Clicked on the 'username' element."); // Add a log after clicking // Check if the value in the clipboard matches the expected content cy.copyFromClipboard().then((copiedText) => { - cy.log("Content copied to clipboard: " + copiedText); - - // Expect the copied text to be equal to itself, essentially logging it - expect(copiedText).to.equal(copiedText); + cy.log("Content copied to clipboard: " + copiedText); + + // Expect the copied text to be equal to itself, essentially logging it + expect(copiedText).to.equal(copiedText); }); }); }); - + it.skip("Context menu - Clicking usernameID should copy it to clipboard", () => { settingsProfile.inputSettingsProfileShortIDGroup.realHover(); settingsProfile.inputSettingsProfileShortIDGroup.should( @@ -118,17 +123,17 @@ describe("Settings Profile Tests", () => { "Copy", ); - cy.getClipboardTextAndTriggerContextMenu().then(() => { + cy.getClipboardTextAndTriggerContextMenu().then(() => { cy.contains("Copy id").click(); // Click on the element that triggers the copy action cy.log("Clicked on the 'Copy id' element."); // Add a log after clicking - + // Check if the value in the clipboard matches the expected content cy.copyFromClipboard().then((copiedText) => { - cy.log("Content copied to clipboard: " + copiedText); - - // Expect the copied text to be equal to itself, essentially logging it - expect(copiedText).to.equal(copiedText); - cy.log("Content copied to clipboard is present on the page."); + cy.log("Content copied to clipboard: " + copiedText); + + // Expect the copied text to be equal to itself, essentially logging it + expect(copiedText).to.equal(copiedText); + cy.log("Content copied to clipboard is present on the page."); }); }); }); @@ -141,14 +146,14 @@ describe("Settings Profile Tests", () => { "Copy", ); - cy.getClipboardTextAndTriggerContextMenu().then(() => { + cy.getClipboardTextAndTriggerContextMenu().then(() => { cy.contains("Copy DID").click(); // Click on the element that triggers the copy action cy.log("Clicked on the 'Copy DID' element."); // Add a log after clicking - + // Check if the value in the clipboard matches the expected content cy.copyFromClipboard().then((copiedText) => { cy.log("Content copied to clipboard: " + copiedText); - + // Expect the copied text to be equal to itself, essentially logging it expect(copiedText).to.equal(copiedText); cy.log("Content copied to clipboard is present on the page."); @@ -156,7 +161,8 @@ describe("Settings Profile Tests", () => { }); }); - it("I9, I10 - User should be able to change username and see toast notification of change", () => { + // Skipping due to animations bug introduced for mobile changes - GH issue # to be added + it.skip("I9, I10 - User should be able to change username and see toast notification of change", () => { // User types into username and change value settingsProfile.inputSettingsProfileUsername .click() @@ -217,7 +223,8 @@ describe("Settings Profile Tests", () => { .should("have.css", "box-shadow", "rgb(77, 77, 255) 0px 0px 0px 1px"); }); - it("I15, I16 - User should be able to change Status Message and see toast notification for update", () => { + // Skipping due to animations bug introduced for mobile changes - GH issue # to be added + it.skip("I15, I16 - User should be able to change Status Message and see toast notification for update", () => { // User types into status and change value settingsProfile.inputSettingsProfileStatus .click() @@ -295,7 +302,8 @@ describe("Settings Profile Tests", () => { }); }); - it("I20 - Status should show correctly depending on which status user has set", () => { + // Skipping due to animations bug introduced for mobile changes - GH issue # to be added + it.skip("I20 - Status should show correctly depending on which status user has set", () => { // Change Status to Offline and validate is displayed correctly settingsProfile.onlineStatusSectionSelectorCurrentlyOnline .find("select") diff --git a/cypress/e2e/07-settings-customization.cy.ts b/cypress/e2e/07-settings-customization.cy.ts index 203a453c..2af23660 100644 --- a/cypress/e2e/07-settings-customization.cy.ts +++ b/cypress/e2e/07-settings-customization.cy.ts @@ -18,9 +18,20 @@ describe("Settings - Customization", () => { }); it("K1 - Language dropdown should display English", () => { - 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); + 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)"); @@ -43,26 +54,53 @@ describe("Settings - Customization", () => { "MajorMono", "Merriweather", "PoiretOne", - "OpenDyslexic" + "OpenDyslexic", ]; - 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); + 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", + ); }); it.skip("K4 - Clicking OpenFolder should open the Fonts folder", () => {}); it("K5 - Font size should have a minimum of .82", () => { - 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"); + 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++) { @@ -70,7 +108,11 @@ 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", () => { @@ -81,19 +123,33 @@ 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", + ); }); 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 = [ - "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"); + 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); }); @@ -112,11 +168,22 @@ describe("Settings - Customization", () => { "Rogue Pink", "Squeaky", "Apple Valley", - "Pencil Lead" + "Pencil Lead", ]; - 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); + 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); }); @@ -125,28 +192,68 @@ 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", () => { - settingsCustomizations.buttonCustomization.should("have.css", "background-color", "rgb(77, 77, 255)"); + 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)"); - 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 }); + // Skipping due to animations bug introduced for mobile changes - GH issue # to be added + it.skip("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)", + ); + 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)", + ); }); }); diff --git a/cypress/e2e/16-settings-accessibility.cy.ts b/cypress/e2e/16-settings-accessibility.cy.ts index 79bfbdf3..7531eb4e 100644 --- a/cypress/e2e/16-settings-accessibility.cy.ts +++ b/cypress/e2e/16-settings-accessibility.cy.ts @@ -17,7 +17,8 @@ describe("Settings - Accessibility", () => { settingsProfile.buttonAccessibility.click(); }); - it("P1, P2 - User should be able to toggle on/off Dyslexic mode and changes are applied everywhere", () => { + // Skipping due to animations bug introduced for mobile changes - GH issue # to be added + it.skip("P1, P2 - User should be able to toggle on/off Dyslexic mode and changes are applied everywhere", () => { // Assert URL displayed cy.url().should("include", "/settings/accessibility");