Story 3.4.4. RJ. Filters

Content

General info

On the Rocken Jobs Publications page, users can refine their search by applying various filters. Below the vacancy title, commonly used filters such as Position, Category, Experience, and Salary are shown. Additionally, users can access a detailed set of filters by clicking on All filters, which opens a drawer from the right side of the page. This filter drawer includes options to select workload (adjusted using a slider from 0% to 100%), employment type (e.g., permanent, temporary, part-time), work model, team size, etc. Each category within the drawer shows the count of vacancies available for that filter option. The number of currently selected filters is displayed in bubbles or chips. Users can also clear all applied filters directly on the page or from within the filter drawer. There is an option to hide these filters, which are displayed by default.

User story

As a user
I want to apply multiple filters to refine my search results
So that I can quickly find vacancies that match my criteria.

Visual design:

https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/ROCKEN-jobs-%2F-talent?node-id=54220-32237&t=VMHdcvdEt0L5qg2y-4

https://www.figma.com/design/I5CXH7H3ICD0vfA1kPbcVf/ROCKEN-jobs-%2F-talent?node-id=54220-33460&t=VMHdcvdEt0L5qg2y-4

 

#

Acceptance Criteria

 

01

Scenario: Display of primary filters
Given: Publications page is open
When: The vacancy list is visible
Then: The primary filters (Position, Category, Experience, Salary) are shown below the vacancy title.

image-20240927-060651.png

 

02

Scenario: Opening the filter drawer
Given: Publications page is open
When: The user clicks on the All filters button
Then: The filter drawer slides in from the right side, displaying additional filter options like workload, employment type, work model, and team size.

image-20240927-060725.png

 

03

Scenario: Filter selection with checkbox
Given: Filter drawer is open
When: The user selects multiple checkboxes (e.g., Permanent, Temporary) in the Employment type filter
Then: The number of matching results (e.g., Show 348 results) is displayed at the bottom of the drawer.

image-20240927-060754.png

 

04

Scenario: Applying filters
Given: Multiple checkboxes are selected in the filter drawer
When: The user clicks on the Show results button
Then: The filtered vacancies are displayed on the page without reloading.

 

05

Scenario: Displaying selected filters
Given: Filters are applied
When: The filtered vacancies are shown
Then: The number of selected filters is displayed in bubbles on the page (e.g., Category: 2, Experience: 1).

06

Scenario: Clearing applied filters
Given: Filters are applied
When: The user clicks on Clear filters from the filter drawer or on the page
Then: All selected filters are removed, and the default vacancy list is shown.

image-20240927-061105.png

image-20240927-061123.png

07

Scenario: Hiding and showing filters
Given: Publications page is open
When: The user clicks on Hide filters link
Then: The primary filters are collapsed and hidden, with an option to Show filters again.

08

Scenario: Filter count display
Given: Filters are applied from the drawer
When: User returns to the page
Then: The count of applied filters is displayed in bubbles on the page and in the All filters button.

image-20240927-061052.png

09

Scenario: No results
Given: Filters are applied from the drawer
When: where is no matching data
Then: show state with no results

Comments

Leave a Reply