test(site): add e2e tests for appearance (#12950)

site/e2e/tests/deployment/appearance.spec.ts

@@ -0,0 +1,82 @@
+import { chromium, expect, test } from "@playwright/test";
+import { expectUrl } from "../../expectUrl";
+import { randomName, requiresEnterpriseLicense } from "../../helpers";
+
+test("set application name", async ({ page }) => {
+  requiresEnterpriseLicense();
+
+  await page.goto("/deployment/appearance", { waitUntil: "domcontentloaded" });
+
+  const applicationName = randomName();
+
+  // Fill out the form
+  const form = page.locator("form", { hasText: "Application name" });
+  await form
+    .getByLabel("Application name", { exact: true })
+    .fill(applicationName);
+  await form.getByRole("button", { name: "Submit" }).click();
+
+  // Open a new session without cookies to see the login page
+  const browser = await chromium.launch();
+  const incognitoContext = await browser.newContext();
+  await incognitoContext.clearCookies();
+  const incognitoPage = await incognitoContext.newPage();
+  await incognitoPage.goto("/", { waitUntil: "domcontentloaded" });
+
+  // Verify the application name
+  const name = incognitoPage.locator("h1", { hasText: applicationName });
+  await expect(name).toBeVisible();
+
+  // Shut down browser
+  await incognitoPage.close();
+  await browser.close();
+});
+
+test("set application logo", async ({ page }) => {
+  requiresEnterpriseLicense();
+
+  await page.goto("/deployment/appearance", { waitUntil: "domcontentloaded" });
+
+  const imageLink = "/icon/azure.png";
+
+  // Fill out the form
+  const form = page.locator("form", { hasText: "Logo URL" });
+  await form.getByLabel("Logo URL", { exact: true }).fill(imageLink);
+  await form.getByRole("button", { name: "Submit" }).click();
+
+  // Open a new session without cookies to see the login page
+  const browser = await chromium.launch();
+  const incognitoContext = await browser.newContext();
+  await incognitoContext.clearCookies();
+  const incognitoPage = await incognitoContext.newPage();
+  await incognitoPage.goto("/", { waitUntil: "domcontentloaded" });
+
+  // Verify banner
+  const logo = incognitoPage.locator("img");
+  await expect(logo).toHaveAttribute("src", imageLink);
+
+  // Shut down browser
+  await incognitoPage.close();
+  await browser.close();
+});
+
+test("set service banner", async ({ page }) => {
+  requiresEnterpriseLicense();
+
+  await page.goto("/deployment/appearance", { waitUntil: "domcontentloaded" });
+
+  const message = "Mary has a little lamb.";
+
+  // Fill out the form
+  const form = page.locator("form", { hasText: "Service Banner" });
+  await form.getByLabel("Enabled", { exact: true }).check();
+  await form.getByLabel("Message", { exact: true }).fill(message);
+  await form.getByRole("button", { name: "Submit" }).click();
+
+  // Verify service banner
+  await page.goto("/workspaces", { waitUntil: "domcontentloaded" });
+  await expectUrl(page).toHavePathName("/workspaces");
+
+  const bar = page.locator("div.service-banner", { hasText: message });
+  await expect(bar).toBeVisible();
+});

site/src/modules/dashboard/ServiceBanner/ServiceBannerView.tsx

@@ -16,7 +16,7 @@ export const ServiceBannerView: FC<ServiceBannerViewProps> = ({
   isPreview,
 }) => {
   return (
-    <div css={[styles.banner, { backgroundColor }]}>
+    <div css={[styles.banner, { backgroundColor }]} className="service-banner">
       {isPreview && <Pill type="info">Preview</Pill>}
       <div
         css={[

site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

@@ -105,6 +105,9 @@ export const AppearanceSettingsPageView: FC<
           fullWidth
           placeholder='Leave empty to display "Coder".'
           disabled={!isEntitled}
+          inputProps={{
+            "aria-label": "Application name",
+          }}
         />
       </Fieldset>
 
@@ -150,6 +153,9 @@ export const AppearanceSettingsPageView: FC<
               </InputAdornment>
             ),
           }}
+          inputProps={{
+            "aria-label": "Logo URL",
+          }}
         />
       </Fieldset>
 
@@ -208,6 +214,7 @@ export const AppearanceSettingsPageView: FC<
                     );
                     await serviceBannerForm.setFieldValue("enabled", newState);
                   }}
+                  data-testid="switch-service-banner"
                 />
               }
               label="Enabled"
@@ -221,6 +228,9 @@ export const AppearanceSettingsPageView: FC<
                 fullWidth
                 label="Message"
                 multiline
+                inputProps={{
+                  "aria-label": "Message",
+                }}
               />
             </Stack>