test(baseline): add regression e2e tests

components/baseline-indicator/sandbox.js

@@ -99,43 +99,51 @@ function discouragedFeature(overrides) {
 
 /**
  * @type {{
+ *   id: string;
  *   name: string;
  *   status: import("@rari").BaselineStatus;
  *   baseline?: import("@rari").Baseline;
  * }[]}
  */
 const CASES = [
   {
+    id: "high",
     name: "high",
     status: "high",
     baseline: available("high"),
   },
   {
+    id: "high-asterisk",
     name: "high, asterisk",
     status: "high",
     baseline: available("high", { asterisk: true }),
   },
   {
+    id: "low",
     name: "low",
     status: "low",
     baseline: available("low"),
   },
   {
+    id: "low-asterisk",
     name: "low, asterisk",
     status: "low",
     baseline: available("low", { asterisk: true }),
   },
   {
+    id: "limited",
     name: "limited",
     status: "limited",
     baseline: notAvailable(),
   },
   {
+    id: "limited-asterisk",
     name: "limited, asterisk",
     status: "limited",
     baseline: notAvailable({ support: SUPPORT_WEBKIT_ONLY, asterisk: true }),
   },
   {
+    id: "limited-developer-signals",
     name: "limited, developer signals",
     status: "limited",
     baseline: notAvailable({
@@ -145,11 +153,22 @@ const CASES = [
     }),
   },
   {
+    id: "discouraged",
     name: "discouraged",
     status: "discouraged",
     baseline: notAvailable({ feature: discouragedFeature() }),
   },
   {
+    id: "discouraged-asterisk",
+    name: "discouraged, asterisk ignored",
+    status: "discouraged",
+    baseline: notAvailable({
+      asterisk: true,
+      feature: discouragedFeature(),
+    }),
+  },
+  {
+    id: "discouraged-one-alternative",
     name: "discouraged, one alternative",
     status: "discouraged",
     baseline: notAvailable({
@@ -158,6 +177,7 @@ const CASES = [
     }),
   },
   {
+    id: "discouraged-several-alternatives",
     name: "discouraged, several alternatives",
     status: "discouraged",
     baseline: notAvailable({
@@ -166,15 +186,18 @@ const CASES = [
     }),
   },
   {
+    id: "discouraged-no-compatibility-data",
     name: "discouraged, no compatibility data",
     status: "discouraged",
   },
   {
+    id: "removing",
     name: "removing",
     status: "removing",
     baseline: notAvailable({ feature: discouragedFeature() }),
   },
   {
+    id: "removing-one-alternative",
     name: "removing, one alternative",
     status: "removing",
     baseline: notAvailable({
@@ -183,6 +206,7 @@ const CASES = [
     }),
   },
   {
+    id: "removing-several-alternatives",
     name: "removing, several alternatives",
     status: "removing",
     baseline: notAvailable({
@@ -212,8 +236,10 @@ export class BaselineIndicatorSandbox extends SandboxComponent {
               baseline: testCase.baseline,
             },
           });
-        return html`<h2>${testCase.name}</h2>
-          ${BaselineIndicator.render(docContext)}`;
+        return html`<section id=${testCase.id}>
+          <h2>${testCase.name}</h2>
+          ${BaselineIndicator.render(docContext)}
+        </section>`;
       })}
     `;
   }

test/pageobjects/baseline-indicator.page.js

@@ -0,0 +1,32 @@
+import { $, browser } from "@wdio/globals";
+
+import BaselineIndicator from "./components/baseline-indicator.js";
+import SandboxPage from "./sandbox.page.js";
+
+class BaselineIndicatorPage {
+  open(locale = "en-US") {
+    return SandboxPage.open("baseline-indicator", locale);
+  }
+
+  /** @param {string} id */
+  fixture(id) {
+    return $(`#${id}`);
+  }
+
+  /** @param {string} id */
+  indicator(id) {
+    return new BaselineIndicator(() =>
+      this.fixture(id).$(".baseline-indicator"),
+    );
+  }
+
+  async clearStoredState() {
+    await browser.execute(() => localStorage.removeItem("baseline-indicator"));
+  }
+
+  async getStoredState() {
+    return browser.execute(() => localStorage.getItem("baseline-indicator"));
+  }
+}
+
+export default new BaselineIndicatorPage();

test/pageobjects/components/baseline-indicator.js

@@ -0,0 +1,100 @@
+import { browser } from "@wdio/globals";
+
+import Component from "./component.js";
+
+export default class BaselineIndicator extends Component {
+  get summary() {
+    return this.element.$("summary");
+  }
+
+  get statusIcon() {
+    return this.summary.$(".indicator");
+  }
+
+  get title() {
+    return this.summary.$(".status-title");
+  }
+
+  get pill() {
+    return this.summary.$(".pill");
+  }
+
+  get asterisk() {
+    return this.summary.$(".asterisk");
+  }
+
+  get browsers() {
+    return this.summary.$(".browsers");
+  }
+
+  /** @param {"chrome" | "edge" | "firefox" | "safari"} name */
+  browser(name) {
+    return this.browsers.$(`.${name}`);
+  }
+
+  /** @param {number} index */
+  engine(index) {
+    return this.browsers.$(`.engine:nth-child(${index + 1})`);
+  }
+
+  get extra() {
+    return this.element.$(".extra");
+  }
+
+  get asteriskNote() {
+    return this.extra.$(".asterisk-note");
+  }
+
+  get reason() {
+    return this.extra.$('p span[lang="en-US"]');
+  }
+
+  get reasonCode() {
+    return this.reason.$("code");
+  }
+
+  get signalsLink() {
+    return this.extra.$('[data-glean-id="baseline_link_signals"]');
+  }
+
+  /** @param {string} name */
+  alternativeLink(name) {
+    return this.extra.$(
+      `[data-glean-id="baseline_link_alternatives: ${name}"]`,
+    );
+  }
+
+  get alternativeLinks() {
+    return this.extra.$$('[data-glean-id^="baseline_link_alternatives:"]');
+  }
+
+  get compatibilityLink() {
+    return this.extra.$('[data-glean-id="baseline_link_bcd_table"]');
+  }
+
+  get learnMoreLink() {
+    return this.extra.$('[data-glean-id="baseline_link_learn_more"]');
+  }
+
+  async isOpen() {
+    return Boolean(await this.element.getProperty("open"));
+  }
+
+  /** @param {boolean} open */
+  async setOpen(open) {
+    if ((await this.isOpen()) !== open) {
+      await this.summary.click();
+    }
+    await browser.waitUntil(async () => (await this.isOpen()) === open, {
+      timeoutMsg: `Baseline indicator did not ${open ? "open" : "close"}`,
+    });
+  }
+
+  async open() {
+    await this.setOpen(true);
+  }
+
+  async close() {
+    await this.setOpen(false);
+  }
+}

test/pageobjects/components/component.js

@@ -0,0 +1,12 @@
+/** @import { ChainablePromiseElement } from "webdriverio" */
+
+export default class Component {
+  /** @param {() => ChainablePromiseElement} elementFactory */
+  constructor(elementFactory) {
+    this.elementFactory = elementFactory;
+  }
+
+  get element() {
+    return this.elementFactory();
+  }
+}

test/pageobjects/sandbox.page.js

@@ -0,0 +1,16 @@
+import Page from "./page.js";
+
+class SandboxPage extends Page {
+  /**
+   * Opens a component's sandbox page.
+   * @param {string} component component directory name
+   * @param {string} [locale] page locale
+   */
+  open(component, locale = "en-US") {
+    return super.open(
+      `${encodeURIComponent(locale)}/sandbox/${encodeURIComponent(component)}`,
+    );
+  }
+}
+
+export default new SandboxPage();