From efa3a5bb1314ee61d0590ed2656e958e01467156 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 4 Sep 2024 18:19:30 +0530 Subject: [PATCH 1/6] fix bug 15007 + update test --- .../Theme_MultiSelectWidget_spec.js | 71 ++++++++-------- .../ColorPickerComponentV2.tsx | 29 ++++--- app/client/src/entities/AppTheming/index.ts | 2 +- .../Editor/ThemePropertyPane/ThemeEditor.tsx | 4 +- .../controls/ThemeColorControl.tsx | 82 +++++++++++-------- 5 files changed, 104 insertions(+), 84 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js index ecf774670d1..ae75161139a 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js @@ -12,11 +12,22 @@ import { } from "../../../../support/Objects/ObjectsCore"; let themeFont; +let themeColor; describe( "Theme validation usecase for multi-select widget", { tags: ["@tag.Theme"] }, function () { + let themesSection = (sectionName, themeName) => + "//*[text()='" + + sectionName + + "']/following-sibling::div//*[text()='" + + themeName + + "']"; + let applyTheme = (sectionName, themeName) => + themesSection(sectionName, themeName) + + "/parent::div/following-sibling::div[contains(@class, 't--theme-card')]//div[text()='Apply theme']"; + it("1. Drag and drop multi-select widget and validate Default font and list of font validation + Bug 15007", function () { entityExplorer.DragDropWidgetNVerify( draggableWidgets.MULTISELECT, @@ -81,22 +92,12 @@ describe( }); }); cy.contains("Font").click({ force: true }); - - //Color - Bug 23501 - hence skipping - // cy.wait(1000); - // theme.ChangeThemeColor("purple", "Primary"); - // cy.get(themelocator.inputColor).should("have.value", "purple"); - // cy.wait(1000); - - // theme.ChangeThemeColor("brown", "Background"); - // cy.get(themelocator.inputColor).should("have.value", "brown"); - // cy.wait(1000); - // cy.contains("Color").click({ force: true }); + appSettings.ClosePane(); }); //Skipping due to mentioned bug - it.skip("2. Publish the App and validate Font across the app + Bug 15007", function () { + it("2. Publish the App and validate Font across the app", function () { deployMode.DeployApp(); cy.get(".rc-select-selection-item > .rc-select-selection-item-content") .first() @@ -107,33 +108,35 @@ describe( deployMode.NavigateBacktoEditor(); }); - it.skip("3. Validate current theme feature", function () { - cy.get("#canvas-selection-0").click({ force: true }); + it("3. Apply theme and validate the color", function () { appSettings.OpenAppSettings(); appSettings.GoToThemeSettings(); - //Change the Theme cy.get(commonlocators.changeThemeBtn).click({ force: true }); - cy.get(themelocator.currentTheme).click({ force: true }); - cy.get(".t--theme-card main > main") - .first() - .invoke("css", "background-color") - .then(() => { - cy.get(".t--draggable-multiselectwidgetv2:contains('more')") - .last() - .invoke("css", "background-color") - .then((selectedBackgroudColor) => { - expect("rgba(0, 0, 0, 0)").to.equal(selectedBackgroudColor); - appSettings.ClosePane(); - }); - }); + cy.xpath(applyTheme("Featured themes", "Sunrise")) + .click({ force: true }) + .wait(1000); + cy.contains("Applied theme") + .click() + .parent() + .siblings() + .find(".t--theme-card > main > section > div > main") + .eq(0) + .invoke("css", "background-color") + .then((backgroudColor) => { + themeColor = backgroudColor; + + console.log({ backgroudColor }) + expect(backgroudColor).to.eq("rgb(239, 68, 68)"); + }); - //Publish the App and validate change of Theme across the app in publish mode deployMode.DeployApp(); - cy.xpath("//div[@id='root']//section/parent::div").should( - "have.css", - "background-color", - "rgb(165, 42, 42)", - ); + + console.log({ themeColor }) + + cy.get(".rc-select-selector").click({force: true}); + cy.get(".rc-select-item-option-selected .bp3-control-indicator") + .first() + .should("have.css", "background-color", "rgb(239, 68, 68)"); }); }, ); diff --git a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx index 0c6ee762607..6c012b137e8 100644 --- a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx +++ b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx @@ -367,12 +367,11 @@ const ColorPickerComponent = React.forwardRef( defaultFullColorPickerValue, ); - const debouncedOnChange = React.useCallback( - debounce((color: string, isUpdatedViaKeyboard: boolean) => { + const debouncedOnChange = useMemo(() => { + return debounce((color: string, isUpdatedViaKeyboard: boolean) => { props.changeColor(color, isUpdatedViaKeyboard); - }, DEBOUNCE_TIMER), - [], - ); + }, DEBOUNCE_TIMER); + }, [props]); useEffect(() => { setIsOpen(isOpenProp); @@ -545,13 +544,19 @@ const ColorPickerComponent = React.forwardRef( }; }, [handleKeydown]); - const handleChangeColor = (event: React.ChangeEvent) => { - const value = event.target.value; - if (isValidColor(value)) { - debouncedOnChange(value, true); - } - setColor(value); - }; + const handleChangeColor = useCallback( + (event: React.ChangeEvent) => { + const value = event.target.value; + + if (!value) return; + + if (isValidColor(value)) { + debouncedOnChange(value, true); + } + setColor(value); + }, + [debouncedOnChange], + ); // if props.color changes and state color is different, // sets the state color to props color diff --git a/app/client/src/entities/AppTheming/index.ts b/app/client/src/entities/AppTheming/index.ts index 74f785366ab..b5ce82c73ef 100644 --- a/app/client/src/entities/AppTheming/index.ts +++ b/app/client/src/entities/AppTheming/index.ts @@ -67,7 +67,7 @@ export interface AppThemeProperties { colors: { primaryColor: string; backgroundColor: string; - [key: string]: string; + [key: Exclude]: string; }; borderRadius: { [key: string]: string; diff --git a/app/client/src/pages/Editor/ThemePropertyPane/ThemeEditor.tsx b/app/client/src/pages/Editor/ThemePropertyPane/ThemeEditor.tsx index 1e63890a730..f6b708d09c2 100644 --- a/app/client/src/pages/Editor/ThemePropertyPane/ThemeEditor.tsx +++ b/app/client/src/pages/Editor/ThemePropertyPane/ThemeEditor.tsx @@ -76,7 +76,7 @@ function ThemeEditor() { dispatch(updateSelectedAppThemeAction({ applicationId, theme })); }, - [updateSelectedAppThemeAction], + [applicationId, dispatch], ); /** @@ -91,7 +91,7 @@ function ThemeEditor() { AppThemingMode.APP_THEME_SELECTION, ]), ); - }, [setAppThemingModeStackAction]); + }, [dispatch, themingStack]); /** * resets theme diff --git a/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeColorControl.tsx b/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeColorControl.tsx index c8814af64ba..15f3b8813ac 100644 --- a/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeColorControl.tsx +++ b/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeColorControl.tsx @@ -1,11 +1,12 @@ import { startCase } from "lodash"; -import React, { useState } from "react"; +import React, { useCallback, useState } from "react"; import styled from "styled-components"; import type { AppTheme } from "entities/AppTheming"; import { Tooltip } from "@appsmith/ads"; import ColorPickerComponent from "components/propertyControls/ColorPickerComponentV2"; import { capitalizeFirstLetter } from "utils/helpers"; +import { objectKeys } from "@appsmith/utils"; interface ThemeColorControlProps { theme: AppTheme; @@ -33,50 +34,61 @@ function ThemeColorControl(props: ThemeColorControlProps) { const [selectedColor, setSelectedColor] = useState("primaryColor"); const [isFullColorPicker, setFullColorPicker] = React.useState(false); + const onColorClick = useCallback( + (e: React.MouseEvent) => { + const colorName = e.currentTarget.getAttribute("data-color-name"); + if (!colorName) return; + + setAutoFocus(selectedColor === colorName ? !autoFocus : true); + setSelectedColor(colorName); + }, + [autoFocus, selectedColor], + ); + + const onChangeColor = useCallback( + (color: string) => { + updateTheme({ + ...theme, + properties: { + ...theme.properties, + colors: { + ...theme.properties.colors, + [selectedColor]: color, + }, + }, + }); + }, + [selectedColor, theme, updateTheme], + ); + return (
- {Object.keys(theme.properties.colors).map( - (colorName: string, index: number) => { - return ( - - { - setAutoFocus( - selectedColor === colorName ? !autoFocus : true, - ); - setSelectedColor(colorName); - }} - /> - - ); - }, - )} + {objectKeys(theme.properties.colors).map((colorName, index) => { + return ( + + + + ); + })}
{selectedColor && (

{capitalizeFirstLetter(startCase(selectedColor))}

{ - updateTheme({ - ...theme, - properties: { - ...theme.properties, - colors: { - ...theme.properties.colors, - [selectedColor]: color, - }, - }, - }); - }} + changeColor={onChangeColor} color={userDefinedColors[selectedColor]} + data-color={selectedColor} isFullColorPicker={isFullColorPicker} isOpen={autoFocus} key={selectedColor} From 4d6b70eb632e2501c55c287717a9d8937300b965 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 5 Sep 2024 11:26:58 +0530 Subject: [PATCH 2/6] update test --- .../Theme_MultiSelectWidget_spec.js | 32 ++----------------- app/client/cypress/limited-tests.txt | 3 +- .../cypress/locators/ThemeLocators.json | 5 +-- .../Editor/ThemePropertyPane/ThemeCard.tsx | 1 + .../ThemePropertyPane/ThemeSelector.tsx | 5 ++- 5 files changed, 13 insertions(+), 33 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js index ae75161139a..dc750a7e78a 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js @@ -12,22 +12,11 @@ import { } from "../../../../support/Objects/ObjectsCore"; let themeFont; -let themeColor; describe( "Theme validation usecase for multi-select widget", { tags: ["@tag.Theme"] }, - function () { - let themesSection = (sectionName, themeName) => - "//*[text()='" + - sectionName + - "']/following-sibling::div//*[text()='" + - themeName + - "']"; - let applyTheme = (sectionName, themeName) => - themesSection(sectionName, themeName) + - "/parent::div/following-sibling::div[contains(@class, 't--theme-card')]//div[text()='Apply theme']"; - + function () { it("1. Drag and drop multi-select widget and validate Default font and list of font validation + Bug 15007", function () { entityExplorer.DragDropWidgetNVerify( draggableWidgets.MULTISELECT, @@ -112,27 +101,12 @@ describe( appSettings.OpenAppSettings(); appSettings.GoToThemeSettings(); cy.get(commonlocators.changeThemeBtn).click({ force: true }); - cy.xpath(applyTheme("Featured themes", "Sunrise")) + cy.get(`${themelocator.featuredThemeSection} [data-testid='t--theme-card-Sunrise']`) .click({ force: true }) .wait(1000); - cy.contains("Applied theme") - .click() - .parent() - .siblings() - .find(".t--theme-card > main > section > div > main") - .eq(0) - .invoke("css", "background-color") - .then((backgroudColor) => { - themeColor = backgroudColor; - - console.log({ backgroudColor }) - expect(backgroudColor).to.eq("rgb(239, 68, 68)"); - }); deployMode.DeployApp(); - - console.log({ themeColor }) - + cy.get(".rc-select-selector").click({force: true}); cy.get(".rc-select-item-option-selected .bp3-control-indicator") .first() diff --git a/app/client/cypress/limited-tests.txt b/app/client/cypress/limited-tests.txt index 31c0c0253fe..76d5ffd4933 100644 --- a/app/client/cypress/limited-tests.txt +++ b/app/client/cypress/limited-tests.txt @@ -1,5 +1,6 @@ # To run only limited tests - give the spec names in below format: -cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js +#cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js +cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js # For running all specs - uncomment below: #cypress/e2e/**/**/* diff --git a/app/client/cypress/locators/ThemeLocators.json b/app/client/cypress/locators/ThemeLocators.json index 6bf51740024..7ccd2e5d770 100644 --- a/app/client/cypress/locators/ThemeLocators.json +++ b/app/client/cypress/locators/ThemeLocators.json @@ -9,5 +9,6 @@ "greenColor": "[style='background-color: rgb(21, 128, 61);']", "fontsSelected": ".leading-normal", "currentTheme": ".cursor-pointer:contains('Applied theme')", - "purpleColor": "[style='background-color: rgb(107,114,128);']" -} + "purpleColor": "[style='background-color: rgb(107,114,128);']", + "featuredThemeSection": "[data-testid='t--featured-themes']" +} \ No newline at end of file diff --git a/app/client/src/pages/Editor/ThemePropertyPane/ThemeCard.tsx b/app/client/src/pages/Editor/ThemePropertyPane/ThemeCard.tsx index 223ca194663..fcdc40d0c1a 100644 --- a/app/client/src/pages/Editor/ThemePropertyPane/ThemeCard.tsx +++ b/app/client/src/pages/Editor/ThemePropertyPane/ThemeCard.tsx @@ -177,6 +177,7 @@ export function ThemeCard(props: ThemeCard) { "overflow-hidden": !selectable, "hover:shadow-xl cursor-pointer": selectable, })} + data-testid={`t--theme-card-${theme.name}`} onClick={changeSelectedTheme} > diff --git a/app/client/src/pages/Editor/ThemePropertyPane/ThemeSelector.tsx b/app/client/src/pages/Editor/ThemePropertyPane/ThemeSelector.tsx index d192ffef188..3a74543d5f4 100644 --- a/app/client/src/pages/Editor/ThemePropertyPane/ThemeSelector.tsx +++ b/app/client/src/pages/Editor/ThemePropertyPane/ThemeSelector.tsx @@ -76,7 +76,10 @@ function ThemeSelector() { ))} )} -
+
Featured themes {systemThemes.map((theme) => ( Date: Thu, 5 Sep 2024 11:39:24 +0530 Subject: [PATCH 3/6] fix prettier error --- .../ThemingTests/Theme_MultiSelectWidget_spec.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js index dc750a7e78a..64ade4b8f07 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js @@ -16,7 +16,7 @@ let themeFont; describe( "Theme validation usecase for multi-select widget", { tags: ["@tag.Theme"] }, - function () { + function () { it("1. Drag and drop multi-select widget and validate Default font and list of font validation + Bug 15007", function () { entityExplorer.DragDropWidgetNVerify( draggableWidgets.MULTISELECT, @@ -81,7 +81,7 @@ describe( }); }); cy.contains("Font").click({ force: true }); - + appSettings.ClosePane(); }); @@ -101,13 +101,15 @@ describe( appSettings.OpenAppSettings(); appSettings.GoToThemeSettings(); cy.get(commonlocators.changeThemeBtn).click({ force: true }); - cy.get(`${themelocator.featuredThemeSection} [data-testid='t--theme-card-Sunrise']`) - .click({ force: true }) - .wait(1000); + cy.get( + `${themelocator.featuredThemeSection} [data-testid='t--theme-card-Sunrise']`, + ) + .click({ force: true }) + .wait(1000); deployMode.DeployApp(); - - cy.get(".rc-select-selector").click({force: true}); + + cy.get(".rc-select-selector").click({ force: true }); cy.get(".rc-select-item-option-selected .bp3-control-indicator") .first() .should("have.css", "background-color", "rgb(239, 68, 68)"); From 3f7e7b6ce14e4b55446d34fbeae0994cd0917f38 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 5 Sep 2024 13:09:42 +0530 Subject: [PATCH 4/6] update limited-tests.txt --- app/client/cypress/limited-tests.txt | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/client/cypress/limited-tests.txt b/app/client/cypress/limited-tests.txt index 76d5ffd4933..31c0c0253fe 100644 --- a/app/client/cypress/limited-tests.txt +++ b/app/client/cypress/limited-tests.txt @@ -1,6 +1,5 @@ # To run only limited tests - give the spec names in below format: -#cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js -cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js +cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js # For running all specs - uncomment below: #cypress/e2e/**/**/* From 83377915fa6fe19845e5df84df449e3c8049c064 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 5 Sep 2024 16:22:09 +0530 Subject: [PATCH 5/6] update selectors --- .../Theme_MultiSelectWidget_spec.js | 61 +++++-------------- .../cypress/locators/ThemeLocators.json | 3 +- app/client/cypress/locators/WidgetLocators.ts | 6 ++ .../packages/eslint-plugin/package.json | 2 +- 4 files changed, 23 insertions(+), 49 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js index 64ade4b8f07..a62fbc38b0b 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js @@ -1,6 +1,7 @@ const commonlocators = require("../../../../locators/commonlocators.json"); const themelocator = require("../../../../locators/ThemeLocators.json"); +import { multiSelectWidgetLocators } from "../../../../locators/WidgetLocators"; import { agHelper, locators, @@ -26,48 +27,16 @@ describe( agHelper.GetNClick(locators._canvas); appSettings.OpenAppSettings(); appSettings.GoToThemeSettings(); - //Border validation - //cy.contains("Border").click({ force: true }); - cy.get(themelocator.border).should("have.length", "3"); - cy.borderMouseover(0, "none"); - cy.borderMouseover(1, "M"); - cy.borderMouseover(2, "L"); - cy.get(themelocator.border).eq(1).click({ force: true }); - cy.wait("@updateTheme").should( - "have.nested.property", - "response.body.responseMeta.status", - 200, - ); - cy.wait(1000); - cy.contains("Border").click({ force: true }); - - //Shadow validation - //cy.contains("Shadow").click({ force: true }); - cy.wait(2000); - cy.xpath(theme.locators._boxShadow("L")).click({ force: true }); - cy.wait("@updateTheme").should( - "have.nested.property", - "response.body.responseMeta.status", - 200, - ); - cy.wait(1000); - cy.contains("Shadow").click({ force: true }); - - //Font + cy.xpath( "//p[text()='App font']/following-sibling::section//div//input", ).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(10) + agHelper.GetNClick($elem); + + agHelper.GetElement(themelocator.fontsSelected) .should("contain.text", "Nunito Sans"); - cy.get(".rc-virtual-list .rc-select-item-option") + agHelper.GetElement(".rc-virtual-list .rc-select-item-option") .find(".leading-normal") .eq(3) .then(($childElem) => { @@ -80,18 +49,18 @@ describe( themeFont = `Inter, sans-serif`; }); }); + cy.contains("Font").click({ force: true }); appSettings.ClosePane(); }); - //Skipping due to mentioned bug it("2. Publish the App and validate Font across the app", function () { deployMode.DeployApp(); - cy.get(".rc-select-selection-item > .rc-select-selection-item-content") + agHelper.GetElement(multiSelectWidgetLocators.multiSelectWidgetSelectedOptionContent) .first() .should("have.css", "font-family", themeFont); - cy.get(".rc-select-selection-item > .rc-select-selection-item-content") + agHelper.GetElement(multiSelectWidgetLocators.multiSelectWidgetSelectedOptionContent) .last() .should("have.css", "font-family", themeFont); deployMode.NavigateBacktoEditor(); @@ -100,17 +69,15 @@ describe( it("3. Apply theme and validate the color", function () { appSettings.OpenAppSettings(); appSettings.GoToThemeSettings(); - cy.get(commonlocators.changeThemeBtn).click({ force: true }); - cy.get( + agHelper.GetNClick(commonlocators.changeThemeBtn, 0, true); + agHelper.GetNClick( `${themelocator.featuredThemeSection} [data-testid='t--theme-card-Sunrise']`, ) - .click({ force: true }) - .wait(1000); - + deployMode.DeployApp(); - cy.get(".rc-select-selector").click({ force: true }); - cy.get(".rc-select-item-option-selected .bp3-control-indicator") + agHelper.GetNClick(multiSelectWidgetLocators.multiSelectWidgetTrigger); + agHelper.GetElement(multiSelectWidgetLocators.multiSelectWidgetDropdownOptionCheckbox) .first() .should("have.css", "background-color", "rgb(239, 68, 68)"); }); diff --git a/app/client/cypress/locators/ThemeLocators.json b/app/client/cypress/locators/ThemeLocators.json index 7ccd2e5d770..4f7b655bc92 100644 --- a/app/client/cypress/locators/ThemeLocators.json +++ b/app/client/cypress/locators/ThemeLocators.json @@ -10,5 +10,6 @@ "fontsSelected": ".leading-normal", "currentTheme": ".cursor-pointer:contains('Applied theme')", "purpleColor": "[style='background-color: rgb(107,114,128);']", - "featuredThemeSection": "[data-testid='t--featured-themes']" + "featuredThemeSection": "[data-testid='t--featured-themes']", + "fontOption": ".rc-virtual-list .rc-select-item-option" } \ No newline at end of file diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts index 8e2d368244c..3f841874987 100644 --- a/app/client/cypress/locators/WidgetLocators.ts +++ b/app/client/cypress/locators/WidgetLocators.ts @@ -175,3 +175,9 @@ export const buttongroupwidgetlocators = { `//*[contains(@class,'bp3-menu-item')]//*[text()='${text}']`, button: "//*[contains(@class,'t--widget-buttongroupwidget')]//button", }; + +export const multiSelectWidgetLocators = { + multiSelectWidgetTrigger: ".t--widget-multiselectwidgetv2 .rc-select-selector", + multiSelectWidgetSelectedOptionContent: ".rc-select-selection-item > .rc-select-selection-item-content", + multiSelectWidgetDropdownOptionCheckbox: ".multi-select-dropdown .rc-select-item-option-selected .bp3-control-indicator" +}; \ No newline at end of file diff --git a/app/client/packages/eslint-plugin/package.json b/app/client/packages/eslint-plugin/package.json index 46f1726ebec..389406b120b 100644 --- a/app/client/packages/eslint-plugin/package.json +++ b/app/client/packages/eslint-plugin/package.json @@ -11,4 +11,4 @@ "postinstall": "yarn build", "test:unit": "yarn g:jest" } -} \ No newline at end of file +} From dec21477152095d034f63a7e08d2719cb0687b12 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 6 Sep 2024 11:55:30 +0530 Subject: [PATCH 6/6] fix prettier error --- .../Theme_MultiSelectWidget_spec.js | 33 ++++++++++++------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js index a62fbc38b0b..0f149cf2179 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js @@ -27,17 +27,19 @@ describe( agHelper.GetNClick(locators._canvas); appSettings.OpenAppSettings(); appSettings.GoToThemeSettings(); - + cy.xpath( "//p[text()='App font']/following-sibling::section//div//input", ).then(($elem) => { - agHelper.GetNClick($elem); - - agHelper.GetElement(themelocator.fontsSelected) + agHelper.GetNClick($elem); + + agHelper + .GetElement(themelocator.fontsSelected) .should("contain.text", "Nunito Sans"); - agHelper.GetElement(".rc-virtual-list .rc-select-item-option") - .find(".leading-normal") + agHelper + .GetElement(themelocator.fontOption) + .find(themelocator.fontsSelected) .eq(3) .then(($childElem) => { cy.get($childElem).click({ force: true }); @@ -57,10 +59,16 @@ describe( it("2. Publish the App and validate Font across the app", function () { deployMode.DeployApp(); - agHelper.GetElement(multiSelectWidgetLocators.multiSelectWidgetSelectedOptionContent) + agHelper + .GetElement( + multiSelectWidgetLocators.multiSelectWidgetSelectedOptionContent, + ) .first() .should("have.css", "font-family", themeFont); - agHelper.GetElement(multiSelectWidgetLocators.multiSelectWidgetSelectedOptionContent) + agHelper + .GetElement( + multiSelectWidgetLocators.multiSelectWidgetSelectedOptionContent, + ) .last() .should("have.css", "font-family", themeFont); deployMode.NavigateBacktoEditor(); @@ -72,12 +80,15 @@ describe( agHelper.GetNClick(commonlocators.changeThemeBtn, 0, true); agHelper.GetNClick( `${themelocator.featuredThemeSection} [data-testid='t--theme-card-Sunrise']`, - ) - + ); + deployMode.DeployApp(); agHelper.GetNClick(multiSelectWidgetLocators.multiSelectWidgetTrigger); - agHelper.GetElement(multiSelectWidgetLocators.multiSelectWidgetDropdownOptionCheckbox) + agHelper + .GetElement( + multiSelectWidgetLocators.multiSelectWidgetDropdownOptionCheckbox, + ) .first() .should("have.css", "background-color", "rgb(239, 68, 68)"); });