Action Blocks component testing steps
Action Blocks component render as expected (functionally and visually)
The server-side pre-rendered
bolt-action-blocks component should look almost identical to the client-side rendered version. To verify:
- The layout should not shift, e.g. the spacing in between each action-blocks item should be identical before and after the web component re-renders.
Action Blocks component functional testing steps
Functional testing should be performed manually by the QA team across the standard compliment of browsers. In each scenario, browser-type is specified when necessary. If browser type is not specified, the test applies to both "desktop" and "mobile" browsers.
In order to present items in vertical or horizontal action-blocks As a UX designer, developer or content administrator I need to ensure the "bolt-action-blocks" component renders and functions as expected
Scenario: align variations
- Given I am viewing the align variations page.
- Top align should show content within each item aligned to the top.
- Center align should show content within each item aligned to the center.
- Bottom align should show content within each item aligned to the bottom.
Scenario: border variations
- Given I am viewing the border variations page.
- If border is set to true, there should be a border in between items.
- If border is set to false, there should be no border in between items.
Scenario: theme variations
- Given I am viewing the theme variations page.
- Inside an xlight theme, the Action Blocks should have xlight background.
- Inside a light theme, the Action Blocks should have light background.
- Inside a dark theme, the Action Blocks should have dark background.
- Inside a xdark theme, the Action Blocks should have xdark background.
Scenario: max items per row variations
- Given I am viewing the max items per row variations page.
- Make sure the amount of items per row does not exceed the maximum number specified.