webstudio/apps/builder/docs/test-cases.md

1. Instance states

   • Hover over an instance, check if its outline is correct
   • Select an instance, check if its outline is correct

2. Create instances by drag&drop

   • Drag a component over an instance - check if its outline is correct
   • Drag a Box over a Box, drop it - check if it was inserted in that Box
   • Drag a Box and place it before a Box - check if it was inserted before
   • Drag a Box and place it after a Box - check if it was inserted after
   • Drag a Box exactly between 2 Boxes - check if it was inserted between
   • Drag a Box to the bottom edge - check if parent Box gets outlined and insertion happened after that dragged over Box inside that outlined parent
   • Drag a Box to the top edge - check if parent Box gets outlined and insertion happened before that dragged over Box inside that outlined parent
   • Create a Box with child Boxes, where children are aligned vertically - repeat the tests above with trying to insert inside the new Box
   • Try to drop into a Paragraph - check that it's not allowed, and it drops next to the Paragraph instead

3. Moving instances on canvas by drag&drop

   • Do the tests described in "Create instances by drag&drop", but instead of moving a component from the panel to the canvas, move a component that's already on the canvas
   • Create a Paragraph, and make a word in it Bold
     • drag & drop the Bold component - check that entire Paragraph have been moved
   • Try to drop a Box inside itself - check that it's not allowed, and it drops next to it instead
   • Create a Box that contains another Box, give the parent Box a padding
     • drag the parent Box, and try to put it inside the child Box - check that it's not allowed, and it drops next to the parent Box instead

4. Create instance by clicking on a component

   • Make sure no instance is selected (no outline in the canvas)
   • Click on a component in the panel - check that it's inserted at the end of the root instance
   • Select an istance that can accept children (e.g. Box), by clicking on it on the canvas
   • Click on a component in the panel - check that it's inserted at the end of the selected instance
   • Select an instance that cannot accept children (e.g. Heading), but choose one that is not the last child of its parent
   • Click on a component in the panel - check that it's inserted in the parent of the selected instance, and that it's positioned right after the selected instance

5. Styles apply

   • Select an instance
   • Change any style
   • See if it is applied

6. Repeated shadow labels

   • Select an instance
   • Add at least 3 box-shadow layers in the style panel
   • Hide the first layer
   • Check that all box-shadow rows keep their full labels and only the hidden row is visually muted
   • Repeat the same flow with at least 3 text-shadow layers
   • Check that all text-shadow rows keep their full labels after hiding one layer

7. Content editable components

   • Add any contenteditable component (heading, paragraph, text ...)
   • Check if you can drag&drop it on the canvas
   • Double click or press enter to enter editing mode
   • Press escape or click away to exit editing mode
   • Selecting with the mouse any char or word shows a menu abov e it
   • Selecting with keybord does the same
   • Changing selection using mouse or keyboard moves the menu
   • Menu shows correctly on very left, right, top corners
   • Typing renders typed characters as expected
   • After editing and unfocusing the component content stays the way it was changed
   • After each menu action unfocus component and see that content stays the way it was changed
   • Run every action on first, middle and last word, on first line on second line and on the last line
   • Enter multiline text, unfocus
   • Check every change is also saved when after reloading
   • Enter text and unfocus quickly - changes shouldn't disappear
   • Keep typing text for some time and see in network tab that we send only a few requests, not one for each char

8. Breakpoints

   • Clicking on different breakpoints resizes the canvas
   • Click on Edit breakpoints shows you breakpoints editor
     • lets you change the breakpoint min-width value and it gets applied immediately on the canvas and on the width slider constraint
     • adding a new breakpoint adds it, lets you specify the value, works like every other breakpoint
     • Trash icon button shows confirmation dialog and upon confirmation
       • Delete button deletes the corresponding styles of that breakpoint entirely
       • Abort button doesn't delete and returns you to breakpoints editor
     • Done button returns you to breakpoints selector
   • Click anywhere outside of breakpoints closes breakpoints selector
   • Click on the canvas closes breakpoints selector
   • Styles added on each breakpoint are only applied to each breakpoint, verify that by resizing the canvas in preview mode

