Add tabbed mobile functionality (#1445)

* Add tabbed mobile functionality

* code cleanup

* add new tabbed panel component

* update async function to properly await

* update pwtests

* add tests for tabbed panel

* pw snapshots

* changes suggested by @jcscottiii and pw tests

* refactoring suggested by @jcscottiii

* fix node test

* small pwtest change

* changes suggested by @jcscottiii

---------

Co-authored-by: DanielRyanSmith <danielrsmith@google.com>

Author: DanielRyanSmith

e2e/tests/feature-page.spec.ts

@@ -25,7 +25,7 @@ test('matches the screenshot', async ({page}) => {
   await page.goto('http://localhost:5555/features/odit64');
 
   // Wait for the chart container to exist
-  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
+  await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');
 
   // Wait specifically for the "Baseline since" text
   await page.waitForSelector('sl-card.wptScore .avail >> text=Baseline since');
@@ -36,13 +36,13 @@ test('matches the screenshot', async ({page}) => {
 
 test('chart width resizes with window', async ({page}) => {
   await page.goto('http://localhost:5555/features/odit64');
-  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
+  await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');
   await page.waitForTimeout(1000);
   const narrowWidth = 1000;
   const wideWidth = 1200;
   const height = 1000;
   const chartContainer = page.locator(
-    '#feature-wpt-implementation-progress-complete',
+    '#feature-wpt-implementation-progress-0-complete',
   );
 
   // Resize to narrow width
@@ -68,9 +68,24 @@ test('chart width resizes with window', async ({page}) => {
   await expect(chartContainer).toHaveScreenshot();
 });
 
+test('mobile chart displays on click and matches screenshot', async ({
+  page,
+}) => {
+  await page.goto('http://localhost:5555/features/odit64');
+  await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');
+  const mobileTab = page.locator(
+    'sl-tab#feature-wpt-implementation-progress-tab-mobile',
+  );
+
+  await mobileTab.click();
+  await page.waitForTimeout(2000);
+  const pageContainer = page.locator('.page-container');
+  await expect(pageContainer).toHaveScreenshot();
+});
+
 test('date range changes are preserved in the URL', async ({page}) => {
   await page.goto('http://localhost:5555/features/odit64');
-  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
+  await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');
 
   // Get the current default startDate and endDate from the selectors
   // TODO Figure out how to use getByLabel with shoelace and replace page.locator with that.
@@ -100,7 +115,7 @@ test('date range changes are preserved in the URL', async ({page}) => {
 
   // Refresh the page with that URL.
   await page.goto(url);
-  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
+  await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');
 
   // Check that the startDate and endDate are still there.
   const url2 = page.url();
@@ -126,7 +141,7 @@ test('date range changes are preserved in the URL', async ({page}) => {
 
   // Go to that URL.
   await page.goto(url3);
-  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
+  await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');
 
   // Check that the startDate and endDate selectors are reset to the initial default.
   const startDateSelector3 = page.locator('sl-input#start-date');

e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-chromium-linux.png

@@ -25,15 +25,15 @@ import '../webstatus-feature-usage-chart-panel.js';
 describe('WebstatusFeatureUsageChartPanel', () => {
   let el: WebstatusFeatureUsageChartPanel;
   let apiClientStub: SinonStubbedInstance<APIClient>;
-  let fetchAndAggregateDataStub: SinonStub;
+  let populateDataForChartStub: SinonStub;
   const startDate = new Date('2024-01-01');
   const endDate = new Date('2024-01-31');
 
   beforeEach(async () => {
     apiClientStub = stub(new APIClient(''));
-    fetchAndAggregateDataStub = stub(
+    populateDataForChartStub = stub(
       WebstatusLineChartPanel.prototype,
-      '_fetchAndAggregateData',
+      '_populateDataForChart',
     );
     el = await fixture<WebstatusFeatureUsageChartPanel>(
       testHtml`<webstatus-feature-usage-chart-panel
@@ -47,7 +47,7 @@ describe('WebstatusFeatureUsageChartPanel', () => {
   });
 
   afterEach(() => {
-    fetchAndAggregateDataStub.restore();
+    populateDataForChartStub.restore();
   });
 
   it('renders the card', async () => {
@@ -69,10 +69,10 @@ describe('WebstatusFeatureUsageChartPanel', () => {
     expect(el.dataFetchEndDate).to.deep.equal(new Date('2024-01-31'));
   });
 
-  it('calls _fetchAndAggregateData with correct configurations', async () => {
-    expect(fetchAndAggregateDataStub).to.have.been.calledOnce;
+  it('calls _populateDataForChart with correct configurations', async () => {
+    expect(populateDataForChartStub).to.have.been.calledOnce;
     const [fetchFunctionConfigs, additionalSeriesConfigs] =
-      fetchAndAggregateDataStub.getCall(0).args;
+      populateDataForChartStub.getCall(0).args;
 
     expect(fetchFunctionConfigs.length).to.equal(1); // Only 1 browser (Chrome)
 

e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-firefox-linux.png

@@ -23,8 +23,8 @@ import {
   FeatureWPTMetricViewType,
   WPTRunMetric,
 } from '../../api/client.js';
-import {WebstatusLineChartPanel} from '../webstatus-line-chart-panel.js';
 import '../webstatus-feature-wpt-progress-chart-panel.js';
+import {WebstatusLineChartTabbedPanel} from '../webstatus-line-chart-tabbed-panel.js';
 
 const startDate = new Date('2024-01-01');
 const endDate = new Date('2024-01-31');
@@ -46,21 +46,21 @@ async function createFixtureElement(
 describe('WebstatusFeatureWPTProgressChartPanel', () => {
   let el: WebstatusFeatureWPTProgressChartPanel;
   let apiClientStub: SinonStubbedInstance<APIClient>;
-  let fetchAndAggregateDataStub: SinonStub;
+  let populateDataForChartByViewStub: SinonStub;
 
   beforeEach(async () => {
     apiClientStub = stub(new APIClient(''));
-    fetchAndAggregateDataStub = stub(
-      WebstatusLineChartPanel.prototype,
-      '_fetchAndAggregateData',
+    populateDataForChartByViewStub = stub(
+      WebstatusLineChartTabbedPanel.prototype,
+      '_populateDataForChartByView',
     );
     el = await createFixtureElement(startDate, endDate, DEFAULT_TEST_VIEW);
     el.apiClient = apiClientStub;
     await el.updateComplete;
   });
 
   afterEach(() => {
-    fetchAndAggregateDataStub.restore();
+    populateDataForChartByViewStub.restore();
   });
 
   it('renders the card', async () => {
@@ -82,12 +82,13 @@ describe('WebstatusFeatureWPTProgressChartPanel', () => {
     expect(el.dataFetchEndDate).to.deep.equal(new Date('2024-01-31'));
   });
 
-  it('calls _fetchAndAggregateData with correct configurations', async () => {
-    expect(fetchAndAggregateDataStub).to.have.been.calledOnce;
-    const [fetchFunctionConfigs, additionalSeriesConfigs] =
-      fetchAndAggregateDataStub.getCall(0).args;
-
+  it('calls _populateDataForChartByView with correct configurations', async () => {
+    // Call method for both desktop and mobile views.
+    expect(populateDataForChartByViewStub).to.have.been.calledTwice;
+    let [fetchFunctionConfigs, dataIndex, additionalSeriesConfigs] =
+      populateDataForChartByViewStub.getCall(0).args;
     expect(fetchFunctionConfigs.length).to.equal(4); // 4 browsers
+    expect(dataIndex).to.equal(0); // First view index
 
     // Test Chrome configuration
     const chromeConfig = fetchFunctionConfigs[0];
@@ -158,10 +159,64 @@ describe('WebstatusFeatureWPTProgressChartPanel', () => {
       new Date('2024-01-01T13:00:00.000Z'), // Expecting the rounded timestamp
     );
     expect(totalConfig.valueExtractor(totalTestDataPoint)).to.equal(15);
+
+    [fetchFunctionConfigs, dataIndex, additionalSeriesConfigs] =
+      populateDataForChartByViewStub.getCall(1).args;
+
+    expect(fetchFunctionConfigs.length).to.equal(3); // 3 browsers
+    expect(dataIndex).to.equal(1); // Second view index
+
+    // Test Chrome Android configuration
+    const chromeAndroidConfig = fetchFunctionConfigs[0];
+    expect(chromeAndroidConfig.label).to.equal('Chrome Android');
+    expect(chromeAndroidConfig.fetchFunction).to.be.a('function');
+    const chromeAndroidTestDataPoint: WPTRunMetric = {
+      run_timestamp: '2024-01-01T12:34:56.789Z',
+      total_tests_count: 10,
+      test_pass_count: 5,
+    };
+    expect(
+      chromeAndroidConfig.timestampExtractor(chromeAndroidTestDataPoint),
+    ).to.deep.equal(
+      new Date('2024-01-01T13:00:00.000Z'), // Expecting the rounded timestamp
+    );
+    expect(
+      chromeAndroidConfig.valueExtractor(chromeAndroidTestDataPoint),
+    ).to.equal(5);
+
+    // Test Firefox Android configuration
+    const firefoxAndroidConfig = fetchFunctionConfigs[1];
+    expect(firefoxAndroidConfig.label).to.equal('Firefox Android');
+    expect(firefoxAndroidConfig.fetchFunction).to.be.a('function');
+    const firefoxAndroidTestDataPoint: WPTRunMetric = {
+      run_timestamp: '2024-01-01',
+      total_tests_count: 12,
+      test_pass_count: 7,
+    };
+    expect(
+      firefoxAndroidConfig.timestampExtractor(firefoxAndroidTestDataPoint),
+    ).to.deep.equal(new Date('2024-01-01'));
+    expect(
+      firefoxAndroidConfig.valueExtractor(firefoxAndroidTestDataPoint),
+    ).to.equal(7);
+
+    // Test Safari iOS configuration
+    const safariIosConfig = fetchFunctionConfigs[2];
+    expect(safariIosConfig.label).to.equal('Safari iOS');
+    expect(safariIosConfig.fetchFunction).to.be.a('function');
+    const safariIosTestDataPoint: WPTRunMetric = {
+      run_timestamp: '2024-01-01',
+      total_tests_count: 8,
+      test_pass_count: 3,
+    };
+    expect(
+      safariIosConfig.timestampExtractor(safariIosTestDataPoint),
+    ).to.deep.equal(new Date('2024-01-01'));
+    expect(safariIosConfig.valueExtractor(safariIosTestDataPoint)).to.equal(3);
   });
 
   it('generates chart options correctly', () => {
-    const options = el.generateDisplayDataChartOptions();
+    const options = el.generateDisplayDataChartOptionsByView(0);
     // Check colors based on browsers displayed.
     // 4 browsers and total.
     expect(options.colors).eql([
@@ -180,30 +235,32 @@ describe('WebstatusFeatureWPTProgressChartPanel', () => {
 
   describe('metric view specific tests', () => {
     it('generates metric view specific chart options correctly when view=test', async () => {
-      fetchAndAggregateDataStub.reset();
+      populateDataForChartByViewStub.reset();
       el = await createFixtureElement(startDate, endDate, 'test_counts');
       el.apiClient = apiClientStub;
       await el.updateComplete;
-      const options = el.generateDisplayDataChartOptions();
+      const options = el.generateDisplayDataChartOptionsByView(0);
       expect(options.vAxis?.title).to.equal('Number of tests passed');
-      expect(fetchAndAggregateDataStub).to.have.been.calledOnce;
+      // Call method for both desktop and mobile views.
+      expect(populateDataForChartByViewStub).to.have.been.calledTwice;
       const additionalSeriesConfigs =
-        fetchAndAggregateDataStub.getCall(0).args[1];
+        populateDataForChartByViewStub.getCall(0).args[2];
       // Check additional series configurations
       expect(additionalSeriesConfigs).to.have.lengthOf(1);
       const totalConfig = additionalSeriesConfigs[0];
       expect(totalConfig.label).to.equal('Total number of tests');
     });
     it('generates metric view specific chart options correctly when view=subtest', async () => {
-      fetchAndAggregateDataStub.reset();
+      populateDataForChartByViewStub.reset();
       el = await createFixtureElement(startDate, endDate, 'subtest_counts');
       el.apiClient = apiClientStub;
       await el.updateComplete;
-      const options = el.generateDisplayDataChartOptions();
+      const options = el.generateDisplayDataChartOptionsByView(0);
       expect(options.vAxis?.title).to.equal('Number of subtests passed');
-      expect(fetchAndAggregateDataStub).to.have.been.calledOnce;
+      // Call method for both desktop and mobile views.
+      expect(populateDataForChartByViewStub).to.have.been.calledTwice;
       const additionalSeriesConfigs =
-        fetchAndAggregateDataStub.getCall(0).args[1];
+        populateDataForChartByViewStub.getCall(0).args[2];
       // Check additional series configurations
       expect(additionalSeriesConfigs).to.have.lengthOf(1);
       const totalConfig = additionalSeriesConfigs[0];

e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-webkit-linux.png

@@ -26,6 +26,7 @@ import {WebStatusDataObj, WebstatusGChart} from '../webstatus-gchart.js';
 import {TemplateResult, html} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {createMockIterator, taskUpdateComplete} from './test-helpers.js';
+import {BrowsersParameter} from '../../api/client.js';
 
 // Interface for the data used in LineChartMetricData
 interface MetricDataPoint {
@@ -34,7 +35,9 @@ interface MetricDataPoint {
 }
 
 @customElement('test-line-chart-panel')
-class TestLineChartPanel extends WebstatusLineChartPanel {
+class TestLineChartPanel extends WebstatusLineChartPanel<BrowsersParameter> {
+  readonly series: BrowsersParameter[] = [];
+
   resolveTask!: (value: WebStatusDataObj) => void;
   rejectTask!: (reason: Error) => void;
   resolvePointSelectedTask!: (value: unknown) => void;
@@ -88,7 +91,9 @@ class TestLineChartPanel extends WebstatusLineChartPanel {
     return html``;
   }
 
-  getDisplayDataChartOptionsInput(): {
+  getDisplayDataChartOptionsInput<BrowsersParameter>(
+    _browsers: BrowsersParameter[],
+  ): {
     seriesColors: Array<string>;
     vAxisTitle: string;
   } {
@@ -151,14 +156,15 @@ describe('WebstatusLineChartPanel', () => {
       },
     ];
 
-    el.setDisplayDataFromMap(metricDataArray);
-    expect(el.data).to.exist;
-    expect(el.data!.cols).to.deep.equal([
+    const formattedMetricData = el.processDisplayDataFromMap(metricDataArray);
+    expect(formattedMetricData).to.exist;
+
+    expect(formattedMetricData.cols).to.deep.equal([
       {type: 'date', label: 'Date', role: 'domain'},
       {type: 'number', label: 'Metric 1', role: 'data'},
       {type: 'number', label: 'Metric 2', role: 'data'},
     ]);
-    expect(el.data!.rows).to.deep.equal([
+    expect(formattedMetricData.rows).to.deep.equal([
       [new Date('2024-01-01'), 10, 15], // Values for both metrics on the same date
       [new Date('2024-01-02'), 20, 25], // Values for both metrics on the same date
       [new Date('2024-01-03'), null, 30], // Metric 1 is null because it has no data for 2024-01-03
@@ -210,7 +216,7 @@ describe('WebstatusLineChartPanel', () => {
     expect(errorMessage!.textContent).to.include('Error when loading chart');
   });
 
-  describe('_fetchAndAggregateData', () => {
+  describe('_populateDataForChart', () => {
     it('fetches data and applies additional series calculators', async () => {
       const fetchFunctionConfigs: FetchFunctionConfig<MetricDataPoint>[] = [
         {
@@ -248,7 +254,7 @@ describe('WebstatusLineChartPanel', () => {
           },
         ];
 
-      await el._fetchAndAggregateData(
+      await el._populateDataForChart(
         fetchFunctionConfigs,
         additionalSeriesConfigs,
       );
@@ -283,7 +289,7 @@ describe('WebstatusLineChartPanel', () => {
       const startingListener = oneEvent(el, 'data-fetch-starting');
       const completeListener = oneEvent(el, 'data-fetch-complete');
 
-      await el._fetchAndAggregateData(fetchFunctionConfigs);
+      await el._populateDataForChart(fetchFunctionConfigs);
 
       await startingListener;
       const {detail} = await completeListener;