[Task]: Auto layout : Automated test scenarios

[riodeuno]

Is there an existing issue for this?

• [X] I have searched the existing issues

SubTasks

General areas

• All types of highlights (around containers and around widgets) show correctly in size and position

• Hug widget positioning works (grouped in an alignment as well as individually in an alignment)

• Positioning of hug and fill widgets (combinations) in the same cell works

• Positioning of hug widgets on removal of fill widgets from the case above

• Positioning and sizes of multiple fill widgets in a cell

• Positioning and sizes of the widgets in mobile viewports (the same combinations from the previous 3 test scenarios) -- Ashok --

• List Widget scenarios

• Widget spacing (padding, margins, etc)

• Widget Resizing behaviour -- Rahul --

Nice to have

• Theming scenarios because the positioned container not longer exists in auto layout
• Component design for error mode in widget name component

Jest

Cypress

Autoheight test cases @prsidhu

• [ ] Create a container widget, Tabs Widget, Modal Widget and Form Widget. Each should have at least one widget within them. Then: (height in referring to the parent widget height and not the widget we paste or delete)

  • [ ] Paste a table widget in container widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Paste a table widget in Tabs Widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Paste a table widget in a Modal Widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Paste a table widget in a Form Widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Delete the table widget in container widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Delete the table widget in Tabs widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Delete the table widget in the Modal widget to see that the height responds correctly without any extra space or scroll

  • [ ] Delete the table widget in the Form widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Reduce the viewport to mobile viewport using CSS or JS

  • [ ] Verify that the widgets are aligned correctly, and respond to height changes correctly.

  • [ ] Paste a table widget in container widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Paste a table widget in Tabs Widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Paste a table widget in a Modal Widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Paste a table widget in a Form Widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Delete the table widget in container widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Delete the table widget in Tabs widget to see that the height responds correctly without any extra space or scroll.

  • [ ] Delete the table widget in the Modal widget to see that the height responds correctly without any extra space or scroll

  • [ ] Delete the table widget in the Form widget to see that the height responds correctly without any extra space or scroll.

• [ ] Create a complex layout with multiple hug widgets like button, icon, filepicker, etc. Then:

  • [ ] Verify that the widgets are aligned correctly in mobile viewport
  • [ ] Verify that none of the hug widgets are squeezed below their min width
  • [ ] Verify that the hug widgets reflow instead of clipping when the viewport is reduced

[aswathkk]

###Autoheight @prsidhu

• There are special handling done for widgets in the case of auto height
  • TabsWidget
    • tab header
    • Current tab's height should be respected by (meta property)
  • List widget
    • Container should not have auto-height

rowGap & vertical alignment #22580: @aswathkk

• Check if all the widget except Container widget is bottom aligned
• Check if container widget is top aligned
• Check if the rowGap is 8px in mobile viewport and it is 12px in non-mobile viewport
  • Check this for wrapped widgets as well

Auto dimension @aswathkk

• Do the following tests by adding widget in mainCanvas, Container widget and List widget - Both in desktop viewport and mobile viewport

  • Add button widget. Check if the bounding box fits perfectly to the button component.

  • Increase the button labels length, verify if the button's length is increasing and if bounding box fits the component.

  • Decrease the button labels length, verify if the button's length is decreasing and if bounding box fits the component.

  • Add Text widget. Add multi line text and verify if text widget's height increases or not. Check if bounding box fits the component.

  • Decrease viewport width and check if the widgets bounding box fits the component

  • Increase viewport width and check if the widgets bounding box fits the component

• Add a container widget, place text widget in it. Add multi line text inside text widget. See if container's height is increasing. Remove multi line texts and see if container's height is reducing

• Add a text widget with multi line text. Drop a fill widget next to text widget so that the width of text widget will be reduced. See if bounding box fits properly with the widget.

[rahulramesha]

Convertion related tests @rahulramesha

• [ ] Convert to auto layout, create a new page that does not exist in the snapshot, From that page restore snapshot and refresh. Since the newly created page does not exist in restore Application, it should redirect to Home page
• [ ] Verify the same in a non parent branch (Branch which is not the original branch) of git connected apps Verify Conversion flows while switching between branches in Git connect app
• [ ] Import "Applicant Tracker-test template" which have null values, verify that the conversion is successful, https://github.com/appsmithorg/appsmith/issues/21969
• [ ] Add multi select tree and radio button in fixed mode, bind multi select tree's font size to radio button's result and convert. The layout should convert successfully https://github.com/appsmithorg/appsmith/issues/22697
• [ ] Add Modals and Containers in Auto layout, and add hug widgets inside them verify if the widget bounding boxes are accurate to the size of the widget itself
• [ ] Verify all the Container type widgets ( Container, List, Tabs, Stat box and modal) are being converted to autoLayout
• [ ] Upon conversion from fixed layout, widgets like checkbox and checkbox group should have updated height in auto layout, instead of same height as in fixed layout
• [ ] In both Converted CRUD application and Generated CRUD in auto layout the positions of the widgets should not overlap each other

