mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-24 06:35:10 +00:00
bc11b5ff5e
## Summary
- Add E2E tests for the `LoginButton` toolbar component (FE-109)
- Add `data-testid="login-button"` to `LoginButton.vue` for stable
targeting
- Register `TestIds.topbar.loginButton` in `selectors.ts`
## Changes
- `browser_tests/tests/loginButton.spec.ts` — 7 tests covering:
visibility toggled by `show_signin_button` server feature flag, ARIA
label, click → sign-in dialog, hover popover content, popover dismissal
- `src/components/topbar/LoginButton.vue` — adds `data-testid`
- `browser_tests/fixtures/selectors.ts` — registers new test ID
## Notes
`LoginButton` is rendered in `WorkflowTabs` when `flags.showSignInButton
?? isDesktop` is true. Since `isDesktop = false` in the OSS test build
(`DISTRIBUTION=localhost`), tests enable the button by setting
`window.app.api.serverFeatureFlags.value.show_signin_button = true` —
the established pattern used throughout the test suite (e.g.
`nodeLibraryEssentials.spec.ts`, `shareWorkflowDialog.spec.ts`).
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> **Low Risk**
> Low risk: changes are limited to adding stable `data-testid` hooks
plus new Playwright E2E coverage, with only a minor adjustment to a
unit-test performance threshold.
>
> **Overview**
> Adds Playwright E2E coverage for the topbar `LoginButton`, including
feature-flag-driven visibility, ARIA labeling, click-to-open sign-in
dialog, and hover popover behavior (including the *Learn more* link and
dismissal).
>
> To make the tests stable, `LoginButton.vue` now exposes `data-testid`
attributes for the button and popover elements, and `selectors.ts`
registers new `TestIds.topbar.*` entries.
>
> Relaxes the `useModelToNodeStore.getCategoryForNodeType` performance
test threshold (from 10ms to 100ms) while clarifying the intent of the
check.
>
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
1d4dd0bdca. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11562-test-add-E2E-tests-for-LoginButton-toolbar-component-34b6d73d365081f1bf2edc747d69ee52)
by [Unito](https://www.unito.io)
107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import type { Page } from '@playwright/test'
|
|
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
|
|
import { SignInDialog } from '@e2e/fixtures/components/SignInDialog'
|
|
import { TestIds } from '@e2e/fixtures/selectors'
|
|
|
|
/**
|
|
* Enable the show_signin_button server feature flag so LoginButton renders
|
|
* in WorkflowTabs (which uses `flags.showSignInButton ?? isDesktop`).
|
|
* The flag is reset automatically on each fresh page load in beforeEach.
|
|
*/
|
|
async function enableLoginButtonFlag(page: Page): Promise<void> {
|
|
await page.evaluate(() => {
|
|
window.app!.api.serverFeatureFlags.value = {
|
|
...window.app!.api.serverFeatureFlags.value,
|
|
show_signin_button: true
|
|
}
|
|
})
|
|
}
|
|
|
|
test.describe('Login Button', { tag: ['@ui'] }, () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setup()
|
|
})
|
|
|
|
test.describe('Visibility', () => {
|
|
test('button is hidden when show_signin_button flag is off', async ({
|
|
comfyPage
|
|
}) => {
|
|
await comfyPage.page.evaluate(() => {
|
|
window.app!.api.serverFeatureFlags.value = {
|
|
...window.app!.api.serverFeatureFlags.value,
|
|
show_signin_button: false
|
|
}
|
|
})
|
|
await expect(
|
|
comfyPage.page.getByTestId(TestIds.topbar.loginButton)
|
|
).toBeHidden()
|
|
})
|
|
|
|
test('button is visible when show_signin_button flag is enabled', async ({
|
|
comfyPage
|
|
}) => {
|
|
await enableLoginButtonFlag(comfyPage.page)
|
|
await expect(
|
|
comfyPage.page.getByTestId(TestIds.topbar.loginButton)
|
|
).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe('ARIA', () => {
|
|
test('button has correct aria-label', async ({ comfyPage }) => {
|
|
await enableLoginButtonFlag(comfyPage.page)
|
|
const button = comfyPage.page.getByTestId(TestIds.topbar.loginButton)
|
|
await expect(button).toHaveAttribute('aria-label', /.+/)
|
|
})
|
|
})
|
|
|
|
test.describe('Click behaviour', () => {
|
|
test('clicking the button opens the sign-in dialog', async ({
|
|
comfyPage
|
|
}) => {
|
|
await enableLoginButtonFlag(comfyPage.page)
|
|
const dialog = new SignInDialog(comfyPage.page)
|
|
await comfyPage.page.getByTestId(TestIds.topbar.loginButton).click()
|
|
await expect(dialog.root).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe('Hover popover', () => {
|
|
test('hovering shows an informational popover', async ({ comfyPage }) => {
|
|
await enableLoginButtonFlag(comfyPage.page)
|
|
await comfyPage.page.getByTestId(TestIds.topbar.loginButton).hover()
|
|
await expect(
|
|
comfyPage.page.getByTestId(TestIds.topbar.loginButtonPopover)
|
|
).toBeVisible()
|
|
})
|
|
|
|
test('popover contains a Learn more link', async ({ comfyPage }) => {
|
|
await enableLoginButtonFlag(comfyPage.page)
|
|
await comfyPage.page.getByTestId(TestIds.topbar.loginButton).hover()
|
|
const learnMoreLink = comfyPage.page.getByTestId(
|
|
TestIds.topbar.loginButtonPopoverLearnMore
|
|
)
|
|
await expect(learnMoreLink).toBeVisible()
|
|
await expect(learnMoreLink).toHaveAttribute('href', /api-nodes/)
|
|
})
|
|
|
|
test('popover hides after mouse leaves the button area', async ({
|
|
comfyPage
|
|
}) => {
|
|
await enableLoginButtonFlag(comfyPage.page)
|
|
const button = comfyPage.page.getByTestId(TestIds.topbar.loginButton)
|
|
await button.hover()
|
|
await expect(
|
|
comfyPage.page.getByTestId(TestIds.topbar.loginButtonPopover)
|
|
).toBeVisible()
|
|
|
|
await comfyPage.canvas.hover()
|
|
await expect(
|
|
comfyPage.page.getByTestId(TestIds.topbar.loginButtonPopover)
|
|
).toBeHidden()
|
|
})
|
|
})
|
|
})
|