Update YouTube feature description for ad blocking experiment (#1674)

Author: noisysocks

special-pages/pages/onboarding/app/components/v3/ComparisonTable.js

@@ -2,6 +2,7 @@ import { h } from 'preact';
 import cn from 'classnames';
 import { comparisonTableData, tableIconPrefix } from './data-comparison-table';
 import { useTypedTranslation } from '../../types';
+import { useGlobalState } from '../../global';
 
 import styles from './ComparisonTable.module.css';
 
@@ -69,7 +70,11 @@ export function ComparisonTableRow({ icon, title, statuses }) {
 
 export function ComparisonTable() {
     const { t } = useTypedTranslation();
-    const tableData = comparisonTableData(t);
+    const state = useGlobalState();
+
+    const systemSettingsStep = /** @type {import('../../types').SystemSettingsStep|undefined} */ (state.stepDefinitions.systemSettings);
+    const adBlockingEnabled = systemSettingsStep?.rows?.some((row) => row === 'ad-blocking' || row === 'youtube-ad-blocking') ?? false;
+    const tableData = comparisonTableData(t, adBlockingEnabled);
 
     return (
         <table className={styles.table}>

special-pages/pages/onboarding/app/components/v3/data-comparison-table.js

@@ -20,8 +20,8 @@ export const tableIconPrefix = 'assets/img/steps/v3/';
  *
  * Safari was removed from the latest comparison table layout. Keeping it the data just in case it comes back.
  *
- * @type {(t: ReturnType<typeof import('../../types')['useTypedTranslation']>['t']) => FeatureSupportData[]} */
-export const comparisonTableData = (t) => [
+ * @type {(t: ReturnType<typeof import('../../types')['useTypedTranslation']>['t'], adBlockingEnabled?: boolean) => FeatureSupportData[]} */
+export const comparisonTableData = (t, adBlockingEnabled = false) => [
     {
         icon: 'search.svg',
         title: t('comparison_searchPrivately'),
@@ -69,7 +69,7 @@ export const comparisonTableData = (t) => [
     },
     {
         icon: 'video-player.svg',
-        title: t('comparison_privateYoutube'),
+        title: adBlockingEnabled ? t('comparison_youtubeAdFree') : t('comparison_privateYoutube'),
         statuses: {
             chrome: SupportStatus.NOT_SUPPORTED,
             safari: SupportStatus.NOT_SUPPORTED,

special-pages/pages/onboarding/integration-tests/onboarding.js

@@ -160,6 +160,14 @@ export class OnboardingPage {
         await this.page.getByRole('button', { name: 'Skip' }).click();
     }
 
+    /**
+     * @param {boolean} adBlockingEnabled
+     */
+    async checkYouTubeText(adBlockingEnabled) {
+        const expectedText = adBlockingEnabled ? 'Watch YouTube ad-free' : 'Play YouTube without targeted ads';
+        await expect(this.page.getByRole('table')).toContainText(expectedText);
+    }
+
     async makeDefault() {
         const { page } = this;
         await page.getByRole('button', { name: 'Make Default' }).click();

special-pages/pages/onboarding/integration-tests/onboarding.spec.js

@@ -31,6 +31,37 @@ test.describe('onboarding', () => {
         await onboarding.openPage({ env: 'app', page: 'welcome', willThrow: true });
         await onboarding.handlesFatalException();
     });
+    test.describe('Given I am on the make default step', () => {
+        test('Then "Watch YouTube ad-free" appears when ad blocking is enabled', async ({ page }, workerInfo) => {
+            const onboarding = OnboardingPage.create(page, workerInfo);
+            onboarding.withInitData({
+                stepDefinitions: {
+                    systemSettings: {
+                        rows: ['dock', 'ad-blocking', 'import'],
+                    },
+                },
+                order: 'v3',
+            });
+            await onboarding.reducedMotion();
+            await onboarding.openPage({ env: 'app', page: 'makeDefaultSingle' });
+            await onboarding.checkYouTubeText(true);
+        });
+
+        test('Then "Play YouTube without targeted ads" appears when ad blocking is not enabled', async ({ page }, workerInfo) => {
+            const onboarding = OnboardingPage.create(page, workerInfo);
+            onboarding.withInitData({
+                stepDefinitions: {
+                    systemSettings: {
+                        rows: ['dock', 'import'],
+                    },
+                },
+                order: 'v3',
+            });
+            await onboarding.reducedMotion();
+            await onboarding.openPage({ env: 'app', page: 'makeDefaultSingle' });
+            await onboarding.checkYouTubeText(false);
+        });
+    });
     test.describe('Given I am on the summary step', () => {
         test('Then I can exit to search', async ({ page }, workerInfo) => {
             const onboarding = OnboardingPage.create(page, workerInfo);

special-pages/pages/onboarding/public/locales/en/onboarding.json

@@ -393,6 +393,10 @@
     "title": "Play YouTube without targeted ads",
     "note": "The description of a browser privacy feature in the comparison table."
   },
+  "comparison_youtubeAdFree": {
+    "title": "Watch YouTube ad-free",
+    "note": "The description of a browser privacy feature in the comparison table when ad-blocking is enabled."
+  },
   "comparison_fullSupport": {
     "title": "Significant protection",
     "note": "The level of protection offered by a browser on a specific feature in the comparison table."