Page MenuHomePhabricator

Finish wire up for summary experiment UI
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
Authored By
bwang
Oct 25 2024, 9:14 PM
Referenced Files
F57701914: screenshot 29.png
Nov 14 2024, 6:44 PM
F57701912: screenshot 28.png
Nov 14 2024, 6:44 PM
F57701910: screenshot 28.png
Nov 14 2024, 6:44 PM
F57694111: build.tar.gz
Nov 11 2024, 7:20 PM
F57688471: screenshot 18.png
Nov 8 2024, 12:44 AM
F57688468: screenshot 16.png
Nov 8 2024, 12:44 AM
F57688467: screenshot 17.png
Nov 8 2024, 12:44 AM
F57680040: build.tar.gz
Nov 4 2024, 7:26 PM

Description

Background

User story

  • As a Wikipedia browser extension user, I would like to be shown the summary feature so that I can gain more knowledge from Wikipedia quickly

As a product team, we would like to learn about usage patterns of the new summary feature so that we can determine whether

Requirement

Summary opens through user actions (i.e. user opens accordion)
If no summary is available, the element does not show on page
If summary does not load, an error state is displayed: "We could not load the summary for this page"
Summaries would only show on English Wikipedia
Buttons: upon clicking button would show in selected state. No other system feedback will be provided. Button can only be clicked once per page. Buttons are in Codex.

BDD

Feature: Summary Experiment UI

  Scenario: Summary feature availability based on content
    Given the user is on English Wikipedia with the extension enabled
    When the summary content is available
    Then the summary accordion should be visible and expandable by user action.

  Scenario: Error message when summary fails to load
    Given the user opens the summary accordion
    When the summary content fails to load
    Then the user should see an error message stating, "We could not load the summary for this page."

  Scenario: No summary accordion displayed if summary unavailable
    Given the user is on a page with no summary content
    Then the summary accordion should not be shown.

  Scenario: Summary button selected state upon click
    Given the user sees the summary button
    When the user clicks the button
    Then the button should enter a selected state
    And no further feedback is provided after the click.

Test Steps

Test Case 1: Verify summary feature availability based on content

  1. Enable the Wikipedia browser extension and navigate to an English Wikipedia article.
  2. Confirm the presence of the summary accordion if content is available.
  3. Expand the accordion.
  4. AC1: Confirm that summary content is visible when available.

Test Case 2: Verify error message when summary fails to load

1. Enable the Wikipedia browser extension.
2. Open the summary accordion on an English Wikipedia article.
3. Simulate a summary load failure.
4. AC2: Confirm that the error message, “We could not load the summary for this page,” is displayed.

Test Case 3: Verify no summary display if unavailable

  1. Enable the Wikipedia browser extension.
  2. Navigate to an English Wikipedia article with no summary content.
  3. AC3: Confirm that the summary accordion is not visible on the page.

Test Case 4: Verify summary button selected state

  1. Enable the Wikipedia browser extension.
  2. Locate the summary button on an English Wikipedia article.
  3. Click the summary button once.
  4. AC4: Confirm that the button is in a selected state and cannot be clicked again on the same page.

QA Results - Prod

Event Timeline

bwang set the point value for this task to 1.Oct 25 2024, 9:14 PM
bwang moved this task from Needs design to QA on the Web-Team-Backlog (FY2024-25 Q2 Sprint 3) board.
bwang added a subscriber: Jdrewniak.

@Jdrewniak can you think of a way for others to QA or design review this?

@Edtadros I'm uploading a build of the extension that we can use for testing purposes. This build has the experiment enabled.
@JScherer-WMF we can also use this build for design review.

@Edtadros I'm uploading a build of the extension that we can use for testing purposes. This build has the experiment enabled.
@JScherer-WMF we can also use this build for design review.

There are a bunch of UI issues. Were we able to use the codex components for this in the end? What makes sense as the best way to work through those? cc @bwang

Edtadros subscribed.

@Jdrewniak Please take a look at the items with a ❓ below. Let me know if you need any clarification.

Test Result - Prod

Status: ✅ PASS / ❓Need More Info
Environment: enwiki
OS: macOS
Browser: Chrome
Device: MS MBA
Emulated Device: NA

Test Artifact(s):

Test Case 1: Verify summary feature availability based on content

  1. Enable the Wikipedia browser extension and navigate to an English Wikipedia article.
  2. Confirm the presence of the summary accordion if content is available.
  3. Expand the accordion.
  4. AC1: Confirm that summary content is visible when available.

screenshot 12.png (1×1 px, 665 KB)

Test Case 2: Verify error message when summary fails to load

  1. Enable the Wikipedia browser extension.
  2. Open the summary accordion on an English Wikipedia article.
  3. Simulate a summary load failure.
  4. AC2: Confirm that the error message, “We could not load the summary for this page,” is displayed.

How can I simulate a summary load failure.

Test Case 3: Verify no summary display if unavailable

  1. Enable the Wikipedia browser extension.
  2. Navigate to an English Wikipedia article with no summary content.
  3. AC3: Confirm that the summary accordion is not visible on the page.

