shadcn.io is not affiliated with official shadcn/ui
Test Case Queue Kanban Block for Svelte
A three-column queue of nine manual test cases whose steps are recorded with Pass and Fail buttons, where a case can enter Passed only when every step passes.
Installation
Overview
Run a manual test pass from one screen with this test case queue for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds three columns that share their lines (Queued, Testing and Passed) and nine cases. Each case shows its title, its product area and a row of small boxes, one per step: a tick for a pass, a cross for a failure, a dashed box for a step not yet run, with the count written out beside them. Two small Buttons, Pass and Fail, record the next step; the first result sends a queued case to Testing by itself. The count is the gate: a case can enter Passed only when every step passes, and the refusal says how many fail or have not run. Sending a case back to Queued clears its run. The sentence under the heading and each column head are worked out from the steps, so they follow every result. A card also moves by dragging its grip, by keyboard, or from its Dropdown Menu under "Move to". A polite status line in the foot reports each change, and Reset puts the queue back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For release testing, QA sign-off and any app that tracks checks through a queue.
FAQ
How do I fill it with my own test cases?
Edit COLUMNS and START. A case has an id, the column it starts in, a title, an area and a run: a string with one character for each step, p for passed, f for failed and - for not run yet. "pp-f-" is a five-step case with two passes, a failure and two steps waiting. Every count, box and sentence is calculated from the strings.
How does the Passed gate work?
The rule is the function refusalOf, which gets the cases, the case, the column it comes from and the column it is going to, and returns a reason or an empty string. For Passed it returns a reason while any step fails or has not run. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the case where it was and the status line gives the reason.
What do Pass and Fail do?
Each press records the next step that has no result, in order, and says which step and what the case stands at. The first result on a queued case moves it to Testing; a case in Passed has its buttons disabled, as does a case with every step recorded. To run a case again, move it back to Queued: settleCards clears its run.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, for example "Download an invoice as PDF: Passed, position 1 of 3".
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. It goes through the same gate as the grip and the keys, so no route gets around it. Choosing one moves the card, puts focus on it in its new place and says so in the status line.
What stays in the demo, and how do I save the changes?
Everything: the cards live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through (the menu, a drop and the block's own buttons), and the Pass and Fail buttons, and update the cards from the response. The product and the cases are made up.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.