chore: Anvil on canvas UI tests

[riodeuno]

Description

Unit

index.test.tsx - (Main connected component that uses floating ui)

• Test rendering of widget name component (floating-ui) based on "select", "focus" and "none" states from redux selector
• Test rendering of widget name component (floating-ui) based on error count from redux selector

AnvilWidgetNameComponent.test.tsx (Standalone component that renders content for floating ui to use)

• Test rendering of standalone widget name component based on props.
• Test calling of onDragStart callback from the standalone widget name component.

SplitButton.test.tsx (Low level UI component - child of AnvilWidgetNameComponent)

• Test left and right toggle click triggers
• Test if component handles props correctly

E2E

• Test Dragging via widget name component
• Test widget name component when multiple widgets are selected
• Test Hover and Selection to show widget name component

Fixes #33979

Automation

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

🔍 Cypress test results

Tip

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

---

Mon, 12 Aug 2024 11:13:52 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

• Yes
• No

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Introduced a comprehensive suite of end-to-end tests for the Anvil editor's UI in canvas layout mode.
  • Enhanced flexibility in widget manipulation on the canvas with an updated method.
  • Expanded selectors for more precise targeting of UI components.
  • Added unit tests for the AnvilWidgetNameComponent and SplitButton components to ensure expected functionality.

• Bug Fixes

  • Improved responsiveness of the AnvilWidgetName component to state changes.

• Documentation

  • Updated comments and structure for clarity in test scenarios and component functionality.

[coderabbitai]

Walkthrough

The recent changes introduce a comprehensive testing suite for the Anvil editor's canvas UI, significantly enhancing both unit and end-to-end tests. Key functionalities, including widget interactions and visual updates, are thoroughly validated. With an emphasis on accessibility and user experience, the adjustments improve responsiveness and maintainability through refined component behaviors and new testing methods.

Changes

Files	Change Summary
app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilOnCanvasUI_spec.ts	Added end-to-end tests for the Anvil editor's UI, validating widget displays and interactions on the canvas.
app/client/cypress/support/Pages/Anvil/AnvilDnDHelper.ts	Changed MoveAnvilWidget to accept an optional widgetName, enhancing flexibility in widget movement.
app/client/cypress/support/Pages/Anvil/Locators/index.ts	Introduced anvilOnCanvasUISelectors for improved selection of draggable widget names in the DOM.
app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/AnvilWidgetNameComponent.test.tsx	Created unit tests for AnvilWidgetNameComponent, validating rendering and drag behaviors.
app/client/src/layoutSystems/anvil/editor/AnvilWidgetNameComponent.tsx	Enhanced useCallback dependencies and added data-testid for better testing capabilities.
app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/SplitButton.test.tsx	Added tests for SplitButton to validate rendering, click events, and conditional rendering.
app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/SplitButton.tsx	Improved accessibility with new data-testid attributes for testing; core functionality remains unchanged.
app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/index.test.tsx	Developed comprehensive tests for AnvilWidgetName component behavior based on state and selection conditions.
app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/index.tsx	Utilized useRef for cleanup logic in useEffect, enhancing state management and dependencies.

Assessment against linked issues

