add Slack webhook UI and E2E tests #2333

jcscottiii · 2026-03-19T13:16:23Z

Question: Did this make a difference. I wonder if we should add an optional argument to expectDualThemeScreenshot which will move that cursor for us automatically.

webstatus.dev/e2e/tests/utils.ts

Lines 37 to 53 in 7e8601e

export async function expectDualThemeScreenshot(

page: Page,

locator: Locator | Page,

name: string,

options?: Parameters<Locator['screenshot']>[0],

) {

// 1. Ensure light theme and capture

await forceTheme(page, 'light');

await expect(locator).toHaveScreenshot(`${name}.png`, options);

// 2. Change to dark theme and capture

await forceTheme(page, 'dark');

await expect(locator).toHaveScreenshot(`${name}-dark.png`, options);

// 3. Reset to light for subsequent tests

await forceTheme(page, 'light');

}

Don't address that in this PR but something for the future if we see this happening a lot. Just FYI for the future.

jcscottiii · 2026-03-19T14:11:24Z

Is there a particular heading we can assert on besides the component.

webstatus.dev/e2e/tests/subscriptions.spec.ts

Lines 67 to 70 in 7e8601e

const dialog = page.locator('webstatus-manage-subscriptions-dialog');

await expect(

dialog.getByRole('heading', {name: 'Manage notifications'}),

).toBeVisible();

jcscottiii · 2026-03-19T14:06:15Z

It should be possible to get getByRole('button', { name: 'Delete' }) here.

That is more flexible than getByLabel. Docs

jcscottiii · 2026-03-19T14:14:16Z

This should work instead using the preferred locator.

Suggested change

const deleteDialog = webhookPanel.locator(

'sl-dialog[label="Delete Webhook Channel"]',

);

const deleteDialog = webhookPanel.getByRole('dialog', { name: 'Delete Webhook Channel' });

jcscottiii · 2026-03-19T14:03:32Z

We try to avoid using 'networkidle' anymore. It has been marked as discouraged.

https://playwright.dev/docs/next/api/class-page#page-wait-for-load-state

jcscottiii · 2026-03-19T14:11:58Z

Same as here: https://github.com/GoogleChrome/webstatus.dev/pull/2333/changes#r2960351462

jcscottiii · 2026-03-19T13:21:38Z

Same question and follow up as pointed out in https://github.com/GoogleChrome/webstatus.dev/pull/2333/changes#r2960189732

jcscottiii · 2026-03-19T13:54:06Z

Same question and follow up as pointed out in https://github.com/GoogleChrome/webstatus.dev/pull/2333/changes#r2960189732

jcscottiii · 2026-03-19T14:07:12Z

Same feedback as https://github.com/GoogleChrome/webstatus.dev/pull/2333/changes#r2960311636

jcscottiii · 2026-03-19T13:50:19Z

Is there a reason for this increased timeout? If you're waiting for a response to complete, use page.waitForResponse instead before checking the dialog's visibility. This will help prevent flakiness in resource constrained environments like our CI.

Here are places where we do it already: https://github.com/search?q=repo%3AGoogleChrome%2Fwebstatus.dev%20waitforresponse&type=code

jcscottiii · 2026-03-19T13:56:07Z

Nit: try something like this when able.

Suggested change

const deleteButton = updatedItem.locator('sl-button[aria-label="Delete"]');

const deleteButton = updatedItem.getByRole('button', { name: 'Delete' });

jcscottiii · 2026-03-19T14:14:49Z

Suggested change

const deleteDialog = webhookPanel.locator(

'sl-dialog[label="Delete Webhook Channel"]',

);

const deleteDialog = webhookPanel.getByRole('dialog', { name: 'Delete Webhook Channel' });

-Original file line number
+Diff line change
@@ Expand Up / @@ -445,6 +445,87 @@ export class APIClient { @@
         });
       }