9. Auth

   • Try to access the dashboard when not logged in to make sure you will be redirected to the login page
   • Open the login page when logged in to make sure you are redirected to the dashboard
   • Ensure you can view a built project in an incognito tab
   • Ensure you can view a forked project in an incognito tab
   • Click on dev login, add the first four characters in AUTH_SECRET value in the .env value and make sure user is authenticated and redirected to the dashboard
   • Click on dev login and write a wrong value to make sure you get an error message and stay in the login page.
   • Click on login with GitHub and make sure that you are redirected to the dashboard
   • Click on login with Google and make sure that you are redirected to the dashboard

10. Default properties

    • Add a Box component to the canvas
    • Open Props panel
    • See the default tag is provided and can be modified

11. Asset manager

    • Open assets panel
    • Upload an image
    • Check it loads and shows a progress bar
    • Delete an asset by clicking on the x icon and then the delete button in the tooltip
    • Click on an image asset to open asset details
    • Click the replace (reverse) icon button next to the download button
    • Select a new image file from the file picker
    • Check that the asset is replaced and the new image is shown
    • Check that all usages of the old asset (image src props, background image styles, favicon, social image) now reference the new file
    • Check that the original asset's filename is preserved on the new asset
    • Verify the replace button is absent for non-image assets (e.g. fonts)

12. Navigator view settings

    • Initially navigator always shown
    • Check that Menu > View > Undock navigator is checked
    • Click on "Show navigator"
    • Navigator is now not shown
    • New tab was added that lets you open navigator

13. Navigator keyboard interactions

    • Move focus to the navigator by clicking on a tree item
    • Check that pressing arrow up and arrow down changes the selected item
    • Check that you can expand and collapse the selected item using arrow right, arrow left, and spacebar
    • Check that pressing delete or backspace deletes the selected item

14. Navigator drag&drop

    • Drag a tree item and put the cursor between some tree items
      • check that a line appeared between the tree items
      • check that after you drop, the dragged item moves between the tree items
    • Drag a tree item over an empty Box item,
      • check that an outline appears around the Box item,
      • check that when you drop, the dragged item moves inside the Box item
    • Drag a tree item over a non-empty but collapsed Box item
      • check that the Box item expands automatically when you hold over it
      • check that if you drop before it expands, the dragged item moves inside the Box, and becomes the last child
    • Drag a tree item over a Heading item, check that it doesn't allow you to drop inside a Heading
    • Make some text inside a Heading "bold" so that the Heading item in the tree gets a child item Bold Text
      • check that you cannot drag the Bold Text item
    • Start dragging a tree item but do not move the cursor vertically
      • check that by moving horizontally you're able to change how deeply the item is nested inside the tree
    • Drag an item between some tree items
      • check that moving the cursor horizontally allows you to change the depth of the placement indicator line
      • check that after you drop, the dragged item moves to the correct depth
    • Check that after a drag&drop the dragged item is the selected item

15. Flex panel

    • Select an instance
    • Select "flexbox" as the selected display option.
    • Check if clicking a flex property icon opens a dropdown.
    • Check if all flexbox states are computable through the icons seletables.
    • Check if all flexbox states are computable through the grid.
    • Check if gap inputs work.
    • Check if tooltips are present on all icons(including gap input icons).
    • Check that tooltips have a first time interaction delay.

16. Creating a new page

    • Open the pages panel
    • Click on the "New Page" button in the panel header
    • Enter a page name
    • Enter a page path
    • Click on the "Create" button
    • Check than the page is created and selected as the current page
    • Repeat the proccess and make sure it doens't allow you to create a page with an empty name or a path that's used for another page

17. Deleting a page

    • Open the pages panel
    • Make sure you have pages other than the Home page, create one if you don't
    • Click on the menu icon of a page other than the Home page
    • Page settings should open
    • Click on the delete icon in the page settings header
    • Page settings should close
    • Page should disappear from the list
    • If the page was selected, the Home page should become selected instead
    • In the Home page settings, the delete icon should be absent

18. Editing a page

    • Open the pages panel
    • Click on the menu icon of a page
    • Page settings should open
    • Change the page name
    • The name should change in the pages list as well (with a small delay)
    • Change the page path
    • Reload browser tab and open the page settings again and make sure your changes are persisted

19. Preview mode

    • Enter preview mode from the top bar
    • Press escape while focus is outside the canvas
    • Check that preview mode exits and the builder UI is shown
    • Enter preview mode again
    • Press escape while interacting with the canvas
    • Check that preview mode stays active and the canvas handles the key press