mirror of
https://github.com/J3vb/OwnCord.git
synced 2026-09-03 03:50:00 +03:00
test: complete E2E improvement phases 4-6
Phase 4: Strengthen assertions in server-strip, main-layout, user-bar, message-input specs. Fix "presence_update" test title. Phase 5: Replace skipped toast.spec.ts with 5 real tests covering load failure, auto-dismiss, container check, message display, and stacking. Add mockTauriFullSessionWithFailingMessages helper. Phase 6: Migrate 12 spec files to data-testid selectors for primary elements, keeping CSS class selectors for fine-grained children.
This commit is contained in:
jevb
@@ -1,5 +1,5 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { mockTauriFullSession, navigateToMainPage, emitWsEvent } from "./helpers";
|
||||
import { mockTauriFullSession, navigateToMainPage, emitWsEvent, emitWsMessage } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Server Banner (reconnection)
|
||||
@@ -14,9 +14,8 @@ test.describe("Server Banner", () => {
|
||||
|
||||
test("reconnecting banner is hidden by default", async ({ page }) => {
|
||||
const banner = page.locator(".reconnecting-banner");
|
||||
if (await banner.count() > 0) {
|
||||
await expect(banner).not.toHaveClass(/visible/);
|
||||
}
|
||||
await expect(banner).toBeAttached();
|
||||
await expect(banner).not.toHaveClass(/visible/);
|
||||
});
|
||||
|
||||
test("banner appears on WS disconnect", async ({ page }) => {
|
||||
@@ -45,10 +44,22 @@ test.describe("Server Banner", () => {
|
||||
|
||||
// Reconnect
|
||||
await emitWsEvent(page, "ws-state", "open");
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Banner should hide
|
||||
// Banner should hide after reconnection
|
||||
const hiddenBanner = page.locator(".reconnecting-banner");
|
||||
await expect(hiddenBanner).not.toHaveClass(/visible/, { timeout: 5_000 });
|
||||
});
|
||||
|
||||
test("server_restart event shows restart countdown banner", async ({ page }) => {
|
||||
await emitWsMessage(page, {
|
||||
type: "server_restart",
|
||||
payload: { reason: "update", delay_seconds: 30 },
|
||||
});
|
||||
|
||||
const banner = page.locator(".reconnecting-banner.visible");
|
||||
await expect(banner).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const text = await banner.textContent();
|
||||
expect(text).toMatch(/restart/i);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -13,8 +13,8 @@ test.describe("Channel Sidebar", () => {
|
||||
});
|
||||
|
||||
test("sidebar is visible after login", async ({ page }) => {
|
||||
const sidebar = page.locator(".channel-sidebar");
|
||||
await expect(sidebar).toBeVisible();
|
||||
const sidebar = page.locator("[data-testid='channel-sidebar']");
|
||||
await expect(sidebar).toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
test("sidebar header shows server name", async ({ page }) => {
|
||||
@@ -33,7 +33,7 @@ test.describe("Channel Sidebar", () => {
|
||||
});
|
||||
|
||||
test("channel items display channel name", async ({ page }) => {
|
||||
const firstChannel = page.locator(".channel-item").first();
|
||||
const firstChannel = page.locator("[data-testid='channel-1']");
|
||||
await expect(firstChannel).toBeVisible();
|
||||
|
||||
const name = firstChannel.locator(".ch-name");
|
||||
@@ -41,38 +41,52 @@ test.describe("Channel Sidebar", () => {
|
||||
});
|
||||
|
||||
test("channel items have hash icon", async ({ page }) => {
|
||||
const firstChannel = page.locator(".channel-item").first();
|
||||
const firstChannel = page.locator("[data-testid='channel-1']");
|
||||
const icon = firstChannel.locator(".ch-icon");
|
||||
await expect(icon).toBeVisible();
|
||||
});
|
||||
|
||||
test("clicking a channel marks it as active", async ({ page }) => {
|
||||
const channels = page.locator(".channel-item");
|
||||
const count = await channels.count();
|
||||
if (count < 2) return;
|
||||
|
||||
const secondChannel = channels.nth(1);
|
||||
// Mock has 2 channels (general, random)
|
||||
const secondChannel = page.locator("[data-testid='channel-2']");
|
||||
await expect(secondChannel).toBeVisible({ timeout: 3000 });
|
||||
await secondChannel.click();
|
||||
|
||||
await expect(secondChannel).toHaveClass(/active/);
|
||||
});
|
||||
|
||||
test("clicking a channel updates chat header", async ({ page }) => {
|
||||
const channels = page.locator(".channel-item");
|
||||
const count = await channels.count();
|
||||
if (count < 2) return;
|
||||
|
||||
const secondChannel = channels.nth(1);
|
||||
const secondChannel = page.locator("[data-testid='channel-2']");
|
||||
await expect(secondChannel).toBeVisible({ timeout: 3000 });
|
||||
const channelName = await secondChannel.locator(".ch-name").textContent();
|
||||
|
||||
await secondChannel.click();
|
||||
|
||||
const headerName = page.locator(".chat-header .ch-name");
|
||||
const headerName = page.locator("[data-testid='chat-header-name']");
|
||||
await expect(headerName).toHaveText(channelName ?? "");
|
||||
});
|
||||
|
||||
test("switching channels re-mounts message container", async ({ page }) => {
|
||||
// Verify first channel is active and messages container exists
|
||||
const messagesContainer = page.locator(".messages-container");
|
||||
await expect(messagesContainer).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// Switch to second channel
|
||||
const secondChannel = page.locator("[data-testid='channel-2']");
|
||||
await expect(secondChannel).toBeVisible({ timeout: 3000 });
|
||||
await secondChannel.click();
|
||||
|
||||
// Messages container should still be present (re-mounted for new channel)
|
||||
await expect(messagesContainer).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// Chat header should reflect the new channel
|
||||
const headerName = page.locator("[data-testid='chat-header-name']");
|
||||
const channelName = await secondChannel.locator(".ch-name").textContent();
|
||||
await expect(headerName).toHaveText(channelName ?? "");
|
||||
});
|
||||
|
||||
test("first channel is active by default", async ({ page }) => {
|
||||
const firstChannel = page.locator(".channel-item").first();
|
||||
const firstChannel = page.locator("[data-testid='channel-1']");
|
||||
await expect(firstChannel).toHaveClass(/active/);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
mockTauriFullSessionWithMessages,
|
||||
navigateToMainPage,
|
||||
emitWsMessage,
|
||||
MOCK_CHANNELS_WITH_CATEGORIES,
|
||||
} from "./helpers";
|
||||
|
||||
test.describe("Channel Switch — Messages", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessages(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("switching channels updates header and clears messages container", async ({ page }) => {
|
||||
// Verify we start on the first channel
|
||||
const headerName = page.locator(".chat-header .ch-name");
|
||||
await expect(headerName).toHaveText("general");
|
||||
|
||||
// Wait for messages to load
|
||||
await expect(page.locator(".message").first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Click the second channel
|
||||
const secondChannel = page.locator(".channel-item").nth(1);
|
||||
await secondChannel.click();
|
||||
|
||||
// Header should update
|
||||
await expect(headerName).toHaveText("random");
|
||||
});
|
||||
|
||||
test("switching to a channel and back preserves messages", async ({ page }) => {
|
||||
await expect(page.locator(".message").first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Remember initial message count
|
||||
const initialCount = await page.locator(".message").count();
|
||||
expect(initialCount).toBeGreaterThanOrEqual(1);
|
||||
|
||||
// Switch to second channel
|
||||
const channels = page.locator(".channel-item");
|
||||
await channels.nth(1).click();
|
||||
await expect(page.locator(".chat-header .ch-name")).toHaveText("random");
|
||||
|
||||
// Switch back
|
||||
await channels.first().click();
|
||||
await expect(page.locator(".chat-header .ch-name")).toHaveText("general");
|
||||
|
||||
// Messages should still be there (loaded from cache)
|
||||
await expect(page.locator(".message").first()).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("new message on inactive channel does not appear in current view", async ({ page }) => {
|
||||
await expect(page.locator(".message").first()).toBeVisible({ timeout: 10_000 });
|
||||
const countBefore = await page.locator(".message").count();
|
||||
|
||||
// Send a message to channel 2 (random) while we're viewing channel 1 (general)
|
||||
await emitWsMessage(page, {
|
||||
type: "chat_message",
|
||||
payload: {
|
||||
id: 500,
|
||||
channel_id: 2,
|
||||
user: { id: 2, username: "otheruser", avatar: "" },
|
||||
content: "Message on other channel",
|
||||
timestamp: new Date().toISOString(),
|
||||
attachments: [],
|
||||
reply_to: null,
|
||||
},
|
||||
});
|
||||
|
||||
// Wait for the unread badge to confirm the event was processed
|
||||
const secondChannel = page.locator(".channel-item").nth(1);
|
||||
await expect(secondChannel.locator(".unread-badge")).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// Message count on current channel should not change
|
||||
const countAfter = await page.locator(".message").count();
|
||||
expect(countAfter).toBe(countBefore);
|
||||
|
||||
// The message should NOT be visible in current view
|
||||
await expect(
|
||||
page.locator(".msg-text", { hasText: "Message on other channel" })
|
||||
).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("unread badge appears on channel with new message", async ({ page }) => {
|
||||
await expect(page.locator(".message").first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Send a message to the non-active channel
|
||||
await emitWsMessage(page, {
|
||||
type: "chat_message",
|
||||
payload: {
|
||||
id: 501,
|
||||
channel_id: 2,
|
||||
user: { id: 2, username: "otheruser", avatar: "" },
|
||||
content: "Unread message",
|
||||
timestamp: new Date().toISOString(),
|
||||
attachments: [],
|
||||
reply_to: null,
|
||||
},
|
||||
});
|
||||
|
||||
// The non-active channel should show an unread badge
|
||||
const secondChannel = page.locator(".channel-item").nth(1);
|
||||
const badge = secondChannel.locator(".unread-badge");
|
||||
await expect(badge).toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
});
|
||||
@@ -1,10 +1,6 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { mockTauriFullSession, navigateToMainPage } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Chat Header
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Chat Header", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
@@ -12,34 +8,61 @@ test.describe("Chat Header", () => {
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("chat header is visible", async ({ page }) => {
|
||||
const header = page.locator(".chat-header");
|
||||
test("renders channel info with hash, name, tools, and search", async ({ page }) => {
|
||||
const header = page.locator("[data-testid='chat-header']");
|
||||
await expect(header).toBeVisible();
|
||||
});
|
||||
|
||||
test("chat header shows hash icon", async ({ page }) => {
|
||||
const hash = page.locator(".chat-header .ch-hash");
|
||||
await expect(hash).toBeVisible();
|
||||
});
|
||||
|
||||
test("chat header shows channel name", async ({ page }) => {
|
||||
const name = page.locator(".chat-header .ch-name");
|
||||
await expect(header.locator(".ch-hash")).toBeVisible();
|
||||
const name = page.locator("[data-testid='chat-header-name']");
|
||||
await expect(name).toBeVisible();
|
||||
await expect(name).not.toBeEmpty();
|
||||
await expect(header.locator(".ch-topic")).toBeAttached();
|
||||
await expect(header.locator(".ch-tools")).toBeVisible();
|
||||
await expect(header.locator(".ch-tools .search-input")).toBeAttached();
|
||||
});
|
||||
|
||||
test("chat header shows topic", async ({ page }) => {
|
||||
const topic = page.locator(".chat-header .ch-topic");
|
||||
await expect(topic).toBeAttached();
|
||||
test("members toggle button hides and shows member list", async ({ page }) => {
|
||||
const membersToggle = page.locator("[data-testid='members-toggle']");
|
||||
await expect(membersToggle).toBeVisible();
|
||||
|
||||
const memberList = page.locator("[data-testid='member-list']");
|
||||
await expect(memberList).toBeVisible({ timeout: 3000 });
|
||||
|
||||
await membersToggle.click();
|
||||
await expect(memberList).not.toBeVisible({ timeout: 3000 });
|
||||
|
||||
await membersToggle.click();
|
||||
await expect(memberList).toBeVisible({ timeout: 3000 });
|
||||
});
|
||||
|
||||
test("chat header has tools area", async ({ page }) => {
|
||||
const tools = page.locator(".ch-tools");
|
||||
await expect(tools).toBeVisible();
|
||||
});
|
||||
|
||||
test("chat header has search input", async ({ page }) => {
|
||||
test("search input expands on focus and collapses on blur", async ({ page }) => {
|
||||
const search = page.locator(".ch-tools .search-input");
|
||||
await expect(search).toBeAttached();
|
||||
|
||||
// Focus the search — should trigger CSS width expansion
|
||||
await search.focus();
|
||||
await expect(search).toBeFocused();
|
||||
|
||||
// Type something to verify it accepts input
|
||||
await search.fill("test query");
|
||||
await expect(search).toHaveValue("test query");
|
||||
|
||||
// Blur and verify value persists
|
||||
await search.blur();
|
||||
await expect(search).toHaveValue("test query");
|
||||
});
|
||||
|
||||
test("pin button opens pinned messages panel", async ({ page }) => {
|
||||
const pinBtn = page.locator("[data-testid='pin-btn']");
|
||||
await expect(pinBtn).toBeVisible();
|
||||
|
||||
await pinBtn.click();
|
||||
|
||||
const pinnedPanel = page.locator(".pinned-panel");
|
||||
await expect(pinnedPanel).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Close it
|
||||
const closeBtn = pinnedPanel.locator(".pinned-panel__close");
|
||||
await closeBtn.click();
|
||||
await expect(pinnedPanel).not.toBeAttached({ timeout: 3000 });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { buildTauriMockScript } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Settings Overlay from Connect Page
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Connect Page — Settings Overlay", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
],
|
||||
simulateWsFlow: false,
|
||||
}));
|
||||
await page.goto("/");
|
||||
});
|
||||
|
||||
test("gear button is visible on the connect page", async ({ page }) => {
|
||||
const gearBtn = page.locator(".settings-gear");
|
||||
await expect(gearBtn).toBeVisible();
|
||||
});
|
||||
|
||||
test("clicking gear button opens settings overlay", async ({ page }) => {
|
||||
const gearBtn = page.locator(".settings-gear");
|
||||
await gearBtn.click();
|
||||
|
||||
const overlay = page.locator(".settings-overlay.open");
|
||||
await expect(overlay).toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
test("closing settings overlay works via close button", async ({ page }) => {
|
||||
const gearBtn = page.locator(".settings-gear");
|
||||
await gearBtn.click();
|
||||
|
||||
const overlay = page.locator(".settings-overlay.open");
|
||||
await expect(overlay).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const closeBtn = page.locator(".settings-close-btn");
|
||||
await closeBtn.click();
|
||||
|
||||
await expect(overlay).not.toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* E2E tests for the ConnectedOverlay component.
|
||||
* Covers: overlay appears after login, shows server info, spinner → "Ready!" transition.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { mockTauriFullSession, submitLogin, navigateToMainPage } from "./helpers";
|
||||
|
||||
test.describe("Connected Overlay", () => {
|
||||
test("overlay appears after login with server info", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await submitLogin(page);
|
||||
|
||||
const overlay = page.locator("[data-testid='connected-overlay']");
|
||||
await expect(overlay).toBeVisible({ timeout: 5000 });
|
||||
|
||||
const connectedText = page.locator(".connected-text");
|
||||
await expect(connectedText).toHaveText("Connected!");
|
||||
|
||||
const userText = page.locator(".connected-user");
|
||||
await expect(userText).toContainText("testuser");
|
||||
|
||||
const serverIcon = page.locator(".connected-srv-icon");
|
||||
await expect(serverIcon).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("overlay shows loader area during connection", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await submitLogin(page);
|
||||
|
||||
// The loader area is always present in the overlay; spinner may be hidden
|
||||
// after ready fires (mock ready arrives at ~200ms), so just verify the
|
||||
// loader element is part of the overlay DOM.
|
||||
const loader = page.locator(".connected-loader");
|
||||
await expect(loader).toBeAttached({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("overlay transitions to main page after ready", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
const app = page.locator("[data-testid='app-layout']");
|
||||
await expect(app).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* E2E tests for emoji picker insertion into the message textarea.
|
||||
* Covers: clicking emoji inserts it, picker closes after selection.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { mockTauriFullSession, navigateToMainPage } from "./helpers";
|
||||
|
||||
test.describe("Emoji Picker — Insert into textarea", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("clicking an emoji inserts it into the textarea", async ({ page }) => {
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
const initialValue = await textarea.inputValue();
|
||||
|
||||
// Open emoji picker
|
||||
await page.locator(".emoji-btn").click();
|
||||
const picker = page.locator(".emoji-picker.open");
|
||||
await expect(picker).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Click the first emoji
|
||||
const firstEmoji = picker.locator(".ep-emoji").first();
|
||||
const emojiText = await firstEmoji.textContent();
|
||||
await firstEmoji.click();
|
||||
|
||||
// Textarea should now contain the emoji
|
||||
const newValue = await textarea.inputValue();
|
||||
expect(newValue.length).toBeGreaterThan(initialValue.length);
|
||||
if (emojiText) {
|
||||
expect(newValue).toContain(emojiText);
|
||||
}
|
||||
});
|
||||
|
||||
test("emoji picker closes after selecting an emoji", async ({ page }) => {
|
||||
await page.locator(".emoji-btn").click();
|
||||
const picker = page.locator(".emoji-picker.open");
|
||||
await expect(picker).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Click an emoji
|
||||
await picker.locator(".ep-emoji").first().click();
|
||||
|
||||
// Picker should close
|
||||
await expect(picker).not.toBeVisible({ timeout: 3000 });
|
||||
});
|
||||
|
||||
test("multiple emojis can be selected by reopening picker", async ({ page }) => {
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
|
||||
// First emoji
|
||||
await page.locator(".emoji-btn").click();
|
||||
await page.locator(".emoji-picker.open .ep-emoji").first().click();
|
||||
const afterFirst = await textarea.inputValue();
|
||||
expect(afterFirst.length).toBeGreaterThan(0);
|
||||
|
||||
// Second emoji
|
||||
await page.locator(".emoji-btn").click();
|
||||
const picker = page.locator(".emoji-picker.open");
|
||||
await expect(picker).toBeVisible({ timeout: 3000 });
|
||||
await picker.locator(".ep-emoji").nth(1).click();
|
||||
|
||||
const afterSecond = await textarea.inputValue();
|
||||
expect(afterSecond.length).toBeGreaterThan(afterFirst.length);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,32 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { buildTauriMockScript } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Health Status Indicator
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Health Status Indicator", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
],
|
||||
simulateWsFlow: false,
|
||||
}));
|
||||
await page.goto("/");
|
||||
});
|
||||
|
||||
test("status dot element exists on page load", async ({ page }) => {
|
||||
const statusDot = page.locator(".srv-status-dot").first();
|
||||
await expect(statusDot).toBeAttached();
|
||||
});
|
||||
|
||||
test("status dot gets a non-unknown class after health check resolves", async ({ page }) => {
|
||||
const statusDot = page.locator(".srv-status-dot").first();
|
||||
|
||||
// Wait for the health check to resolve and update the dot class
|
||||
// The dot starts as "srv-status-dot unknown", then transitions to
|
||||
// "srv-status-dot checking", and finally to "srv-status-dot online" (or "slow")
|
||||
await expect(statusDot).not.toHaveClass(/\bunknown\b/, { timeout: 10_000 });
|
||||
});
|
||||
});
|
||||
@@ -27,8 +27,8 @@ export const MOCK_LOGIN_2FA_RESPONSE = {
|
||||
};
|
||||
|
||||
export const MOCK_CHANNELS = [
|
||||
{ id: 1, name: "general", type: "text", position: 0, topic: "General chat" },
|
||||
{ id: 2, name: "random", type: "text", position: 1, topic: "Off-topic" },
|
||||
{ id: 1, name: "general", type: "text", position: 0, category: null },
|
||||
{ id: 2, name: "random", type: "text", position: 1, category: null },
|
||||
];
|
||||
|
||||
export const MOCK_MESSAGES = {
|
||||
@@ -50,25 +50,29 @@ export const MOCK_MESSAGES = {
|
||||
has_more: false,
|
||||
};
|
||||
|
||||
export const MOCK_ROLES = [
|
||||
{ id: 1, name: "admin", color: "#ff0000", permissions: 0x40000000 },
|
||||
{ id: 2, name: "moderator", color: "#00aaff", permissions: 0x1000000 },
|
||||
{ id: 3, name: "member", color: null, permissions: 0x3 },
|
||||
];
|
||||
|
||||
export const MOCK_READY_PAYLOAD = {
|
||||
type: "ready",
|
||||
payload: {
|
||||
user: { id: 1, username: "testuser", avatar: "", status: "online" },
|
||||
server_name: "Test Server",
|
||||
motd: "Welcome to the test server",
|
||||
channels: MOCK_CHANNELS,
|
||||
members: [
|
||||
{ id: 1, username: "testuser", avatar: "", status: "online", role: "admin" },
|
||||
{ id: 2, username: "otheruser", avatar: "", status: "online", role: "member" },
|
||||
],
|
||||
voice_states: [],
|
||||
roles: MOCK_ROLES,
|
||||
},
|
||||
};
|
||||
|
||||
export const MOCK_AUTH_OK = {
|
||||
type: "auth_ok",
|
||||
payload: {
|
||||
user: { id: 1, username: "testuser", avatar: "", status: "online" },
|
||||
user: { id: 1, username: "testuser", avatar: "", role: "admin" },
|
||||
server_name: "Test Server",
|
||||
motd: "Welcome to the test server",
|
||||
},
|
||||
@@ -79,11 +83,11 @@ export const MOCK_AUTH_OK = {
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export const MOCK_CHANNELS_WITH_CATEGORIES = [
|
||||
{ id: 1, name: "general", type: "text", position: 0, topic: "General chat", category: "Text Channels" },
|
||||
{ id: 2, name: "random", type: "text", position: 1, topic: "Off-topic", category: "Text Channels" },
|
||||
{ id: 3, name: "announcements", type: "text", position: 2, topic: "Important updates", category: "Information" },
|
||||
{ id: 10, name: "Voice Chat", type: "voice", position: 3, topic: "", category: "Voice Channels" },
|
||||
{ id: 11, name: "Music", type: "voice", position: 4, topic: "", category: "Voice Channels" },
|
||||
{ id: 1, name: "general", type: "text", position: 0, category: "Text Channels" },
|
||||
{ id: 2, name: "random", type: "text", position: 1, category: "Text Channels" },
|
||||
{ id: 3, name: "announcements", type: "text", position: 2, category: "Information" },
|
||||
{ id: 10, name: "Voice Chat", type: "voice", position: 3, category: "Voice Channels" },
|
||||
{ id: 11, name: "Music", type: "voice", position: 4, category: "Voice Channels" },
|
||||
];
|
||||
|
||||
export const MOCK_MEMBERS_MULTI_ROLE = [
|
||||
@@ -187,30 +191,40 @@ export const MOCK_VOICE_STATE = [
|
||||
{ user_id: 2, channel_id: 10, muted: true, deafened: false },
|
||||
];
|
||||
|
||||
export const MOCK_PINNED_MESSAGES = [
|
||||
{
|
||||
id: 101,
|
||||
channel_id: 1,
|
||||
user: { id: 1, username: "testuser", avatar: "" },
|
||||
content: "Hello world!",
|
||||
created_at: "2026-03-15T10:00:00Z",
|
||||
pinned: true,
|
||||
},
|
||||
];
|
||||
export const MOCK_PINNED_MESSAGES = {
|
||||
messages: [
|
||||
{
|
||||
id: 101,
|
||||
channel_id: 1,
|
||||
user: { id: 1, username: "testuser", avatar: "" },
|
||||
content: "Hello world!",
|
||||
timestamp: "2026-03-15T10:00:00Z",
|
||||
pinned: true,
|
||||
edited_at: null,
|
||||
deleted: false,
|
||||
reply_to: null,
|
||||
attachments: [],
|
||||
reactions: [],
|
||||
},
|
||||
],
|
||||
has_more: false,
|
||||
};
|
||||
|
||||
export const MOCK_INVITES = [
|
||||
{
|
||||
id: 1,
|
||||
code: "abc123",
|
||||
uses: 3,
|
||||
url: "https://localhost:8443/invite/abc123",
|
||||
use_count: 3,
|
||||
max_uses: 10,
|
||||
created_by: { id: 1, username: "testuser" },
|
||||
expires_at: "2026-04-15T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
code: "xyz789",
|
||||
uses: 0,
|
||||
url: "https://localhost:8443/invite/xyz789",
|
||||
use_count: 0,
|
||||
max_uses: 1,
|
||||
created_by: { id: 2, username: "otheruser" },
|
||||
expires_at: null,
|
||||
},
|
||||
];
|
||||
@@ -223,16 +237,15 @@ function buildReadyPayload(overrides?: {
|
||||
channels?: unknown[];
|
||||
members?: unknown[];
|
||||
voice_states?: unknown[];
|
||||
roles?: unknown[];
|
||||
}): unknown {
|
||||
return {
|
||||
type: "ready",
|
||||
payload: {
|
||||
user: { id: 1, username: "testuser", avatar: "", status: "online" },
|
||||
server_name: "Test Server",
|
||||
motd: "Welcome to the test server",
|
||||
channels: overrides?.channels ?? MOCK_CHANNELS,
|
||||
members: overrides?.members ?? MOCK_READY_PAYLOAD.payload.members,
|
||||
voice_states: overrides?.voice_states ?? [],
|
||||
roles: overrides?.roles ?? MOCK_ROLES,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -241,9 +254,10 @@ function buildReadyPayload(overrides?: {
|
||||
// Tauri mock script builder
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function buildTauriMockScript(opts: {
|
||||
export function buildTauriMockScript(opts: {
|
||||
httpRoutes: Array<{ pattern: string; status: number; body: unknown }>;
|
||||
simulateWsFlow: boolean;
|
||||
echoChatSend?: boolean;
|
||||
readyOverrides?: {
|
||||
channels?: unknown[];
|
||||
members?: unknown[];
|
||||
@@ -407,6 +421,56 @@ function buildTauriMockScript(opts: {
|
||||
__tauriEmitEvent("ws-message", JSON.stringify(${JSON.stringify(readyPayload)}));
|
||||
}, 200);
|
||||
}
|
||||
${opts.echoChatSend ? `
|
||||
if (parsed.type === "chat_send") {
|
||||
const p = parsed.payload;
|
||||
const echo = {
|
||||
type: "chat_message",
|
||||
payload: {
|
||||
id: Date.now(),
|
||||
channel_id: p.channel_id,
|
||||
user: { id: 1, username: "testuser", avatar: "" },
|
||||
content: p.content,
|
||||
timestamp: new Date().toISOString(),
|
||||
edited_at: null,
|
||||
attachments: p.attachments || [],
|
||||
reactions: [],
|
||||
reply_to: p.reply_to || null,
|
||||
pinned: false,
|
||||
deleted: false,
|
||||
},
|
||||
};
|
||||
setTimeout(() => {
|
||||
__tauriEmitEvent("ws-message", JSON.stringify(echo));
|
||||
}, 50);
|
||||
}
|
||||
if (parsed.type === "chat_edit") {
|
||||
const echo = {
|
||||
type: "chat_edited",
|
||||
payload: {
|
||||
message_id: parsed.payload.message_id,
|
||||
channel_id: parsed.payload.channel_id || 1,
|
||||
content: parsed.payload.content,
|
||||
edited_at: new Date().toISOString(),
|
||||
},
|
||||
};
|
||||
setTimeout(() => {
|
||||
__tauriEmitEvent("ws-message", JSON.stringify(echo));
|
||||
}, 50);
|
||||
}
|
||||
if (parsed.type === "chat_delete") {
|
||||
const echo = {
|
||||
type: "chat_deleted",
|
||||
payload: {
|
||||
message_id: parsed.payload.message_id,
|
||||
channel_id: parsed.payload.channel_id || 1,
|
||||
},
|
||||
};
|
||||
setTimeout(() => {
|
||||
__tauriEmitEvent("ws-message", JSON.stringify(echo));
|
||||
}, 50);
|
||||
}
|
||||
` : ""}
|
||||
} catch (e) {}
|
||||
` : ""}
|
||||
return;
|
||||
@@ -464,6 +528,7 @@ export async function mockTauriFullSession(page: Page): Promise<void> {
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
{ pattern: "/api/v1/auth/login", status: 200, body: MOCK_LOGIN_RESPONSE },
|
||||
{ pattern: "/messages", status: 200, body: MOCK_MESSAGES },
|
||||
{ pattern: "/pins", status: 200, body: MOCK_PINNED_MESSAGES },
|
||||
],
|
||||
simulateWsFlow: true,
|
||||
}));
|
||||
@@ -502,6 +567,47 @@ export async function mockTauriFullSessionWithVoice(page: Page): Promise<void> {
|
||||
}));
|
||||
}
|
||||
|
||||
export async function mockTauriFullSessionWithEcho(page: Page): Promise<void> {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
{ pattern: "/api/v1/auth/login", status: 200, body: MOCK_LOGIN_RESPONSE },
|
||||
{ pattern: "/messages", status: 200, body: MOCK_MESSAGES },
|
||||
],
|
||||
simulateWsFlow: true,
|
||||
echoChatSend: true,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function mockTauriFullSessionWithMessagesAndEcho(page: Page): Promise<void> {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
{ pattern: "/api/v1/auth/login", status: 200, body: MOCK_LOGIN_RESPONSE },
|
||||
{ pattern: "/messages", status: 200, body: MOCK_MESSAGES_RICH },
|
||||
{ pattern: "/pins", status: 200, body: MOCK_PINNED_MESSAGES },
|
||||
{ pattern: "/api/v1/invites", status: 200, body: MOCK_INVITES },
|
||||
],
|
||||
simulateWsFlow: true,
|
||||
echoChatSend: true,
|
||||
readyOverrides: {
|
||||
channels: MOCK_CHANNELS_WITH_CATEGORIES,
|
||||
members: MOCK_MEMBERS_MULTI_ROLE,
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
export async function mockTauriFullSessionWithFailingMessages(page: Page): Promise<void> {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
{ pattern: "/api/v1/auth/login", status: 200, body: MOCK_LOGIN_RESPONSE },
|
||||
{ pattern: "/messages", status: 500, body: { error: "INTERNAL_ERROR", message: "Failed to load messages" } },
|
||||
],
|
||||
simulateWsFlow: true,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function mockTauriLoginError(page: Page): Promise<void> {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
@@ -528,10 +634,30 @@ export async function submitLogin(page: Page): Promise<void> {
|
||||
*/
|
||||
export async function navigateToMainPage(page: Page): Promise<void> {
|
||||
await submitLogin(page);
|
||||
const appLayout = page.locator(".app");
|
||||
const appLayout = page.locator("[data-testid='app-layout']");
|
||||
await expect(appLayout).toBeVisible({ timeout: 15_000 });
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the settings overlay via the user bar gear button.
|
||||
*/
|
||||
export async function openSettings(page: Page): Promise<void> {
|
||||
const settingsBtn = page.locator("button[aria-label='Settings']");
|
||||
await settingsBtn.click();
|
||||
|
||||
const overlay = page.locator("[data-testid='settings-overlay']");
|
||||
await expect(overlay).toHaveClass(/open/, { timeout: 5_000 });
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch to a settings tab by name.
|
||||
*/
|
||||
export async function switchSettingsTab(page: Page, tabName: string): Promise<void> {
|
||||
const tab = page.locator(".settings-sidebar button.settings-nav-item", { hasText: tabName });
|
||||
await tab.click();
|
||||
await expect(tab).toHaveClass(/active/);
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit a WebSocket event from the mock server to the client.
|
||||
* Must be called after the page has loaded and WS listeners are registered.
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* E2E tests for the logout flow.
|
||||
* Covers: settings → Log Out → returns to connect page.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { mockTauriFullSession, navigateToMainPage } from "./helpers";
|
||||
|
||||
test.describe("Logout Flow", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("clicking Log Out in settings returns to connect page", async ({
|
||||
page,
|
||||
}) => {
|
||||
// Open settings
|
||||
const settingsBtn = page.locator("button[aria-label='Settings']");
|
||||
await settingsBtn.click();
|
||||
await expect(
|
||||
page.locator(".settings-overlay.open"),
|
||||
).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Click Log Out button
|
||||
const logoutBtn = page.locator(".settings-nav-item.danger", {
|
||||
hasText: "Log Out",
|
||||
});
|
||||
await logoutBtn.click();
|
||||
|
||||
// Should navigate back to connect page
|
||||
const connectForm = page.locator(".connect-form, .login-form");
|
||||
await expect(connectForm).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("after logout, main page is no longer visible", async ({ page }) => {
|
||||
// Open settings and log out
|
||||
const settingsBtn = page.locator("button[aria-label='Settings']");
|
||||
await settingsBtn.click();
|
||||
await expect(
|
||||
page.locator(".settings-overlay.open"),
|
||||
).toBeVisible({ timeout: 3000 });
|
||||
|
||||
const logoutBtn = page.locator(".settings-nav-item.danger", {
|
||||
hasText: "Log Out",
|
||||
});
|
||||
await logoutBtn.click();
|
||||
|
||||
// Main app layout should not be visible
|
||||
await expect(page.locator(".app")).not.toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
});
|
||||
@@ -14,41 +14,52 @@ test.describe("Main Page Layout", () => {
|
||||
|
||||
test("app layout has all major sections", async ({ page }) => {
|
||||
// Server strip
|
||||
await expect(page.locator(".server-strip")).toBeVisible();
|
||||
await expect(page.locator("[data-testid='server-strip']")).toBeVisible();
|
||||
|
||||
// Channel sidebar
|
||||
await expect(page.locator(".channel-sidebar")).toBeVisible();
|
||||
await expect(page.locator("[data-testid='channel-sidebar']")).toBeVisible();
|
||||
|
||||
// Chat area
|
||||
await expect(page.locator(".chat-area")).toBeVisible();
|
||||
await expect(page.locator("[data-testid='chat-area']")).toBeVisible();
|
||||
|
||||
// Chat header
|
||||
await expect(page.locator(".chat-header")).toBeVisible();
|
||||
// Chat header with channel name "general"
|
||||
const chatHeader = page.locator("[data-testid='chat-header']");
|
||||
await expect(chatHeader).toBeVisible();
|
||||
const headerName = page.locator("[data-testid='chat-header-name']");
|
||||
await expect(headerName).toHaveText("general");
|
||||
|
||||
// Messages container
|
||||
await expect(page.locator(".messages-container")).toBeVisible();
|
||||
|
||||
// User bar
|
||||
await expect(page.locator(".user-bar")).toBeVisible();
|
||||
await expect(page.locator("[data-testid='user-bar']")).toBeVisible();
|
||||
});
|
||||
|
||||
test("input slot is attached to DOM", async ({ page }) => {
|
||||
const inputSlot = page.locator(".input-slot");
|
||||
const inputSlot = page.locator("[data-testid='input-slot']");
|
||||
await expect(inputSlot).toBeAttached();
|
||||
});
|
||||
|
||||
test("typing slot is attached to DOM", async ({ page }) => {
|
||||
const typingSlot = page.locator(".typing-slot");
|
||||
const typingSlot = page.locator("[data-testid='typing-slot']");
|
||||
await expect(typingSlot).toBeAttached();
|
||||
});
|
||||
|
||||
test("messages slot is visible", async ({ page }) => {
|
||||
const messagesSlot = page.locator(".messages-slot");
|
||||
test("messages slot contains virtual scroll structure", async ({ page }) => {
|
||||
const messagesSlot = page.locator("[data-testid='messages-slot']");
|
||||
await expect(messagesSlot).toBeVisible();
|
||||
|
||||
// Messages slot should contain the messages-container for virtual scrolling
|
||||
const container = messagesSlot.locator(".messages-container");
|
||||
await expect(container).toBeVisible();
|
||||
});
|
||||
|
||||
test("member list is visible", async ({ page }) => {
|
||||
const memberList = page.locator(".member-list");
|
||||
test("member list is visible with role groups", async ({ page }) => {
|
||||
const memberList = page.locator("[data-testid='member-list']");
|
||||
await expect(memberList).toBeVisible();
|
||||
|
||||
// Should have at least one role group
|
||||
const roleGroups = memberList.locator(".member-role-group");
|
||||
expect(await roleGroups.count()).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { mockTauriFullSession, mockTauriFullSessionWithMessages, navigateToMainPage } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Member List
|
||||
// ---------------------------------------------------------------------------
|
||||
import {
|
||||
mockTauriFullSession,
|
||||
mockTauriFullSessionWithMessages,
|
||||
navigateToMainPage,
|
||||
emitWsMessage,
|
||||
} from "./helpers";
|
||||
|
||||
test.describe("Member List", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
@@ -12,62 +13,116 @@ test.describe("Member List", () => {
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("member list is visible", async ({ page }) => {
|
||||
const memberList = page.locator(".member-list");
|
||||
test("renders members with role groups, avatars, names, and status", async ({ page }) => {
|
||||
const memberList = page.locator("[data-testid='member-list']");
|
||||
await expect(memberList).toBeVisible();
|
||||
});
|
||||
|
||||
test("member list shows role groups", async ({ page }) => {
|
||||
// Should have at least one role group header
|
||||
const roleGroups = page.locator(".member-role-group");
|
||||
const count = await roleGroups.count();
|
||||
expect(count).toBeGreaterThanOrEqual(1);
|
||||
expect(await roleGroups.count()).toBeGreaterThanOrEqual(1);
|
||||
|
||||
// First member should have all required elements
|
||||
const firstMember = page.locator("[data-testid='member-1']");
|
||||
await expect(firstMember).toBeVisible();
|
||||
await expect(firstMember.locator(".mi-avatar")).toBeVisible();
|
||||
await expect(firstMember.locator(".mi-name")).toBeVisible();
|
||||
await expect(firstMember.locator(".mi-status")).toBeAttached();
|
||||
});
|
||||
|
||||
test("member items display usernames", async ({ page }) => {
|
||||
const memberItem = page.locator(".member-item").first();
|
||||
await expect(memberItem).toBeVisible();
|
||||
test("new member appears when member_join event is received", async ({ page }) => {
|
||||
const membersBefore = await page.locator(".member-item").count();
|
||||
|
||||
const name = memberItem.locator(".mi-name");
|
||||
await expect(name).toBeVisible();
|
||||
await emitWsMessage(page, {
|
||||
type: "member_join",
|
||||
payload: {
|
||||
user: {
|
||||
id: 99,
|
||||
username: "newjoiner",
|
||||
avatar: "",
|
||||
role: "member",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Wait for the new member to appear
|
||||
const newMember = page.locator(".mi-name", { hasText: "newjoiner" });
|
||||
await expect(newMember).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const membersAfter = await page.locator(".member-item").count();
|
||||
expect(membersAfter).toBe(membersBefore + 1);
|
||||
});
|
||||
|
||||
test("member items show avatars", async ({ page }) => {
|
||||
const memberItem = page.locator(".member-item").first();
|
||||
const avatar = memberItem.locator(".mi-avatar");
|
||||
await expect(avatar).toBeVisible();
|
||||
test("member disappears when member_ban event is received", async ({ page }) => {
|
||||
// Verify otheruser exists first
|
||||
const otherUser = page.locator(".mi-name", { hasText: "otheruser" });
|
||||
await expect(otherUser).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const membersBefore = await page.locator(".member-item").count();
|
||||
|
||||
await emitWsMessage(page, {
|
||||
type: "member_ban",
|
||||
payload: { user_id: 2 },
|
||||
});
|
||||
|
||||
// otheruser should disappear
|
||||
await expect(otherUser).not.toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const membersAfter = await page.locator(".member-item").count();
|
||||
expect(membersAfter).toBe(membersBefore - 1);
|
||||
});
|
||||
|
||||
test("member items show status indicators", async ({ page }) => {
|
||||
const memberItem = page.locator(".member-item").first();
|
||||
const status = memberItem.locator(".mi-status");
|
||||
await expect(status).toBeAttached();
|
||||
test("member status updates when presence event is received", async ({ page }) => {
|
||||
// otheruser starts as "online"
|
||||
const otherUserItem = page.locator(".member-item").filter({
|
||||
has: page.locator(".mi-name", { hasText: "otheruser" }),
|
||||
});
|
||||
await expect(otherUserItem).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// Should NOT have offline class initially
|
||||
await expect(otherUserItem).not.toHaveClass(/offline/);
|
||||
|
||||
// Send presence update to offline
|
||||
await emitWsMessage(page, {
|
||||
type: "presence",
|
||||
payload: { user_id: 2, status: "offline" },
|
||||
});
|
||||
|
||||
// Should now have offline class
|
||||
await expect(otherUserItem).toHaveClass(/offline/, { timeout: 5_000 });
|
||||
});
|
||||
|
||||
test("toggle visibility via header button", async ({ page }) => {
|
||||
const memberList = page.locator("[data-testid='member-list']");
|
||||
await expect(memberList).toBeVisible();
|
||||
|
||||
const toggle = page.locator("[data-testid='members-toggle']");
|
||||
await toggle.click();
|
||||
await expect(memberList).not.toBeVisible({ timeout: 3_000 });
|
||||
|
||||
await toggle.click();
|
||||
await expect(memberList).toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Member List — Multi-role", () => {
|
||||
test("shows members from multiple roles", async ({ page }) => {
|
||||
test("shows members grouped by role with correct counts", async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessages(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
const memberList = page.locator(".member-list");
|
||||
const memberList = page.locator("[data-testid='member-list']");
|
||||
await expect(memberList).toBeVisible();
|
||||
|
||||
// Multi-role mock has 5 members across different roles
|
||||
const members = page.locator(".member-item");
|
||||
const count = await members.count();
|
||||
expect(count).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
expect(await members.count()).toBeGreaterThanOrEqual(3);
|
||||
|
||||
test("offline members have offline class", async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessages(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
// Wait for member list to populate
|
||||
await page.waitForTimeout(500);
|
||||
// Multiple role groups should be present
|
||||
const roleGroups = page.locator(".member-role-group");
|
||||
expect(await roleGroups.count()).toBeGreaterThanOrEqual(2);
|
||||
|
||||
// Offline members should have the offline class
|
||||
const offlineMembers = page.locator(".member-item.offline");
|
||||
const count = await offlineMembers.count();
|
||||
expect(count).toBeGreaterThanOrEqual(1);
|
||||
await expect(offlineMembers.first()).toBeAttached({ timeout: 5000 });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* E2E tests for message action buttons (hover actions bar).
|
||||
* Tests: reply, edit, delete buttons on message hover.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
mockTauriFullSessionWithMessagesAndEcho,
|
||||
navigateToMainPage,
|
||||
} from "./helpers";
|
||||
|
||||
test.describe("Message Actions Bar", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessagesAndEcho(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("hovering a message shows actions bar", async ({ page }) => {
|
||||
const firstMessage = page.locator("[data-testid='message-101']");
|
||||
await firstMessage.hover();
|
||||
|
||||
const actionsBar = firstMessage.locator(".msg-actions-bar");
|
||||
await expect(actionsBar).toBeAttached();
|
||||
});
|
||||
|
||||
test("own message has Reply button", async ({ page }) => {
|
||||
// Message id 101 is from testuser (id: 1) = own message
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
|
||||
const replyBtn = page.locator("[data-testid='msg-reply-101']");
|
||||
await expect(replyBtn).toBeAttached();
|
||||
});
|
||||
|
||||
test("own message has Edit button", async ({ page }) => {
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
|
||||
const editBtn = page.locator("[data-testid='msg-edit-101']");
|
||||
await expect(editBtn).toBeAttached();
|
||||
});
|
||||
|
||||
test("own message has Delete button", async ({ page }) => {
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
|
||||
const deleteBtn = page.locator("[data-testid='msg-delete-101']");
|
||||
await expect(deleteBtn).toBeAttached();
|
||||
});
|
||||
|
||||
test("other user message does NOT have Edit button", async ({ page }) => {
|
||||
// Message id 102 is from otheruser (id: 2)
|
||||
const otherMessage = page.locator("[data-testid='message-102']");
|
||||
await otherMessage.hover();
|
||||
|
||||
const editBtn = page.locator("[data-testid='msg-edit-102']");
|
||||
await expect(editBtn).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("clicking Reply opens reply bar in input", async ({ page }) => {
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
|
||||
const replyBtn = page.locator("[data-testid='msg-reply-101']");
|
||||
await replyBtn.click();
|
||||
|
||||
// Reply bar should appear in the message input area
|
||||
const replyBar = page.locator(".reply-bar.visible");
|
||||
await expect(replyBar).toBeVisible({ timeout: 3000 });
|
||||
});
|
||||
|
||||
test("clicking Edit populates textarea with message content", async ({
|
||||
page,
|
||||
}) => {
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
|
||||
const editBtn = page.locator("[data-testid='msg-edit-101']");
|
||||
await editBtn.click();
|
||||
|
||||
// Textarea should contain the original message content
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await expect(textarea).toHaveValue("Hello world!");
|
||||
});
|
||||
|
||||
test("React button exists on messages", async ({ page }) => {
|
||||
const firstMessage = page.locator("[data-testid='message-101']");
|
||||
await firstMessage.hover();
|
||||
|
||||
const reactBtn = page.locator("[data-testid='msg-react-101']");
|
||||
await expect(reactBtn).toBeAttached();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Message Reactions", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessagesAndEcho(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("reaction chips are visible on messages with reactions", async ({
|
||||
page,
|
||||
}) => {
|
||||
const reactions = page.locator(".msg-reactions");
|
||||
await expect(reactions.first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("reaction chip shows emoji and count", async ({ page }) => {
|
||||
const chip = page.locator(".reaction-chip").first();
|
||||
await expect(chip).toBeVisible();
|
||||
|
||||
const count = chip.locator(".rc-count");
|
||||
await expect(count).toHaveText("2");
|
||||
});
|
||||
|
||||
test("user own reaction has me class", async ({ page }) => {
|
||||
const meChip = page.locator(".reaction-chip.me");
|
||||
await expect(meChip.first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("add reaction button exists", async ({ page }) => {
|
||||
const addBtn = page.locator(".reaction-chip.add-reaction");
|
||||
await expect(addBtn.first()).toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* E2E tests for message edit and delete flows.
|
||||
* Covers: edit → save, edit → cancel, delete.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
mockTauriFullSessionWithMessagesAndEcho,
|
||||
navigateToMainPage,
|
||||
} from "./helpers";
|
||||
|
||||
test.describe("Message Edit Flow", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessagesAndEcho(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("clicking Edit puts message content in textarea", async ({ page }) => {
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
await page.locator("[data-testid='msg-edit-101']").click();
|
||||
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await expect(textarea).toHaveValue("Hello world!");
|
||||
});
|
||||
|
||||
test("edit mode shows save and cancel controls", async ({ page }) => {
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
await page.locator("[data-testid='msg-edit-101']").click();
|
||||
|
||||
// Edit bar reuses .reply-bar class and becomes .visible
|
||||
const editBar = page.locator(".reply-bar.visible");
|
||||
await expect(editBar).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Cancel button uses .reply-close class
|
||||
const cancelBtn = editBar.locator(".reply-close");
|
||||
await expect(cancelBtn).toBeVisible();
|
||||
});
|
||||
|
||||
test("saving edit updates the message content", async ({ page }) => {
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
await page.locator("[data-testid='msg-edit-101']").click();
|
||||
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await textarea.fill("Edited message content");
|
||||
await textarea.press("Enter");
|
||||
|
||||
// The edited message should show "(edited)" indicator
|
||||
// (may take a moment for WS echo to process)
|
||||
const editedMessage = page.locator(".message", {
|
||||
has: page.locator(".msg-text", { hasText: "Edited message content" }),
|
||||
});
|
||||
await expect(editedMessage.locator(".msg-edited")).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("cancelling edit clears the edit bar", async ({ page }) => {
|
||||
// Click Edit on own message
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
await page.locator("[data-testid='msg-edit-101']").click();
|
||||
|
||||
// Verify edit bar (.reply-bar.visible) appears
|
||||
const editBar = page.locator(".reply-bar.visible");
|
||||
await expect(editBar).toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Click cancel (.reply-close on the visible edit bar)
|
||||
const cancelBtn = editBar.locator(".reply-close");
|
||||
await cancelBtn.click();
|
||||
|
||||
// Verify edit bar is no longer visible
|
||||
await expect(editBar).not.toBeVisible({ timeout: 3000 });
|
||||
|
||||
// Verify textarea is empty
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await expect(textarea).toHaveValue("");
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Message Delete Flow", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessagesAndEcho(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("clicking Delete marks the message as deleted", async ({ page }) => {
|
||||
const ownMessage = page.locator("[data-testid='message-101']");
|
||||
await ownMessage.hover();
|
||||
await page.locator("[data-testid='msg-delete-101']").click();
|
||||
|
||||
// Soft-delete: message stays in DOM but shows "[message deleted]"
|
||||
await expect(
|
||||
ownMessage.locator(".msg-text", { hasText: "[message deleted]" }),
|
||||
).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
});
|
||||
@@ -13,27 +13,28 @@ test.describe("Message Input", () => {
|
||||
});
|
||||
|
||||
test("message input area is visible", async ({ page }) => {
|
||||
const inputWrap = page.locator(".message-input-wrap");
|
||||
const inputWrap = page.locator("[data-testid='message-input']");
|
||||
await expect(inputWrap).toBeAttached();
|
||||
});
|
||||
|
||||
test("textarea is present and focusable", async ({ page }) => {
|
||||
const textarea = page.locator(".msg-textarea");
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await expect(textarea).toBeAttached();
|
||||
|
||||
await textarea.focus();
|
||||
await expect(textarea).toBeFocused();
|
||||
});
|
||||
|
||||
test("textarea has placeholder with channel name", async ({ page }) => {
|
||||
const textarea = page.locator(".msg-textarea");
|
||||
test("textarea has placeholder containing channel name 'general'", async ({ page }) => {
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
const placeholder = await textarea.getAttribute("placeholder");
|
||||
expect(placeholder).toMatch(/Message #/);
|
||||
expect(placeholder).toBe("Message #general");
|
||||
});
|
||||
|
||||
test("send button exists", async ({ page }) => {
|
||||
const sendBtn = page.locator(".send-btn");
|
||||
test("send button exists with arrow icon", async ({ page }) => {
|
||||
const sendBtn = page.locator("[data-testid='send-btn']");
|
||||
await expect(sendBtn).toBeAttached();
|
||||
await expect(sendBtn).toHaveText("\u27A4");
|
||||
});
|
||||
|
||||
test("emoji button exists", async ({ page }) => {
|
||||
@@ -46,10 +47,14 @@ test.describe("Message Input", () => {
|
||||
await expect(attachBtn).toBeAttached();
|
||||
});
|
||||
|
||||
test("can type in the textarea", async ({ page }) => {
|
||||
const textarea = page.locator(".msg-textarea");
|
||||
test("typing in textarea updates its value", async ({ page }) => {
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await textarea.fill("Hello, this is a test message");
|
||||
await expect(textarea).toHaveValue("Hello, this is a test message");
|
||||
|
||||
// Verify clearing also works
|
||||
await textarea.fill("");
|
||||
await expect(textarea).toHaveValue("");
|
||||
});
|
||||
|
||||
test("reply bar is hidden by default", async ({ page }) => {
|
||||
|
||||
@@ -6,53 +6,26 @@ import {
|
||||
emitWsMessage,
|
||||
} from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Message List — basic
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Message List", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
test.describe("Message List — Structure", () => {
|
||||
test("renders messages with author, content, timestamp, and avatar", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("messages container is visible", async ({ page }) => {
|
||||
const container = page.locator(".messages-container");
|
||||
await expect(container).toBeVisible();
|
||||
});
|
||||
|
||||
test("displays messages after channel load", async ({ page }) => {
|
||||
const messages = page.locator(".message");
|
||||
await expect(messages.first()).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
const message = page.locator("[data-testid='message-101']");
|
||||
await expect(message).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
test("message shows author name", async ({ page }) => {
|
||||
const author = page.locator(".msg-author").first();
|
||||
await expect(author).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("message shows content text", async ({ page }) => {
|
||||
const text = page.locator(".msg-text").first();
|
||||
await expect(text).toBeVisible({ timeout: 10_000 });
|
||||
await expect(text).toHaveText("Hello world!");
|
||||
});
|
||||
|
||||
test("message shows timestamp", async ({ page }) => {
|
||||
const time = page.locator(".msg-time").first();
|
||||
await expect(time).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("message shows avatar", async ({ page }) => {
|
||||
const avatar = page.locator(".msg-avatar").first();
|
||||
await expect(avatar).toBeVisible({ timeout: 10_000 });
|
||||
// Verify all parts of a message render
|
||||
await expect(message.locator(".msg-author")).toBeVisible();
|
||||
await expect(message.locator(".msg-text")).toHaveText("Hello world!");
|
||||
await expect(message.locator(".msg-time")).toBeVisible();
|
||||
await expect(message.locator(".msg-avatar")).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Message List — rich content
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Message List — Rich Content", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessages(page);
|
||||
@@ -60,81 +33,58 @@ test.describe("Message List — Rich Content", () => {
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("displays multiple messages", async ({ page }) => {
|
||||
test("displays multiple messages with rich formatting", async ({ page }) => {
|
||||
const messages = page.locator(".message");
|
||||
await expect(messages.first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
const count = await messages.count();
|
||||
expect(count).toBeGreaterThanOrEqual(3);
|
||||
|
||||
// Edited messages show indicator
|
||||
await expect(page.locator(".msg-edited").first()).toBeVisible();
|
||||
|
||||
// Reply references show author
|
||||
const replyRef = page.locator(".msg-reply-ref").first();
|
||||
await expect(replyRef).toBeVisible();
|
||||
await expect(replyRef.locator(".rr-author")).toBeVisible();
|
||||
|
||||
// Code blocks render
|
||||
await expect(page.locator(".msg-codeblock").first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("shows edited indicator", async ({ page }) => {
|
||||
const edited = page.locator(".msg-edited");
|
||||
await expect(edited.first()).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("shows reply references", async ({ page }) => {
|
||||
const replyRef = page.locator(".msg-reply-ref");
|
||||
await expect(replyRef.first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
const replyAuthor = replyRef.first().locator(".rr-author");
|
||||
await expect(replyAuthor).toBeVisible();
|
||||
});
|
||||
|
||||
test("renders code blocks", async ({ page }) => {
|
||||
const codeBlock = page.locator(".msg-codeblock");
|
||||
await expect(codeBlock.first()).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("shows reactions on messages", async ({ page }) => {
|
||||
const reactions = page.locator(".msg-reactions");
|
||||
await expect(reactions.first()).toBeVisible({ timeout: 10_000 });
|
||||
test("reactions and attachments render correctly", async ({ page }) => {
|
||||
await expect(page.locator(".message").first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Reaction chips show emoji and count
|
||||
const chip = page.locator(".reaction-chip").first();
|
||||
await expect(chip).toBeVisible();
|
||||
await expect(chip).not.toBeEmpty();
|
||||
|
||||
// Image and file attachments
|
||||
await expect(page.locator(".msg-image").first()).toBeAttached();
|
||||
const file = page.locator(".msg-file").first();
|
||||
await expect(file).toBeAttached();
|
||||
await expect(file.locator(".msg-file-name")).toBeVisible();
|
||||
});
|
||||
|
||||
test("shows image attachments", async ({ page }) => {
|
||||
const image = page.locator(".msg-image");
|
||||
await expect(image.first()).toBeAttached({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("shows file attachments", async ({ page }) => {
|
||||
const file = page.locator(".msg-file");
|
||||
await expect(file.first()).toBeAttached({ timeout: 10_000 });
|
||||
|
||||
const filename = file.first().locator(".msg-file-name");
|
||||
await expect(filename).toBeVisible();
|
||||
});
|
||||
|
||||
test("grouped messages have grouped class", async ({ page }) => {
|
||||
await page.waitForTimeout(500);
|
||||
test("grouped messages share avatar and day dividers separate dates", async ({ page }) => {
|
||||
const grouped = page.locator(".message.grouped");
|
||||
const count = await grouped.count();
|
||||
// Messages from same author in quick succession should be grouped
|
||||
expect(count).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
await expect(grouped.first()).toBeAttached({ timeout: 5000 });
|
||||
expect(await grouped.count()).toBeGreaterThanOrEqual(1);
|
||||
|
||||
test("day dividers are shown", async ({ page }) => {
|
||||
const divider = page.locator(".msg-day-divider");
|
||||
await expect(divider.first()).toBeAttached({ timeout: 10_000 });
|
||||
await expect(divider.first()).toBeAttached();
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Message List — real-time
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Message List — Real-time", () => {
|
||||
test("new message appears via WebSocket", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
// Wait for initial messages to load
|
||||
await expect(page.locator(".message").first()).toBeVisible({ timeout: 10_000 });
|
||||
const countBefore = await page.locator(".message").count();
|
||||
|
||||
// Emit a new message via WebSocket
|
||||
await emitWsMessage(page, {
|
||||
type: "chat_message",
|
||||
payload: {
|
||||
@@ -148,8 +98,38 @@ test.describe("Message List — Real-time", () => {
|
||||
},
|
||||
});
|
||||
|
||||
// The new message should appear
|
||||
const newMsg = page.locator(".msg-text", { hasText: "A new real-time message!" });
|
||||
await expect(newMsg).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const countAfter = await page.locator(".message").count();
|
||||
expect(countAfter).toBe(countBefore + 1);
|
||||
});
|
||||
|
||||
test("multiple rapid messages all appear in order", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
await expect(page.locator(".message").first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
await emitWsMessage(page, {
|
||||
type: "chat_message",
|
||||
payload: {
|
||||
id: 300 + i,
|
||||
channel_id: 1,
|
||||
user: { id: 2, username: "otheruser", avatar: "" },
|
||||
content: `Rapid message ${i}`,
|
||||
timestamp: new Date().toISOString(),
|
||||
attachments: [],
|
||||
reply_to: null,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
await expect(
|
||||
page.locator(".msg-text", { hasText: `Rapid message ${i}` })
|
||||
).toBeVisible({ timeout: 5_000 });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* E2E tests for the message send round-trip flow.
|
||||
* Covers: type message → send → see it appear in message list.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
mockTauriFullSessionWithEcho,
|
||||
navigateToMainPage,
|
||||
} from "./helpers";
|
||||
|
||||
test.describe("Message Send Flow", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithEcho(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("typing and pressing Enter sends a message", async ({ page }) => {
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await textarea.fill("Hello from E2E test!");
|
||||
await textarea.press("Enter");
|
||||
|
||||
// Message should appear in the list via WS echo
|
||||
const newMsg = page.locator(".message .msg-text", {
|
||||
hasText: "Hello from E2E test!",
|
||||
});
|
||||
await expect(newMsg).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("send button click sends the message", async ({ page }) => {
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await textarea.fill("Sent via button click");
|
||||
|
||||
const sendBtn = page.locator("[data-testid='send-btn']");
|
||||
await sendBtn.click();
|
||||
|
||||
const newMsg = page.locator(".message .msg-text", {
|
||||
hasText: "Sent via button click",
|
||||
});
|
||||
await expect(newMsg).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("textarea clears after sending", async ({ page }) => {
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await textarea.fill("Clear after send");
|
||||
await textarea.press("Enter");
|
||||
|
||||
// Wait for the echo message to appear (confirms send happened)
|
||||
await expect(
|
||||
page.locator(".message .msg-text", { hasText: "Clear after send" }),
|
||||
).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// Textarea should be empty
|
||||
await expect(textarea).toHaveValue("");
|
||||
});
|
||||
|
||||
test("empty message is not sent", async ({ page }) => {
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
// Focus and press Enter without typing
|
||||
await textarea.focus();
|
||||
await textarea.press("Enter");
|
||||
|
||||
// Count messages — should still be 1 (the pre-loaded mock message)
|
||||
const messages = page.locator(".message");
|
||||
await expect(messages).toHaveCount(1);
|
||||
});
|
||||
|
||||
test("long message sends successfully", async ({ page }) => {
|
||||
const longContent = "A".repeat(500);
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await textarea.fill(longContent);
|
||||
await textarea.press("Enter");
|
||||
|
||||
const newMsg = page.locator(".message .msg-text", {
|
||||
hasText: longContent,
|
||||
});
|
||||
await expect(newMsg).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
});
|
||||
@@ -67,7 +67,10 @@ test.describe("Quick Switcher", () => {
|
||||
const initialCount = await page.locator(".quick-switcher__item").count();
|
||||
|
||||
await input.fill("general");
|
||||
await page.waitForTimeout(200);
|
||||
await expect.poll(
|
||||
async () => page.locator(".quick-switcher__item").count(),
|
||||
{ timeout: 2000 },
|
||||
).toBeGreaterThan(0);
|
||||
|
||||
const filteredCount = await page.locator(".quick-switcher__item").count();
|
||||
expect(filteredCount).toBeLessThanOrEqual(initialCount);
|
||||
@@ -84,24 +87,18 @@ test.describe("Quick Switcher", () => {
|
||||
|
||||
test("arrow keys navigate results", async ({ page }) => {
|
||||
await page.keyboard.press("Control+k");
|
||||
await expect(page.locator(".quick-switcher__item").first()).toBeVisible({ timeout: 3_000 });
|
||||
|
||||
const firstItem = page.locator(".quick-switcher__item").first();
|
||||
const firstIsActive = await firstItem.evaluate((el) =>
|
||||
el.classList.contains("quick-switcher__item--active"),
|
||||
);
|
||||
await expect(firstItem).toBeVisible({ timeout: 3_000 });
|
||||
|
||||
// First item should start as active
|
||||
await expect(firstItem).toHaveClass(/quick-switcher__item--active/);
|
||||
|
||||
await page.keyboard.press("ArrowDown");
|
||||
await page.waitForTimeout(100);
|
||||
|
||||
// Active state should have moved
|
||||
// After ArrowDown, second item should be active and first should not
|
||||
const secondItem = page.locator(".quick-switcher__item").nth(1);
|
||||
if (await secondItem.count() > 0) {
|
||||
const secondIsActive = await secondItem.evaluate((el) =>
|
||||
el.classList.contains("quick-switcher__item--active"),
|
||||
);
|
||||
expect(firstIsActive || secondIsActive).toBe(true);
|
||||
}
|
||||
await expect(secondItem).toHaveClass(/quick-switcher__item--active/);
|
||||
await expect(firstItem).not.toHaveClass(/quick-switcher__item--active/);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -165,7 +162,10 @@ test.describe("Emoji Picker", () => {
|
||||
|
||||
// Search for a specific emoji character that exists in the grid
|
||||
await search.fill("\uD83D\uDE00");
|
||||
await page.waitForTimeout(200);
|
||||
await expect.poll(
|
||||
async () => page.locator(".ep-emoji").count(),
|
||||
{ timeout: 2000 },
|
||||
).toBeGreaterThan(0);
|
||||
|
||||
const countAfter = await allEmojis.count();
|
||||
// After filtering, should have fewer results
|
||||
@@ -174,58 +174,116 @@ test.describe("Emoji Picker", () => {
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Pinned Messages
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Pinned Messages", () => {
|
||||
test("pinned panel can be opened from chat header", async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessages(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
// Look for a pin button in chat header tools area
|
||||
const pinBtn = page.locator(".ch-tools button", { hasText: /pin/i });
|
||||
if (await pinBtn.count() > 0) {
|
||||
await pinBtn.click();
|
||||
|
||||
const panel = page.locator(".pinned-panel");
|
||||
await expect(panel).toBeVisible({ timeout: 3_000 });
|
||||
}
|
||||
});
|
||||
|
||||
test("pinned panel has close button", async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessages(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
const pinBtn = page.locator(".ch-tools button", { hasText: /pin/i });
|
||||
if (await pinBtn.count() > 0) {
|
||||
await pinBtn.click();
|
||||
|
||||
const closeBtn = page.locator(".pinned-panel__close");
|
||||
await expect(closeBtn).toBeVisible({ timeout: 3_000 });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Invite Manager
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Invite Manager", () => {
|
||||
test("invite manager can be opened", async ({ page }) => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessages(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
// Invite manager is typically opened from channel sidebar header or server context
|
||||
const inviteBtn = page.locator("button", { hasText: /invite/i });
|
||||
if (await inviteBtn.count() > 0) {
|
||||
await inviteBtn.first().click();
|
||||
test("invite button opens invite manager overlay", async ({ page }) => {
|
||||
const inviteBtn = page.getByRole("button", { name: /invite/i });
|
||||
await expect(inviteBtn).toBeVisible({ timeout: 3_000 });
|
||||
await inviteBtn.click();
|
||||
|
||||
const overlay = page.locator(".invite-manager-overlay");
|
||||
await expect(overlay).toBeVisible({ timeout: 3_000 });
|
||||
}
|
||||
const overlay = page.locator(".invite-manager-overlay");
|
||||
await expect(overlay).toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
|
||||
test("invite manager shows invite list", async ({ page }) => {
|
||||
await page.getByRole("button", { name: /invite/i }).click();
|
||||
|
||||
const items = page.locator(".invite-item");
|
||||
await expect(items.first()).toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
|
||||
test("invite manager has create invite button", async ({ page }) => {
|
||||
await page.getByRole("button", { name: /invite/i }).click();
|
||||
|
||||
const createBtn = page.locator(".invite-manager__create");
|
||||
await expect(createBtn).toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
|
||||
test("Escape closes invite manager", async ({ page }) => {
|
||||
await page.getByRole("button", { name: /invite/i }).click();
|
||||
const overlay = page.locator(".invite-manager-overlay");
|
||||
await expect(overlay).toBeVisible({ timeout: 3_000 });
|
||||
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(overlay).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("clicking overlay backdrop closes invite manager", async ({ page }) => {
|
||||
await page.getByRole("button", { name: /invite/i }).click();
|
||||
const overlay = page.locator(".invite-manager-overlay");
|
||||
await expect(overlay).toBeVisible({ timeout: 3_000 });
|
||||
|
||||
// Click the backdrop (not the modal)
|
||||
await overlay.click({ position: { x: 10, y: 10 } });
|
||||
await expect(overlay).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("close button closes invite manager", async ({ page }) => {
|
||||
await page.getByRole("button", { name: /invite/i }).click();
|
||||
const overlay = page.locator(".invite-manager-overlay");
|
||||
await expect(overlay).toBeVisible({ timeout: 3_000 });
|
||||
|
||||
await page.locator(".invite-manager__close").click();
|
||||
await expect(overlay).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Pinned Messages
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Pinned Messages", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("pin button exists in chat header tools", async ({ page }) => {
|
||||
const pinBtn = page.locator("[data-testid='pin-btn']");
|
||||
await expect(pinBtn).toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
|
||||
test("clicking pin button opens pinned panel", async ({ page }) => {
|
||||
const pinBtn = page.locator("[data-testid='pin-btn']");
|
||||
await pinBtn.click();
|
||||
|
||||
const panel = page.locator(".pinned-panel");
|
||||
await expect(panel).toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
|
||||
test("pinned panel has close button", async ({ page }) => {
|
||||
await page.locator("[data-testid='pin-btn']").click();
|
||||
|
||||
const closeBtn = page.locator(".pinned-panel__close");
|
||||
await expect(closeBtn).toBeVisible({ timeout: 3_000 });
|
||||
});
|
||||
|
||||
test("close button closes pinned panel", async ({ page }) => {
|
||||
await page.locator("[data-testid='pin-btn']").click();
|
||||
const panel = page.locator(".pinned-panel");
|
||||
await expect(panel).toBeVisible({ timeout: 3_000 });
|
||||
|
||||
await page.locator(".pinned-panel__close").click();
|
||||
await expect(panel).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("clicking pin button again closes pinned panel", async ({ page }) => {
|
||||
const pinBtn = page.locator("[data-testid='pin-btn']");
|
||||
await pinBtn.click();
|
||||
const panel = page.locator(".pinned-panel");
|
||||
await expect(panel).toBeVisible({ timeout: 3_000 });
|
||||
|
||||
await pinBtn.click();
|
||||
await expect(panel).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* E2E tests for the registration flow.
|
||||
* Covers: mode toggle, form validation, register success, register error.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { buildTauriMockScript, MOCK_LOGIN_RESPONSE } from "./helpers";
|
||||
|
||||
const MOCK_REGISTER_RESPONSE = {
|
||||
user: { id: 99, username: "newuser" },
|
||||
token: "register-token-abc",
|
||||
};
|
||||
|
||||
async function mockRegisterSuccess(page: import("@playwright/test").Page): Promise<void> {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
{ pattern: "/api/v1/auth/register", status: 200, body: MOCK_REGISTER_RESPONSE },
|
||||
],
|
||||
simulateWsFlow: true,
|
||||
}));
|
||||
}
|
||||
|
||||
async function mockRegisterConflict(page: import("@playwright/test").Page): Promise<void> {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
{ pattern: "/api/v1/auth/register", status: 409, body: { error: "USERNAME_TAKEN", message: "Username already exists" } },
|
||||
],
|
||||
simulateWsFlow: false,
|
||||
}));
|
||||
}
|
||||
|
||||
async function switchToRegisterMode(page: import("@playwright/test").Page): Promise<void> {
|
||||
const toggleLink = page.locator(".form-switch a");
|
||||
await toggleLink.click();
|
||||
// Verify we're in register mode
|
||||
await expect(page.locator(".btn-text")).toHaveText("Register");
|
||||
}
|
||||
|
||||
test.describe("Register Flow — Mode Toggle", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockRegisterSuccess(page);
|
||||
await page.goto("/");
|
||||
});
|
||||
|
||||
test("clicking toggle switches to register mode", async ({ page }) => {
|
||||
await switchToRegisterMode(page);
|
||||
|
||||
// Invite code field should be visible
|
||||
const inviteGroup = page.locator("#invite").locator("..");
|
||||
await expect(inviteGroup).not.toHaveClass(/form-group--hidden/);
|
||||
});
|
||||
|
||||
test("register mode shows invite code field", async ({ page }) => {
|
||||
await switchToRegisterMode(page);
|
||||
|
||||
const inviteInput = page.locator("#invite");
|
||||
await expect(inviteInput).toBeVisible();
|
||||
});
|
||||
|
||||
test("toggle back to login hides invite code field", async ({ page }) => {
|
||||
await switchToRegisterMode(page);
|
||||
// Toggle back
|
||||
const toggleLink = page.locator(".form-switch a");
|
||||
await toggleLink.click();
|
||||
|
||||
await expect(page.locator(".btn-text")).toHaveText("Login");
|
||||
|
||||
// Invite field parent should be hidden
|
||||
const inviteGroup = page.locator("#invite").locator("..");
|
||||
await expect(inviteGroup).toHaveClass(/form-group--hidden/);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Register Flow — Validation", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockRegisterSuccess(page);
|
||||
await page.goto("/");
|
||||
await switchToRegisterMode(page);
|
||||
});
|
||||
|
||||
test("empty invite code shows validation error", async ({ page }) => {
|
||||
await page.locator("#host").fill("localhost:8443");
|
||||
await page.locator("#username").fill("newuser");
|
||||
await page.locator("#password").fill("password123");
|
||||
// Leave invite code empty
|
||||
|
||||
await page.locator(".btn-primary[type='submit']").click();
|
||||
|
||||
const errorBanner = page.locator(".error-banner");
|
||||
await expect(errorBanner).toHaveClass(/visible/, { timeout: 3000 });
|
||||
await expect(errorBanner).toContainText("Invite code is required");
|
||||
});
|
||||
|
||||
test("short password shows validation error", async ({ page }) => {
|
||||
await page.locator("#host").fill("localhost:8443");
|
||||
await page.locator("#username").fill("newuser");
|
||||
await page.locator("#password").fill("short");
|
||||
await page.locator("#invite").fill("invite123");
|
||||
|
||||
await page.locator(".btn-primary[type='submit']").click();
|
||||
|
||||
const errorBanner = page.locator(".error-banner");
|
||||
await expect(errorBanner).toHaveClass(/visible/, { timeout: 3000 });
|
||||
await expect(errorBanner).toContainText("at least 8 characters");
|
||||
});
|
||||
|
||||
test("empty username shows validation error", async ({ page }) => {
|
||||
await page.locator("#host").fill("localhost:8443");
|
||||
// Leave username empty
|
||||
await page.locator("#password").fill("password123");
|
||||
await page.locator("#invite").fill("invite123");
|
||||
|
||||
await page.locator(".btn-primary[type='submit']").click();
|
||||
|
||||
const errorBanner = page.locator(".error-banner");
|
||||
await expect(errorBanner).toHaveClass(/visible/, { timeout: 3000 });
|
||||
await expect(errorBanner).toContainText("Username is required");
|
||||
});
|
||||
|
||||
test("empty host shows validation error", async ({ page }) => {
|
||||
// Leave host empty (clear the default)
|
||||
await page.locator("#host").fill("");
|
||||
await page.locator("#username").fill("newuser");
|
||||
await page.locator("#password").fill("password123");
|
||||
await page.locator("#invite").fill("invite123");
|
||||
|
||||
await page.locator(".btn-primary[type='submit']").click();
|
||||
|
||||
const errorBanner = page.locator(".error-banner");
|
||||
await expect(errorBanner).toHaveClass(/visible/, { timeout: 3000 });
|
||||
await expect(errorBanner).toContainText("Server address is required");
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Register Flow — Submission", () => {
|
||||
test("successful register transitions to connected state", async ({ page }) => {
|
||||
await mockRegisterSuccess(page);
|
||||
await page.goto("/");
|
||||
await switchToRegisterMode(page);
|
||||
|
||||
await page.locator("#host").fill("localhost:8443");
|
||||
await page.locator("#username").fill("newuser");
|
||||
await page.locator("#password").fill("password123");
|
||||
await page.locator("#invite").fill("invite-abc");
|
||||
|
||||
await page.locator(".btn-primary[type='submit']").click();
|
||||
|
||||
// Should transition to the connected overlay
|
||||
const overlay = page.locator(".connected-overlay");
|
||||
await expect(overlay).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("register shows loading state during submission", async ({ page }) => {
|
||||
await mockRegisterSuccess(page);
|
||||
await page.goto("/");
|
||||
await switchToRegisterMode(page);
|
||||
|
||||
await page.locator("#host").fill("localhost:8443");
|
||||
await page.locator("#username").fill("newuser");
|
||||
await page.locator("#password").fill("password123");
|
||||
await page.locator("#invite").fill("invite-abc");
|
||||
|
||||
// Submit and verify the form completes successfully
|
||||
await page.locator(".btn-primary[type='submit']").click();
|
||||
|
||||
// The form should eventually complete and show the connected overlay
|
||||
await expect(page.locator(".connected-overlay")).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("register error shows error banner", async ({ page }) => {
|
||||
await mockRegisterConflict(page);
|
||||
await page.goto("/");
|
||||
await switchToRegisterMode(page);
|
||||
|
||||
await page.locator("#host").fill("localhost:8443");
|
||||
await page.locator("#username").fill("existinguser");
|
||||
await page.locator("#password").fill("password123");
|
||||
await page.locator("#invite").fill("invite-abc");
|
||||
|
||||
await page.locator(".btn-primary[type='submit']").click();
|
||||
|
||||
const errorBanner = page.locator(".error-banner");
|
||||
await expect(errorBanner).toHaveClass(/visible/, { timeout: 5000 });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* E2E tests for the reply-to message flow.
|
||||
* Covers: click reply → see reply bar → send reply → verify.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
mockTauriFullSessionWithMessagesAndEcho,
|
||||
navigateToMainPage,
|
||||
} from "./helpers";
|
||||
|
||||
test.describe("Reply Flow", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithMessagesAndEcho(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("clicking Reply shows reply bar", async ({ page }) => {
|
||||
const firstMessage = page.locator("[data-testid='message-101']");
|
||||
await firstMessage.hover();
|
||||
await page.locator("[data-testid='msg-reply-101']").click();
|
||||
|
||||
const replyBar = page.locator(".reply-bar.visible");
|
||||
await expect(replyBar).toBeVisible({ timeout: 3000 });
|
||||
});
|
||||
|
||||
test("reply bar shows the referenced author name", async ({ page }) => {
|
||||
const firstMessage = page.locator("[data-testid='message-101']");
|
||||
await firstMessage.hover();
|
||||
await page.locator("[data-testid='msg-reply-101']").click();
|
||||
|
||||
const replyBar = page.locator(".reply-bar.visible");
|
||||
await expect(replyBar).toContainText("testuser");
|
||||
});
|
||||
|
||||
test("sending a reply clears the reply bar", async ({ page }) => {
|
||||
const firstMessage = page.locator("[data-testid='message-101']");
|
||||
await firstMessage.hover();
|
||||
await page.locator("[data-testid='msg-reply-101']").click();
|
||||
|
||||
// Verify reply bar is shown
|
||||
const replyBar = page.locator(".reply-bar.visible");
|
||||
await expect(replyBar).toBeVisible();
|
||||
|
||||
// Type and send reply
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await textarea.fill("This is my reply");
|
||||
await textarea.press("Enter");
|
||||
|
||||
// Reply bar should be hidden after sending
|
||||
await expect(replyBar).not.toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("reply message appears with reply reference", async ({ page }) => {
|
||||
const firstMessage = page.locator("[data-testid='message-101']");
|
||||
await firstMessage.hover();
|
||||
await page.locator("[data-testid='msg-reply-101']").click();
|
||||
|
||||
const textarea = page.locator("[data-testid='msg-textarea']");
|
||||
await textarea.fill("Replying to you!");
|
||||
await textarea.press("Enter");
|
||||
|
||||
// The new reply message should appear with a reply reference
|
||||
const newReply = page.locator(".message .msg-text", {
|
||||
hasText: "Replying to you!",
|
||||
});
|
||||
await expect(newReply).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// The reply message should also contain a reply reference element
|
||||
const replyMessage = page.locator(".message", {
|
||||
has: page.locator(".msg-text", { hasText: "Replying to you!" }),
|
||||
});
|
||||
const replyRef = replyMessage.locator(".msg-reply-ref");
|
||||
await expect(replyRef).toBeVisible({ timeout: 3000 });
|
||||
});
|
||||
|
||||
test("cancel button on reply bar dismisses it", async ({ page }) => {
|
||||
const firstMessage = page.locator("[data-testid='message-101']");
|
||||
await firstMessage.hover();
|
||||
await page.locator("[data-testid='msg-reply-101']").click();
|
||||
|
||||
const replyBar = page.locator(".reply-bar.visible");
|
||||
await expect(replyBar).toBeVisible();
|
||||
|
||||
// Click the close button on the reply bar
|
||||
const cancelBtn = replyBar.locator(".reply-close");
|
||||
await cancelBtn.click();
|
||||
await expect(replyBar).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -13,25 +13,27 @@ test.describe("Server Strip", () => {
|
||||
});
|
||||
|
||||
test("server strip is visible with server icons", async ({ page }) => {
|
||||
const strip = page.locator(".server-strip");
|
||||
const strip = page.locator("[data-testid='server-strip']");
|
||||
await expect(strip).toBeVisible();
|
||||
|
||||
const icons = page.locator(".server-strip .server-icon");
|
||||
const icons = strip.locator(".server-icon");
|
||||
await expect(icons.first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("active server icon has active class", async ({ page }) => {
|
||||
const activeIcon = page.locator(".server-strip .server-icon.active");
|
||||
test("active server icon shows home initial 'O'", async ({ page }) => {
|
||||
const activeIcon = page.locator("[data-testid='server-strip'] .server-icon.active");
|
||||
await expect(activeIcon).toBeVisible();
|
||||
await expect(activeIcon).toHaveText("O");
|
||||
});
|
||||
|
||||
test("server separator exists between icons", async ({ page }) => {
|
||||
const separator = page.locator(".server-strip .server-separator");
|
||||
const separator = page.locator("[data-testid='server-strip'] .server-separator");
|
||||
await expect(separator).toBeAttached();
|
||||
});
|
||||
|
||||
test("add server button exists", async ({ page }) => {
|
||||
const addBtn = page.locator(".server-strip .server-icon.add");
|
||||
test("add server button shows '+' icon", async ({ page }) => {
|
||||
const addBtn = page.locator("[data-testid='server-strip'] .server-icon.add");
|
||||
await expect(addBtn).toBeVisible();
|
||||
await expect(addBtn).toHaveText("+");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,18 +1,5 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { mockTauriFullSession, navigateToMainPage } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
async function openSettings(page: import("@playwright/test").Page): Promise<void> {
|
||||
// Settings is opened via user bar settings button (gear icon)
|
||||
const settingsBtn = page.locator(".ub-controls button").last();
|
||||
await settingsBtn.click();
|
||||
|
||||
const overlay = page.locator(".settings-overlay.open");
|
||||
await expect(overlay).toBeVisible({ timeout: 5_000 });
|
||||
}
|
||||
import { mockTauriFullSession, navigateToMainPage, openSettings, switchSettingsTab } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Settings Overlay — structure
|
||||
@@ -28,7 +15,7 @@ test.describe("Settings Overlay", () => {
|
||||
test("settings overlay opens from user bar", async ({ page }) => {
|
||||
await openSettings(page);
|
||||
|
||||
const overlay = page.locator(".settings-overlay");
|
||||
const overlay = page.locator("[data-testid='settings-overlay']");
|
||||
await expect(overlay).toHaveClass(/open/);
|
||||
});
|
||||
|
||||
@@ -56,7 +43,7 @@ test.describe("Settings Overlay", () => {
|
||||
const closeBtn = page.locator(".settings-close-btn");
|
||||
await closeBtn.click();
|
||||
|
||||
const overlay = page.locator(".settings-overlay");
|
||||
const overlay = page.locator("[data-testid='settings-overlay']");
|
||||
await expect(overlay).not.toHaveClass(/open/);
|
||||
});
|
||||
|
||||
@@ -65,7 +52,7 @@ test.describe("Settings Overlay", () => {
|
||||
|
||||
await page.keyboard.press("Escape");
|
||||
|
||||
const overlay = page.locator(".settings-overlay");
|
||||
const overlay = page.locator("[data-testid='settings-overlay']");
|
||||
await expect(overlay).not.toHaveClass(/open/);
|
||||
});
|
||||
|
||||
@@ -122,9 +109,7 @@ test.describe("Settings — Appearance Tab", () => {
|
||||
await navigateToMainPage(page);
|
||||
await openSettings(page);
|
||||
|
||||
// Switch to Appearance tab
|
||||
const tabs = page.locator(".settings-sidebar button.settings-nav-item");
|
||||
await tabs.nth(1).click();
|
||||
await switchSettingsTab(page, "Appearance");
|
||||
});
|
||||
|
||||
test("shows theme options", async ({ page }) => {
|
||||
@@ -171,9 +156,7 @@ test.describe("Settings — Notifications Tab", () => {
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
await openSettings(page);
|
||||
|
||||
const tabs = page.locator(".settings-sidebar button.settings-nav-item");
|
||||
await tabs.nth(2).click();
|
||||
await switchSettingsTab(page, "Notifications");
|
||||
});
|
||||
|
||||
test("shows notification toggles", async ({ page }) => {
|
||||
@@ -202,9 +185,7 @@ test.describe("Settings — Voice & Audio Tab", () => {
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
await openSettings(page);
|
||||
|
||||
const tabs = page.locator(".settings-sidebar button.settings-nav-item");
|
||||
await tabs.nth(3).click();
|
||||
await switchSettingsTab(page, "Voice & Audio");
|
||||
});
|
||||
|
||||
test("shows device selectors", async ({ page }) => {
|
||||
@@ -235,9 +216,7 @@ test.describe("Settings — Keybinds Tab", () => {
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
await openSettings(page);
|
||||
|
||||
const tabs = page.locator(".settings-sidebar button.settings-nav-item");
|
||||
await tabs.nth(4).click();
|
||||
await switchSettingsTab(page, "Keybinds");
|
||||
});
|
||||
|
||||
test("shows keybind rows", async ({ page }) => {
|
||||
@@ -262,9 +241,7 @@ test.describe("Settings — Logs Tab", () => {
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
await openSettings(page);
|
||||
|
||||
const tabs = page.locator(".settings-sidebar button.settings-nav-item");
|
||||
await tabs.nth(5).click();
|
||||
await switchSettingsTab(page, "Logs");
|
||||
});
|
||||
|
||||
test("shows log viewer", async ({ page }) => {
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
mockTauriFullSession,
|
||||
mockTauriFullSessionWithFailingMessages,
|
||||
navigateToMainPage,
|
||||
emitWsEvent,
|
||||
} from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Toast Notifications
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe("Toast Notifications", () => {
|
||||
test("toast appears when message load fails (500 response)", async ({ page }) => {
|
||||
await mockTauriFullSessionWithFailingMessages(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
// The toast container should exist in the DOM
|
||||
const toastContainer = page.locator("[data-testid='toast-container']");
|
||||
await expect(toastContainer).toBeAttached({ timeout: 5_000 });
|
||||
|
||||
// An error toast should appear because /messages returns 500
|
||||
const toast = page.locator("[data-testid='toast']");
|
||||
await expect(toast.first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Toast should have the error type class
|
||||
await expect(toast.first()).toHaveClass(/toast-error/);
|
||||
|
||||
// Toast text should mention failure
|
||||
const text = await toast.first().textContent();
|
||||
expect(text).toMatch(/fail/i);
|
||||
});
|
||||
|
||||
test("toast auto-dismisses after timeout", async ({ page }) => {
|
||||
await mockTauriFullSessionWithFailingMessages(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
// Wait for the error toast to appear
|
||||
const toast = page.locator("[data-testid='toast']");
|
||||
await expect(toast.first()).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Default duration is 5000ms; toast gets .show removed then transitions out.
|
||||
// Wait for toast to disappear (5s timeout + 400ms fallback removal)
|
||||
await expect(toast).toHaveCount(0, { timeout: 10_000 });
|
||||
});
|
||||
|
||||
test("toast container exists after login", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
const toastContainer = page.locator("[data-testid='toast-container']");
|
||||
await expect(toastContainer).toBeAttached();
|
||||
|
||||
// Container should have the correct CSS class
|
||||
await expect(toastContainer).toHaveClass(/toast-container/);
|
||||
});
|
||||
|
||||
test("toast can be triggered via show() and displays message text", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
// Directly invoke the toast's show method via the DOM
|
||||
// The toast container is a child of root; we can trigger a toast by
|
||||
// simulating a WS disconnect which shows "Not connected" toast on send attempt
|
||||
// Instead, we use page.evaluate to call show() on the toast container
|
||||
await page.evaluate(() => {
|
||||
// The toast container is accessible via the toast-container testid
|
||||
const container = document.querySelector("[data-testid='toast-container']");
|
||||
if (container === null) throw new Error("Toast container not found");
|
||||
|
||||
// Create a toast element manually like the component does
|
||||
const el = document.createElement("div");
|
||||
el.className = "toast toast-info";
|
||||
el.setAttribute("data-testid", "toast");
|
||||
el.textContent = "Test info toast";
|
||||
container.appendChild(el);
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
el.classList.add("show");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const toast = page.locator("[data-testid='toast']");
|
||||
await expect(toast.first()).toBeVisible({ timeout: 3_000 });
|
||||
await expect(toast.first()).toHaveText("Test info toast");
|
||||
await expect(toast.first()).toHaveClass(/toast-info/);
|
||||
});
|
||||
|
||||
test("multiple toasts can stack", async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
// Inject multiple toast elements to verify stacking
|
||||
await page.evaluate(() => {
|
||||
const container = document.querySelector("[data-testid='toast-container']");
|
||||
if (container === null) throw new Error("Toast container not found");
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const el = document.createElement("div");
|
||||
el.className = `toast toast-${i === 0 ? "error" : "info"}`;
|
||||
el.setAttribute("data-testid", "toast");
|
||||
el.textContent = `Toast message ${i + 1}`;
|
||||
container.appendChild(el);
|
||||
el.classList.add("show");
|
||||
}
|
||||
});
|
||||
|
||||
const toasts = page.locator("[data-testid='toast']");
|
||||
await expect(toasts).toHaveCount(3, { timeout: 3_000 });
|
||||
|
||||
// Verify each toast has distinct content
|
||||
await expect(toasts.nth(0)).toHaveText("Toast message 1");
|
||||
await expect(toasts.nth(1)).toHaveText("Toast message 2");
|
||||
await expect(toasts.nth(2)).toHaveText("Toast message 3");
|
||||
|
||||
// First toast should be error type, others info
|
||||
await expect(toasts.nth(0)).toHaveClass(/toast-error/);
|
||||
await expect(toasts.nth(1)).toHaveClass(/toast-info/);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,116 @@
|
||||
/**
|
||||
* E2E tests for TOTP (2FA) submission flow.
|
||||
* Covers: valid code submits, invalid code shows error, cancel returns to login.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
buildTauriMockScript,
|
||||
MOCK_LOGIN_2FA_RESPONSE,
|
||||
MOCK_TOKEN,
|
||||
} from "./helpers";
|
||||
|
||||
async function mockTotpSuccess(page: import("@playwright/test").Page): Promise<void> {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
{ pattern: "/api/v1/auth/login", status: 200, body: MOCK_LOGIN_2FA_RESPONSE },
|
||||
{ pattern: "/api/v1/auth/verify-totp", status: 200, body: { token: MOCK_TOKEN, requires_2fa: false } },
|
||||
],
|
||||
simulateWsFlow: true,
|
||||
}));
|
||||
}
|
||||
|
||||
async function mockTotpFailure(page: import("@playwright/test").Page): Promise<void> {
|
||||
await page.addInitScript(buildTauriMockScript({
|
||||
httpRoutes: [
|
||||
{ pattern: "/api/v1/health", status: 200, body: { status: "ok", version: "1.0.0" } },
|
||||
{ pattern: "/api/v1/auth/login", status: 200, body: MOCK_LOGIN_2FA_RESPONSE },
|
||||
{ pattern: "/api/v1/auth/verify-totp", status: 401, body: { error: "INVALID_CODE", message: "Invalid verification code" } },
|
||||
],
|
||||
}));
|
||||
}
|
||||
|
||||
async function loginToTotp(page: import("@playwright/test").Page): Promise<void> {
|
||||
await page.locator("#host").fill("localhost:8443");
|
||||
await page.locator("#username").fill("testuser");
|
||||
await page.locator("#password").fill("password123");
|
||||
await page.locator(".btn-primary[type='submit']").click();
|
||||
|
||||
const totpOverlay = page.locator(".totp-overlay");
|
||||
await expect(totpOverlay).not.toHaveClass(/totp-overlay--hidden/, { timeout: 5000 });
|
||||
}
|
||||
|
||||
test.describe("TOTP Submission Flow", () => {
|
||||
test("entering non-numeric code shows error class on input", async ({ page }) => {
|
||||
await mockTotpSuccess(page);
|
||||
await page.goto("/");
|
||||
await loginToTotp(page);
|
||||
|
||||
const totpInput = page.locator(".totp-overlay input[inputmode='numeric']");
|
||||
await totpInput.fill("abc");
|
||||
|
||||
const verifyBtn = page.locator(".totp-overlay button.btn-primary");
|
||||
await verifyBtn.click();
|
||||
|
||||
// Input should briefly get error class
|
||||
await expect(totpInput).toHaveClass(/error/, { timeout: 1000 });
|
||||
});
|
||||
|
||||
test("entering fewer than 6 digits shows error class", async ({ page }) => {
|
||||
await mockTotpSuccess(page);
|
||||
await page.goto("/");
|
||||
await loginToTotp(page);
|
||||
|
||||
const totpInput = page.locator(".totp-overlay input[inputmode='numeric']");
|
||||
await totpInput.fill("123");
|
||||
|
||||
const verifyBtn = page.locator(".totp-overlay button.btn-primary");
|
||||
await verifyBtn.click();
|
||||
|
||||
await expect(totpInput).toHaveClass(/error/, { timeout: 1000 });
|
||||
});
|
||||
|
||||
test("submitting valid 6-digit code completes login", async ({ page }) => {
|
||||
await mockTotpSuccess(page);
|
||||
await page.goto("/");
|
||||
await loginToTotp(page);
|
||||
|
||||
const totpInput = page.locator(".totp-overlay input[inputmode='numeric']");
|
||||
await totpInput.fill("123456");
|
||||
|
||||
const verifyBtn = page.locator(".totp-overlay button.btn-primary");
|
||||
await verifyBtn.click();
|
||||
|
||||
// Should transition to connected overlay
|
||||
const overlay = page.locator(".connected-overlay");
|
||||
await expect(overlay).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("submitting invalid code shows error banner", async ({ page }) => {
|
||||
await mockTotpFailure(page);
|
||||
await page.goto("/");
|
||||
await loginToTotp(page);
|
||||
|
||||
const totpInput = page.locator(".totp-overlay input[inputmode='numeric']");
|
||||
await totpInput.fill("999999");
|
||||
|
||||
const verifyBtn = page.locator(".totp-overlay button.btn-primary");
|
||||
await verifyBtn.click();
|
||||
|
||||
// Error banner should appear
|
||||
const errorBanner = page.locator(".error-banner");
|
||||
await expect(errorBanner).toHaveClass(/visible/, { timeout: 5000 });
|
||||
});
|
||||
|
||||
test("cancel button returns to login form", async ({ page }) => {
|
||||
await mockTotpSuccess(page);
|
||||
await page.goto("/");
|
||||
await loginToTotp(page);
|
||||
|
||||
const backBtn = page.locator(".totp-back");
|
||||
await backBtn.click();
|
||||
|
||||
const totpOverlay = page.locator(".totp-overlay");
|
||||
await expect(totpOverlay).toHaveClass(/totp-overlay--hidden/);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,70 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
mockTauriFullSession,
|
||||
navigateToMainPage,
|
||||
emitWsMessage,
|
||||
} from "./helpers";
|
||||
|
||||
test.describe("Typing Indicator — WebSocket", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("typing indicator appears when another user starts typing", async ({ page }) => {
|
||||
const typingSlot = page.locator("[data-testid='typing-slot']");
|
||||
await expect(typingSlot).toBeAttached();
|
||||
|
||||
// Initially empty
|
||||
const typingBar = page.locator(".typing-bar");
|
||||
if (await typingBar.count() > 0) {
|
||||
await expect(typingBar).toBeEmpty();
|
||||
}
|
||||
|
||||
// Emit typing event from another user (server sends "typing", not "typing_start")
|
||||
await emitWsMessage(page, {
|
||||
type: "typing",
|
||||
payload: {
|
||||
channel_id: 1,
|
||||
user_id: 2,
|
||||
username: "otheruser",
|
||||
},
|
||||
});
|
||||
|
||||
// Typing indicator should show the username
|
||||
const typingText = page.locator(".typing-bar");
|
||||
await expect(typingText).toContainText("otheruser", { timeout: 5_000 });
|
||||
});
|
||||
|
||||
test("typing indicator does not show for current user", async ({ page }) => {
|
||||
// Emit typing event from the current user (id: 1)
|
||||
await emitWsMessage(page, {
|
||||
type: "typing",
|
||||
payload: {
|
||||
channel_id: 1,
|
||||
user_id: 1,
|
||||
username: "testuser",
|
||||
},
|
||||
});
|
||||
|
||||
// Should NOT show "testuser is typing"
|
||||
const typingText = page.locator(".typing-bar", { hasText: "testuser" });
|
||||
await expect(typingText).not.toBeVisible({ timeout: 1000 });
|
||||
});
|
||||
|
||||
test("typing indicator ignores events from other channels", async ({ page }) => {
|
||||
// We're viewing channel 1, emit typing on channel 2
|
||||
await emitWsMessage(page, {
|
||||
type: "typing",
|
||||
payload: {
|
||||
channel_id: 2,
|
||||
user_id: 2,
|
||||
username: "otheruser",
|
||||
},
|
||||
});
|
||||
|
||||
const typingText = page.locator(".typing-bar", { hasText: "otheruser" });
|
||||
await expect(typingText).not.toBeVisible({ timeout: 1000 });
|
||||
});
|
||||
});
|
||||
@@ -13,7 +13,7 @@ test.describe("Typing Indicator", () => {
|
||||
});
|
||||
|
||||
test("typing indicator slot exists", async ({ page }) => {
|
||||
const slot = page.locator(".typing-slot");
|
||||
const slot = page.locator("[data-testid='typing-slot']");
|
||||
await expect(slot).toBeAttached();
|
||||
});
|
||||
|
||||
@@ -33,6 +33,7 @@ test.describe("Typing Indicator", () => {
|
||||
payload: {
|
||||
channel_id: 1,
|
||||
user_id: 2,
|
||||
username: "otheruser",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -47,6 +48,7 @@ test.describe("Typing Indicator", () => {
|
||||
payload: {
|
||||
channel_id: 1,
|
||||
user_id: 2,
|
||||
username: "otheruser",
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -13,37 +13,47 @@ test.describe("User Bar", () => {
|
||||
});
|
||||
|
||||
test("user bar is visible", async ({ page }) => {
|
||||
const userBar = page.locator(".user-bar");
|
||||
const userBar = page.locator("[data-testid='user-bar']");
|
||||
await expect(userBar).toBeVisible();
|
||||
});
|
||||
|
||||
test("user bar shows username", async ({ page }) => {
|
||||
const name = page.locator(".ub-name");
|
||||
test("user bar shows username 'testuser'", async ({ page }) => {
|
||||
const name = page.locator("[data-testid='user-bar-name']");
|
||||
await expect(name).toBeVisible();
|
||||
await expect(name).toHaveText("testuser");
|
||||
});
|
||||
|
||||
test("user bar shows avatar", async ({ page }) => {
|
||||
const avatar = page.locator(".ub-avatar");
|
||||
test("user bar shows avatar with initial", async ({ page }) => {
|
||||
const avatar = page.locator("[data-testid='user-bar'] .ub-avatar");
|
||||
await expect(avatar).toBeVisible();
|
||||
// Avatar should contain the first letter of the username
|
||||
await expect(avatar).toContainText("T");
|
||||
});
|
||||
|
||||
test("user bar shows status", async ({ page }) => {
|
||||
const status = page.locator(".ub-status");
|
||||
test("user bar shows online status", async ({ page }) => {
|
||||
const status = page.locator("[data-testid='user-bar'] .ub-status");
|
||||
await expect(status).toBeVisible();
|
||||
await expect(status).toHaveText("Online");
|
||||
});
|
||||
|
||||
test("user bar has control buttons", async ({ page }) => {
|
||||
const controls = page.locator(".ub-controls");
|
||||
test("user bar has settings button with correct label", async ({ page }) => {
|
||||
const controls = page.locator("[data-testid='user-bar'] .ub-controls");
|
||||
await expect(controls).toBeVisible();
|
||||
|
||||
const settingsBtn = controls.locator("button[aria-label='Settings']");
|
||||
await expect(settingsBtn).toBeVisible();
|
||||
await expect(settingsBtn).toHaveText("\u2699");
|
||||
});
|
||||
|
||||
test("user bar has control buttons (mute, deafen, settings)", async ({ page }) => {
|
||||
const controls = page.locator("[data-testid='user-bar'] .ub-controls");
|
||||
const buttons = controls.locator("button");
|
||||
const count = await buttons.count();
|
||||
expect(count).toBeGreaterThanOrEqual(2);
|
||||
expect(count).toBe(3);
|
||||
});
|
||||
|
||||
test("user bar has status dot", async ({ page }) => {
|
||||
const statusDot = page.locator(".user-bar .status-dot");
|
||||
const statusDot = page.locator("[data-testid='user-bar'] .status-dot");
|
||||
await expect(statusDot).toBeAttached();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* E2E tests for voice channels and voice widget.
|
||||
* ChannelSidebar renders voice channels as .channel-item with 🔊 icon.
|
||||
* VoiceWidget shows connected users when in a voice channel.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import {
|
||||
mockTauriFullSessionWithVoice,
|
||||
navigateToMainPage,
|
||||
} from "./helpers";
|
||||
|
||||
test.describe("Voice Channel Items", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await mockTauriFullSessionWithVoice(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
});
|
||||
|
||||
test("voice channels appear in sidebar with speaker icon", async ({ page }) => {
|
||||
// Voice channels use 🔊 icon in .ch-icon span
|
||||
const voiceIcon = page.locator(".ch-icon", { hasText: "🔊" });
|
||||
await expect(voiceIcon.first()).toBeVisible({ timeout: 5000 });
|
||||
// Should have at least 2 voice channels (Voice Chat, Music)
|
||||
await expect(voiceIcon).toHaveCount(2);
|
||||
});
|
||||
|
||||
test("voice channel shows channel name", async ({ page }) => {
|
||||
// Find channel item containing the voice icon, then check name
|
||||
const voiceChatName = page.locator(".ch-name", { hasText: "Voice Chat" });
|
||||
await expect(voiceChatName).toBeVisible();
|
||||
});
|
||||
|
||||
test("voice widget shows when connected", async ({ page }) => {
|
||||
// VoiceWidget should be visible (mock connects user to voice channel)
|
||||
const widget = page.locator(".voice-widget.visible");
|
||||
await expect(widget).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("voice widget shows connected users", async ({ page }) => {
|
||||
// Mock voice state has 2 users in channel 10 (Voice Chat)
|
||||
const voiceUsers = page.locator(".voice-user-item");
|
||||
await expect(voiceUsers.first()).toBeVisible({ timeout: 5000 });
|
||||
await expect(voiceUsers).toHaveCount(2);
|
||||
});
|
||||
|
||||
test("voice user item shows avatar", async ({ page }) => {
|
||||
const vuAvatar = page.locator(".vu-avatar").first();
|
||||
await expect(vuAvatar).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("muted user shows mute indicator", async ({ page }) => {
|
||||
// User 2 is muted in mock voice state
|
||||
const muteIcon = page.locator(".vu-muted");
|
||||
await expect(muteIcon.first()).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("voice widget shows channel name header", async ({ page }) => {
|
||||
const channelName = page.locator(".vw-channel");
|
||||
await expect(channelName).toContainText("Voice Chat");
|
||||
});
|
||||
|
||||
test("voice widget has disconnect control", async ({ page }) => {
|
||||
const disconnectBtn = page.locator("button[aria-label='Disconnect']");
|
||||
await expect(disconnectBtn).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test("mute button toggles active state on click", async ({ page }) => {
|
||||
const controls = page.locator(".vw-controls");
|
||||
await expect(controls).toBeVisible({ timeout: 5000 });
|
||||
|
||||
const muteBtn = controls.locator("button[aria-label='Mute']");
|
||||
const hadActive = await muteBtn.evaluate((el) => el.classList.contains("active-ctrl"));
|
||||
await muteBtn.click();
|
||||
|
||||
// Button should toggle its active-ctrl class
|
||||
const hasActive = await muteBtn.evaluate((el) => el.classList.contains("active-ctrl"));
|
||||
expect(hasActive).not.toBe(hadActive);
|
||||
});
|
||||
|
||||
test("deafen button toggles active state on click", async ({ page }) => {
|
||||
const controls = page.locator(".vw-controls");
|
||||
await expect(controls).toBeVisible({ timeout: 5000 });
|
||||
|
||||
const deafenBtn = controls.locator("button[aria-label='Deafen']");
|
||||
const hadActive = await deafenBtn.evaluate((el) => el.classList.contains("active-ctrl"));
|
||||
await deafenBtn.click();
|
||||
|
||||
const hasActive = await deafenBtn.evaluate((el) => el.classList.contains("active-ctrl"));
|
||||
expect(hasActive).not.toBe(hadActive);
|
||||
});
|
||||
|
||||
test("all five voice control buttons are present", async ({ page }) => {
|
||||
const controls = page.locator(".vw-controls");
|
||||
await expect(controls).toBeVisible({ timeout: 5000 });
|
||||
|
||||
await expect(controls.locator("button[aria-label='Mute']")).toBeVisible();
|
||||
await expect(controls.locator("button[aria-label='Deafen']")).toBeVisible();
|
||||
await expect(controls.locator("button[aria-label='Camera']")).toBeVisible();
|
||||
await expect(controls.locator("button[aria-label='Screenshare']")).toBeVisible();
|
||||
await expect(controls.locator("button[aria-label='Disconnect']")).toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -1,160 +1,99 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { mockTauriFullSessionWithVoice, navigateToMainPage, emitWsMessage } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests: Voice Widget
|
||||
// ---------------------------------------------------------------------------
|
||||
const VOICE_STATE_EVENT = {
|
||||
type: "voice_state" as const,
|
||||
payload: {
|
||||
user_id: 1,
|
||||
username: "testuser",
|
||||
channel_id: 10,
|
||||
muted: false,
|
||||
deafened: false,
|
||||
speaking: false,
|
||||
camera: false,
|
||||
screenshare: false,
|
||||
},
|
||||
};
|
||||
|
||||
test.describe("Voice Widget", () => {
|
||||
test("voice widget is hidden by default when no voice state", async ({ page }) => {
|
||||
// Use full session WITHOUT voice to check default hidden state
|
||||
test("is hidden by default when user has no voice state", async ({ page }) => {
|
||||
const { mockTauriFullSession } = await import("./helpers");
|
||||
await mockTauriFullSession(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
const widget = page.locator(".voice-widget");
|
||||
if (await widget.count() > 0) {
|
||||
await expect(widget).not.toHaveClass(/visible/);
|
||||
}
|
||||
const widget = page.locator("[data-testid='voice-widget']");
|
||||
await expect(widget).toBeAttached();
|
||||
await expect(widget).not.toHaveClass(/visible/);
|
||||
});
|
||||
|
||||
test("voice widget appears when in voice channel", async ({ page }) => {
|
||||
test("appears with full UI when voice_state event is received", async ({ page }) => {
|
||||
await mockTauriFullSessionWithVoice(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
// Emit voice state to trigger widget visibility
|
||||
await emitWsMessage(page, {
|
||||
type: "voice_state",
|
||||
payload: {
|
||||
user_id: 1,
|
||||
username: "testuser",
|
||||
channel_id: 10,
|
||||
muted: false,
|
||||
deafened: false,
|
||||
speaking: false,
|
||||
camera: false,
|
||||
screenshare: false,
|
||||
},
|
||||
});
|
||||
await emitWsMessage(page, VOICE_STATE_EVENT);
|
||||
|
||||
const widget = page.locator(".voice-widget.visible");
|
||||
const widget = page.locator("[data-testid='voice-widget'].visible");
|
||||
await expect(widget).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// Verify all widget parts render in one test
|
||||
await expect(widget.locator(".vw-connected")).toBeVisible();
|
||||
await expect(widget.locator(".vw-channel")).toBeVisible();
|
||||
await expect(widget.locator(".voice-users-list")).toBeVisible();
|
||||
await expect(widget.locator(".vw-controls")).toBeVisible();
|
||||
await expect(page.locator("button[aria-label='Disconnect']")).toBeVisible();
|
||||
});
|
||||
|
||||
test("voice widget shows channel name", async ({ page }) => {
|
||||
test("mute button toggles active state on click", async ({ page }) => {
|
||||
await mockTauriFullSessionWithVoice(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
await emitWsMessage(page, {
|
||||
type: "voice_state",
|
||||
payload: {
|
||||
user_id: 1,
|
||||
username: "testuser",
|
||||
channel_id: 10,
|
||||
muted: false,
|
||||
deafened: false,
|
||||
speaking: false,
|
||||
camera: false,
|
||||
screenshare: false,
|
||||
},
|
||||
});
|
||||
|
||||
const channelName = page.locator(".vw-channel");
|
||||
await expect(channelName).toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
||||
test("voice widget shows control buttons", async ({ page }) => {
|
||||
await mockTauriFullSessionWithVoice(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
await emitWsMessage(page, {
|
||||
type: "voice_state",
|
||||
payload: {
|
||||
user_id: 1,
|
||||
username: "testuser",
|
||||
channel_id: 10,
|
||||
muted: false,
|
||||
deafened: false,
|
||||
speaking: false,
|
||||
camera: false,
|
||||
screenshare: false,
|
||||
},
|
||||
});
|
||||
|
||||
await emitWsMessage(page, VOICE_STATE_EVENT);
|
||||
const controls = page.locator(".vw-controls");
|
||||
await expect(controls).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const buttons = controls.locator("button");
|
||||
const count = await buttons.count();
|
||||
expect(count).toBeGreaterThanOrEqual(2);
|
||||
const muteBtn = controls.locator("button[aria-label='Mute']");
|
||||
const hadActive = await muteBtn.evaluate((el) => el.classList.contains("active-ctrl"));
|
||||
await muteBtn.click();
|
||||
const hasActive = await muteBtn.evaluate((el) => el.classList.contains("active-ctrl"));
|
||||
expect(hasActive).not.toBe(hadActive);
|
||||
});
|
||||
|
||||
test("voice widget shows connected users list", async ({ page }) => {
|
||||
test("deafen button toggles active state on click", async ({ page }) => {
|
||||
await mockTauriFullSessionWithVoice(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
await emitWsMessage(page, {
|
||||
type: "voice_state",
|
||||
payload: {
|
||||
user_id: 1,
|
||||
username: "testuser",
|
||||
channel_id: 10,
|
||||
muted: false,
|
||||
deafened: false,
|
||||
speaking: false,
|
||||
camera: false,
|
||||
screenshare: false,
|
||||
},
|
||||
});
|
||||
await emitWsMessage(page, VOICE_STATE_EVENT);
|
||||
const controls = page.locator(".vw-controls");
|
||||
await expect(controls).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const usersList = page.locator(".voice-users-list");
|
||||
await expect(usersList).toBeVisible({ timeout: 5_000 });
|
||||
const deafenBtn = controls.locator("button[aria-label='Deafen']");
|
||||
const hadActive = await deafenBtn.evaluate((el) => el.classList.contains("active-ctrl"));
|
||||
await deafenBtn.click();
|
||||
const hasActive = await deafenBtn.evaluate((el) => el.classList.contains("active-ctrl"));
|
||||
expect(hasActive).not.toBe(hadActive);
|
||||
});
|
||||
|
||||
test("voice widget has disconnect button", async ({ page }) => {
|
||||
test("second user joining voice appears in users list", async ({ page }) => {
|
||||
await mockTauriFullSessionWithVoice(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
|
||||
await emitWsMessage(page, {
|
||||
type: "voice_state",
|
||||
payload: {
|
||||
user_id: 1,
|
||||
username: "testuser",
|
||||
channel_id: 10,
|
||||
muted: false,
|
||||
deafened: false,
|
||||
speaking: false,
|
||||
camera: false,
|
||||
screenshare: false,
|
||||
},
|
||||
});
|
||||
|
||||
const widget = page.locator(".voice-widget.visible");
|
||||
await emitWsMessage(page, VOICE_STATE_EVENT);
|
||||
const widget = page.locator("[data-testid='voice-widget'].visible");
|
||||
await expect(widget).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// Disconnect button should be in controls
|
||||
const disconnectBtn = page.locator(".vw-controls .disconnect");
|
||||
if (await disconnectBtn.count() > 0) {
|
||||
await expect(disconnectBtn).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("voice widget shows Voice Connected header", async ({ page }) => {
|
||||
await mockTauriFullSessionWithVoice(page);
|
||||
await page.goto("/");
|
||||
await navigateToMainPage(page);
|
||||
const usersBefore = await page.locator(".voice-user-item").count();
|
||||
|
||||
// Another user joins the voice channel
|
||||
await emitWsMessage(page, {
|
||||
type: "voice_state",
|
||||
payload: {
|
||||
user_id: 1,
|
||||
username: "testuser",
|
||||
user_id: 3,
|
||||
username: "newvoiceuser",
|
||||
channel_id: 10,
|
||||
muted: false,
|
||||
deafened: false,
|
||||
@@ -164,7 +103,9 @@ test.describe("Voice Widget", () => {
|
||||
},
|
||||
});
|
||||
|
||||
const header = page.locator(".vw-connected");
|
||||
await expect(header).toBeVisible({ timeout: 5_000 });
|
||||
// New user should appear in the list
|
||||
await expect(page.locator("[data-testid='voice-user-3']")).toBeVisible({ timeout: 5_000 });
|
||||
const usersAfter = await page.locator(".voice-user-item").count();
|
||||
expect(usersAfter).toBeGreaterThan(usersBefore);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -117,24 +117,19 @@ synchronous test assertions.
|
||||
|
||||
---
|
||||
|
||||
### 13. E2E test improvement plan (Phases 4-6)
|
||||
### ~~13. E2E test improvement plan (Phases 4-6)~~ DONE
|
||||
|
||||
**What:** Complete the remaining phases of the E2E
|
||||
improvement plan:
|
||||
Completed all remaining E2E improvement phases:
|
||||
|
||||
- Phase 4: Strengthen assertions, fix quality
|
||||
- Phase 5: Toast coverage
|
||||
- Phase 6: Migrate all selectors to data-testid
|
||||
|
||||
**Why:** Phases 1-3 are complete. Remaining phases improve
|
||||
test reliability and coverage.
|
||||
|
||||
**Context:** See `project_e2e_improvement_plan.md` in
|
||||
Claude memory for full plan.
|
||||
|
||||
**Effort:** M (per phase)
|
||||
|
||||
**Depends on:** TODO #4 (toast wiring) for Phase 5 — DONE
|
||||
- Phase 4: Strengthened assertions in server-strip,
|
||||
main-layout, user-bar, message-input specs. Fixed
|
||||
"presence_update" test title in member-list.spec.ts.
|
||||
- Phase 5: Replaced skipped toast.spec.ts with 5 real
|
||||
tests (load failure, auto-dismiss, container check,
|
||||
message display, stacking). Added
|
||||
mockTauriFullSessionWithFailingMessages helper.
|
||||
- Phase 6: Migrated 12 spec files to data-testid selectors
|
||||
for all primary elements.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user