Brave News Customize 2.0 UI

[fallaciousreasoning]

Now we have a UI & implementation spec for the Brave News API we should implement it behind a flag.

https://www.figma.com/file/SDcE22eeUsV2uc4dy3NwaC/Onboarding?node-id=195%3A66414

@petemill

Test Plan:

• Enable the "Enable Brave News v2" flag, if it's not already default enabled
• Open a NTP
• Scroll down and Enable Brave News if it isn't already enabled
• Click Customize
• The new brave news customize experience should show

Can enable a source

• Click follow on a source
• Verify that the source is now in the left column

Can unfollow a source

• Click unfollow on a source in the left column
• Verify that the source is no longer in the left column

Can enable a channel

• Click follow on a channel (e.g. "Cars")
• Verify that the channel is displayed in the left column

Search

• Search via a site's url

• The expected source is displayed

• Search via a site's name

• The expected source is displayed

[petemill]

Added a test plan

[stephendonner]

Verification PASSED using

Brave	1.46.103 Chromium: 107.0.5304.110 (Official Build) beta (x86_64)
Revision	2a558545ab7e6fb8177002bf44d4fc1717cb2998-refs/branch-heads/5304@{#1202}
OS	macOS Version 11.7.1 (Build 20G918)

&

Brave	1.46.80 Chromium: 107.0.5304.68 (Official Build) beta (x86_64)
Revision	a4e93e89d3b3df1be22214603fba846ad0183ca5-refs/branch-heads/5304@{#991}
OS	macOS Version 11.7.1 (Build 20G918)

Enable Brave News v2, method 1 - PASSED

1. installed 1.46.80
2. launched Brave
3. opened brave://flags
4. set brave://flags/#brave-news-v2 to Enabled
5. clicked on Relaunch
6. opened a new-tab page
7. scroll down
8. click on Show Brave News
9. clicked on Customize
10. confirmed I got the v2 UI

Enable Brave News v2, method 2 - PASSED

1. installed 1.46.102
2. launched Brave
3. opened brave://flags
4. set brave://flags/#brave-news-v2 to Enabled
5. clicked on Relaunch
6. opened a new-tab page
7. clicked Customize
8. clicked on Brave News
9. confirmed I got the Turn on Brave News dialog and button
10. clicked on Turn on Brave News
11. confirmed I got the rest of the v2 UI

example	example

Disable and re-enable Brave News - PASSED

With Brave News v2 enabled:

1. open a new-tab page
2. click on Customize
3. click on Brave News
4. toggle Brave News to Off / Disabled at the top of the dialog
5. confirm you see Turn on Brave News, and never miss a story, with a Turn on Brave News button, below
6. click on Turn on Brave News
7. confirm the full UI (with feeds in-tact, if you had them) re-appear

Brave News, enabled	Brave News, disabled	Brave News, re-enabled

< Back to Dashboard link - PASSED

With Brave News v2 enabled:

1. open a new-tab page
2. click on Customize
3. click on Brave News
4. click on < Back to Dashboard
5. confirmed clicking < Back to Dashboard took me to the Customize Dashboard dialog

example	example

Follow sources - PASSED

Discover sources - PASSED

1. open a new-tab page
2. click on Customize
3. click on Brave News
4. click on Turn on Brave News
5. click the Follow button on Wired
6. confirm it appears under the Following heading
7. open a new-tab page
8. confirm you get Wired articles

step 5	step 6	step 8

Logged:

• Two Planet Mozilla sources discovered, one of which can't be followed #26306
• Pre-followed sources should reflect Followed status in the Customize dialog #26324

Direct sources - PASSED

1. opened a new-tab page
2. clicked on Customize
3. clicked on Brave News
4. clicked on Turn on Brave News
5. entered https://abcnews.go.com/abcnews/usheadlines into the Discover search textfield
6. under Sources, clicked on Get feeds from https://abcnews.go.com/abcnews/usheadlines
7. confirmed ABC News: US source appears
8. clicked on Follow
9. confirmed ABC News: US appears under Following
10. closed the dialog
11. clicked on Load new content
12. confirmed I saw articles from ABC News: US

Confirmed I saw articles from ABC News: US in the content feed

step 5	step 6	step 7	step 12

Logged:

• Follow/Unfollow link too close to long feed-source titles #26293

Unfollow sources - FAILED(*)

(with a source or two already followed; mine is the American Psychological Association)

1. open a new-tab page
2. click Customize
3. hover to the right of your source(s), in the Following column
4. choose Unfollow
5. reload your Brave News feed, click Reload new content or open a new-tab page
6. scroll through and confirm the source(s) have been removed - American Psychological Association

Could not confirm; will verify in #26303

example	example	example	example	example

Follow channel - PASSED

1. open a new-tab page
2. clicked on Customize
3. under Channels, click on Follow in Cars
4. click the X to close the dialog
5. scroll Brave News
6. click on Load new content
7. confirmed the following articles sources appeared:

• The Drive
• Car and Driver

Customize dialog	Brave News feed

Unfollow channel - FAILED(*)

1. clicked on Customize
2. hovered to the right of Top Sources and chose Unfollow
3. confirmed I was no longer subscribed to Top Sources, under Following
4. hovered to the right of Cars and chose Unfollow (also tested Unfollow inside the Cars feed item
5. confirmed I was no longer subscribed to Cars, under Following
6. clicked on the X to dismiss the dialog
7. reloaded my Brave News feed/clicked Reload new content when the bubble appeared
8. examined the Brave News feed for articles from Car and Driver and The Drive

(*) Could not confirm; will verify in #26303

step 2	steps 3-4	step 5	step 7	step 8

Search - PASSED

Sub-string searches - PASSED

1. opened a new-tab page
2. clicked Customize
3. clicked Brave News
4. searched for the following:

fan	fanbyte	nby	byte	物件ファン	件フ

Confirmed I could search for leading, main, and trailing parts of the search terms, and find appropriate results

RSS-feed discovery, single feed - PASSED

1. opened a new-tab page
2. clicked on Customize
3. clicked on Brave News
4. entered https://www.express.co.uk/news into the search textfield beneath Discover
5. clicked on the Get feeds from https://www.express.co.uk button
6. confirmed I saw a Daily Express :: News Feed source
7. hovered over it and clicked on Follow
8. confirmed it appeared under `Following
9. exited the dialog
10. scrolled Brave News
11. looked for a Daily Express article

Confirmed I saw Daily Express :: News Feed articles

example	example	example	example

RSS-feed discovery, multiple feeds - PASSED

1. open a new-tab page
2. click on Customize
3. click on Brave News
4. entered https://www.pravda.ru/ into the search textfield beneath Discover
5. clicked on the Get feeds from https://www.pravda.ru/ button
6. confirmed I saw 3 Daily Express :: News Feed sources:

• Правда.Ру
• Правда.Ру - Новости
• Правда.Ру - Статьи

7. clicked Follow on all of them
8. confirmed they appeared under Following
9. exited the dialog
10. scrolled Brave News

Confirmed I saw articles from all 3 feed sources, from above

search	Following	Правда.Ру	Правда.Ру - Новости	Правда.Ру - Статьи

Logged:

• Need to unescape special characters in feed titles #26264
• There are three otherwise identical CNN feed sources #26259
• Brave News feed auto-discovery within search appears broken #26550

---

NOTE:

• Bugs and followups mentioned here -- even for failing tests -- will be retested in their respective issues, and testing itself will be ongoing (with VPN as the priority, still)
• Windows and Linux will also be tested

[stephendonner]

@brave/qa-team some of the issues I've already seen and filed on are likely due to https://bravesoftware.slack.com/archives/CU56GUJ1H/p1666975874847419. I've covered some good ground, though definitely need to test channels + subscriptions more.

I'm waiting until the push of the backend-server changes from above are live in production, before finishing/retesting. There's also a pending new locale format change, in brave/brave-core#15681 (master) and brave/brave-core#15749 (1.46.x branch).

[MadhaviSeelam]

Verification PASSED using

Brave | 1.46.102 Chromium: 107.0.5304.110 (Official Build) beta (64-bit)
-- | --
Revision | 2a558545ab7e6fb8177002bf44d4fc1717cb2998-refs/branch-heads/5304@{#1202}
OS | Windows 11 Version 21H2 (Build 22000.1219)

Enable Brave News (v2)

Case 1: Enable Brave News (v2) via Brave news opt-in in the new-tab page- PASSED

1. installed 1.46.102
2. launched Brave
3. opened brave://flags
4. set #brave-news-v2 to Enabled
5. clicked on Relaunch
6. opened a new-tab page
7. scroll down
8. click on Show Brave News
9. clicked on Customize
10. confirmed new Brave News (v2) UI displayed
11. Brave News button is enabled by default

step 4	step 8	step 10-11

Case 2: Enable Brave News (v2) via clicking Customize button in the new-tab page- PASSED

1. new profile
2. launched Brave
3. opened brave://flags
4. set brave://flags/#brave-news-v2 to Enabled
5. clicked on Relaunch
6. opened a new-tab page
7. click Customize
8. click Brave News in the Customize Dashboard
9. click Turn on Brave News`
10. confirmed new Brave News (v2) UI displayed
11. Brave News button is enabled

step 4	step 8	step10	step 10-11

Case 3: Back to Dashboard link via clicking Customize button - PASSED

1. Continue from Case 2:
   • open a new-tab page
   • clicked on Customize
   • click Brave News in the Customize Dashboard
   • click Turn on Brave News`
2. click on < Back to Dashboard
3. returned to Customize Dashboard screen

step 2	step 3

Case 4: Customize Brave News dialog UI - Appearance & UI elements- PASSED

1. new profile
2. launched Brave
3. opened brave://flags
4. set brave://flags/#brave-news-v2 to Enabled
5. clicked on Relaunch
6. opened a new-tab page
7. click Customize
8. click Brave News in the Customize Dashboard
9. click Turn on Brave News`
10. confirmed new Brave News (v2) UI displayed
11. Brave News button is enabled by default
12. click Follow on The New York Times & CNN World News in the Popular category
13. click X to close the modal
14. click Brave News in the Customize Dashboard
15. Suggestions category displayed based on earlier selections
16. Click View all for Popular and Suggestions categories to view all sources
17. Click Back to view Brave news (v2) UI modal including Channels
18. toggle OFF Brave News to turn off the news feed

step 9	step 10	step 12	step15	step 16	step 18a	step 18b

Dark mode

example	example

Light mode

example	example

Follow/Unfollow Sources

Case 5: Follow sources - Single Source PASSED

Discover sources

1. new profile
2. enabled brave news v2 via brave://flags/#brave-news-v2
3. opened a new-tab page
4. clicked on Show Brave News
5. confirmed Newsweek article is not available
6. clicked Customize
7. searched for Newsweek and click Follow button
8. confirmed it appears under the Following heading
9. opened a new-tab page
10. confirmed Newsweek articles displayed

step 2	step 5	step 7	step 10

Case 6: Follow sources - Multiple Sources PASSED

Discover sources

1. new profile
2. enabled brave news v2 via brave://flags/#brave-news-v2
3. opened a new-tab page
4. clicked Customize
5. clicked Brave News
6. clicked Turn on Brave News button
7. searched for Time, NPR, Conde Nast Traveler Delishand clickedFollow` button
8. confirmed it appears under the Following heading in the left column
9. opened a new-tab page
10. confirmed articles for Time, NPR, Conde Nast Traveler Delish` shown in the Brave news feed

step 8	NPR	Time	Conde Nast	Delish

Case 7: Unfollow sources - PASSED

1. continue from Case 6
   • opened a new-tab page
   • clicked Customize
   • multiple sources shown in the Following pane in the left column (NPR, Time, Conde Nast, Delish
   • articles for NPR, Time, Conde Nast & Delish shown in the Brave news feed
2. hovered to the right of your source(s),(NPR & Delish) in the Following column
3. clicked Unfollow
4. clicked the X to close the dialog
5. clicked Load new content (or reload your Brave News feed, or open a new-tab page)
6. scrolled through and confirm the source(s) have been removed - NPR & Delish

Confirmed NPR & Delish resources have been removed from Following pane and Brave news feed.

step 1	step 1 sources	step 2-3	step 5	step 6

Follow/Unfollow Channels

Case 8: Follow Channel - PASSED

1. new profile
2. enabled brave news v2 via brave://flags/#brave-news-v2
3. opened a new-tab page
4. clicked Show Brave News
5. clicked Customize
6. under Channels, clicked on Follow in Food
7. Unfollowed Top Sources
8. clicked the X to close the dialog
9. clicked on Load new content
10. scrolledl thru the feed
11. confirmed the following articles appeared:
    • Delish
    • Serious Eats

step 2	step 6	step 7	step 9	step 11

Case 9: Unfollow channel - PASSED

1. continue from Case 8
   • open a new-tab page
   • clicked Customize
   • Food channel is available in the Following pane
2. clicked Follow to follow couple of more channels - Culture & Travel
3. hovered to the right of Food, & Travel and click Unfollow
4. confirmed Food & Travel were no longer subscribed under Following
5. clicked on the X to dismiss the dialog
6. clicked Load new content indicator to reload the content for Culture channel (wait for couple of secs for the indicator)
7. verified the Brave News feed for articles from Culture

step 1	step 2	step 3a	step 3b	step 4-6	step 6

Search

Case 10: Search bar - Sub-string searches - PASSED

1. new profile
2. opened a new-tab page
3. clicked Customize
4. clicked Brave News
5. click Turn on Brave News
6. searched for the following:

Blo	com	NBC	日本版	El Español

Case 11: Search via a site's url - PASSED

1. new profile
2. enable brave news v2 via brave://flags/#brave-news-v2
3. clicked Customize
4. clicked Brave News
5. clicked Turn on Brave News
6. beneath Discover, entered https://blog.mozilla.org/feed/ in the search bar
7. clicked on Get feeds from https://blog.mozilla.org/feed/
8. clicked Follow on The Mozilla Blog source to appear on Following pane

step 6	step 7	step 8

Case 12: Search via a site's name - PASSED

1. new profile
2. enable Brave news v2 via brave://flags/#brave-news-v2
3. clicked Customize
4. clicked Brave News
5. clicked Turn on Brave News
6. beneath Discover, enter wired in the search bar
   7 confirmed all 3 sources returned
7. clicked Follow on all three sources and both shown on the Following pane
8. open new-tab page

step 7	wired	wired-UK	wired-jp

Case 13: Brave News (v2) for Multiple profiles - PASSED

Profile 1:

1. new profile
2. enabled Brave news v2 via brave://flags/#brave-news-v2
3. clicked Customize
4. clicked Brave News
5. clicked Turn on Brave News
6. Brave news V2 modal and feed displayed as expected

step 6a	step 6b

Profile 2:

1. click Hamburger menu>>create a new profile>>profile 2
2. scroll thru new-tab page
3. clicked Show Brave News
4. clicked Customize
5. Brave News (v2) modal displayed as expected
6. click Follow for The New York Times
7. clicked X to close the dialog
8. News York Times article links displayed on the Brave News feed as expected

step 4	step 5	step 8

Case 14: Upgrade - Brave News (v2) - PASSED

Before Upgrade :

1. Install 1.45.123
2. launched Brave
3. created multiple profiles (i.e. Profile 1 & Profile 2)
4. enabled Brave News on Profile 1
5. do not enable Brave News on Profile 2
6. closed the browser
7. renamed to Beta

Profile 1	Profile 2

After Upgrade: Profile 1:

1. open brave://flags
2. enabled#brave-news-v2 flag
3. clicked Customize
4. clicked Brave News in the Customize Dashboard
5. Brave News (v2) modal displayed as expected
6. followed TechCrunch source
7. clicked X on both modals and clicked new-tab page
8. Brave news feed displayed as expected including articles for TechCrunch

step 2	step 5	step 8

After Upgrade: Profile 2:

1. clicked Show Brave News
2. clicked Customize
3. Brave News (v2) modal displayed as expected
4. click Follow on Le Monde
5. clicked X to close the dialog
6. clicked Load new content indicator
7. Brave news feed displayed as expected including articles for LeMonde

step 1	step 3	step 6	step 7

Filed:

• Brave news feed is not shown when opted out initially on the NTP and Turning on news in the Brave news dialog later #26703

[stephendonner]

Unsetting QA/Blocked, as all required client changes have been uplifted, and backend changes pushed to production 👍

@brave/qa-team testing can and should resume; thanks! re: #25801 (comment)

[btlechowski]

Verification passed on

Brave	1.46.117 Chromium: 107.0.5304.110 (Official Build) beta (64-bit)
Revision	2a558545ab7e6fb8177002bf44d4fc1717cb2998-refs/branch-heads/5304@{#1202}
OS	Ubuntu 18.04 LTS

Enable Brave News (v2)

Enable Brave News v2 in Polish locale- PASSED

Verified Show Brave News button is not shown

Enable Brave News v2 through 'Customize' in Polish locale- FAILED

Possible to enable Brave News through 'Customize'

Enable Brave News (v2) via Brave news opt-in in the new-tab page- PASSED

1. installed 1.46.x
2. launched Brave
3. opened brave://flags
4. set #brave-news-v2 to Enabled
5. clicked on Relaunch
6. opened a new-tab page
7. scroll down
8. click on Show Brave News
9. clicked on Customize
10. confirmed new Brave News (v2) UI displayed
11. Brave News button is enabled by default

Case 2: Enable Brave News (v2) via clicking Customize button in the new-tab page- PASSED

1. new profile
2. launched Brave
3. opened brave://flags
4. set brave://flags/#brave-news-v2 to Enabled
5. clicked on Relaunch
6. opened a new-tab page
7. click Customize
8. click Brave News in the Customize Dashboard
9. click Turn on Brave News`
10. confirmed new Brave News (v2) UI displayed
11. Brave News button is enabled

Case 3: Back to Dashboard link via clicking Customize button - PASSED

1. Continue from Case 2:
   • open a new-tab page
   • clicked on Customize
   • click Brave News in the Customize Dashboard
   • click Turn on Brave News`
2. click on < Back to Dashboard
3. returned to Customize Dashboard screen

Case 4: Customize Brave News dialog UI - Appearance & UI elements- PASSED

1. new profile
2. launched Brave
3. opened brave://flags
4. set brave://flags/#brave-news-v2 to Enabled
5. clicked on Relaunch
6. opened a new-tab page
7. click Customize
8. click Brave News in the Customize Dashboard
9. click Turn on Brave News`
10. confirmed new Brave News (v2) UI displayed
11. Brave News button is enabled by default
12. click Follow on Fox News in the Popular category
13. click X to close the modal
14. click Brave News in the Customize Dashboard
15. Suggestions category displayed based on earlier selections
16. Click View all for Popular and Suggestions categories to view all sources
17. Click Back to view Brave news (v2) UI modal including Channels
18. toggle OFF Brave News to turn off the news feed

Dark mode

Follow/Unfollow Sources

Case 5: Follow sources - Single Source PASSED

Discover sources

1. new profile
2. enabled brave news v2 via brave://flags/#brave-news-v2
3. opened a new-tab page
4. clicked on Show Brave News
5. confirmed Newsweek article is not available
6. clicked Customize
7. searched for Newsweek and click Follow button
8. confirmed it appears under the Following heading
9. opened a new-tab page
10. confirmed Newsweek articles displayed

Case 6: Follow sources - Multiple Sources PASSED

Discover sources

1. new profile
2. enabled brave news v2 via brave://flags/#brave-news-v2
3. opened a new-tab page
4. clicked Customize
5. clicked Brave News
6. clicked Turn on Brave News button
7. searched for Time, NPR, Conde Nast Traveler, Delish and clicked Follow button
8. confirmed it appears under the Following heading in the left column
9. opened a new-tab page
10. confirmed articles for Time, NPR, Conde Nast Traveler Delish` shown in the Brave news feed

Case 7: Unfollow sources - PASSED

1. continue from Case 6
   • opened a new-tab page
   • clicked Customize
   • multiple sources shown in the Following pane in the left column (NPR, Time, Conde Nast, Delish
   • articles for NPR, Time, Conde Nast & Delish shown in the Brave news feed
2. hovered to the right of your source(s),(NPR & Delish) in the Following column
3. clicked Unfollow
4. clicked the X to close the dialog
5. clicked Load new content (or reload your Brave News feed, or open a new-tab page)
6. scrolled through and confirm the source(s) have been removed - NPR & Delish

Confirmed NPR & Delish resources have been removed from Following pane and Brave news feed.

Follow/Unfollow Channels

Case 8: Follow Channel - PASSED

1. new profile
2. enabled brave news v2 via brave://flags/#brave-news-v2
3. opened a new-tab page
4. clicked Show Brave News
5. clicked Customize
6. under Channels, clicked on Follow in Food
7. Unfollowed Top Sources
8. clicked the X to close the dialog
9. clicked on Load new content
10. scrolledl thru the feed
11. confirmed the following articles appeared:
    • Delish
    • Serious Eats

Case 9: Unfollow channel - PASSED

1. continue from Case 8
   • open a new-tab page
   • clicked Customize
   • Food channel is available in the Following pane
2. clicked Follow to follow couple of more channels - Culture & Travel
3. hovered to the right of Food, & Travel and click Unfollow
4. confirmed Food & Travel were no longer subscribed under Following
5. clicked on the X to dismiss the dialog
6. clicked Load new content indicator to reload the content for Culture channel (wait for couple of secs for the indicator)
7. verified the Brave News feed for articles from Culture

Search

Case 10: Search bar - Sub-string searches - PASSED

1. new profile
2. opened a new-tab page
3. clicked Customize
4. clicked Brave News
5. click Turn on Brave News
6. searched for the following:

Blo	com	NBC	日本版	El Español

Case 11: Search via a site's url - PASSED

1. new profile
2. enable brave news v2 via brave://flags/#brave-news-v2
3. clicked Customize
4. clicked Brave News
5. clicked Turn on Brave News
6. beneath Discover, entered https://blog.mozilla.org/feed/ in the search bar
7. clicked on Get feeds from https://blog.mozilla.org/feed/
8. clicked Follow on The Mozilla Blog source to appear on Following pane

Case 12: Search via a site's name - PASSED

1. new profile
2. enable Brave news v2 via brave://flags/#brave-news-v2
3. clicked Customize
4. clicked Brave News
5. clicked Turn on Brave News
6. beneath Discover, enter wired in the search bar
   7 confirmed all 3 sources returned
7. clicked Follow on all three sources and both shown on the Following pane
8. open new-tab page

Case 13: Brave News (v2) for Multiple profiles - PASSED

Profile 1:

1. new profile
2. enabled Brave news v2 via brave://flags/#brave-news-v2
3. clicked Customize
4. clicked Brave News
5. clicked Turn on Brave News
6. Brave news V2 modal and feed displayed as expected

Profile 2:

1. click Hamburger menu>>create a new profile>>profile 2
2. scroll thru new-tab page
3. clicked Show Brave News
4. clicked Customize
5. Brave News (v2) modal displayed as expected
6. click Follow for Fox news
7. clicked X to close the dialog
8. article links displayed on the Brave News feed as expected

Case 14: Upgrade - Brave News (v2) - PASSED

Before Upgrade :

1. Install 1.45.x
2. launched Brave
3. created multiple profiles (i.e. Profile 1 & Profile 2)
4. enabled Brave News on Profile 1
5. do not enable Brave News on Profile 2
6. closed the browser
7. renamed to Beta

Profile 1	Profile 2

After Upgrade: Profile 1:

1. open brave://flags
2. enabled#brave-news-v2 flag
3. clicked Customize
4. clicked Brave News in the Customize Dashboard
5. Brave News (v2) modal displayed as expected
6. followed TechCrunch source
7. clicked X on both modals and clicked new-tab page
8. Brave news feed displayed as expected including articles for TechCrunch

After Upgrade: Profile 2:

1. clicked Show Brave News
2. clicked Customize
3. Brave News (v2) modal displayed as expected
4. click Follow on Le Monde
5. clicked X to close the dialog
6. clicked Load new content indicator
7. Brave news feed displayed as expected including articles for LeMonde