58 lines
2.9 KiB
Gherkin
58 lines
2.9 KiB
Gherkin
Feature: Relation picker "loading more" state
|
|
|
|
As an editor filling a relation field
|
|
I want the picker to show that the next page is loading and to keep my place
|
|
So that pressing "Load more" never loses focus or shows a blank list
|
|
|
|
Background:
|
|
Given the spec of record is docs/design/screens/schema-later.md group 7 states 2 and 3, and docs/design/change-log-roles-sync.md "Relation picker"
|
|
And the picker is RelationField.vue over useRelationSearch.ts, which already requests GET /v1/content-type/{key}/entry?page=N&size=25 and has loading, loadingMore, hasMore and total
|
|
And the sample is 25 venues loaded of 62 for "rue", footer "Showing 25 of 62" with "Load more"
|
|
And the design marks the group "Later" but the picker exists in the app; this file specifies the missing state only
|
|
And the number of skeleton rows is read from the board frame SchemaFrame.dc.html, not fixed here
|
|
And the SPA lives in web/src, Nuxt UI only, design tokens only, EN and FR in i18n/messages.ts, no comments in code
|
|
|
|
Rule: Loading more
|
|
|
|
Scenario: Pressing Load more
|
|
Given 25 of 62 results are listed for "rue"
|
|
When "Load more" is pressed
|
|
Then GET /v1/content-type/venues/entry?page=2&size=25 is sent
|
|
And skeleton rows follow the last loaded result
|
|
And the button reads "Loading…" with a loader and is disabled
|
|
And the footer still reads "Showing 25 of 62" and the loaded results stay in place
|
|
And a second press while loading sends no request
|
|
|
|
Scenario: The page arrives
|
|
When the page answers 25 more items
|
|
Then the skeleton rows are replaced by the new results, the footer reads "Showing 50 of 62", the button returns to "Load more" and is enabled
|
|
And focus moves to the first new row
|
|
|
|
Scenario: The last page
|
|
Given 12 items remain
|
|
When the page arrives
|
|
Then the footer reads "Showing 62 of 62" and the button is gone
|
|
|
|
Scenario: The next page fails
|
|
When the request answers 500 or the network fails
|
|
Then the skeleton rows disappear, the loaded results stay, the button is enabled again with its label "Load more"
|
|
And focus returns to the button
|
|
And the existing error treatment of the picker is unchanged (design gap G2)
|
|
|
|
Scenario: A new search while loading more
|
|
When the person types a new term
|
|
Then the pending page is ignored, the skeleton of the first page shows as for any search, and the footer follows the new total
|
|
|
|
Scenario: Focus handling
|
|
Given the keyboard user pressed Load more with Enter
|
|
Then focus stays on the button while loading and moves to the first new row when the page arrives
|
|
And a screen reader hears "Loading…" and then the new count, announced politely
|
|
|
|
Scenario: Reduced motion
|
|
Given prefers-reduced-motion is set
|
|
Then the skeleton rows do not animate
|
|
|
|
Scenario: Mobile
|
|
Given a 390 px viewport
|
|
Then the skeleton rows and the button are full width with 44 px targets
|