test: PartialExport_Widgets_spec - updated test validation logic (#33371

)

Spec -
cypress/e2e/Regression/ClientSide/PartialImportExport/PartialExport_Widgets_spec.ts

RCA:
Comparison of this file post export is failing this file needed change.
closeModal('Insert_Modal')) is changed to closeModal(Insert_Modal.name))
and
showModal('Delete_Modal')) to showModal(Delete_Modal.name))

Solution:
To overcome this issue of frequent updation of file we have come up with
a solution to validate the partial import post export in a different
way.
1. We are creating a separate page and importing the partially exported
file
2. We are doing widget validation based on the selection we did during
our export
3. We are checking the properties of the widgets in the process in the
new page

---------

Co-authored-by: Trisha Anand <[email protected]>

app/client/cypress/e2e/Regression/ClientSide/PartialImportExport/PartialExport_Widgets_spec.ts

@@ -3,8 +3,9 @@ import {
  homePage,
  partialImportExport,
  assertHelper,
+ agHelper,
 } from "../../../../support/Objects/ObjectsCore";
-
+import PageList from "../../../../support/Pages/PageList";
 const fixtureName = "PartialImportExportSampleApp.json";
 
 describe(
@@ -17,14 +18,52 @@ describe(
  partialImportExport.OpenExportModal();
  });
 
