penpot/frontend/playwright/ui/specs/workspace-shared-library.spec.js
Andrés Moya 3cd9bfa9de
Add sync with design tokens in external libraries (#10293)
*  Auto link tokens when adding external libraries (provisional)

* 🔧 Refactor tokens-lib initialization

* 🔧 Add separated TokenStatus to store status apart of TokensLib

* 🔧 Make all status operations use the new data structure

* 🔧 Normalize status helper functions and access token sets by id

* 🔧 Rename :tokens-file to :tokens-source

* 🎉 Allow the user to choose the tokens-source of a file

* 🎉 Make tokens library readonly when it's in an external file

* 🎉 Show tokens in library summaries

* 🎉 Show source info in sidebar

* 🔧 Fix integration tests

* 🐛 Propagate changes of token values in external library

* 🎉 Layout updates

* 🔧 Refactor tokens source calculations

* 🔧 Add harder checks for nil or empty values in everything

* 🐛 Fix some integration tests

* 🔧 Add integration tests for tokens in external libs

* 🔧 Validate and repair missing tokens status

* 🎉 Make ui changes optional with config flag

* 🐛 Propagate tokens after synchronizing components in ext library

* 🐛 Propagate tokens after creating new instances

* 🐛 Propagate tokens after synchronizing tokens in ext library

* 🐛 Add a tokens source icon to libraries section (#11439)

* 🐛 Add a tokens source icon to libraries section

* 🐛 Fix ellipsis on library names

* ♻️ Remove code under flag on legacy component

* 🐛 Fix token theme name on inspect tab

* 🎉 Add changes notification (#11476)

* 🎉 Add changes notification

* ♻️ Change fn names

* 🐛 Fix tokens source label truncation and missing translations (#11533)

* 🐛 Fix tokens source label truncation and missing translations

The tokens source file name always showed, even for the current file,
and long names wrapped onto a second line instead of truncating
because the header used flex-wrap and overflow-wrap: break-word
instead of single-line ellipsis.

Show the source row unconditionally (it now displays "This file" when
the source is the current file, matching the connected-library case),
truncate the file name to one line with an ellipsis, and only attach a
tooltip with the full name when the text is actually truncated.

Replace the hardcoded UI strings with translated ones and add their
English and Spanish entries.

AI-assisted-by: claude-sonnet-5

* 🐛 Remove redundant effect dependency in tokens source

file-name-truncated? was listed as a dependency of the with-effect
that checks and observes label truncation, even though it isn't
read inside the effect body. Since the effect itself flips that
state via check-file-name-truncated, including it as a dependency
caused the ResizeObserver to be needlessly disconnected and
reconnected on every truncation change.

AI-assisted-by: claude-sonnet-5

* 🐛 Fix small visual error

* 🐛 Fix problem with plugins

* 🐛 Fix playwright tests

---------

Co-authored-by: Eva Marco <evamarcod@gmail.com>
Co-authored-by: Eva Marco <eva.marco@kaleidos.net>
Co-authored-by: alonso.torres <alonso.torres@kaleidos.net>
2026-09-21 15:37:45 +02:00

165 lines
5.0 KiB
JavaScript

import { test, expect } from "@playwright/test";
import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
const mainFileId = "3622460c-3408-81e2-8005-2fd0e55888b7";
const sharedFileId = "3622460c-3408-81e2-8005-2fc938010233";
const mainPageId = "3622460c-3408-81e2-8005-2fd0e55888b8";
const mainFileFragmentId1 = "6777aca0-5737-8169-8005-33b1ab0bcf8a";
const mainFileFragmentId2 = "6777aca0-5737-8169-8005-33b3eb8de897";
const sharedFileFragmentId1 = "3622460c-3408-81e2-8005-31859c15ff91";
const sharedFileFragmentId2 = "3622460c-3408-81e2-8005-31859c15ff90";
test.beforeEach(async ({ page }) => {
await WasmWorkspacePage.init(page);
});
// Fix for https://tree.taiga.io/project/penpot/issue/9042
test("Bug 9056 - 'More info' doesn't open the update tab", async ({ page }) => {
const workspacePage = new WasmWorkspacePage(page);
await workspacePage.setupEmptyFile(page);
await workspacePage.mockRPC(
/get\-file\?id=3622460c-3408-81e2-8005-2fd0e55888b7/,
"workspace/get-file-9056_main.json",
);
await workspacePage.mockRPC(
/get\-file\?id=3622460c-3408-81e2-8005-2fc938010233/,
"workspace/get-file-9056_shared.json",
);
await workspacePage.mockRPC(
"get-file-libraries?file-id=*",
"workspace/get-file-libraries-9056.json",
);
await workspacePage.mockRPC(
`get-file-fragment?file-id=${mainFileId}&fragment-id=${mainFileFragmentId1}`,
"workspace/get-file-fragment-9056_main-1.json",
);
await workspacePage.mockRPC(
`get-file-fragment?file-id=${mainFileId}&fragment-id=${mainFileFragmentId2}`,
"workspace/get-file-fragment-9056_main-2.json",
);
await workspacePage.mockRPC(
`get-file-fragment?file-id=${sharedFileId}&fragment-id=${sharedFileFragmentId1}`,
"workspace/get-file-fragment-9056_shared-1.json",
);
await workspacePage.mockRPC(
`get-file-fragment?file-id=${sharedFileId}&fragment-id=${sharedFileFragmentId2}`,
"workspace/get-file-fragment-9056_shared-2.json",
);
await workspacePage.goToWorkspace({
fileId: mainFileId,
pageId: mainPageId,
});
await workspacePage.mockRPC(
"get-team-shared-files?team-id=*",
"workspace/get-team-shared-files-9056.json",
);
await page.getByRole("button", { name: "More info" }).click();
await expect(page.getByRole("tabpanel", { name: "UPDATES" })).toHaveText(
/library updates/i,
);
});
test("Bug 10113 - Empty library modal for non-empty library", async ({
page,
}) => {
const workspace = new WasmWorkspacePage(page);
await workspace.setupEmptyFile(page);
await workspace.mockRPC(/get\-file\?/, "workspace/get-file-10113.json");
await workspace.mockRPC(
"get-file-fragment?file-id=*&fragment-id=*",
"workspace/get-file-fragment-10113.json",
);
await workspace.mockRPC(/get\-file\?/, "workspace/get-file-10113.json");
await workspace.mockRPC(
"get-team-shared-files?team-id=*",
"workspace/get-team-shared-files-empty.json",
);
await workspace.mockRPC(
"set-file-shared",
"workspace/set-file-shared-10113.json",
);
await workspace.goToWorkspace({
fileId: "5b7ebd2b-2907-80db-8005-b9d67c20cf2e",
pageId: "5b7ebd2b-2907-80db-8005-b9d67c20cf2f",
});
await workspace.clickAssets();
await workspace.openLibrariesModal();
await workspace.librariesModal
.getByRole("button", { name: "Publish" })
.click();
await expect(
workspace.page.getByText("Publish empty library"),
).not.toBeVisible();
});
test("BUG 14214 - Updates tab refreshes after syncing a freshly linked library", async ({
page,
}) => {
const workspace = new WasmWorkspacePage(page);
await workspace.setupEmptyFile(page);
await workspace.mockRPC(
new RegExp(`get\\-file\\?id=${mainFileId}`),
"workspace/get-file-14214_main.json",
);
await workspace.mockRPC(
new RegExp(`get\\-file\\?id=${sharedFileId}`),
"workspace/get-file-14214_shared.json",
);
await workspace.mockRPC(
"get-file-libraries?file-id=*",
"workspace/get-file-libraries-14214.json",
);
await workspace.mockRPC(
"get-team-shared-files?team-id=*",
"workspace/get-team-shared-files-14214.json",
);
await workspace.mockRPC(
"link-file-to-library",
"workspace/link-file-to-library.json",
);
await workspace.goToWorkspace({ fileId: mainFileId, pageId: mainPageId });
// Open the library modal
await workspace.clickAssets();
await workspace.openLibrariesModal();
// Switch to the Libraries tab
await workspace.librariesModal.getByRole("tab", { name: "Libraries" }).click();
await workspace.librariesModal
.getByRole("button", { name: "Connect library" })
.click();
// Switch to the Updates tab — the library should appear as needing update.
await workspace.librariesModal.getByRole("tab", { name: "Updates" }).click();
const updatesPanel = workspace.librariesModal.getByRole("tabpanel", {
name: "UPDATES",
});
await updatesPanel.getByRole("button", { name: "Update" }).click();
await expect(
updatesPanel.getByText("There are no Shared Libraries that need update"),
).toBeVisible();
});