test: Theme related tests (#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

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"
+    ]
+}

app/client/cypress/integration/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);
+          });
+      });
+  });
+});

app/client/cypress/integration/Smoke_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);
+          });
+      });
+  });
+});

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AppThemingTests/Application_Theme_spec.js

@@ -0,0 +1,335 @@
+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 usecases", function() {
+  it("Drag and drop form 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("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.get(themelocator.border)
+      .eq(2)
+      .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.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-formbuttonwidget button :contains('Submit')",
+          ).should(
+            "have.css",
+            "font-family",
+            $childElem
+              .children()
+              .last()
+              .text(),
+          );
+          themeFont = $childElem
+            .children()
+            .last()
+            .text();
+        });
+    });
+    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");
+
+    cy.get(themelocator.inputColor).click({ force: true });
+    cy.chooseColor(0, themelocator.greenColor);
+
+    cy.get(themelocator.inputColor).should("have.value", "#15803d");
+    cy.get(themelocator.inputColor).clear({ force: true });
+    cy.wait(2000);
+    cy.get(themelocator.inputColor).type("red");
+    cy.get(themelocator.inputColor).should("have.value", "red");
+    cy.wait(2000);
+
+    cy.get(themelocator.inputColor)
+      .eq(0)
+      .click({ force: true });
+    cy.get(themelocator.inputColor).click({ force: true });
+    cy.get('[data-testid="color-picker"]')
+      .first()
+      .click({ force: true });
+    cy.get("[style='background-color: rgb(21, 128, 61);']")
+      .last()
+      .click();
+    cy.wait(2000);
+    cy.get(themelocator.inputColor).should("have.value", "#15803d");
+    cy.get(themelocator.inputColor).clear({ force: true });
+    cy.wait(2000);
+    cy.get(themelocator.inputColor).type("Black");
+    cy.get(themelocator.inputColor).should("have.value", "Black");
+    cy.wait(2000);
+    cy.contains("Color").click({ force: true });
+  });
+
+  it("Publish the App and validate Font across the app", function() {
+    cy.PublishtheApp();
+    cy.get(".bp3-button:contains('Submit')").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,
+    );
+    cy.get(".bp3-button:contains('Reset')").should(
+      "have.css",
+      "font-family",
+      themeFont,
+    );
+  });
+
+  it("Validate Default Theme change across application", function() {
+    cy.goToEditFromPublish();
+    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(themelocator.currentTheme).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();
+    /* Bug Form backgroud colour reset in Publish mode
+        cy.get(formWidgetsPage.formD)
+          .should("have.css", "background-color")
+          .and("eq", "rgb(21, 128, 61)");
+          */
+    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);
+          });
+      });
+  });
+
+  it("Validate Theme change across application", function() {
+    cy.goToEditFromPublish();
+    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 });
+    // select a theme
+    cy.get(commonlocators.themeCard)
+      .last()
+      .click({ force: true });
+
+    // check for alert
+    cy.get(`${commonlocators.themeCard}`)
+      .last()
+      .siblings("div")
+      .first()
+      .invoke("text")
+      .then((text) => {
+        cy.get(commonlocators.toastmsg).contains(`Theme ${text} Applied`);
+      });
+    cy.get(`${commonlocators.themeCard} > main`)
+      .last()
+      .invoke("css", "background-color")
+      .then((backgroudColor) => {
+        cy.get(commonlocators.canvas).should(
+          "have.css",
+          "background-color",
+          backgroudColor,
+        );
+      });
+    cy.get(themelocator.currentTheme).click({ force: true });
+    cy.get(".t--theme-card > main")
+      .first()
+      .invoke("css", "background-color")
+      .then((backgroudColor) => {
+        cy.get(commonlocators.canvas).should(
+          "have.css",
+          "background-color",
+          backgroudColor,
+        );
+      });
+    cy.get(".t--theme-card main > main")
+      .first()
+      .invoke("css", "background-color")
+      .then((CurrentBackgroudColor) => {
+        cy.get(".t--theme-card main > main")
+          .last()
+          .invoke("css", "background-color")
+          .then((selectedBackgroudColor) => {
+            expect(CurrentBackgroudColor).to.equal(selectedBackgroudColor);
+            themeBackgroudColor = CurrentBackgroudColor;
+          });
+      });
+    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(255, 193, 61);']")
+      .last()
+      .click();
+    cy.wait(2000);
+    cy.get(formWidgetsPage.formD)
+      .should("have.css", "background-color")
+      .and("eq", "rgb(255, 193, 61)");
+  });
+
+  it("Publish the App and validate Theme across the app", function() {
+    cy.PublishtheApp();
+    //Bug Form backgroud colour reset in Publish mode
+    /*
+        cy.get(formWidgetsPage.formD)
+            .should("have.css", "background-color")
+            .and("eq", "rgb(255, 193, 61)");
+            */
+    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);
+          });
+      });
+  });
+});