+      public async createNotificationChannel(
+        token: string,
+        channel: components['schemas']['CreateNotificationChannelRequest'],
+      ): Promise<components['schemas']['NotificationChannelResponse']> {
+        const options: FetchOptions<
+          FilterKeys<paths['/v1/users/me/notification-channels'], 'post'>
+        > = {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          body: channel,
+          credentials: temporaryFetchOptions.credentials,
+        };
+        const response = await this.client.POST(
+          '/v1/users/me/notification-channels',
+          options,
+        );
+        const error = response.error;
+        if (error !== undefined) {
+          throw createAPIError(error);
+        }
+        return response.data;
+      }
+      public async updateNotificationChannel(
+        token: string,
+        channelId: string,
+        request: components['schemas']['UpdateNotificationChannelRequest'],
+      ): Promise<components['schemas']['NotificationChannelResponse']> {
+        const options: FetchOptions<
+          FilterKeys<
+            paths['/v1/users/me/notification-channels/{channel_id}'],
+            'patch'
+          >
+        > = {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          params: {
+            path: {
+              channel_id: channelId,
+            },
+          },
+          body: request,
+          credentials: temporaryFetchOptions.credentials,
+        };
+        const response = await this.client.PATCH(
+          '/v1/users/me/notification-channels/{channel_id}',
+          options,
+        );
+        const error = response.error;
+        if (error !== undefined) {
+          throw createAPIError(error);
+        }
+        return response.data;
+      }
+      public async deleteNotificationChannel(token: string, channelId: string) {
+        const options = {
+          ...temporaryFetchOptions,
+          params: {
+            path: {
+              channel_id: channelId,
+            },
+          },
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        };
+        const response = await this.client.DELETE(
+          '/v1/users/me/notification-channels/{channel_id}',
+          options,
+        );
+        const error = response.error;
+        if (error !== undefined) {
+          throw createAPIError(error);
+        }
+        return response.data;
+      }
       public async pingUser(
         token: string,
         pingOptions?: {githubToken?: string},
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,51 @@
+    /**
+     * Copyright 2026 Google LLC
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    import {html, TemplateResult} from 'lit';
+    import {type components} from 'webstatus.dev-backend';
+    import './webhook-config-form.js';
+    import {ChannelConfigUpdate} from './channel-config-types.js';
+    type ChannelType = components['schemas']['NotificationChannel']['type'];
+    type ChannelResponse = components['schemas']['NotificationChannelResponse'];
+    export const ChannelConfigRegistry = {
+      renderConfig(
+        type: ChannelType,
+        channel: ChannelResponse | undefined,
+        onUpdate: (update: ChannelConfigUpdate) => void,
+      ): TemplateResult {
+        switch (type) {
+          case 'webhook':
+            return html`<webhook-config-form
+              class="config-form"
+              .channel=${channel}
+              @change=${(e: CustomEvent<ChannelConfigUpdate>) => onUpdate(e.detail)}
+            ></webhook-config-form>`;
+          case 'email':
+            return html`<div>
+              Email:
+              ${channel?.config.type === 'email'
+                ? (channel.config as components['schemas']['EmailConfig']).address
+                : ''}
+              (Verified)
+            </div>`;
+          default:
+            return html`<p>Unsupported channel type: ${type}</p>`;
+        }
+      },
+    };

-Original file line number
+Diff line change
@@ -0,0 +1,40 @@
+    /**
+     * Copyright 2026 Google LLC
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    import {components} from 'webstatus.dev-backend';
+    import {LitElement} from 'lit';
+    import {property} from 'lit/decorators.js';
+    type UpdateRequest = components['schemas']['UpdateNotificationChannelRequest'];
+    type UpdateMask = UpdateRequest['update_mask'][number];
+    type ChannelResponse = components['schemas']['NotificationChannelResponse'];
+    export interface ChannelConfigUpdate {
+      updates: Partial<UpdateRequest>;
+      mask: UpdateMask[];
+    }
+    export interface ChannelConfigComponent extends HTMLElement {
+      channel?: ChannelResponse;
+      getUpdate(): ChannelConfigUpdate;
+      isDirty(): boolean;
+      validate(): boolean;
+    }
+    export abstract class ChannelConfigForm extends LitElement {
+      @property({type: Object}) abstract channel?: ChannelResponse;
+      abstract validate(): boolean;
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add Slack webhook UI and E2E tests #2333

Diff view

Diff view

There are no files selected for viewing

jcscottiii Mar 19, 2026 •

edited

Loading

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

jcscottiii Mar 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

add Slack webhook UI and E2E tests #2333

Are you sure you want to change the base?

add Slack webhook UI and E2E tests #2333

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

jcscottiii Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jcscottiii Mar 19, 2026 •

edited

Loading