test: adding test for partial import/export within new page/App

[NandanAnantharamu]

Adding tests for partial import/export
To be done into a new app
To be done into a new page

/ok-to-test tags="@tag.All"

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11966660885
Commit: 6cfcddb
Cypress dashboard.
Tags: @tag.All
Spec:

---

Fri, 22 Nov 2024 05:53:22 UTC

[coderabbitai]

Walkthrough

The changes introduce a new Cypress end-to-end test file, PartialImportExportWithinNewPageAndApp.ts, which focuses on testing the partial import and export functionality in a web application. Additionally, new JSON configuration files, ImportExport.json, PartialQueryExport.json, and PartialWidgetExport.json, are added, detailing the structure for application components, including data sources, custom libraries, actions, and widgets. The tests ensure the correct behavior of the import and export processes, while the JSON files provide necessary configurations for the application context.

Changes

File Path	Change Summary
app/client/cypress/e2e/Regression/ClientSide/PartialImportExport/PartialImportExportWithinNewPageAndApp.ts	New file added containing Cypress end-to-end tests for partial import and export functionality.
app/client/cypress/fixtures/PartialImportExport/ImportExport.json	New JSON structure added detailing application configuration, including data sources, libraries, actions, and widgets.
app/client/cypress/fixtures/PartialImportExport/PartialQueryExport.json	New JSON file added defining the structure for an application action related to query export.
app/client/cypress/fixtures/PartialImportExport/PartialWidgetExport.json	New JSON file added defining the structure for application widget export, including layout and properties.
app/client/cypress/limited-tests.txt	Updated test file path for limited tests to include the new Cypress test file for partial import/export.

Possibly related PRs

• test:PartialExport_Widgets spec file updated and import app method updated with validations #33343: This PR addresses a failing test related to the export and import functionality, which is directly related to the partial import and export tests introduced in the main PR.
• test: PartialExport_Widgets_spec - updated test validation logic #33371: This PR updates the test validation logic for partial exports, which aligns with the changes made in the main PR regarding partial import and export functionality.
• test: updated tests with aghelper table methods #33737: This PR updates tests with new helper methods that could be relevant to the testing strategies employed in the main PR.
• chore: json migration changes #34238: This PR involves JSON migration changes that may relate to the data structures used in the import/export functionality tested in the main PR.
• test: fixed failing GitImport test #34589: This PR fixes a Git import test, which may share similarities with the import/export tests in the main PR.
• feat: move building blocks to bottom of widget explorer #35270: This PR focuses on UI tests that may indirectly relate to the user interface aspects of the import/export functionality.
• chore: Anvil on canvas UI tests #35342: This PR introduces tests for the Anvil editor, which may include functionality relevant to the import/export features.
• test: replace 3rd party API1 CE #36518: This PR updates a third-party API used in tests, which may affect the import/export functionality tested in the main PR.
• chore: Updated another set of third party urls #36571: This PR updates fetch specifications, which could relate to data fetching in the import/export processes.
• test: fixed datepicker skipped tests set 2 #37126: This PR enhances the DatePicker tests, which may be relevant if the import/export functionality involves date handling.

Suggested labels

Task, ok-to-test

Suggested reviewers

• ApekshaBhosale
• sagar-qa007

🎉 In the land of code where tests do play,
New imports and exports brighten the day.
With JSON structures crisp and neat,
Cypress tests make the workflow complete!
So here's to the changes, both bold and bright,
Ensuring our app runs just right! 🌟

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 4

🧹 Outside diff range and nitpick comments (6)

app/client/cypress/e2e/Regression/ClientSide/PartialImportExport/PartialImportExportWithinNewPageAndApp.ts (2)

31-31: Remove empty beforeEach hook.

Empty hooks should be removed to maintain clean test code.

-    beforeEach(() => {});

---

86-105: Refactor repeated import patterns into a helper function.

The pattern of opening modal and importing files is repeated across test cases. Consider extracting this into a helper function.

// Suggested helper function:
const importFileWithType = (fileName: string, type: string, elements: string[]) => {
  partialImportExport.OpenImportModal();
  partialImportExport.ImportPartiallyExportedFile(fileName, type, elements);
};

// Usage in test:
importFileWithType("PartialWidgetExport.json", "Widgets", ["Table1", "Button1"]);
importFileWithType("PartialQueryExport.json", "Queries", ["Api1"]);

app/client/cypress/fixtures/PartialImportExport/ImportExport.json (4)

1-1: Consider bundling jspdf library

Using jspdf directly from CDN (v2.5.1) may cause reliability issues. Consider bundling it with the application.

---

1-1: Consider parameterizing API configuration

The Google Sheets API action has hardcoded values for:

• Sheet URL
• Pagination limits
• Column selection

---

1-1: Complete the implementation of JSObject2

The myFun2 function contains TODO comments and is not implemented.

Would you like me to help implement the async function or create an issue to track this?

---

1-1: Consider making table columns configurable

The table widget has hardcoded configurations for:

