start of generic chart fetch

e2e/tests/feature-page.spec.ts

@@ -25,14 +25,11 @@ 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-support-chart-container');
+  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
 
   // Wait specifically for the "Baseline since" text
   await page.waitForSelector('sl-card.wptScore .avail >> text=Baseline since');
 
-  // Wait for the loading overlay to disappear
-  await page.waitForSelector('.spinner-container', {state: 'detached'});
-
   const pageContainer = page.locator('.page-container');
   await expect(pageContainer).toHaveScreenshot();
 });
@@ -42,29 +39,28 @@ test('matches the screenshot with usage chart', async ({page}) => {
   await page.goto('http://localhost:5555/features/odit64?showUsageChart');
 
   // Wait for the chart container to exist
-  await page.waitForSelector('#feature-support-chart-container');
+  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
 
   // Wait for the usage chart container to exist
   await page.waitForSelector('#feature-usage-chart-container');
 
   // Wait specifically for the "Baseline since" text
   await page.waitForSelector('sl-card.wptScore .avail >> text=Baseline since');
 
-  // Wait for the loading overlay to disappear
-  await page.waitForSelector('.spinner-container', {state: 'detached'});
-
   const pageContainer = page.locator('.page-container');
   await expect(pageContainer).toHaveScreenshot();
 });
 
 test('chart width resizes with window', async ({page}) => {
   await page.goto('http://localhost:5555/features/odit64');
-  await page.waitForSelector('#feature-support-chart-container');
+  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
   await page.waitForTimeout(1000);
   const narrowWidth = 1000;
   const wideWidth = 1200;
   const height = 1000;
-  const chartContainer = page.locator('#feature-support-chart-container');
+  const chartContainer = page.locator(
+    '#feature-wpt-implementation-progress-complete',
+  );
 
   // Resize to narrow width
   await page.setViewportSize({width: narrowWidth, height});
@@ -91,8 +87,7 @@ test('chart width resizes with window', async ({page}) => {
 
 test('date range changes are preserved in the URL', async ({page}) => {
   await page.goto('http://localhost:5555/features/odit64');
-  await page.waitForSelector('#feature-support-chart-container');
-  await page.waitForSelector('.spinner-container', {state: 'detached'});
+  await page.waitForSelector('#feature-wpt-implementation-progress-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.
@@ -122,7 +117,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-support-chart-container');
+  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
 
   // Check that the startDate and endDate are still there.
   const url2 = page.url();
@@ -148,7 +143,7 @@ test('date range changes are preserved in the URL', async ({page}) => {
 
   // Go to that URL.
   await page.goto(url3);
-  await page.waitForSelector('#feature-support-chart-container');
+  await page.waitForSelector('#feature-wpt-implementation-progress-complete');
 
   // Check that the startDate and endDate selectors are reset to the initial default.
   const startDateSelector3 = page.locator('sl-input#start-date');

frontend/src/static/js/api/client.ts

@@ -89,6 +89,15 @@ export const BROWSER_ID_TO_LABEL: Record<BrowsersParameter, string> = {
   edge: 'Edge',
 };
 
+/** Map from label to browser id */
+export const BROWSER_LABEL_TO_ID: Record<string, BrowsersParameter> =
+  Object.fromEntries(
+    Object.entries(BROWSER_ID_TO_LABEL).map(([key, value]) => [
+      value,
+      key as BrowsersParameter,
+    ]),
+  );
+
 export const BROWSER_ID_TO_COLOR: Record<BrowsersParameter | 'total', string> =
   {
     chrome: '#FF0000',
@@ -335,6 +344,7 @@ export class APIClient {
     channel: ChannelsParameter,
     startAtDate: Date,
     endAtDate: Date,
+    metricView: components['schemas']['WPTMetricView'] = DEFAULT_TEST_VIEW,
   ): AsyncIterable<WPTRunMetric[]> {
     const startAt: string = startAtDate.toISOString().substring(0, 10);
     const endAt: string = endAtDate.toISOString().substring(0, 10);
@@ -351,7 +361,7 @@ export class APIClient {
               feature_id: featureId,
               browser,
               channel,
-              metric_view: DEFAULT_TEST_VIEW,
+              metric_view: metricView,
             },
           },
         },

frontend/src/static/js/components/test/webstatus-feature-page.test.ts

@@ -18,7 +18,7 @@ import {expect, fixture, html} from '@open-wc/testing';
 import {FeaturePage} from '../webstatus-feature-page.js';
 import '../webstatus-feature-page.js';
 import sinon from 'sinon';
-import {ChromiumUsageStat, WPTRunMetric} from '../../api/client.js';
+import {WPTRunMetric} from '../../api/client.js';
 import {render} from 'lit';
 
 describe('webstatus-feature-page', () => {
@@ -50,220 +50,6 @@ describe('webstatus-feature-page', () => {
     );
   });
 
-  it('generates chart options for the Feature Support chart', async () => {
-    const startDate = new Date('2020-01-01T00:00:00.000Z');
-    const endDate = new Date('2020-12-31T00:00:00.000Z');
-    const dayAfterEndDate = new Date('2020-12-31T00:00:00.000Z');
-    dayAfterEndDate.setUTCDate(dayAfterEndDate.getUTCDate() + 1);
-    el.startDate = startDate;
-    el.endDate = endDate;
-    await el.updateComplete;
-    const result = el.generateFeatureSupportChartOptions();
-    expect(result.hAxis?.viewWindow?.min).eql(startDate);
-    // Chart's end date is set to 1 day after end date.
-    expect(result.hAxis?.viewWindow?.max).eql(dayAfterEndDate);
-    // Check colors based on browsers displayed.
-    expect(result.colors).eql([
-      '#FF0000',
-      '#F48400',
-      '#4285F4',
-      '#0F9D58',
-      '#888888',
-    ]);
-    // Vertical axis should have a chart-specific title.
-    expect(result.vAxis?.title).to.eq('Number of subtests passed');
-  });
-
-  it('generates chart options for the Feature Usage chart', async () => {
-    const startDate = new Date('2020-01-01T00:00:00.000Z');
-    const endDate = new Date('2020-12-31T00:00:00.000Z');
-    const dayAfterEndDate = new Date('2020-12-31T00:00:00.000Z');
-    dayAfterEndDate.setUTCDate(dayAfterEndDate.getUTCDate() + 1);
-    el.startDate = startDate;
-    el.endDate = endDate;
-    await el.updateComplete;
-    const result = el.generateFeatureUsageChartOptions();
-    expect(result.hAxis?.viewWindow?.min).eql(startDate);
-    // Chart's end date is set to 1 day after end date.
-    expect(result.hAxis?.viewWindow?.max).eql(dayAfterEndDate);
-    // Check colors based on browsers displayed.
-    expect(result.colors).eql(['#FF0000', '#888888']);
-    // Vertical axis should have a chart-specific title.
-    expect(result.vAxis?.title).to.eq('Usage (%)');
-  });
-
-  it('organizes data to be used for the Feature Support chart', async () => {
-    el.featureSupport = new Map<string, Array<WPTRunMetric>>();
-    el.featureSupport.set('chrome-stable', [
-      {
-        run_timestamp: '2020-01-01T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 3,
-      },
-      {
-        run_timestamp: '2020-01-02T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 3,
-      },
-      {
-        run_timestamp: '2020-01-03T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 4,
-      },
-      {
-        run_timestamp: '2020-01-04T00:00:00Z',
-        total_tests_count: 5,
-        test_pass_count: 5,
-      },
-    ]);
-    el.featureSupport.set('edge-stable', [
-      {
-        run_timestamp: '2020-01-01T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 2,
-      },
-      {
-        run_timestamp: '2020-01-02T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 4,
-      },
-      {
-        run_timestamp: '2020-01-03T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 3,
-      },
-      {
-        run_timestamp: '2020-01-04T00:00:00Z',
-        total_tests_count: 5,
-        test_pass_count: 4,
-      },
-    ]);
-    el.featureSupport.set('firefox-stable', [
-      {
-        run_timestamp: '2020-01-01T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 1,
-      },
-      {
-        run_timestamp: '2020-01-02T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 4,
-      },
-      {
-        run_timestamp: '2020-01-03T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 4,
-      },
-      {
-        run_timestamp: '2020-01-04T00:00:00Z',
-        total_tests_count: 5,
-        test_pass_count: 5,
-      },
-    ]);
-    el.featureSupport.set('safari-stable', [
-      {
-        run_timestamp: '2020-01-01T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 0,
-      },
-      {
-        run_timestamp: '2020-01-02T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 0,
-      },
-      {
-        run_timestamp: '2020-01-03T00:00:00Z',
-        total_tests_count: 4,
-        test_pass_count: 0,
-      },
-      {
-        run_timestamp: '2020-01-04T00:00:00Z',
-        total_tests_count: 5,
-        test_pass_count: 1,
-      },
-    ]);
-    await el.updateComplete;
-
-    const result = el.createFeatureSupportDataFromMap();
-
-    // Assertions for columns
-    expect(result.cols.length).to.equal(10); // Expecting 10 columns (date + 2 for each browser + total)
-    expect(result.cols[9].label).to.equal('Total number of subtests');
-
-    // Assertions for rows
-    expect(result.rows.length).to.equal(4);
-    // Check data for the first row (timestamp: 2020-01-01T00:00:00Z)
-    const firstRow = result.rows[0];
-    expect(firstRow[0]).to.be.instanceOf(Date);
-    expect(firstRow[1]).to.equal(3); // Chrome pass count
-    expect(firstRow[2]).to.equal('Chrome: 3 of 4'); // Chrome tooltip
-    expect(firstRow[3]).to.equal(1); // Firefox pass count
-    expect(firstRow[4]).to.equal('Firefox: 1 of 4'); // Firefox tooltip
-    expect(firstRow[5]).to.equal(0); // Safari pass count
-    expect(firstRow[6]).to.equal('Safari: 0 of 4'); // Safari tooltip
-    expect(firstRow[7]).to.equal(2); // Edge pass count
-    expect(firstRow[8]).to.equal('Edge: 2 of 4'); // Edge tooltip
-    expect(firstRow[9]).to.equal(4); // Total tests count
-
-    // Check data for the last row (timestamp: 2020-01-04T00:00:00Z)
-    const lastRow = result.rows[result.rows.length - 1];
-    expect(lastRow[0]).to.be.instanceOf(Date);
-    expect(lastRow[1]).to.equal(5); // Chrome pass count
-    expect(lastRow[2]).to.equal('Chrome: 5 of 5'); // Chrome tooltip
-    expect(lastRow[3]).to.equal(5); // Firefox pass count
-    expect(lastRow[4]).to.equal('Firefox: 5 of 5'); // Firefox tooltip
-    expect(lastRow[5]).to.equal(1); // Safari pass count
-    expect(lastRow[6]).to.equal('Safari: 1 of 5'); // Safari tooltip
-    expect(lastRow[7]).to.equal(4); // Edge pass count
-    expect(lastRow[8]).to.equal('Edge: 4 of 5'); // Edge tooltip
-    expect(lastRow[9]).to.equal(5); // Total tests count
-  });
-
-  it('organizes data to be used for the Feature Usage chart', async () => {
-    el.featureUsage = new Map<string, Array<ChromiumUsageStat>>();
-    el.featureUsage.set('chrome', [
-      {
-        timestamp: '2020-01-01T00:00:00Z',
-        usage: 0.00001,
-      },
-      {
-        timestamp: '2020-01-02T00:00:00Z',
-        usage: 0.0,
-      },
-      {
-        timestamp: '2020-01-03T00:00:00Z',
-        usage: 0.1,
-      },
-      {
-        timestamp: '2020-01-04T00:00:00Z',
-        usage: 0.11,
-      },
-    ]);
-    await el.updateComplete;
-
-    const result = el.createFeatureUsageDataFromMap();
-
-    // Assertions for columns
-    expect(result.cols.length).to.equal(3); // Expecting 3 columns.
-    expect(result.cols[0].label).to.equal('Date');
-    expect(result.cols[1].label).to.equal('Chrome');
-    expect(result.cols[2].label).to.equal('Chrome tooltip');
-
-    // Assertions for rows
-    expect(result.rows.length).to.equal(4);
-    // Check data for the first row (timestamp: 2020-01-01T00:00:00Z)
-    const firstRow = result.rows[0];
-    expect(firstRow[0]).to.be.instanceOf(Date);
-    expect(firstRow[1]).to.equal(0.001); // Chrome usage
-    expect(firstRow[2]).to.equal('Chrome: 0.001%'); // Chrome usage tooltip
-
-    // Check data for the last row (timestamp: 2020-01-04T00:00:00Z)
-    const lastRow = result.rows[result.rows.length - 1];
-    expect(lastRow[0]).to.be.instanceOf(Date);
-    expect(lastRow[1]).to.equal(11); // Chrome usage
-    expect(lastRow[2]).to.equal('Chrome: 11%'); // Chrome usage tooltip
-  });
-
   it('builds a null WPT link correctly when there are no stable metrics', async () => {
     const noStableMetricsLink = el.buildWPTLink({
       feature_id: 'declarative-shadow-dom',
@@ -372,7 +158,7 @@ describe('webstatus-feature-page', () => {
       element.featureSupport = new Map<string, Array<WPTRunMetric>>([
         // increase case
         [
-          'chrome-stable',
+          'chrome',
           [
             {
               test_pass_count: 90,
@@ -388,7 +174,7 @@ describe('webstatus-feature-page', () => {
         ],
         // decrease case
         [
-          'edge-stable',
+          'edge',
           [
             {
               test_pass_count: 70,
@@ -404,7 +190,7 @@ describe('webstatus-feature-page', () => {
         ],
         // no changes case
         [
-          'safari-stable',
+          'safari',
           [
             {
               test_pass_count: 80,
@@ -420,6 +206,7 @@ describe('webstatus-feature-page', () => {
         ],
         // firefox will be the no runs case
       ]);
+      await element.updateComplete;
     });
 
     it('renders unchanged chip when there are no runs', async () => {