test(site): add e2e tests for experiments

coder · mtojek · Apr 12, 2024 · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024
commit d903728eca38517993ee983ce23c203737bf7b94
diff --git a/site/e2e/constants.ts b/site/e2e/constants.ts
@@ -37,3 +37,7 @@ export const requireEnterpriseTests = Boolean(
   process.env.CODER_E2E_REQUIRE_ENTERPRISE_TESTS,
 );
 export const enterpriseLicense = process.env.CODER_E2E_ENTERPRISE_LICENSE ?? "";
+
+// Fake experiments to verify that site presents them as enabled.
+export const e2eFakeExperiment1 = "e2e-fake-experiment-1";
+export const e2eFakeExperiment2 = "e2e-fake-experiment-2";
diff --git a/site/e2e/tests/deployment/general.spec.ts b/site/e2e/tests/deployment/general.spec.ts
@@ -0,0 +1,37 @@
+import { expect, test } from "@playwright/test";
+import * as API from "api/api";
+import { setupApiCalls } from "../../api";
+import { requiresEnterpriseLicense } from "../../helpers";
+
+test("experiments", async ({ page }) => {
+  requiresEnterpriseLicense();
+  await setupApiCalls(page);
+
+  // Load experiments from backend API
+  const availableExperiments = await API.getAvailableExperiments();
+  const enabledExperiments = await API.getExperiments();
+
+  // Verify if the site lists the same experiments
+  await page.goto("/deployment/general", { waitUntil: "domcontentloaded" });
+
+  const experimentsLocator = page.locator(
+    "div.options-table tr.option-experiments ul.option-array",
+  );
+  await expect(experimentsLocator).toBeVisible();
+
+  // Firstly, check if available experiments are listed
+  availableExperiments.safe.map(async (experiment) => {
+    const experimentLocator = experimentsLocator.locator(
+      `li.option-array-item-${experiment}`,
+    );
+    await expect(experimentLocator).toBeVisible();
+  });
+
+  // Secondly, check if all enabled experiments are listed
+  enabledExperiments.map(async (experiment) => {
+    const experimentLocator = experimentsLocator.locator(
+      `li.option-array-item-${experiment}.option-enabled`,
+    );
+    await expect(experimentLocator).toBeVisible();
+  });
+});
diff --git a/site/src/pages/DeploySettingsPage/Option.tsx b/site/src/pages/DeploySettingsPage/Option.tsx
@@ -51,7 +51,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 
   if (typeof value === "object" && !Array.isArray(value)) {
     return (
-      <ul css={{ listStyle: "none" }}>
+      <ul css={{ listStyle: "none" }} className="option-array">
         {Object.entries(value)
           .sort((a, b) => a[0].localeCompare(b[0]))
           .map(([option, isEnabled]) => (
@@ -64,6 +64,9 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
                   color: theme.palette.text.disabled,
                 },
               ]}
+              className={`option-array-item-${option} ${
+                isEnabled ? "option-enabled" : "option-disabled"
+              }`}
             >
               <div
                 css={{

diff --git a/site/src/pages/DeploySettingsPage/OptionsTable.tsx b/site/src/pages/DeploySettingsPage/OptionsTable.tsx
@@ -27,7 +27,7 @@ const OptionsTable: FC<OptionsTableProps> = ({ options, additionalValues }) => {
   }
 
   return (
-    <TableContainer>
+    <TableContainer className="options-table">
       <Table
         css={css`
           & td {
@@ -57,7 +57,7 @@ const OptionsTable: FC<OptionsTableProps> = ({ options, additionalValues }) => {
               return null;
             }
             return (
-              <TableRow key={option.flag}>
+              <TableRow key={option.flag} className={"option-" + option.flag}>
                 <TableCell>
                   <OptionName>{option.name}</OptionName>
                   <OptionDescription>{option.description}</OptionDescription>