As part of the Reading List experiment, we want to make the "save article" functionality accessible while someone scrolls down an article, but we want to avoid people confusing it with the watchlist (star) icon. Therefore, we want to add the "save article" icon to the sticky header, but only if the user has zero edits.
User story
As a logged-in reader, I want the ability to save articles when I scroll down the page.
Design requirements
Add design requirements or link to design files.
Requirements
Desktop web with sticky header. The sticky header must display the correct icon based on Reading List feature flag and the user’s edit count:
Acceptance criteria
- When the Reading list feature is enabled the reading list icon (bookmark) appears in the sticky header instead of the watchstar
- When the Reading list feature is disabled, the watchlist icon is in the sticky header (otherwise that would be a regression).
BDD
Feature: Correct sticky header icon for Reading List experiment
Scenario: Reading List enabled
Given I am logged in
And the Reading List feature is enabled
When I scroll down an article so the sticky header appears
Then the Reading List (bookmark) icon is visible in the sticky header
Scenario: Reading List feature disabled
Given I am logged in
And the Reading List feature is disabled
When I scroll down an article so the sticky header appears
Then the Watchlist (star) icon is visible in the sticky headerTest Steps
Test Case 1: Reading List enabled,
- Log in with a user account.
- Ensure the Reading List feature flag is enabled.
- Scroll down an article until the sticky header is shown.
- AC1: The Reading List (bookmark) icon is present in the sticky header (element exists by selector, correct icon class).
Test Case 3: Reading List feature disabled
- Log in with a user account.
- Ensure the Reading List feature flag is disabled.
- Scroll down an article until the sticky header is shown.
- AC2: The Watchlist (star) icon is present in the sticky header (element exists by selector, correct icon class).
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T401376#11117703 |
| 2 | ✅ | T401376#11117703 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T401376#11153822 |
| 2 | ✅ | T401376#11153822 |
This task was created by Version 1.0.0 of the Reader Experience team task template using phabulous.