app/client/cypress/locators/ThemeLocators.json

@@ -0,0 +1,13 @@
+{
+    "canvas": "#canvas-selection-0",
+    "border": ".t--theme-appBorderRadius",
+    "popover": ".bp3-popover-content",
+    "shadow": "//h3[contains(text(),'Shadow')]/following-sibling::div//button",
+    "color": ".t--property-pane-sidebar .bp3-popover-target .cursor-pointer",
+    "inputColor": ".t--colorpicker-v2-popover input",
+    "colorPicker": "[data-testid='color-picker']",
+    "greenColor": "[style='background-color: rgb(21, 128, 61);']",
+    "fontsSelected": ".leading-normal",
+    "currentTheme": ".cursor-pointer:contains('Current Theme')",
+    "purpleColor": "[style='background-color: rgb(107,114,128);']"
+}

app/client/cypress/support/commands.js

@@ -36,6 +36,7 @@ import commentsLocators from "../locators/CommentsLocators";
 const queryLocators = require("../locators/QueryEditor.json");
 const welcomePage = require("../locators/welcomePage.json");
 const publishWidgetspage = require("../locators/publishWidgetspage.json");
+const themelocator = require("../locators/ThemeLocators.json");
 import gitSyncLocators from "../locators/gitSyncLocators";
 
 let pageidcopy = " ";
@@ -865,6 +866,7 @@ Cypress.Commands.add("startRoutesForDatasource", () => {
 Cypress.Commands.add("startServerAndRoutes", () => {
   //To update route with intercept after working on alias wrt wait and alias
   cy.server();
+  cy.route("PUT", "/api/v1/themes/applications/*").as("updateTheme");
   cy.route("POST", "/api/v1/datasources/test").as("testDatasource");
   cy.route("PUT", "/api/v1/datasources/*").as("saveDatasource");
   cy.route("GET", "/api/v1/applications/new").as("applications");

app/client/cypress/support/index.js

@@ -28,6 +28,7 @@ import { initLocalstorageRegistry } from "./Objects/Registry";
 import "./OrgCommands";
 import "./queryCommands";
 import "./widgetCommands";
+import "./themeCommands";
 import "./AdminSettingsCommands";
 /// <reference types="cypress-xpath" />
 

app/client/cypress/support/themeCommands.js

@@ -0,0 +1,50 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+/* eslint-disable cypress/no-assigning-return-values */
+/* Contains all methods related to Organisation features*/
+
+require("cy-verify-downloads").addCustomCommand();
+require("cypress-file-upload");
+const themelocator = require("../locators/ThemeLocators.json");
+
+Cypress.Commands.add("borderMouseover", (index, text) => {
+  cy.get(themelocator.border)
+    .eq(index)
+    .trigger("mouseover");
+  cy.wait(2000);
+  cy.get(themelocator.popover).contains(text);
+});
+
+Cypress.Commands.add("shadowMouseover", (index, text) => {
+  cy.xpath(themelocator.shadow)
+    .eq(index)
+    .trigger("mouseover");
+  cy.wait(2000);
+  cy.get(themelocator.popover).contains(text);
+});
+
+Cypress.Commands.add("colorMouseover", (index, text) => {
+  cy.get(themelocator.color)
+    .eq(index)
+    .trigger("mouseover");
+  cy.wait(2000);
+  cy.get(themelocator.popover).contains(text);
+});
+
+Cypress.Commands.add("validateColor", (index, text) => {
+  cy.get(themelocator.color)
+    .eq(index)
+    .click({ force: true });
+  cy.wait(1000);
+  cy.get(themelocator.inputColor).should("have.value", text);
+  cy.wait(1000);
+});
+
+Cypress.Commands.add("chooseColor", (index, color) => {
+  cy.get(themelocator.colorPicker)
+    .eq(index)
+    .click({ force: true });
+  cy.get(color)
+    .last()
+    .click();
+  cy.wait(2000);
+});