Modal widget @NandanAnantharamu

• [ ] When modal widget is added in Auto layout, either by dragging n dropping or through modal, add more widgets after that and verify that the modal does not occupy space in main Canvas

Copypaste tests @rahulramesha

• [ ] When Widget is copied, it should paste at the bottom of the Canvas
• [ ] If a container is selected while pasting it should paste inside the container at the bottom
• [ ] When multiple Widgets are copied, when pasted the widgets should maintain relative positions in layers
• [ ] When widgets with labels like input etc are on canvas, when changing label position, it should adjust the height of the widget accordingly

Rewrite from fixed layout @marks0351

• [ ] Create a query and using the Suggested widget functionality add different types of widgets and verify they are added at the bottom of the canvas and with correct type i.e., Hug or Fill widget.

App navigation tests @NandanAnantharamu

• [ ] Create an application with App navigation header, while in both top and left configuration, verify the canvas does not have extra height or width
• [ ] Create an application in auto layout mode, modify app navigation bar setting on the right side pane, go back to canvas, verify that the app is still in Auto layout mode https://github.com/appsmithorg/appsmith/issues/21962
• [ ] For an Application with lots of pages with App navigation side bar, switching to a page by a button click should scroll the App navigation bar to scroll to the particular page as well https://github.com/appsmithorg/appsmith/issues/21974
• [ ] For an Application is top nav bar in deploy mode, when a widget at the bottom of the page is directly accessed via url such that it scrolls to the widget, make sure the App header does not get cutoff https://github.com/appsmithorg/appsmith/issues/22095

Widget navigation @NandanAnantharamu

• [ ] Verify that when the widget is accessed directly through URL that is at the end of a long page in auto layout, make sure the page scrolls to that widget on load
• [ ] When a widget is selected at the bottom of a long page and when switched to a different page and back to the original page make sure the widget on that page is still selected and the page scrolls to that widget https://github.com/appsmithorg/appsmith/issues/22838

[marks0351]

Highlights @marks0351

Need to check with @prsidhu if we want to have these tests in Cypress or in Jest. Check if some tests are redundant

All types of highlights (around containers and around widgets) show correctly in size and position

• [ ] Drag a button on to empty canvas and position at the left most side of the canvas and check the dragging highlights position and size repeat same for centre and right alignment.
• [ ] Drag a button on to canvas with a three buttons as a first layer and check if a highlight is shown for the new layer at the bottom of the first layer
• [ ] Drag a button on to canvas with a three buttons as a first layer and check if a highlight is shown for the new layer at the top of the first layer
• [ ] Drag a button on to empty container and position at the left most side of the canvas and check the dragging highlights position and size repeat same for centre and right alignment.
• [ ] Drag a button on to container with a three buttons as a first layer and check if a highlight is shown for the new layer at the bottom of the first layer
• [ ] Drag a button on to container with a three buttons as a first layer and check if a highlight is shown for the new layer at the top of the first layer
• [ ] Use a fully filled container and check if highlights are showing at the end of the container. Hug widget positioning works (grouped in an alignment as well as individually in an alignment)

Alignment (some might be redundant) @prsidhu

• [ ] Add a widget(button) to empty canvas/container and check if alignment(start/centre/end) is properly achieved.
• [ ] Add a second widget(button) to the same layer and check if alignment still works in (start/centre/end) Positioning of hug and fill widgets (combinations) in the same cell works Positioning of hug widgets on removal of fill widgets from the case above
• [ ] Add a hug widget(button) and start/centre/end align it and then add a fill widget(button) to the same layer. fill widget should expand through out the leftover width.
• [ ] for start/end aligned hug widget its position should remain same
• [ ] for centre aligned hug widget, its position acts like start aligned because of the fill widget.
• [ ] On removing the fill widget from above case, the hug widget should reposition to its actual alignment. Positioning and sizes of multiple fill widgets in a cell
• [ ] Add 4 fill widgets and check if all widgets width are uniform.
• [ ] add a hug widget and check if the size is still uniform among all fill widgets.

[marks0351]

Subtasks: #23715 #23716 #23644 #23642 #23656