{
this.close();
}}
- >
+ >
+ ${this._childNodes}
+
`,
this,
);
- const dialog = this.querySelector(".context-menu");
- dialog.appendChild(this._children);
+ this._observer?.observe(this, { childList: true });
}
open(x, y) {
diff --git a/src/js/components/edit-profile-dialog.js b/src/js/components/edit-profile-dialog.js
new file mode 100644
index 0000000..0d1f648
--- /dev/null
+++ b/src/js/components/edit-profile-dialog.js
@@ -0,0 +1,477 @@
+import { html, render } from "/js/lib/lit-html.js";
+import { Component } from "/js/components/component.js";
+import { ScrollLock } from "/js/scrollLock.js";
+import { classnames, graphemeCount } from "/js/utils.js";
+import { compressImage } from "/js/imageUtils.js";
+import "/js/components/image-cropper.js";
+import "/js/components/context-menu.js";
+import "/js/components/context-menu-item.js";
+import "/js/components/context-menu-item-group.js";
+import { cameraIconTemplate } from "/js/templates/icons/cameraIcon.template.js";
+import { confirm } from "/js/modals.js";
+
+const MAX_DISPLAY_NAME_LENGTH = 64;
+const MAX_DESCRIPTION_LENGTH = 256;
+
+class EditProfileDialog extends Component {
+ connectedCallback() {
+ if (this.initialized) {
+ return;
+ }
+ this.scrollLock = new ScrollLock(this);
+ this._displayName = "";
+ this._description = "";
+ this._currentAvatar = null;
+ this._currentBanner = null;
+ this._newAvatarDataUrl = null;
+ this._newBannerDataUrl = null;
+ this._removeAvatar = false;
+ this._removeBanner = false;
+ this._saving = false;
+ this._error = null;
+ this._croppingTarget = null; // "avatar" or "banner"
+ this._croppingImageSrc = null;
+ this._isOpen = false;
+ this._profile = null;
+ this.innerHTML = "";
+ this.render();
+ this.initialized = true;
+ }
+
+ setProfile(profile) {
+ this._profile = profile;
+ this._displayName = profile.displayName || "";
+ this._description = profile.description || "";
+ this._currentAvatar = profile.avatar || null;
+ this._currentBanner = profile.banner || null;
+ this._newAvatarDataUrl = null;
+ this._newBannerDataUrl = null;
+ this._removeAvatar = false;
+ this._removeBanner = false;
+ this._saving = false;
+ this._error = null;
+ this._croppingTarget = null;
+ this._croppingImageSrc = null;
+ this.render();
+ }
+
+ get _isDirty() {
+ if (!this._profile) return false;
+ return (
+ this._displayName !== (this._profile.displayName || "") ||
+ this._description !== (this._profile.description || "") ||
+ this._newAvatarDataUrl !== null ||
+ this._newBannerDataUrl !== null ||
+ this._removeAvatar ||
+ this._removeBanner
+ );
+ }
+
+ get _isDisplayNameTooLong() {
+ return graphemeCount(this._displayName) > MAX_DISPLAY_NAME_LENGTH;
+ }
+
+ get _isDescriptionTooLong() {
+ return graphemeCount(this._description) > MAX_DESCRIPTION_LENGTH;
+ }
+
+ get _canSave() {
+ return (
+ this._isDirty &&
+ !this._saving &&
+ !this._isDisplayNameTooLong &&
+ !this._isDescriptionTooLong
+ );
+ }
+
+ render() {
+ const isCropping = !!this._croppingTarget;
+
+ const displayNameCount = graphemeCount(this._displayName);
+ const descriptionCount = graphemeCount(this._description);
+ const avatarSrc = this._removeAvatar
+ ? null
+ : this._newAvatarDataUrl || this._currentAvatar;
+ const bannerSrc = this._removeBanner
+ ? null
+ : this._newBannerDataUrl || this._currentBanner;
+
+ render(
+ html`
@@ -398,6 +413,20 @@ class ProfileView extends View {
return html`
`;
}
+ async function handleSaveProfile(profile, profileUpdates) {
+ const dialog = root.querySelector("edit-profile-dialog");
+ try {
+ await dataLayer.mutations.updateProfile(profile, profileUpdates);
+ showToast("Profile updated");
+ dialog.close();
+ renderPage();
+ dataLayer.requests.loadProfile(profileDid);
+ } catch (error) {
+ console.error("Failed to update profile:", error);
+ dialog?.setError("Failed to save profile. Please try again.");
+ }
+ }
+
function renderPage() {
const profile = dataLayer.selectors.getProfile(profileDid);
const currentUser = dataLayer.selectors.getCurrentUser();
diff --git a/tests/e2e/factories.js b/tests/e2e/factories.js
index 47a52a2..fc36e7b 100644
--- a/tests/e2e/factories.js
+++ b/tests/e2e/factories.js
@@ -58,6 +58,8 @@ export function createProfile({
handle,
displayName,
description,
+ avatar,
+ banner,
followersCount,
followsCount,
postsCount,
@@ -69,7 +71,8 @@ export function createProfile({
handle,
displayName,
description: description || "",
- avatar: "",
+ avatar: avatar || "",
+ banner: banner || "",
viewer: { muted: false, blockedBy: false, ...viewer },
labels: [],
createdAt: "2025-01-01T00:00:00.000Z",
diff --git a/tests/e2e/mockServer.js b/tests/e2e/mockServer.js
index 2d05543..3a07b5a 100644
--- a/tests/e2e/mockServer.js
+++ b/tests/e2e/mockServer.js
@@ -1359,6 +1359,61 @@ export class MockServer {
});
});
+ await page.route("**/xrpc/com.atproto.repo.getRecord*", (route) => {
+ const url = new URL(route.request().url());
+ const collection = url.searchParams.get("collection");
+ const rkey = url.searchParams.get("rkey");
+ if (collection === "app.bsky.actor.profile" && rkey === "self") {
+ const profile = this.profiles.get(userProfile.did) || userProfile;
+ return route.fulfill({
+ status: 200,
+ contentType: "application/json",
+ body: JSON.stringify({
+ uri: `at://${userProfile.did}/${collection}/${rkey}`,
+ cid: "bafyreiprofilerecord",
+ value: {
+ $type: "app.bsky.actor.profile",
+ displayName: profile.displayName || "",
+ description: profile.description || "",
+ },
+ }),
+ });
+ }
+ return route.fulfill({ status: 404, body: "{}" });
+ });
+
+ await page.route("**/xrpc/com.atproto.repo.putRecord*", (route) => {
+ const body = route.request().postDataJSON();
+ const collection = body?.collection;
+ if (collection === "app.bsky.actor.profile") {
+ const record = body?.record || {};
+ const profile = this.profiles.get(userProfile.did) || {
+ ...userProfile,
+ };
+ profile.displayName = record.displayName || "";
+ profile.description = record.description || "";
+ if (record.avatar) {
+ profile.avatar = "mock-avatar-url";
+ } else if (!record.avatar && record.avatar !== undefined) {
+ profile.avatar = "";
+ }
+ if (record.banner) {
+ profile.banner = "mock-banner-url";
+ } else if (!record.banner && record.banner !== undefined) {
+ profile.banner = "";
+ }
+ this.profiles.set(userProfile.did, profile);
+ }
+ return route.fulfill({
+ status: 200,
+ contentType: "application/json",
+ body: JSON.stringify({
+ uri: `at://${userProfile.did}/${collection}/self`,
+ cid: "bafyreiupdatedrecord",
+ }),
+ });
+ });
+
await page.route("**/xrpc/com.atproto.repo.uploadBlob*", (route) =>
route.fulfill({
status: 200,
diff --git a/tests/e2e/specs/flows/editProfile.test.js b/tests/e2e/specs/flows/editProfile.test.js
new file mode 100644
index 0000000..3755dc4
--- /dev/null
+++ b/tests/e2e/specs/flows/editProfile.test.js
@@ -0,0 +1,524 @@
+import { test, expect } from "../../base.js";
+import { login } from "../../helpers.js";
+import { userProfile } from "../../fixtures.js";
+import { MockServer } from "../../mockServer.js";
+import { createProfile } from "../../factories.js";
+
+test.describe("Edit profile flow", () => {
+ test("should open edit dialog, update display name and description, and save", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "Original description",
+ followersCount: 10,
+ followsCount: 5,
+ postsCount: 3,
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="profile-name"]'),
+ ).toContainText("Test User", { timeout: 10000 });
+
+ // Click the "Edit Profile" button
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ // Wait for the dialog to appear
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Verify fields are pre-populated
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toHaveValue("Test User");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-description"]'),
+ ).toHaveValue("Original description");
+
+ // Clear and type new display name
+ await dialog
+ .locator('[data-testid="edit-profile-display-name"]')
+ .fill("Updated User");
+
+ // Clear and type new description
+ await dialog
+ .locator('[data-testid="edit-profile-description"]')
+ .fill("Updated description");
+
+ // Click Save
+ await dialog.locator('[data-testid="edit-profile-save-button"]').click();
+
+ // Verify the toast shows success
+ await expect(page.locator(".toast")).toContainText("Profile updated", {
+ timeout: 5000,
+ });
+
+ // Verify the profile view reflects the updated name
+ await expect(
+ profileView.locator('[data-testid="profile-name"]'),
+ ).toContainText("Updated User", { timeout: 10000 });
+ });
+
+ test("should not allow saving when no changes are made", async ({ page }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "My description",
+ followersCount: 10,
+ followsCount: 5,
+ postsCount: 3,
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Save button should be disabled when no changes are made
+ await expect(
+ dialog.locator('[data-testid="edit-profile-save-button"]'),
+ ).toBeDisabled();
+ });
+
+ test("should show character count overflow for display name", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "",
+ followersCount: 10,
+ followsCount: 5,
+ postsCount: 3,
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Type a display name that exceeds the 64 character limit
+ const longName = "A".repeat(65);
+ await dialog
+ .locator('[data-testid="edit-profile-display-name"]')
+ .fill(longName);
+
+ // The character count should show overflow styling
+ await expect(
+ dialog.locator(".edit-profile-char-count.overflow"),
+ ).toBeVisible();
+
+ // Save button should be disabled
+ await expect(
+ dialog.locator('[data-testid="edit-profile-save-button"]'),
+ ).toBeDisabled();
+ });
+
+ test("should close dialog when cancel is clicked", async ({ page }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "",
+ followersCount: 10,
+ followsCount: 5,
+ postsCount: 3,
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Click Cancel
+ await dialog
+ .locator(".edit-profile-dialog-header-button", { hasText: "Cancel" })
+ .click();
+
+ // Dialog should be closed
+ await expect(dialog.locator(".edit-profile-dialog[open]")).toHaveCount(0, {
+ timeout: 5000,
+ });
+
+ // Profile should remain unchanged
+ await expect(
+ profileView.locator('[data-testid="profile-name"]'),
+ ).toContainText("Test User");
+ });
+
+ test("should open context menu with upload option when clicking avatar", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "",
+ avatar: "http://localhost/mock-avatar.jpg",
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Click avatar preview to open context menu
+ await dialog.locator(".edit-profile-avatar-preview").click();
+
+ // Context menu should appear with "Upload from Files" and "Remove Avatar"
+ const menu = dialog.locator(".edit-profile-avatar-menu");
+ await expect(
+ menu.locator("context-menu-item", { hasText: "Upload from Files" }),
+ ).toBeVisible({ timeout: 5000 });
+ await expect(
+ menu.locator("context-menu-item", { hasText: "Remove Avatar" }),
+ ).toBeVisible();
+ });
+
+ test("should not show remove option when no avatar exists", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "",
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Click avatar preview to open context menu
+ await dialog.locator(".edit-profile-avatar-preview").click();
+
+ // Context menu should only have "Upload from Files"
+ const menu = dialog.locator(".edit-profile-avatar-menu");
+ await expect(
+ menu.locator("context-menu-item", { hasText: "Upload from Files" }),
+ ).toBeVisible({ timeout: 5000 });
+ await expect(
+ menu.locator("context-menu-item", { hasText: "Remove Avatar" }),
+ ).toHaveCount(0);
+ });
+
+ test("should remove avatar via context menu and save", async ({ page }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "",
+ avatar: "http://localhost/mock-avatar.jpg",
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Avatar image should be visible in the preview
+ await expect(
+ dialog.locator(
+ ".edit-profile-avatar-preview img:not(.edit-profile-avatar-placeholder)",
+ ),
+ ).toBeVisible();
+
+ // Click avatar preview to open context menu
+ await dialog.locator(".edit-profile-avatar-preview").click();
+
+ // Click "Remove Avatar"
+ const menu = dialog.locator(".edit-profile-avatar-menu");
+ await menu
+ .locator("context-menu-item", { hasText: "Remove Avatar" })
+ .click();
+
+ // Avatar image should be removed from the preview (placeholder may still exist)
+ await expect(
+ dialog.locator(
+ ".edit-profile-avatar-preview img:not(.edit-profile-avatar-placeholder)",
+ ),
+ ).toHaveCount(0);
+
+ // Save
+ await dialog.locator('[data-testid="edit-profile-save-button"]').click();
+
+ await expect(page.locator(".toast")).toContainText("Profile updated", {
+ timeout: 5000,
+ });
+ });
+
+ test("should remove banner via context menu and save", async ({ page }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "",
+ banner: "http://localhost/mock-banner.jpg",
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Banner image should be visible in the preview
+ await expect(
+ dialog.locator(".edit-profile-banner-preview img"),
+ ).toBeVisible();
+
+ // Click banner preview to open context menu
+ await dialog.locator(".edit-profile-banner-preview").click();
+
+ // Click "Remove Banner"
+ const menu = dialog.locator(".edit-profile-banner-menu");
+ await menu
+ .locator("context-menu-item", { hasText: "Remove Banner" })
+ .click();
+
+ // Banner image should be removed from the preview
+ await expect(
+ dialog.locator(".edit-profile-banner-preview img"),
+ ).toHaveCount(0);
+
+ // Save
+ await dialog.locator('[data-testid="edit-profile-save-button"]').click();
+
+ await expect(page.locator(".toast")).toContainText("Profile updated", {
+ timeout: 5000,
+ });
+ });
+
+ test("should return to edit dialog when canceling the image cropper", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "Original description",
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ // Click avatar preview to open context menu
+ await dialog.locator(".edit-profile-avatar-preview").click();
+
+ // Click "Upload from Files" to trigger file picker
+ const menu = dialog.locator(".edit-profile-avatar-menu");
+ const fileInput = dialog.locator(".edit-profile-file-input");
+
+ // Set a file on the hidden file input to trigger the cropper
+ const [fileChooser] = await Promise.all([
+ page.waitForEvent("filechooser"),
+ menu
+ .locator("context-menu-item", { hasText: "Upload from Files" })
+ .click(),
+ ]);
+
+ await fileChooser.setFiles({
+ name: "test-image.png",
+ mimeType: "image/png",
+ buffer: Buffer.from(
+ "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVQYV2P8/5+hnoEIwDiqEF8oAABkvQMBzcSaKwAAAABJRU5ErkJggg==",
+ "base64",
+ ),
+ });
+
+ // Wait for cropper to appear
+ await expect(dialog.locator("image-cropper")).toBeVisible({
+ timeout: 5000,
+ });
+
+ // Click Cancel on the cropper
+ await dialog
+ .locator(".edit-profile-dialog-header-button", { hasText: "Cancel" })
+ .click();
+
+ // The edit dialog should still be visible with the original fields
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toHaveValue("Test User");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-description"]'),
+ ).toHaveValue("Original description");
+
+ // The cropper should be gone
+ await expect(dialog.locator("image-cropper")).toHaveCount(0);
+ });
+
+ test("should show error when save fails", async ({ page }) => {
+ const mockServer = new MockServer();
+ const currentUser = createProfile({
+ did: userProfile.did,
+ handle: userProfile.handle,
+ displayName: "Test User",
+ description: "Original description",
+ followersCount: 10,
+ followsCount: 5,
+ postsCount: 3,
+ });
+ mockServer.addProfile(currentUser);
+ await mockServer.setup(page);
+
+ await login(page);
+
+ // Override the putRecord route to return an error
+ await page.route("**/xrpc/com.atproto.repo.putRecord*", (route) =>
+ route.fulfill({
+ status: 500,
+ contentType: "application/json",
+ body: JSON.stringify({ error: "InternalServerError" }),
+ }),
+ );
+
+ await page.goto(`/profile/${userProfile.did}`);
+
+ const profileView = page.locator("#profile-view");
+ await expect(
+ profileView.locator('[data-testid="edit-profile-button"]'),
+ ).toBeVisible({ timeout: 10000 });
+
+ await profileView.locator('[data-testid="edit-profile-button"]').click();
+
+ const dialog = page.locator("edit-profile-dialog");
+ await expect(
+ dialog.locator('[data-testid="edit-profile-display-name"]'),
+ ).toBeVisible({ timeout: 5000 });
+
+ await dialog
+ .locator('[data-testid="edit-profile-display-name"]')
+ .fill("New Name");
+
+ await dialog.locator('[data-testid="edit-profile-save-button"]').click();
+
+ // Error message should appear in the dialog
+ await expect(dialog.locator(".edit-profile-error")).toContainText(
+ "Failed to save profile",
+ { timeout: 5000 },
+ );
+ });
+});
diff --git a/tests/unit/specs/components/context-menu.test.js b/tests/unit/specs/components/context-menu.test.js
index 340dc44..936c235 100644
--- a/tests/unit/specs/components/context-menu.test.js
+++ b/tests/unit/specs/components/context-menu.test.js
@@ -1,11 +1,34 @@
import { TestSuite } from "../../testSuite.js";
import { assert, assertEquals } from "../../testHelpers.js";
-import "/js/components/context-menu.js";
+
+// Mock MutationObserver before importing the component
+let mutationCallbacks = [];
+globalThis.MutationObserver = class {
+ constructor(callback) {
+ this._callback = callback;
+ this._connected = false;
+ mutationCallbacks.push(this);
+ }
+ observe() {
+ this._connected = true;
+ }
+ disconnect() {
+ this._connected = false;
+ }
+ _trigger() {
+ if (this._connected) {
+ this._callback();
+ }
+ }
+};
+
+await import("/js/components/context-menu.js");
const t = new TestSuite("ContextMenu");
t.beforeEach(() => {
document.body.innerHTML = "";
+ mutationCallbacks = [];
});
function connectElement(element) {
@@ -120,6 +143,72 @@ t.describe("ContextMenu - container click", (it) => {
});
});
+t.describe("ContextMenu - child updates", (it) => {
+ it("should update dialog contents when children change", () => {
+ const element = document.createElement("context-menu");
+ element.innerHTML = "
Item A";
+ connectElement(element);
+ const observer = mutationCallbacks[mutationCallbacks.length - 1];
+
+ const itemA = element.querySelector(".context-menu .item-a");
+ assert(itemA !== null, "Initial child should be in dialog");
+
+ const newChild = document.createElement("span");
+ newChild.className = "item-b";
+ newChild.textContent = "Item B";
+ element.appendChild(newChild);
+ observer._trigger();
+
+ const itemB = element.querySelector(".context-menu .item-b");
+ assert(itemB !== null, "New child should be moved into dialog");
+ assertEquals(itemB.textContent, "Item B");
+ });
+
+ it("should include all children when full set is provided", () => {
+ const element = document.createElement("context-menu");
+ element.innerHTML = "
Original";
+ connectElement(element);
+ const observer = mutationCallbacks[mutationCallbacks.length - 1];
+
+ // Simulate lit-html re-rendering all children (old + new)
+ const original = document.createElement("span");
+ original.className = "original";
+ original.textContent = "Original";
+ const added = document.createElement("span");
+ added.className = "added";
+ added.textContent = "Added";
+ element.appendChild(original);
+ element.appendChild(added);
+ observer._trigger();
+
+ const items = element.querySelectorAll(".context-menu span");
+ assertEquals(items.length, 2);
+ assertEquals(items[0].textContent, "Original");
+ assertEquals(items[1].textContent, "Added");
+ });
+
+ it("should replace dialog contents when children are replaced", () => {
+ const element = document.createElement("context-menu");
+ element.innerHTML =
+ "
KeepRemove";
+ connectElement(element);
+ const observer = mutationCallbacks[mutationCallbacks.length - 1];
+
+ const dialog = element.querySelector(".context-menu");
+ assertEquals(dialog.querySelectorAll("span").length, 2);
+
+ const replacement = document.createElement("span");
+ replacement.className = "only";
+ replacement.textContent = "Only";
+ element.appendChild(replacement);
+ observer._trigger();
+
+ const spans = dialog.querySelectorAll("span");
+ assertEquals(spans.length, 1);
+ assertEquals(spans[0].textContent, "Only");
+ });
+});
+
t.describe("ContextMenu - reinitialization protection", (it) => {
it("should not reinitialize when connectedCallback is called multiple times", () => {
const element = document.createElement("context-menu");
diff --git a/tests/unit/specs/components/edit-profile-dialog.test.js b/tests/unit/specs/components/edit-profile-dialog.test.js
new file mode 100644
index 0000000..0e54500
--- /dev/null
+++ b/tests/unit/specs/components/edit-profile-dialog.test.js
@@ -0,0 +1,432 @@
+import { TestSuite } from "../../testSuite.js";
+import { assert, assertEquals } from "../../testHelpers.js";
+import "/js/components/edit-profile-dialog.js";
+
+const t = new TestSuite("EditProfileDialog");
+
+const mockProfile = {
+ did: "did:plc:test123",
+ displayName: "Test User",
+ description: "A test bio",
+ handle: "testuser.bsky.social",
+ avatar: "https://example.com/avatar.jpg",
+ banner: "https://example.com/banner.jpg",
+ viewer: {},
+};
+
+function connectElement(element) {
+ const container = document.createElement("div");
+ container.className = "page-visible";
+ container.appendChild(element);
+ document.body.appendChild(container);
+}
+
+t.beforeEach(() => {
+ document.body.innerHTML = "";
+});
+
+t.describe("EditProfileDialog - rendering", (it) => {
+ it("should render dialog element", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ const dialog = element.querySelector(".edit-profile-dialog");
+ assert(dialog !== null, "Dialog should be rendered");
+ assertEquals(dialog.tagName, "DIALOG");
+ });
+
+ it("should render header with title", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ const header = element.querySelector(".edit-profile-dialog-header h2");
+ assert(header !== null, "Header should be rendered");
+ assertEquals(header.textContent, "Edit profile");
+ });
+
+ it("should render display name input", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ const input = element.querySelector(
+ "[data-testid='edit-profile-display-name']",
+ );
+ assert(input !== null, "Display name input should be rendered");
+ assertEquals(input.tagName, "INPUT");
+ });
+
+ it("should render description textarea", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ const textarea = element.querySelector(
+ "[data-testid='edit-profile-description']",
+ );
+ assert(textarea !== null, "Description textarea should be rendered");
+ assertEquals(textarea.tagName, "TEXTAREA");
+ });
+
+ it("should render save button", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ const saveButton = element.querySelector(
+ "[data-testid='edit-profile-save-button']",
+ );
+ assert(saveButton !== null, "Save button should be rendered");
+ });
+
+ it("should render cancel button", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ const cancelButton = element.querySelector(
+ ".edit-profile-dialog-header-button",
+ );
+ assert(cancelButton !== null, "Cancel button should be rendered");
+ assertEquals(cancelButton.textContent.trim(), "Cancel");
+ });
+});
+
+t.describe("EditProfileDialog - pre-filling", (it) => {
+ it("should pre-fill display name from profile", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+ const input = element.querySelector(
+ "[data-testid='edit-profile-display-name']",
+ );
+ assertEquals(input.value, "Test User");
+ });
+
+ it("should pre-fill description from profile", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+ const textarea = element.querySelector(
+ "[data-testid='edit-profile-description']",
+ );
+ assertEquals(textarea.value, "A test bio");
+ });
+
+ it("should show avatar preview from profile", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+ const avatarImg = element.querySelector(".edit-profile-avatar-preview img");
+ assert(avatarImg !== null, "Avatar image should be rendered");
+ assertEquals(avatarImg.src, "https://example.com/avatar.jpg");
+ });
+
+ it("should show banner preview from profile", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+ const bannerImg = element.querySelector(".edit-profile-banner-preview img");
+ assert(bannerImg !== null, "Banner image should be rendered");
+ assertEquals(bannerImg.src, "https://example.com/banner.jpg");
+ });
+
+ it("should handle profile with no display name", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile({ ...mockProfile, displayName: "" });
+ const input = element.querySelector(
+ "[data-testid='edit-profile-display-name']",
+ );
+ assertEquals(input.value, "");
+ });
+
+ it("should handle profile with no avatar", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile({ ...mockProfile, avatar: null });
+ const avatarImg = element.querySelector(
+ ".edit-profile-avatar-preview img:not(.edit-profile-avatar-placeholder)",
+ );
+ assertEquals(avatarImg, null);
+ const placeholder = element.querySelector(
+ ".edit-profile-avatar-placeholder",
+ );
+ assert(placeholder !== null, "Avatar placeholder should be shown");
+ assertEquals(placeholder.tagName, "IMG");
+ assert(
+ placeholder.src.includes("avatar-fallback.svg"),
+ "Placeholder should use avatar fallback SVG",
+ );
+ });
+});
+
+t.describe("EditProfileDialog - character counts", (it) => {
+ it("should show character count for display name", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+ const charCount = element.querySelectorAll(".edit-profile-char-count")[0];
+ assert(charCount !== null, "Char count should be rendered");
+ assert(charCount.textContent.includes("/64"), "Should show max of 64");
+ });
+
+ it("should show character count for description", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+ const charCounts = element.querySelectorAll(".edit-profile-char-count");
+ assert(charCounts.length >= 2, "Should have at least 2 char counts");
+ assert(
+ charCounts[1].textContent.includes("/256"),
+ "Should show max of 256",
+ );
+ });
+});
+
+t.describe("EditProfileDialog - validation", (it) => {
+ it("should disable save button when no changes made", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+ const saveButton = element.querySelector(
+ "[data-testid='edit-profile-save-button']",
+ );
+ assertEquals(saveButton.disabled, true);
+ });
+
+ it("should enable save button when display name changes", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+
+ const input = element.querySelector(
+ "[data-testid='edit-profile-display-name']",
+ );
+ input.value = "New Name";
+ input.dispatchEvent(new Event("input", { bubbles: true }));
+
+ const saveButton = element.querySelector(
+ "[data-testid='edit-profile-save-button']",
+ );
+ assertEquals(saveButton.disabled, false);
+ });
+
+ it("should disable save when display name exceeds 64 characters", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile({ ...mockProfile, displayName: "" });
+
+ const input = element.querySelector(
+ "[data-testid='edit-profile-display-name']",
+ );
+ input.value = "a".repeat(65);
+ input.dispatchEvent(new Event("input", { bubbles: true }));
+
+ const saveButton = element.querySelector(
+ "[data-testid='edit-profile-save-button']",
+ );
+ assertEquals(saveButton.disabled, true);
+ });
+
+ it("should show overflow class when display name too long", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile({ ...mockProfile, displayName: "" });
+
+ const input = element.querySelector(
+ "[data-testid='edit-profile-display-name']",
+ );
+ input.value = "a".repeat(65);
+ input.dispatchEvent(new Event("input", { bubbles: true }));
+
+ const charCount = element.querySelectorAll(".edit-profile-char-count")[0];
+ assert(
+ charCount.classList.contains("overflow"),
+ "Should have overflow class",
+ );
+ });
+
+ it("should disable save when description exceeds 256 characters", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile({ ...mockProfile, description: "" });
+
+ const textarea = element.querySelector(
+ "[data-testid='edit-profile-description']",
+ );
+ textarea.value = "a".repeat(257);
+ textarea.dispatchEvent(new Event("input", { bubbles: true }));
+
+ const saveButton = element.querySelector(
+ "[data-testid='edit-profile-save-button']",
+ );
+ assertEquals(saveButton.disabled, true);
+ });
+});
+
+t.describe("EditProfileDialog - image context menu", (it) => {
+ it("should render avatar context menu", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+
+ const menu = element.querySelector(".edit-profile-avatar-menu");
+ assert(menu !== null, "Avatar context menu should exist");
+ });
+
+ it("should include remove option when avatar exists", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+
+ const menu = element.querySelector(".edit-profile-avatar-menu");
+ const items = menu.querySelectorAll("context-menu-item");
+ assertEquals(items.length, 2);
+ assert(
+ items[0].textContent.includes("Upload from Files"),
+ "First item should be upload",
+ );
+ assert(
+ items[1].textContent.includes("Remove Avatar"),
+ "Second item should be remove",
+ );
+ });
+
+ it("should not include remove option when no avatar", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile({ ...mockProfile, avatar: null });
+
+ const menu = element.querySelector(".edit-profile-avatar-menu");
+ const items = menu.querySelectorAll("context-menu-item");
+ assertEquals(items.length, 1);
+ assert(
+ items[0].textContent.includes("Upload from Files"),
+ "Only upload option should exist",
+ );
+ });
+
+ it("should remove avatar when remove option clicked", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+
+ const menu = element.querySelector(".edit-profile-avatar-menu");
+ const items = menu.querySelectorAll("context-menu-item");
+ items[1].click();
+
+ const avatarImg = element.querySelector(
+ ".edit-profile-avatar-preview img:not(.edit-profile-avatar-placeholder)",
+ );
+ assertEquals(avatarImg, null);
+ const placeholder = element.querySelector(
+ ".edit-profile-avatar-placeholder",
+ );
+ assert(
+ placeholder !== null,
+ "Avatar placeholder should be shown after removal",
+ );
+ });
+});
+
+t.describe("EditProfileDialog - profile-save event", (it) => {
+ it("should include profileUpdates with correct attributes", async () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+
+ const displayNameInput = element.querySelector(
+ "[data-testid='edit-profile-display-name']",
+ );
+ displayNameInput.value = "Updated Name";
+ displayNameInput.dispatchEvent(new Event("input", { bubbles: true }));
+
+ const descriptionTextarea = element.querySelector(
+ "[data-testid='edit-profile-description']",
+ );
+ descriptionTextarea.value = "Updated bio";
+ descriptionTextarea.dispatchEvent(new Event("input", { bubbles: true }));
+
+ const eventPromise = new Promise((resolve) => {
+ element.addEventListener("profile-save", (event) => {
+ resolve(event.detail);
+ });
+ });
+
+ const saveButton = element.querySelector(
+ "[data-testid='edit-profile-save-button']",
+ );
+ saveButton.click();
+
+ const detail = await eventPromise;
+ assert(
+ detail.profileUpdates !== undefined,
+ "detail should have profileUpdates",
+ );
+ assertEquals(detail.profileUpdates.displayName, "Updated Name");
+ assertEquals(detail.profileUpdates.description, "Updated bio");
+ assertEquals(detail.profileUpdates.avatarBlob, null);
+ assertEquals(detail.profileUpdates.bannerBlob, null);
+ assertEquals(detail.profileUpdates.removeAvatar, false);
+ assertEquals(detail.profileUpdates.removeBanner, false);
+ });
+
+ it("should set removeAvatar when avatar is removed", async () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+
+ const avatarMenu = element.querySelector(".edit-profile-avatar-menu");
+ const avatarItems = avatarMenu.querySelectorAll("context-menu-item");
+ avatarItems[1].click();
+
+ const eventPromise = new Promise((resolve) => {
+ element.addEventListener("profile-save", (event) => {
+ resolve(event.detail);
+ });
+ });
+
+ const saveButton = element.querySelector(
+ "[data-testid='edit-profile-save-button']",
+ );
+ saveButton.click();
+
+ const detail = await eventPromise;
+ assertEquals(detail.profileUpdates.removeAvatar, true);
+ assertEquals(detail.profileUpdates.removeBanner, false);
+ });
+
+ it("should set removeBanner when banner is removed", async () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+
+ const bannerMenu = element.querySelector(".edit-profile-banner-menu");
+ const bannerItems = bannerMenu.querySelectorAll("context-menu-item");
+ bannerItems[1].click();
+
+ const eventPromise = new Promise((resolve) => {
+ element.addEventListener("profile-save", (event) => {
+ resolve(event.detail);
+ });
+ });
+
+ const saveButton = element.querySelector(
+ "[data-testid='edit-profile-save-button']",
+ );
+ saveButton.click();
+
+ const detail = await eventPromise;
+ assertEquals(detail.profileUpdates.removeBanner, true);
+ assertEquals(detail.profileUpdates.removeAvatar, false);
+ });
+});
+
+t.describe("EditProfileDialog - close", (it) => {
+ it("should dispatch edit-profile-closed event on close", () => {
+ const element = document.createElement("edit-profile-dialog");
+ connectElement(element);
+ element.setProfile(mockProfile);
+
+ let closedEventFired = false;
+ element.addEventListener("edit-profile-closed", () => {
+ closedEventFired = true;
+ });
+
+ element.close();
+ assertEquals(closedEventFired, true);
+ });
+});
+
+await t.run();
diff --git a/tests/unit/specs/components/image-cropper.test.js b/tests/unit/specs/components/image-cropper.test.js
new file mode 100644
index 0000000..be06047
--- /dev/null
+++ b/tests/unit/specs/components/image-cropper.test.js
@@ -0,0 +1,408 @@
+import { createCanvas, Image as CanvasImage } from "canvas";
+import { TestSuite } from "../../testSuite.js";
+import { assert, assertEquals } from "../../testHelpers.js";
+import "/js/components/image-cropper.js";
+
+const t = new TestSuite("ImageCropper");
+
+function connectElement(element) {
+ const container = document.createElement("div");
+ container.className = "page-visible";
+ container.appendChild(element);
+ document.body.appendChild(container);
+}
+
+// Create a test image using node-canvas. Returns a canvas Image instance
+// that can be assigned directly to cropper._img.
+function createTestImage(width, height, color = "red") {
+ const canvas = createCanvas(width, height);
+ const ctx = canvas.getContext("2d");
+ ctx.fillStyle = color;
+ ctx.fillRect(0, 0, width, height);
+ const img = new CanvasImage();
+ img.src = canvas.toBuffer("image/png");
+ return img;
+}
+
+// Mock getBoundingClientRect since jsdom doesn't do layout.
+function mockElementSize(element, width, height) {
+ const rect = {
+ x: 0,
+ y: 0,
+ top: 0,
+ left: 0,
+ right: width,
+ bottom: height,
+ width,
+ height,
+ };
+ element.getBoundingClientRect = () => rect;
+ if (element._canvas) {
+ element._canvas.getBoundingClientRect = () => rect;
+ }
+}
+
+// Inject a test image into the cropper, bypassing the browser Image loading
+// path which doesn't work in jsdom.
+function injectTestImage(element, width, height) {
+ const img = createTestImage(width, height);
+ element._img = img;
+ element._fitInitialScale();
+ element._draw();
+ return img;
+}
+
+t.beforeEach(() => {
+ document.body.innerHTML = "";
+});
+
+t.describe("ImageCropper - rendering", (it) => {
+ it("should render canvas element when connected", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ const canvas = element.querySelector(".image-cropper-canvas");
+ assert(canvas !== null, "Canvas should be rendered");
+ assertEquals(canvas.tagName, "CANVAS");
+ });
+
+ it("should accept aspect-ratio attribute", () => {
+ const element = document.createElement("image-cropper");
+ element.setAttribute("aspect-ratio", "3");
+ connectElement(element);
+ assertEquals(element.aspectRatio, 3);
+ });
+
+ it("should default aspect-ratio to 1", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ assertEquals(element.aspectRatio, 1);
+ });
+
+ it("should accept circular attribute", () => {
+ const element = document.createElement("image-cropper");
+ element.setAttribute("circular", "");
+ connectElement(element);
+ assertEquals(element.circular, true);
+ });
+
+ it("should not be circular by default", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ assertEquals(element.circular, false);
+ });
+
+ it("should initialize with default state", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ assertEquals(element._scale, 1);
+ assertEquals(element._offsetX, 0);
+ assertEquals(element._offsetY, 0);
+ assertEquals(element._dragging, false);
+ assertEquals(element._img, null);
+ });
+});
+
+t.describe("ImageCropper - image loading", (it) => {
+ it("should accept an image via _img assignment", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ mockElementSize(element, 300, 300);
+
+ injectTestImage(element, 100, 100);
+ assert(element._img !== null, "Image should be set");
+ assertEquals(element._img.width, 100);
+ assertEquals(element._img.height, 100);
+ });
+
+ it("should fit initial scale so image covers crop area", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ mockElementSize(element, 300, 300);
+
+ // Small image into large cropper — scale must be > 1
+ injectTestImage(element, 50, 50);
+ assert(element._scale >= 1, "Scale should be >= 1 to fill crop area");
+ });
+});
+
+t.describe("ImageCropper - cropImage", (it) => {
+ it("should return a data URL after cropping", () => {
+ const element = document.createElement("image-cropper");
+ element.setAttribute("aspect-ratio", "1");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ injectTestImage(element, 100, 100);
+ const result = element.cropImage();
+ assert(result !== null, "cropImage should return a value");
+ assert(
+ result.startsWith("data:image/jpeg"),
+ "cropImage should return a JPEG data URL",
+ );
+ });
+
+ it("should return null when no image is loaded", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ const result = element.cropImage();
+ assertEquals(result, null);
+ });
+
+ it("should produce output with correct aspect ratio for 1:1 crop", () => {
+ const element = document.createElement("image-cropper");
+ element.setAttribute("aspect-ratio", "1");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ // Wide image — crop should be square
+ injectTestImage(element, 200, 100);
+ const result = element.cropImage();
+ assert(result !== null, "Should produce output");
+
+ // Decode the result to check dimensions
+ const outputImg = new CanvasImage();
+ const base64 = result.split(",")[1];
+ outputImg.src = Buffer.from(base64, "base64");
+ assertEquals(outputImg.width, outputImg.height);
+ });
+
+ it("should produce output with correct aspect ratio for 3:1 crop", () => {
+ const element = document.createElement("image-cropper");
+ element.setAttribute("aspect-ratio", "3");
+ connectElement(element);
+ mockElementSize(element, 300, 200);
+
+ injectTestImage(element, 300, 300);
+ const result = element.cropImage();
+ assert(result !== null, "Should produce output");
+
+ const outputImg = new CanvasImage();
+ const base64 = result.split(",")[1];
+ outputImg.src = Buffer.from(base64, "base64");
+ // Width should be 3x height
+ const ratio = outputImg.width / outputImg.height;
+ assert(
+ Math.abs(ratio - 3) < 0.1,
+ `Aspect ratio should be ~3, got ${ratio}`,
+ );
+ });
+
+ it("should crop a wide image to square", () => {
+ const element = document.createElement("image-cropper");
+ element.setAttribute("aspect-ratio", "1");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ // Very wide image
+ injectTestImage(element, 400, 100);
+ const result = element.cropImage();
+ assert(result !== null, "Should produce output");
+
+ const outputImg = new CanvasImage();
+ const base64 = result.split(",")[1];
+ outputImg.src = Buffer.from(base64, "base64");
+ assertEquals(outputImg.width, outputImg.height);
+ });
+
+ it("should crop a tall image to square", () => {
+ const element = document.createElement("image-cropper");
+ element.setAttribute("aspect-ratio", "1");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ // Very tall image
+ injectTestImage(element, 100, 400);
+ const result = element.cropImage();
+ assert(result !== null, "Should produce output");
+
+ const outputImg = new CanvasImage();
+ const base64 = result.split(",")[1];
+ outputImg.src = Buffer.from(base64, "base64");
+ assertEquals(outputImg.width, outputImg.height);
+ });
+});
+
+t.describe("ImageCropper - pointer events", (it) => {
+ it("should set dragging to true on pointerdown", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ const canvas = element.querySelector(".image-cropper-canvas");
+
+ const event = new Event("pointerdown", { bubbles: true });
+ event.clientX = 100;
+ event.clientY = 100;
+ event.pointerId = 1;
+ canvas.setPointerCapture = () => {};
+ canvas.dispatchEvent(event);
+
+ assertEquals(element._dragging, true);
+ });
+
+ it("should set dragging to false on pointerup", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ const canvas = element.querySelector(".image-cropper-canvas");
+
+ const downEvent = new Event("pointerdown", { bubbles: true });
+ downEvent.clientX = 100;
+ downEvent.clientY = 100;
+ downEvent.pointerId = 1;
+ canvas.setPointerCapture = () => {};
+ canvas.dispatchEvent(downEvent);
+
+ canvas.dispatchEvent(new Event("pointerup", { bubbles: true }));
+ assertEquals(element._dragging, false);
+ });
+
+ it("should set dragging to false on pointercancel", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ const canvas = element.querySelector(".image-cropper-canvas");
+
+ const downEvent = new Event("pointerdown", { bubbles: true });
+ downEvent.clientX = 100;
+ downEvent.clientY = 100;
+ downEvent.pointerId = 1;
+ canvas.setPointerCapture = () => {};
+ canvas.dispatchEvent(downEvent);
+
+ canvas.dispatchEvent(new Event("pointercancel", { bubbles: true }));
+ assertEquals(element._dragging, false);
+ });
+
+ it("should track drag start position", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ const canvas = element.querySelector(".image-cropper-canvas");
+
+ const event = new Event("pointerdown", { bubbles: true });
+ event.clientX = 150;
+ event.clientY = 200;
+ event.pointerId = 1;
+ canvas.setPointerCapture = () => {};
+ canvas.dispatchEvent(event);
+
+ assertEquals(element._dragStartX, 150);
+ assertEquals(element._dragStartY, 200);
+ });
+
+ it("should update offset on pointermove while dragging", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ injectTestImage(element, 1000, 1000);
+
+ // Zoom in first so there's room to pan
+ element._scale = 3;
+ element._clampOffset();
+ element._draw();
+
+ const canvas = element.querySelector(".image-cropper-canvas");
+
+ const downEvent = new Event("pointerdown", { bubbles: true });
+ downEvent.clientX = 100;
+ downEvent.clientY = 100;
+ downEvent.pointerId = 1;
+ canvas.setPointerCapture = () => {};
+ canvas.dispatchEvent(downEvent);
+
+ const moveEvent = new Event("pointermove", { bubbles: true });
+ moveEvent.clientX = 130;
+ moveEvent.clientY = 120;
+ canvas.dispatchEvent(moveEvent);
+
+ assert(
+ element._offsetX !== 0 || element._offsetY !== 0,
+ "Offset should change after drag when zoomed in",
+ );
+ });
+});
+
+t.describe("ImageCropper - slider zoom", (it) => {
+ it("should render a zoom slider", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ const slider = element.querySelector(".image-cropper-slider");
+ assert(slider !== null, "Slider should be rendered");
+ assertEquals(slider.type, "range");
+ });
+
+ it("should increase scale when slider is moved right", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ injectTestImage(element, 100, 100);
+ const initialScale = element._scale;
+
+ const slider = element.querySelector(".image-cropper-slider");
+ slider.value = "50";
+ slider.dispatchEvent(new Event("input", { bubbles: true }));
+
+ assert(
+ element._scale > initialScale,
+ `Scale should increase from ${initialScale}, got ${element._scale}`,
+ );
+ });
+
+ it("should reach maximum scale at slider value 100", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ injectTestImage(element, 100, 100);
+
+ const slider = element.querySelector(".image-cropper-slider");
+ slider.value = "100";
+ slider.dispatchEvent(new Event("input", { bubbles: true }));
+
+ assertEquals(element._scale, 5);
+ });
+
+ it("should be at minimum scale at slider value 0", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ injectTestImage(element, 100, 100);
+ const minScale = element._getMinScale();
+
+ const slider = element.querySelector(".image-cropper-slider");
+ slider.value = "0";
+ slider.dispatchEvent(new Event("input", { bubbles: true }));
+
+ assertEquals(element._scale, minScale);
+ });
+
+ it("should sync slider position when image is loaded", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ mockElementSize(element, 200, 200);
+
+ injectTestImage(element, 100, 100);
+
+ const slider = element.querySelector(".image-cropper-slider");
+ assertEquals(slider.value, "0");
+ });
+});
+
+t.describe("ImageCropper - attribute changes", (it) => {
+ it("should update aspect ratio when attribute changes", () => {
+ const element = document.createElement("image-cropper");
+ connectElement(element);
+ assertEquals(element.aspectRatio, 1);
+
+ element.setAttribute("aspect-ratio", "3");
+ assertEquals(element.aspectRatio, 3);
+ });
+
+ it("should handle non-numeric aspect ratio gracefully", () => {
+ const element = document.createElement("image-cropper");
+ element.setAttribute("aspect-ratio", "invalid");
+ connectElement(element);
+ assertEquals(element.aspectRatio, 1);
+ });
+});
+
+await t.run();
diff --git a/tests/unit/specs/dataLayer/mutations.test.js b/tests/unit/specs/dataLayer/mutations.test.js
index 2c1fb61..9452097 100644
--- a/tests/unit/specs/dataLayer/mutations.test.js
+++ b/tests/unit/specs/dataLayer/mutations.test.js
@@ -779,4 +779,237 @@ t.describe("removeMutedWord", (it) => {
});
});
+t.describe("updateProfile", (it) => {
+ const testProfile = {
+ did: "did:plc:test123",
+ displayName: "Old Name",
+ description: "Old bio",
+ avatar: "https://example.com/avatar.jpg",
+ banner: "https://example.com/banner.jpg",
+ viewer: {},
+ };
+
+ function createMutationsWithMockApi(mockApi) {
+ const dataStore = new DataStore();
+ const patchStore = new PatchStore();
+ const mockPreferencesProvider = {
+ requirePreferences: () => Preferences.createLoggedOutPreferences(),
+ };
+ dataStore.setProfile(testProfile.did, testProfile);
+ dataStore.setCurrentUser(testProfile);
+ return {
+ mutations: new Mutations(
+ mockApi,
+ dataStore,
+ patchStore,
+ mockPreferencesProvider,
+ ),
+ dataStore,
+ patchStore,
+ };
+ }
+
+ it("should call getProfileRecord and putProfileRecord", async () => {
+ let getRecordCalled = false;
+ let putRecordCalled = false;
+ let putRecordArgs = null;
+ const mockApi = {
+ getProfileRecord: async () => {
+ getRecordCalled = true;
+ return {
+ value: { displayName: "Old Name", description: "Old bio" },
+ cid: "cid123",
+ };
+ },
+ putProfileRecord: async (record, swapRecord) => {
+ putRecordCalled = true;
+ putRecordArgs = { record, swapRecord };
+ return {};
+ },
+ uploadBlob: async () => ({
+ ref: { $link: "blob-link" },
+ mimeType: "image/jpeg",
+ size: 100,
+ }),
+ };
+
+ const { mutations } = createMutationsWithMockApi(mockApi);
+ await mutations.updateProfile(testProfile, {
+ displayName: "New Name",
+ description: "New bio",
+ });
+
+ assertEquals(getRecordCalled, true);
+ assertEquals(putRecordCalled, true);
+ assertEquals(putRecordArgs.record.displayName, "New Name");
+ assertEquals(putRecordArgs.record.description, "New bio");
+ assertEquals(putRecordArgs.swapRecord, "cid123");
+ });
+
+ it("should upload avatar blob when provided", async () => {
+ let uploadBlobCalled = false;
+ const mockApi = {
+ getProfileRecord: async () => ({ value: {}, cid: "cid123" }),
+ putProfileRecord: async () => ({}),
+ uploadBlob: async (blob) => {
+ uploadBlobCalled = true;
+ return {
+ ref: { $link: "avatar-blob" },
+ mimeType: "image/jpeg",
+ size: 100,
+ };
+ },
+ };
+
+ const { mutations } = createMutationsWithMockApi(mockApi);
+ const fakeBlob = new Blob(["test"], { type: "image/jpeg" });
+ await mutations.updateProfile(testProfile, {
+ displayName: "Test",
+ description: "Test",
+ avatarBlob: fakeBlob,
+ });
+
+ assertEquals(uploadBlobCalled, true);
+ });
+
+ it("should upload banner blob when provided", async () => {
+ let uploadBlobCallCount = 0;
+ const mockApi = {
+ getProfileRecord: async () => ({ value: {}, cid: "cid123" }),
+ putProfileRecord: async () => ({}),
+ uploadBlob: async () => {
+ uploadBlobCallCount++;
+ return {
+ ref: { $link: "blob-link" },
+ mimeType: "image/jpeg",
+ size: 100,
+ };
+ },
+ };
+
+ const { mutations } = createMutationsWithMockApi(mockApi);
+ const fakeBlob = new Blob(["test"], { type: "image/jpeg" });
+ await mutations.updateProfile(testProfile, {
+ displayName: "Test",
+ description: "Test",
+ bannerBlob: fakeBlob,
+ });
+
+ assertEquals(uploadBlobCallCount, 1);
+ });
+
+ it("should update dataStore on success", async () => {
+ const mockApi = {
+ getProfileRecord: async () => ({ value: {}, cid: "cid123" }),
+ putProfileRecord: async () => ({}),
+ uploadBlob: async () => ({
+ ref: { $link: "blob" },
+ mimeType: "image/jpeg",
+ size: 100,
+ }),
+ };
+
+ const { mutations, dataStore } = createMutationsWithMockApi(mockApi);
+ await mutations.updateProfile(testProfile, {
+ displayName: "Updated Name",
+ description: "Updated bio",
+ });
+
+ const updatedProfile = dataStore.getProfile(testProfile.did);
+ assertEquals(updatedProfile.displayName, "Updated Name");
+ assertEquals(updatedProfile.description, "Updated bio");
+ });
+
+ it("should apply optimistic patch during update", () => {
+ const mockApi = {
+ getProfileRecord: async () => new Promise(() => {}), // Never resolves
+ putProfileRecord: async () => ({}),
+ uploadBlob: async () => ({
+ ref: { $link: "blob" },
+ mimeType: "image/jpeg",
+ size: 100,
+ }),
+ };
+
+ const { mutations, patchStore } = createMutationsWithMockApi(mockApi);
+ mutations.updateProfile(testProfile, {
+ displayName: "Optimistic Name",
+ description: "Optimistic bio",
+ });
+
+ const patchedProfile = patchStore.applyProfilePatches(testProfile);
+ assertEquals(patchedProfile.displayName, "Optimistic Name");
+ assertEquals(patchedProfile.description, "Optimistic bio");
+ });
+
+ it("should clear optimistic patch after completion", async () => {
+ const mockApi = {
+ getProfileRecord: async () => ({ value: {}, cid: "cid123" }),
+ putProfileRecord: async () => ({}),
+ uploadBlob: async () => ({
+ ref: { $link: "blob" },
+ mimeType: "image/jpeg",
+ size: 100,
+ }),
+ };
+
+ const { mutations, patchStore, dataStore } =
+ createMutationsWithMockApi(mockApi);
+ await mutations.updateProfile(testProfile, {
+ displayName: "New Name",
+ description: "New bio",
+ });
+
+ const updatedProfile = dataStore.getProfile(testProfile.did);
+ const patchedProfile = patchStore.applyProfilePatches(updatedProfile);
+ assertEquals(patchedProfile.displayName, updatedProfile.displayName);
+ });
+
+ it("should rethrow non-400 errors from getProfileRecord", async () => {
+ const mockApi = {
+ getProfileRecord: async () => {
+ throw { status: 500, message: "Internal Server Error" };
+ },
+ putProfileRecord: async () => ({}),
+ uploadBlob: async () => ({
+ ref: { $link: "blob" },
+ mimeType: "image/jpeg",
+ size: 100,
+ }),
+ };
+
+ const { mutations } = createMutationsWithMockApi(mockApi);
+ try {
+ await mutations.updateProfile(testProfile, {
+ displayName: "New Name",
+ description: "New bio",
+ });
+ throw new Error("Expected updateProfile to throw");
+ } catch (error) {
+ assertEquals(error.status, 500);
+ }
+ });
+
+ it("should update currentUser when editing own profile", async () => {
+ const mockApi = {
+ getProfileRecord: async () => ({ value: {}, cid: "cid123" }),
+ putProfileRecord: async () => ({}),
+ uploadBlob: async () => ({
+ ref: { $link: "blob" },
+ mimeType: "image/jpeg",
+ size: 100,
+ }),
+ };
+
+ const { mutations, dataStore } = createMutationsWithMockApi(mockApi);
+ await mutations.updateProfile(testProfile, {
+ displayName: "Updated User",
+ description: "Updated bio",
+ });
+
+ const currentUser = dataStore.getCurrentUser();
+ assertEquals(currentUser.displayName, "Updated User");
+ });
+});
+
await t.run();
diff --git a/tests/unit/specs/imageUtils.test.js b/tests/unit/specs/imageUtils.test.js
new file mode 100644
index 0000000..4c5e6f3
--- /dev/null
+++ b/tests/unit/specs/imageUtils.test.js
@@ -0,0 +1,133 @@
+import { TestSuite } from "../testSuite.js";
+import { assert, assertEquals } from "../testHelpers.js";
+import {
+ constrainImageSize,
+ estimateDataUrlSize,
+ dataUrlToBlob,
+} from "/js/imageUtils.js";
+
+const t = new TestSuite("imageUtils");
+
+t.describe("constrainImageSize", (it) => {
+ it("should return original size when within bounds", () => {
+ const result = constrainImageSize({
+ width: 500,
+ height: 400,
+ maxWidth: 2000,
+ maxHeight: 2000,
+ });
+ assertEquals(result.width, 500);
+ assertEquals(result.height, 400);
+ });
+
+ it("should scale down when width exceeds max", () => {
+ const result = constrainImageSize({
+ width: 4000,
+ height: 2000,
+ maxWidth: 2000,
+ maxHeight: 2000,
+ });
+ assertEquals(result.width, 2000);
+ assertEquals(result.height, 1000);
+ });
+
+ it("should scale down when height exceeds max", () => {
+ const result = constrainImageSize({
+ width: 1000,
+ height: 4000,
+ maxWidth: 2000,
+ maxHeight: 2000,
+ });
+ assertEquals(result.width, 500);
+ assertEquals(result.height, 2000);
+ });
+
+ it("should scale down when both dimensions exceed max", () => {
+ const result = constrainImageSize({
+ width: 6000,
+ height: 4000,
+ maxWidth: 2000,
+ maxHeight: 2000,
+ });
+ assert(result.width <= 2000, `Width ${result.width} should be <= 2000`);
+ assert(result.height <= 2000, `Height ${result.height} should be <= 2000`);
+ });
+
+ it("should preserve aspect ratio when scaling down", () => {
+ const result = constrainImageSize({
+ width: 4000,
+ height: 2000,
+ maxWidth: 2000,
+ maxHeight: 2000,
+ });
+ const originalRatio = 4000 / 2000;
+ const resultRatio = result.width / result.height;
+ assert(
+ Math.abs(originalRatio - resultRatio) < 0.01,
+ `Aspect ratio should be preserved: expected ${originalRatio}, got ${resultRatio}`,
+ );
+ });
+
+ it("should handle square images", () => {
+ const result = constrainImageSize({
+ width: 3000,
+ height: 3000,
+ maxWidth: 2000,
+ maxHeight: 2000,
+ });
+ assertEquals(result.width, 2000);
+ assertEquals(result.height, 2000);
+ });
+
+ it("should handle different max width and height", () => {
+ const result = constrainImageSize({
+ width: 4000,
+ height: 2000,
+ maxWidth: 1000,
+ maxHeight: 2000,
+ });
+ assertEquals(result.width, 1000);
+ assertEquals(result.height, 500);
+ });
+});
+
+t.describe("estimateDataUrlSize", (it) => {
+ it("should estimate size of a base64 data URL", () => {
+ // 4 base64 chars = 3 bytes
+ const dataUrl = "data:image/jpeg;base64,AAAA";
+ const size = estimateDataUrlSize(dataUrl);
+ assertEquals(size, 3);
+ });
+
+ it("should estimate larger data URLs", () => {
+ const base64 = "A".repeat(1000);
+ const dataUrl = `data:image/jpeg;base64,${base64}`;
+ const size = estimateDataUrlSize(dataUrl);
+ assertEquals(size, 750);
+ });
+});
+
+t.describe("dataUrlToBlob", (it) => {
+ it("should convert a JPEG data URL to a Blob", () => {
+ const dataUrl = "data:image/jpeg;base64,/9j/4AAQ";
+ const blob = dataUrlToBlob(dataUrl);
+ assertEquals(blob.type, "image/jpeg");
+ assert(blob.size > 0, "Blob should have content");
+ });
+
+ it("should convert a PNG data URL to a Blob", () => {
+ const dataUrl = "data:image/png;base64,iVBORw0KGgo=";
+ const blob = dataUrlToBlob(dataUrl);
+ assertEquals(blob.type, "image/png");
+ assert(blob.size > 0, "Blob should have content");
+ });
+
+ it("should produce a blob with the correct byte length", () => {
+ // "AQID" is base64 for bytes [1, 2, 3]
+ const dataUrl = "data:image/jpeg;base64,AQID";
+ const blob = dataUrlToBlob(dataUrl);
+ assertEquals(blob.size, 3);
+ });
+});
+
+await t.run();
diff --git a/tests/unit/specs/templates/profileCard.template.test.js b/tests/unit/specs/templates/profileCard.template.test.js
index a0a9012..072ace5 100644
--- a/tests/unit/specs/templates/profileCard.template.test.js
+++ b/tests/unit/specs/templates/profileCard.template.test.js
@@ -426,6 +426,68 @@ t.describe("profileCardTemplate - authentication states", (it) => {
);
});
+ it("should render edit profile button for current user", () => {
+ const profile = {
+ ...mockProfile,
+ viewer: { following: false, followedBy: false },
+ };
+ const result = profileCardTemplate({
+ profile,
+ isAuthenticated: true,
+ isCurrentUser: true,
+ onClickEditProfile: () => {},
+ });
+ const container = document.createElement("div");
+ render(result, container);
+ const editButton = container.querySelector(
+ "[data-testid='edit-profile-button']",
+ );
+ assert(editButton !== null);
+ assertEquals(editButton.textContent.trim(), "Edit Profile");
+ });
+
+ it("should not render edit profile button for other users", () => {
+ const profile = {
+ ...mockProfile,
+ viewer: { following: false, followedBy: false },
+ };
+ const result = profileCardTemplate({
+ profile,
+ isAuthenticated: true,
+ isCurrentUser: false,
+ onClickFollow: () => {},
+ });
+ const container = document.createElement("div");
+ render(result, container);
+ assertEquals(
+ container.querySelector("[data-testid='edit-profile-button']"),
+ null,
+ );
+ });
+
+ it("should call onClickEditProfile when edit button clicked", () => {
+ let editProfileCalled = false;
+ const profile = {
+ ...mockProfile,
+ viewer: { following: false, followedBy: false },
+ };
+ const result = profileCardTemplate({
+ profile,
+ isAuthenticated: true,
+ isCurrentUser: true,
+ onClickEditProfile: () => {
+ editProfileCalled = true;
+ },
+ });
+ const container = document.createElement("div");
+ render(result, container);
+ const editButton = container.querySelector(
+ "[data-testid='edit-profile-button']",
+ );
+ editButton.click();
+ assert(editProfileCalled);
+ });
+
it("should render chat button for authenticated user viewing other profile", () => {
const profile = {
...mockProfile,