test: Theme related tests (appsmithorg#12740)

* Removed unwanted waits * Updated test for fonts * Updated tests with Font and Theme usecases * updated tests * Added new tests and common locators * Added default/update theme tests * grouped tests * Updated Theme tests * updated multiwidget test * updated theme tests * Updated tests * Reordered tests
ganganimaulik · May 11, 2022 · 7199a32 · 7199a32
1 parent ba0b58a
commit 7199a32
Show file tree

Hide file tree

Showing 9 changed files with 1,817 additions and 0 deletions.
diff --git a/app/client/cypress/fixtures/ThemeAppdsl.json b/app/client/cypress/fixtures/ThemeAppdsl.json
diff --git a/app/client/cypress/fixtures/fontData.json b/app/client/cypress/fixtures/fontData.json
@@ -0,0 +1,15 @@
+{
+ "dropdownValues": [
+ "System Default",
+ "System Default",
+ "Nunito Sans",
+ "Poppins",
+ "Inter",
+ "Montserrat",
+ "Noto Sans",
+ "Open Sans",
+ "Roboto",
+ "Rubik",
+ "Ubuntu"
+ ]
+}
diff --git a/...gration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_Default_spec.js b/...gration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_Default_spec.js
@@ -0,0 +1,121 @@
+const testdata = require("../../../../fixtures/testdata.json");
+const apiwidget = require("../../../../locators/apiWidgetslocator.json");
+const widgetsPage = require("../../../../locators/Widgets.json");
+const explorer = require("../../../../locators/explorerlocators.json");
+const commonlocators = require("../../../../locators/commonlocators.json");
+const formWidgetsPage = require("../../../../locators/FormWidgets.json");
+const publish = require("../../../../locators/publishWidgetspage.json");
+const themelocator = require("../../../../locators/ThemeLocators.json");
+
+let themeBackgroudColor;
+let themeFont;
+
+describe("Theme validation for default data", function() {
+ it("Drag and drop form widget and validate Default color/font/shadow/border and list of font validation", function() {
+ cy.log("Login Successful");
+ cy.reload(); // To remove the rename tooltip
+ cy.get(explorer.addWidget).click();
+ cy.get(commonlocators.entityExplorersearch).should("be.visible");
+ cy.get(commonlocators.entityExplorersearch)
+ .clear()
+ .type("form");
+ cy.dragAndDropToCanvas("formwidget", { x: 300, y: 80 });
+ cy.wait("@updateLayout").should(
+ "have.nested.property",
+ "response.body.responseMeta.status",
+ 200,
+ );
+ cy.wait(3000);
+ cy.get(themelocator.canvas).click({ force: true });
+ cy.wait(2000);
+
+ //Border validation
+ //cy.contains("Border").click({ force: true });
+ cy.get(themelocator.border).should("have.length", "3");
+ cy.borderMouseover(0, "none");
+ cy.borderMouseover(1, "md");
+ cy.borderMouseover(2, "lg");
+ cy.contains("Border").click({ force: true });
+
+ //Shadow validation
+ //cy.contains("Shadow").click({ force: true });
+ cy.wait(2000);
+ cy.shadowMouseover(0, "none");
+ cy.shadowMouseover(1, "sm");
+ cy.shadowMouseover(2, "md");
+ cy.shadowMouseover(3, "lg");
+ cy.contains("Shadow").click({ force: true });
+
+ //Font
+ //cy.contains("Font").click({ force: true });
+ cy.get("span[name='expand-more']").then(($elem) => {
+ cy.get($elem).click({ force: true });
+ cy.wait(250);
+
+ cy.get(themelocator.fontsSelected)
+ .eq(0)
+ .should("have.text", "System Default");
+ });
+ cy.contains("Font").click({ force: true });
+
+ //Color
+ //cy.contains("Color").click({ force: true });
+ cy.wait(2000);
+ cy.colorMouseover(0, "Primary Color");
+ cy.validateColor(0, "#16a34a");
+ cy.colorMouseover(1, "Background Color");
+ cy.validateColor(1, "#F6F6F6");
+ });
+
+ it("Validate Default Theme change across application", function() {
+ cy.get(formWidgetsPage.formD).click();
+ cy.widgetText(
+ "FormTest",
+ formWidgetsPage.formWidget,
+ formWidgetsPage.formInner,
+ );
+ cy.get(widgetsPage.backgroundcolorPickerNew)
+ .first()
+ .click({ force: true });
+ cy.get("[style='background-color: rgb(21, 128, 61);']")
+ .last()
+ .click();
+ cy.wait(2000);
+ cy.get(formWidgetsPage.formD)
+ .should("have.css", "background-color")
+ .and("eq", "rgb(21, 128, 61)");
+ cy.get("#canvas-selection-0").click({ force: true });
+ //Change the Theme
+ cy.get(commonlocators.changeThemeBtn)
+ .should("be.visible")
+ .click({ force: true });
+ cy.get(".cursor-pointer:contains('Current Theme')").click({ force: true });
+ cy.get(".t--theme-card main > main")
+ .first()
+ .invoke("css", "background-color")
+ .then((CurrentBackgroudColor) => {
+ cy.get(".bp3-button:contains('Submit')")
+ .last()
+ .invoke("css", "background-color")
+ .then((selectedBackgroudColor) => {
+ expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor);
+ themeBackgroudColor = CurrentBackgroudColor;
+ });
+ });
+ });
+
+ it("Publish the App and validate Default Theme across the app", function() {
+ cy.PublishtheApp();
+ cy.get(".bp3-button:contains('Submit')")
+ .invoke("css", "background-color")
+ .then((CurrentBackgroudColor) => {
+ cy.get(".bp3-button:contains('Edit App')")
+ .invoke("css", "background-color")
+ .then((selectedBackgroudColor) => {
+ expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor);
+ expect(CurrentBackgroudColor).to.equal(themeBackgroudColor);
+ expect(selectedBackgroudColor).to.equal(themeBackgroudColor);
+ });
+ });
+ });
+});
diff --git a/...oke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_MultiSelectWidget_spec.js b/...oke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_MultiSelectWidget_spec.js
@@ -0,0 +1,181 @@
+const commonlocators = require("../../../../locators/commonlocators.json");
+const dsl = require("../../../../fixtures/ThemeAppdsl.json");
+const widgetsPage = require("../../../../locators/Widgets.json");
+const testdata = require("../../../../fixtures/testdata.json");
+const apiwidget = require("../../../../locators/apiWidgetslocator.json");
+const explorer = require("../../../../locators/explorerlocators.json");
+const formWidgetsPage = require("../../../../locators/FormWidgets.json");
+const publish = require("../../../../locators/publishWidgetspage.json");
+const themelocator = require("../../../../locators/ThemeLocators.json");
+
+let themeBackgroudColor;
+let themeFont;
+let themeColour;
+
+describe("Theme validation usecase for multi-select widget", function() {
+ it("Drag and drop multi-select widget and validate Default font and list of font validation", function() {
+ cy.log("Login Successful");
+ cy.reload(); // To remove the rename tooltip
+ cy.get(explorer.addWidget).click();
+ cy.get(commonlocators.entityExplorersearch).should("be.visible");
+ cy.get(commonlocators.entityExplorersearch)
+ .clear()
+ .type("multiselect");
+ cy.dragAndDropToCanvas("multiselectwidgetv2", { x: 300, y: 80 });
+ cy.wait("@updateLayout").should(
+ "have.nested.property",
+ "response.body.responseMeta.status",
+ 200,
+ );
+ cy.wait(3000);
+ cy.get(themelocator.canvas).click({ force: true });
+ cy.wait(2000);
+
+ //Border validation
+ //cy.contains("Border").click({ force: true });
+ cy.get(themelocator.border).should("have.length", "3");
+ cy.borderMouseover(0, "none");
+ cy.borderMouseover(1, "md");
+ cy.borderMouseover(2, "lg");
+ cy.get(themelocator.border)
+ .eq(1)
+ .click({ force: true });
+ cy.wait("@updateTheme").should(
+ "have.nested.property",
+ "response.body.responseMeta.status",
+ 200,
+ );
+ cy.wait(5000);
+ cy.contains("Border").click({ force: true });
+
+ //Shadow validation
+ //cy.contains("Shadow").click({ force: true });
+ cy.wait(2000);
+ cy.shadowMouseover(0, "none");
+ cy.shadowMouseover(1, "sm");
+ cy.shadowMouseover(2, "md");
+ cy.shadowMouseover(3, "lg");
+ cy.xpath(themelocator.shadow)
+ .eq(3)
+ .click({ force: true });
+ cy.wait("@updateTheme").should(
+ "have.nested.property",
+ "response.body.responseMeta.status",
+ 200,
+ );
+ cy.wait(5000);
+ cy.contains("Shadow").click({ force: true });
+
+ //Font
+ cy.get("span[name='expand-more']").then(($elem) => {
+ cy.get($elem).click({ force: true });
+ cy.wait(250);
+ cy.fixture("fontData").then(function(testdata) {
+ this.testdata = testdata;
+ });
+
+ cy.get(themelocator.fontsSelected)
+ .eq(0)
+ .should("have.text", "System Default");
+
+ cy.get(themelocator.fontsSelected).each(($ele, i) => {
+ //cy.log($ele);
+ expect($ele).to.have.text(this.testdata.dropdownValues[i]);
+ });
+ cy.get(".ads-dropdown-options-wrapper div")
+ .children()
+ .eq(2)
+ .then(($childElem) => {
+ cy.get($childElem).click({ force: true });
+ cy.get(".t--draggable-multiselectwidgetv2:contains('more')").should(
+ "have.css",
+ "font-family",
+ $childElem
+ .children()
+ .last()
+ .text(),
+ );
+ themeFont = $childElem
+ .children()
+ .last()
+ .text();
+ });
+ });
+ cy.contains("Font").click({ force: true });
+
+ //Color
+ cy.wait(3000);
+ cy.get(themelocator.color)
+ .eq(0)
+ .click({ force: true });
+ cy.get(themelocator.inputColor).clear();
+ cy.get(themelocator.inputColor).type("purple");
+ cy.get(themelocator.inputColor).should("have.value", "purple");
+ cy.get(themelocator.color)
+ .eq(1)
+ .click({ force: true });
+ cy.get(themelocator.inputColor).clear();
+ cy.get(themelocator.inputColor).type("brown");
+ cy.get(themelocator.inputColor).should("have.value", "brown");
+ cy.wait(2000);
+ cy.contains("Color").click({ force: true });
+ });
+
+ it("Publish the App and validate Font across the app", function() {
+ cy.PublishtheApp();
+ cy.get(".rc-select-selection-item > .rc-select-selection-item-content")
+ .first()
+ .should("have.css", "font-family", themeFont);
+ cy.get(".rc-select-selection-item > .rc-select-selection-item-content")
+ .last()
+ .should("have.css", "font-family", themeFont);
+ cy.get(".bp3-button:contains('Edit App')").should(
+ "have.css",
+ "font-family",
+ themeFont,
+ );
+ cy.get(".bp3-button:contains('Share')").should(
+ "have.css",
+ "font-family",
+ themeFont,
+ );
+ });
+
+ it("Validate Default Theme change across application", function() {
+ cy.goToEditFromPublish();
+ cy.get("#canvas-selection-0").click({ force: true });
+ //Change the Theme
+ cy.get(commonlocators.changeThemeBtn)
+ .should("be.visible")
+ .click({ force: true });
+ cy.get(themelocator.currentTheme).click({ force: true });
+ cy.get(".t--theme-card main > main")
+ .first()
+ .invoke("css", "background-color")
+ .then((CurrentBackgroudColor) => {
+ cy.get(".t--draggable-multiselectwidgetv2:contains('more')")
+ .last()
+ .invoke("css", "background-color")
+ .then((selectedBackgroudColor) => {
+ expect("rgba(0, 0, 0, 0)").to.equal(selectedBackgroudColor);
+ themeBackgroudColor = CurrentBackgroudColor;
+ themeColour = selectedBackgroudColor;
+ });
+ });
+ });
+
+ it("Publish the App and validate Default Theme across the app", function() {
+ cy.PublishtheApp();
+ cy.get(".rc-select-selection-item > .rc-select-selection-item-content")
+ .first()
+ .invoke("css", "background-color")
+ .then((CurrentBackgroudColor) => {
+ cy.get(".bp3-button:contains('Edit App')")
+ .invoke("css", "background-color")
+ .then((selectedBackgroudColor) => {
+ expect(CurrentBackgroudColor).to.equal(themeColour);
+ expect(selectedBackgroudColor).to.equal(themeBackgroudColor);
+ });
+ });
+ });
+});