-
Instance states
- Hover over an instance, check if its outline is correct
- Select an instance, check if its outline is correct
-
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
-
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
-
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
-
Styles apply
- Select an instance
- Change any style
- See if it is applied
-
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
-
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
-
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
-
Default properties
- Add a Box component to the canvas
- Open Props panel
- See the default tag is provided and can be modified
-
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
-
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
-
Navigator keyboard interactions
- Move focus to the navigator by clicking on a tree item
- Check that pressing
arrow up
andarrow down
changes the selected item - Check that you can expand and collapse the selected item using
arrow right
,arrow left
, andspacebar
- Check that pressing
delete
orbackspace
deletes the selected item
-
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
- check that an outline appears around the
- 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
- check that the
- Drag a tree item over a
Heading
item, check that it doesn't allow you to drop inside aHeading
- Make some text inside a
Heading
"bold" so that theHeading
item in the tree gets a child itemBold Text
- check that you cannot drag the
Bold Text
item
- check that you cannot drag the
- 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
- Drag a tree item and put the cursor between some tree items
-
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.
-
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
-
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
-
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