screenshot 13.png (1×1 px, 1 MB)

Test Case 4: Verify summary button selected state

  1. Enable the Wikipedia browser extension.
  2. Locate the summary button on an English Wikipedia article.
  3. Click the summary button once.
  4. AC4: Confirm that the button is in a selected state and cannot be clicked again on the same page.

I'm unsure which buttons these are. I was able to click the Yes/No "Was this helpful?" buttons multiple times though.

screenshot 1.mov.gif (1×1 px, 707 KB)

Jdlrobson subscribed.

We have a bug impacting articles with spaces in titles

I'm attaching the latest dev build for QA purposes which hopefully fixes the issue with summaries not appearing for titles with spaces.

To see a list of titles (some of which have spaces), you can look through the build/src/assets/summaries folder in the zipped build below. I checked "(What's the Story) Morning Glory?" and the summary appeared when testing locally.

I'm playing around with this and it still seems like some articles that should have summaries based on our article list still aren't getting a simple summary. e.g. https://en.wikipedia.org/wiki/2003_invasion_of_Iraq

@Jdrewniak Please take a look at the items with a ❓ below. Let me know if you need any clarification.

Test Result - Prod

Status: ✅ PASS / ❓Need More Info
Environment: enwiki
OS: macOS
Browser: Chrome
Device: MS MBA
Emulated Device: NA

Test Artifact(s):

Test Case 1: Verify summary feature availability based on content

  1. Enable the Wikipedia browser extension and navigate to an English Wikipedia article.
  2. Confirm the presence of the summary accordion if content is available.
  3. Expand the accordion.
  4. AC1: Confirm that summary content is visible when available.

screenshot 17.png (1×1 px, 839 KB)

screenshot 16.png (1×1 px, 524 KB)

Test Case 2: Verify error message when summary fails to load

  1. Enable the Wikipedia browser extension.
  2. Open the summary accordion on an English Wikipedia article.
  3. Simulate a summary load failure.
  4. AC2: Confirm that the error message, “We could not load the summary for this page,” is displayed.

How can I simulate a summary load failure?

Test Case 3: Verify no summary display if unavailable

  1. Enable the Wikipedia browser extension.
  2. Navigate to an English Wikipedia article with no summary content.
  3. AC3: Confirm that the summary accordion is not visible on the page.

screenshot 18.png (1×1 px, 749 KB)

Test Case 4: Verify summary button selected state

  1. Enable the Wikipedia browser extension.
  2. Locate the summary button on an English Wikipedia article.
  3. Click the summary button once.
  4. AC4: Confirm that the button is in a selected state and cannot be clicked again on the same page.

Is this button implemented yet?

I'm playing around with this and it still seems like some articles that should have summaries based on our article list still aren't getting a simple summary. e.g. https://en.wikipedia.org/wiki/2003_invasion_of_Iraq

@JScherer-WMF thanks for raising that, I've modified the selector so that it should be more reliable (doesn't have to check for infoboxes).

@Edtadros sorry for the confusion there, we forgot to update the task to remove AC2, there's no failure message for this experiment.
AC4 - buttons are referring to the "Was this helpful?" Yes/No buttons at the bottom of the expanded summary.

I'm playing around with this and it still seems like some articles that should have summaries based on our article list still aren't getting a simple summary. e.g. https://en.wikipedia.org/wiki/2003_invasion_of_Iraq

The patch above has been merged, @JScherer-WMF now pages such as https://en.wikipedia.org/wiki/2003_invasion_of_Iraq show summaries too. I'm attaching an updated build of the extension below.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS
Browser: Chrome
Device: MS MBA
Emulated Device: NA

Test Artifact(s):

Test Case 1: Verify summary feature availability based on content

  1. Enable the Wikipedia browser extension and navigate to an English Wikipedia article.
  2. Confirm the presence of the summary accordion if content is available.
  3. Expand the accordion.
  4. AC1: Confirm that summary content is visible when available.

screenshot 28.png (1×1 px, 591 KB)

screenshot 28.png (1×1 px, 591 KB)

Test Case 2: Verify error message when summary fails to load

  1. Enable the Wikipedia browser extension.
  2. Open the summary accordion on an English Wikipedia article.
  3. Simulate a summary load failure.
  4. AC2: Confirm that the error message, “We could not load the summary for this page,” is displayed.

No longer in scope per T378232#10304734

Test Case 3: Verify no summary display if unavailable

  1. Enable the Wikipedia browser extension.
  2. Navigate to an English Wikipedia article with no summary content.
  3. AC3: Confirm that the summary accordion is not visible on the page.

screenshot 29.png (939×1 px, 552 KB)

Test Case 4: Verify summary button selected state

  1. Enable the Wikipedia browser extension.
  2. Locate the summary button on an English Wikipedia article.
  3. Click the summary button once.
  4. AC4: Confirm that the button is in a selected state and cannot be clicked again on the same page.

"Was this helpful?" Yes/No buttons at the bottom of the expanded summary appear, see AC1.

Edtadros updated the task description. (Show Details)