Objective	Addressed	Explanation
Test AnvilWidgetNameComponent for state-based style changes (##33979)	✅
Implement interaction-based test cases for UI behavior, including drag-and-drop (##33979)	✅
Validate rendering of components based on selection and errors (##33979)	✅
Ensure accessibility and testability improvements (##33979)	✅

Possibly related issues

• Task: Tests for DnD sagas. #33981: The changes include improvements in drag-and-drop functionality, which aligns with the objectives related to widget interactions and updates.

Poem

In the canvas realm where widgets play,
New tests have come to light the way.
Drag and drop with ease, oh what delight,
Anvil's UI shines, a marvelous sight!
With every click, the joy does grow,
Thank you, dear coders, for making it so! ✨

---

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>.
  • 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 generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @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 as 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.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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.

[riodeuno]

@sagar-qa007 @ApekshaBhosale Please review the cypress test. I've followed some existing patterns used by existing tests. No new waits. Individual tests cleanup in the tests themselves, making them idempotent.

[coderabbitai]

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (1)

app/client/cypress/support/Pages/Anvil/AnvilDnDHelper.ts (1)

149-170: Consider removing agHelper.Sleep for better test performance.

The MoveSelectedAnvilWidget method uses agHelper.Sleep, which can slow down tests and make them less reliable. Consider using alternative strategies to wait for necessary conditions, such as checking for specific DOM changes.

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c42e031 and 4eb4314.

Files selected for processing (9)

• app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilOnCanvasUI_spec.ts (1 hunks)
• app/client/cypress/support/Pages/Anvil/AnvilDnDHelper.ts (1 hunks)
• app/client/cypress/support/Pages/Anvil/Locators/index.ts (2 hunks)
• app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/AnvilWidgetNameComponent.test.tsx (1 hunks)
• app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/AnvilWidgetNameComponent.tsx (2 hunks)
• app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/SplitButton.test.tsx (1 hunks)
• app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/SplitButton.tsx (1 hunks)
• app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/index.test.tsx (1 hunks)
• app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/index.tsx (4 hunks)

Additional context used

Path-based instructions (3)

app/client/cypress/support/Pages/Anvil/Locators/index.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/e2e/Regression/ClientSide/Anvil/AnvilOnCanvasUI_spec.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/support/Pages/Anvil/AnvilDnDHelper.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.

Additional comments not posted (27)

app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/AnvilWidgetNameComponent.test.tsx (2)

25-32: Great job on the rendering test!

This test correctly verifies that the AnvilWidgetNameComponent renders with the expected text. It uses best practices by employing screen and render from React Testing Library.

---

34-54: Excellent work on testing the drag event!

This test effectively simulates a drag event and verifies that the event handler is called. It uses jest.spyOn to track the function call, which is a good practice.

app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/SplitButton.test.tsx (5)

30-36: Well done on verifying rendering and styling!

This test ensures that the SplitButton renders with the correct text and style. Using toHaveStyle is a good approach to verify CSS properties.

---

38-46: Great job on testing the click event!

This test correctly simulates a click event and verifies that the event handler is called. Using userEvent.click is a good practice for simulating user interactions.

---

48-54: Nice work on the left toggle click test!

This test accurately checks the left toggle's click functionality and ensures the handler is called. It follows best practices for interaction testing.

---

56-62: Great job on the right toggle click test!

This test ensures the right toggle's click functionality is working and the handler is called. It uses best practices for interaction testing.

---

64-77: Excellent test for conditional rendering!

This test correctly verifies that the toggles are hidden when the disable prop is true. Checking for the absence of elements is a good approach for testing conditional rendering.

app/client/cypress/support/Pages/Anvil/Locators/index.ts (1)

34-37: Great addition of the on-canvas UI selectors!

The anvilOnCanvasUISelectors are well-defined using data-testid attributes, which is a best practice for reliable and maintainable selectors. Their integration into anvilLocators is seamless and enhances functionality.

app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/AnvilWidgetNameComponent.tsx (4)

64-64: Ensure all necessary dependencies are included.

The useCallback hook for handleSelectParent now includes selectWidget in its dependency array, which is a good practice to prevent stale closures. Make sure all dependencies that are used within the callback are included.

---

72-72: Verify dependency inclusion for handleSelectWidget.

The useCallback hook for handleSelectWidget correctly includes selectWidget and props.widgetId in its dependency array. This ensures the latest values are used when the callback is invoked.

---

76-76: Check useCallback dependencies for handleDebugClick.

Including dispatch and props.widgetId in the dependency array ensures that the handleDebugClick function always references the latest values. This is a good practice for maintaining correct behavior.

---

97-97: Addition of data-testid attribute.

The data-testid attribute enhances the testability of the component by providing a stable selector for automated tests. This is a valuable addition for improving test coverage and reliability.

app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/SplitButton.tsx (4)

120-120: Addition of data-testid for SplitButtonWrapper.

The data-testid attribute provides a stable reference for testing the SplitButton component. This is a good practice for improving test reliability.

---

126-126: Testability enhancement with data-testid for left toggle.

Adding data-testid to the left toggle span facilitates automated testing by providing a consistent selector. This aligns with best practices for testable UI components.

---

134-134: Improved testability with data-testid for clickable button.

The data-testid attribute on the button element enhances its identification in tests, supporting robust and maintainable test scripts.

---

143-143: Testability improvement with data-testid for right toggle.

The addition of data-testid to the right toggle span aids in maintaining consistent and reliable test scripts.

app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/index.tsx (5)

1-1: Introduction of useRef for cleanup function.

Using useRef to store the cleanup function ensures a consistent function reference across renders. This is a more React-friendly approach and improves the reliability of side-effect management.

---

90-90: Use of useRef for cleanup logic.

The cleanup function is now stored in a useRef, which is a best practice for maintaining a stable reference to the cleanup logic. This change enhances the component's state management.

---

99-99: Assignment to cleanup.current.

Assigning the result of handleWidgetUpdate to cleanup.current ensures that the latest cleanup logic is preserved. This approach is effective for managing side effects.

---

107-107: Invocation of cleanup.current.

Calling cleanup.current() in the useEffect cleanup phase ensures that the latest cleanup function is executed. This maintains the integrity of the component's lifecycle management.

---

110-114: Expanded dependency array for useEffect.

Including nameComponentState, widgetElement, widgetNameComponent, and widgetsEditorElement in the dependency array ensures that the effect re-runs when these values change. This improves the component's responsiveness to state changes.

app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilOnCanvasUI_spec.ts (2)

17-88: Effective use of Cypress for UI testing.

The test case effectively verifies the visibility and positioning of the widget name component. It uses helper functions for interactions and assertions, which enhances readability and maintainability. Ensure that all selectors use data-* attributes for consistency.

---

89-142: Good practice in testing multiple widget selections.

The test case correctly verifies the visibility of multiple widget names. Ensure that all selectors are based on data-* attributes to align with best practices.

app/client/src/layoutSystems/anvil/editor/AnvilWidgetName/index.test.tsx (4)

78-105: Comprehensive test for component visibility.

The test case effectively verifies the visibility and elements of the AnvilWidgetName component. Ensure that all possible states are tested for completeness.

---

107-125: Clear test for component absence.

The test accurately verifies that the AnvilWidgetName component is not displayed when not focused or selected. This is a good practice to ensure correct component behavior.

---

127-154: Effective test for error state visibility.

The test case correctly checks for the presence of an error toggle when errors exist. Ensure that different error scenarios are covered for comprehensive testing.

---

156-183: Thorough test for disabling parent toggle.

The test case effectively verifies that the parent toggle is not shown when disabled. This ensures the component behaves as expected under various conditions.

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 4eb4314 and d87e60f.

Files selected for processing (2)

• app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilOnCanvasUI_spec.ts (1 hunks)
• app/client/cypress/support/Pages/Anvil/AnvilDnDHelper.ts (2 hunks)

Files skipped from review as they are similar to previous changes (2)

• app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilOnCanvasUI_spec.ts
• app/client/cypress/support/Pages/Anvil/AnvilDnDHelper.ts

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between d87e60f and c238b88.

Files selected for processing (1)

• app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilOnCanvasUI_spec.ts (1 hunks)

Files skipped from review as they are similar to previous changes (1)

• app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilOnCanvasUI_spec.ts

[ApekshaBhosale]

changes look good to me @riodeuno Have you run the nest test on EE as well?

[riodeuno]

@ApekshaBhosale Ran it 5 times (1 using all tests, 4 using limited test) on EE. All runs passed. I'm merging this in.
Thanks for all the help with the tests!