- it("1. Should export all the widgets", () => {
- partialImportExport.ExportAndCompareDownloadedFile(
-  "widgets",
+ it("1. Test to export a partial app, import it, and verify all the widgets and their properties", () => {
+ //Export widgets selected
+ partialImportExport.PartiallyExportFile(
  4,
  partialImportExport.locators.export.modelContents.widgetsSection,
- "WidgetsExportedOnly.json",
- fixtureName,
+ ["data_table", "Text16", "refresh_btn", "add_btn"],
+ );
+
+ //Add a new page
+ PageList.AddNewPage();
+
+ //Import the exported App
+ partialImportExport.OpenImportModal();
+ partialImportExport.ImportPartiallyExportedFile(
+ "PartialImportExportSampleApp.json",
+ "Widgets",
+ ["data_table", "Text16", "refresh_btn", "add_btn"],
+ "downloads",
  );
+
+ //Properties for each widget exported
+ agHelper.selectAndValidateWidgetNameAndProperty({
+ widgetName: "data_table",
+ propFieldName: "Table data",
+ valueToValidate: "{{SelectQuery.data}}",
+ });
+
+ agHelper.selectAndValidateWidgetNameAndProperty({
+ widgetName: "Text16",
+ propFieldName: "Text",
+ valueToValidate: "public_users Data + {{JSObject1.addNumbers(3,7)}}",
+ });
+
+ agHelper.selectAndValidateWidgetNameAndProperty({
+ widgetName: "refresh_btn",
+ propFieldName: "onClick",
+ valueToValidate: "{{SelectQuery.run()}}",
+ toggleEle: "onClick",
+ });
+
+ agHelper.selectAndValidateWidgetNameAndProperty({
+ widgetName: "add_btn",
+ propFieldName: "onClick",
+ valueToValidate: "{{showModal(Insert_Modal.name)}}",
+ toggleEle: "onClick",
+ });
  });
  },
 );

app/client/cypress/support/Pages/AggregateHelper.ts

@@ -4,6 +4,9 @@ import { ObjectsRegistry } from "../Objects/Registry";
 import type CodeMirror from "codemirror";
 import type { EntityItemsType } from "./AssertHelper";
 import { EntityItems } from "./AssertHelper";
+import EditorNavigator from "./EditorNavigation";
+import { EntityType } from "./EditorNavigation";
+import ClickOptions = Cypress.ClickOptions;
 
 type ElementType = string | JQuery<HTMLElement>;
 
@@ -19,6 +22,15 @@ interface SubActionParams {
  force?: boolean;
  toastToValidate?: string;
 }
+interface SelectAndValidateParams {
+ clickOptions?: Partial<ClickOptions>;
+ widgetName: string;
+ widgetType?: EntityType;
+ hierarchy?: string[];
+ propFieldName: string;
+ valueToValidate: string;
+ toggleEle?: string | null;
+}
 
 let LOCAL_STORAGE_MEMORY: any = {};
 export interface IEnterValue {
@@ -1820,4 +1832,40 @@ export class AggregateHelper {
  .click({ force: force, ctrlKey: ctrlKey })
  .wait(waitTimeInterval);
  }
+
+ public selectAndValidateWidgetNameAndProperty({
+ clickOptions = {},
+ hierarchy = [],
+ propFieldName,
+ toggleEle = null,
+ valueToValidate,
+ widgetName,
+ widgetType = EntityType.Widget,
+ }: SelectAndValidateParams) {
+ // Select the widget by name, type, and hierarchy with optional click options
+ EditorNavigator.SelectEntityByName(
+ widgetName,
+ widgetType,
+ clickOptions,
+ hierarchy,
+ );
+
+ // Assert that the Property Pane title matches the widget name
+ this.AssertText(
+ ObjectsRegistry.PropertyPane._paneTitle,
+ "text",
+ widgetName,
+ );
+
+ // If a toggle element is provided, toggle its JavaScript mode
+ if (toggleEle) {
+ ObjectsRegistry.PropertyPane.ToggleJSMode(toggleEle);
+ }
+
+ // Validate that the property field value matches the expected value
+ ObjectsRegistry.PropertyPane.ValidatePropertyFieldValue(
+ propFieldName,
+ valueToValidate,
+ );
+ }
 }

app/client/cypress/support/Pages/PartialImportExport.ts

@@ -1,7 +1,10 @@
 import { ObjectsRegistry } from "../Objects/Registry";
 import { EntityItems } from "./AssertHelper";
 import { AppSidebar, AppSidebarButton, PageLeftPane } from "./EditorNavigation";
-
+import {
+ createMessage,
+ ERROR_IN_EXPORTING_APP,
+} from "../../../src/ce/constants/messages";
 const exportedPropertiesToUIEntitiesMap = {
  jsObjects: "actionCollectionList",
  datasources: "datasourceList",
@@ -87,9 +90,7 @@ export default class PartialImportExport {
  false,
  );
  this.agHelper.GetNClick(this.locators.export.modelContents.exportButton);
- this.agHelper.FailIfErrorToast(
- "Error exporting application. Please try again.",
- );
+ this.agHelper.FailIfErrorToast(createMessage(ERROR_IN_EXPORTING_APP));
 
  cy.readFile(`cypress/downloads/${fixtureName}`).then((exportedFile) => {
  cy.fixture(`PartialImportExport/${fileNameToCompareWith}`).then(
@@ -125,17 +126,27 @@ export default class PartialImportExport {
  fileName: string,
  sectionTitle: "JSObjects" | "Queries" | "Widgets" | "Data" | "Libraries",
  elementsToCheck: string[],
+ filePath: string = "fixtures",
  ) {
  cy.intercept("POST", "/api/v1/applications/import/partial/**").as(
  "partialImportNetworkCall",
  );
 
- cy.xpath(this.homePage._uploadFile).selectFile(
- `cypress/fixtures/PartialImportExport/${fileName}`,
- {
- force: true,
- },
- );
+ if (filePath == "fixtures") {
+ cy.xpath(this.homePage._uploadFile).selectFile(
+ `cypress/fixtures/PartialImportExport/${fileName}`,
+ {
+ force: true,
+ },
+ );
+ } else if (filePath == "downloads") {
+ cy.xpath(this.homePage._uploadFile).selectFile(
+ `cypress/downloads/${fileName}`,
+ {
+ force: true,
+ },
+ );
+ }
  cy.wait("@partialImportNetworkCall");
 
  this.agHelper.FailIfErrorToast(
@@ -175,4 +186,32 @@ export default class PartialImportExport {
  PageLeftPane.assertPresence(element);
  });
  }
+
+ PartiallyExportFile(
+ sectionIndex: number,
+ sectionSelector: string,
+ checkbox: string[],
+ ) {
+ this.agHelper.GetNClick(
+ this.locators.export.modelContents.sectionHeaders,
+ sectionIndex,
+ );
+
+ const currentSection = this.agHelper.GetElement(sectionSelector);
+
+ currentSection.find("label").each((element) => {
+ const labelText = element.text().trim();
+ if (checkbox.includes(labelText)) {
+ cy.wrap(element).click({ force: true });
+ }
+ });
+
+ this.agHelper.AssertElementEnabledDisabled(
+ this.locators.export.modelContents.exportButton,
+ 0,
+ false,
+ );
+ this.agHelper.GetNClick(this.locators.export.modelContents.exportButton);
+ this.agHelper.FailIfErrorToast(createMessage(ERROR_IN_EXPORTING_APP));
+ }
 }

app/client/src/ce/constants/messages.ts

@@ -701,7 +701,9 @@ export const IMPORT_APP_SUCCESSFUL = () => "Application imported successfully";
 //Unable to import application in workspace
 export const UNABLE_TO_IMPORT_APP = () =>
  "Unable to import application in workspace";
-
+//
+export const ERROR_IN_EXPORTING_APP = () =>
+ "Error exporting application. Please try again.";
 //undo redo
 export const WIDGET_REMOVED = (widgetName: string) =>
  `${widgetName} is removed`;

app/client/src/sagas/PartialImportExportSagas/PartialExportSagas.ts

@@ -22,6 +22,10 @@ import {
 import { validateResponse } from "../ErrorSagas";
 import { createWidgetCopy } from "../WidgetOperationUtils";
 import { getWidgets } from "../selectors";
+import {
+ createMessage,
+ ERROR_IN_EXPORTING_APP,
+} from "@appsmith/constants/messages";
 
 export interface PartialExportParams {
  jsObjects: string[];
@@ -75,7 +79,7 @@ export function* partialExportSaga(action: ReduxAction<PartialExportParams>) {
  });
  }
  } catch (e) {
- toast.show(`Error exporting application. Please try again.`, {
+ toast.show(createMessage(ERROR_IN_EXPORTING_APP), {
  kind: "error",
  });
  yield put({