• Column widths
• Column types
• Number formatting

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 8a45e5a and 8c9026c.

📒 Files selected for processing (2)

• app/client/cypress/e2e/Regression/ClientSide/PartialImportExport/PartialImportExportWithinNewPageAndApp.ts (1 hunks)
• app/client/cypress/fixtures/PartialImportExport/ImportExport.json (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

app/client/cypress/e2e/Regression/ClientSide/PartialImportExport/PartialImportExportWithinNewPageAndApp.ts (1)

Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:

• Follow best practices for Cypress code and e2e automation.
• Avoid using cy.wait in code.
• Avoid using cy.pause in code.
• Avoid using agHelper.sleep().
• Use locator variables for locators and do not use plain strings.
• Use data-* attributes for selectors.
• Avoid Xpaths, Attributes and CSS path.
• Avoid selectors like .btn.submit or button[type=submit].
• Perform logins via API with LoginFromAPI.
• Perform logout via API with LogOutviaAPI.
• Perform signup via API with SignupFromAPI.
• Avoid using it.only.
• Avoid using after and aftereach in test cases.
• Use multiple assertions for expect statements.
• Avoid using strings for assertions.
• Do not use duplicate filenames even with different paths.
• Avoid using agHelper.Sleep, this.Sleep in any file in code.

app/client/cypress/fixtures/PartialImportExport/ImportExport.json (1)

Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:

• Follow best practices for Cypress code and e2e automation.
• Avoid using cy.wait in code.
• Avoid using cy.pause in code.
• Avoid using agHelper.sleep().
• Use locator variables for locators and do not use plain strings.
• Use data-* attributes for selectors.
• Avoid Xpaths, Attributes and CSS path.
• Avoid selectors like .btn.submit or button[type=submit].
• Perform logins via API with LoginFromAPI.
• Perform logout via API with LogOutviaAPI.
• Perform signup via API with SignupFromAPI.
• Avoid using it.only.
• Avoid using after and aftereach in test cases.
• Use multiple assertions for expect statements.
• Avoid using strings for assertions.
• Do not use duplicate filenames even with different paths.
• Avoid using agHelper.Sleep, this.Sleep in any file in code.

🔇 Additional comments (2)

app/client/cypress/e2e/Regression/ClientSide/PartialImportExport/PartialImportExportWithinNewPageAndApp.ts (1)

1-13: LGTM! Clean imports and fixture setup.

app/client/cypress/fixtures/PartialImportExport/ImportExport.json (1)

1-1: Verify schema version compatibility

The large gap between client schema version (1) and server schema version (11) may indicate version compatibility issues.

✅ Verification successful

Based on the search results, I can see that the schema version mismatch between client (1) and server (11) in the file under review is actually a common pattern across many test fixtures and application configurations. The version differences appear to be by design, with client versions typically being 1.0 while server versions vary from 3 to 11 across different test cases and configurations.

Schema version difference is expected

The version mismatch between client schema version 1 and server schema version 11 is consistent with the application's test fixtures and configuration patterns.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check schema version compatibility in other config files
rg -g "*.json" "\"(client|server)SchemaVersion\""

Length of output: 266476

[coderabbitai]

🛠️ Refactor suggestion

Remove redundant OpenImportModal call.

The import modal is already opened in line 55.

-      partialImportExport.OpenImportModal();
       partialImportExport.ImportPartiallyExportedFile(

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	partialImportExport.OpenImportModal();
	partialImportExport.ImportPartiallyExportedFile(
	partialImportExport.ImportPartiallyExportedFile(

[coderabbitai]

⚠️ Potential issue

Replace cy.wait with proper assertions.

Using cy.wait is against our coding guidelines. Instead, wait for specific elements or network requests to complete.

-      cy.wait(5000);
+      agHelper.WaitUntilToastDisappear();

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	cy.wait(5000);
	agHelper.WaitUntilToastDisappear();

[coderabbitai]

🛠️ Refactor suggestion

Use locator variables instead of string concatenation.

String concatenation in locators should be avoided. Define these as locator variables.

-      agHelper.AssertElementLength(`${locators._widgetInDeployed('tablewidgetv2')}`, 2);
-      agHelper.AssertElementLength(`${locators._widgetInDeployed('buttonwidget')}`, 2);
+      const tableWidgetLocator = locators._widgetInDeployed('tablewidgetv2');
+      const buttonWidgetLocator = locators._widgetInDeployed('buttonwidget');
+      agHelper.AssertElementLength(tableWidgetLocator, 2);
+      agHelper.AssertElementLength(buttonWidgetLocator, 2);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	agHelper.AssertElementLength(`${locators._widgetInDeployed('tablewidgetv2')}`, 2);
	agHelper.AssertElementLength(`${locators._widgetInDeployed('buttonwidget')}`, 2);
	const tableWidgetLocator = locators._widgetInDeployed('tablewidgetv2');
	const buttonWidgetLocator = locators._widgetInDeployed('buttonwidget');
	agHelper.AssertElementLength(tableWidgetLocator, 2);
	agHelper.AssertElementLength(buttonWidgetLocator, 2);

[coderabbitai]

⚠️ Potential issue

Data source URL is missing

The Google Sheets data source has an empty URL which will cause connection issues.

[NandanAnantharamu]

/ci-test-limit

[github-actions]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/11842785824.
Cypress dashboard
PR: #37388.

[NandanAnantharamu]

/ci-test-limit

[github-actions]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/11852126689.
Cypress dashboard
PR: #37388.

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

app/client/cypress/fixtures/PartialImportExport/PartialWidgetExport.json (2)

1-1: Format the JSON for better readability.

The JSON content is minified into a single line, making it difficult to read and maintain. Consider formatting it with proper indentation.

---

1-1: Consider using dynamic IDs for table columns.

The table widget uses hardcoded IDs (iwmm57yz9c, 6auq1k5wf7, etc.) which could make tests brittle. Consider using more meaningful, test-specific IDs or generating them dynamically.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 5c0764d and 528cd01.

📒 Files selected for processing (2)

• app/client/cypress/fixtures/PartialImportExport/PartialQueryExport.json (1 hunks)
• app/client/cypress/fixtures/PartialImportExport/PartialWidgetExport.json (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• app/client/cypress/fixtures/PartialImportExport/PartialQueryExport.json

🧰 Additional context used

📓 Path-based instructions (1)

app/client/cypress/fixtures/PartialImportExport/PartialWidgetExport.json (1)

Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:

• Follow best practices for Cypress code and e2e automation.
• Avoid using cy.wait in code.
• Avoid using cy.pause in code.
• Avoid using agHelper.sleep().
• Use locator variables for locators and do not use plain strings.
• Use data-* attributes for selectors.
• Avoid Xpaths, Attributes and CSS path.
• Avoid selectors like .btn.submit or button[type=submit].
• Perform logins via API with LoginFromAPI.
• Perform logout via API with LogOutviaAPI.
• Perform signup via API with SignupFromAPI.
• Avoid using it.only.
• Avoid using after and aftereach in test cases.
• Use multiple assertions for expect statements.
• Avoid using strings for assertions.
• Do not use duplicate filenames even with different paths.
• Avoid using agHelper.Sleep, this.Sleep in any file in code.

🔇 Additional comments (2)

app/client/cypress/fixtures/PartialImportExport/PartialWidgetExport.json (2)

1-1: Verify table data binding with Api1.

The table's data is bound to {{Api1.data}}, but there's no indication of Api1's definition or mock data setup.

✅ Verification successful

Based on the search results, I can see that Api1 is used extensively in test files and fixtures, particularly in Cypress tests. The file PartialImportExport/PartialQueryExport.json shows Api1 is configured as a Google Sheets API query to fetch data from a specific sheet. This is a valid test fixture setup.

Api1 data binding is correctly configured in test fixtures

The table's data binding to {{Api1.data}} is part of a test fixture that uses Google Sheets API to fetch data, which is a common testing pattern. The mock data setup exists in the test fixtures.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for Api1 mock data or setup in test files
rg -t js -t ts "Api1.*=" app/client/cypress/
rg -t json "Api1" app/client/cypress/fixtures/

Length of output: 100771

---

1-1: Verify the availability of JSObject1 in test context.

The button's onClick handler references JSObject1.genPDF(), but there's no indication that this object will be available during tests.

✅ Verification successful

The previous search didn't provide enough context. Let's try to find JSObject1 and its genPDF function in the test fixtures and implementation files to verify its availability in the test context.

---

JSObject1 and its genPDF function are properly defined and available in test context

The code shows that JSObject1 is properly defined in the application with the genPDF function that uses the jspdf library to generate PDFs. The function is correctly referenced in the button's onClick handler and has access to Table1's data and column order.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for JSObject1 definition in test files
rg -t js -t ts "JSObject1.*=.*{" app/client/cypress/
rg -t js -t ts "const.*JSObject1" app/client/cypress/

Length of output: 100771

---

Script:

#!/bin/bash
# Search for JSObject1 definition in test files and fixtures
rg -t js -t ts -t json "JSObject1" app/client/cypress/

# Search for genPDF function definition
rg -t js -t ts -t json "genPDF.*=.*" app/client/cypress/

Length of output: 307231

[github-actions]

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11852126689.
Cypress dashboard url: Click here!
All cypress tests have passed 🎉🎉🎉

[NandanAnantharamu]

/ci-test-limit-count run_count=25

[github-actions]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/11885150857.
Cypress dashboard
PR: #37388.

[github-actions]

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11885150857.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:
To know the list of identified flaky tests - Refer here

***** Repeat Run Summary ***** Total Tests with repeat: 75 Total Passed: 75 Total Failed: 0 Total Skipped: 0 *****************************

[sagar-qa007]

@NandanAnantharamu Why we need this sleep?

[github-actions]

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

[github-actions]

This PR has been closed because of inactivity.