refactor(stylesheet): move Semantic CSS to the browser (#3329)

This commit is contained in:
Amruth Pillai
2026-08-16 16:50:27 +02:00
committed by GitHub
parent f848e57436
commit 9509b5bc2e
203 changed files with 11838 additions and 14842 deletions
+2 -30
View File
@@ -30,14 +30,12 @@ export async function deleteE2EUser(account: E2EAccount) {
type SemanticStylesheetSeed = {
mode: "legacy" | "semantic";
source: { languageVersion: number; text: string };
applied: { languageVersion: number; text: string };
};
export async function updateSemanticCssFixture(
resumeId: string,
update: {
stylesheet?: SemanticStylesheetSeed;
bumpRevision?: boolean;
portableLayout?: "balanced" | "pagination-stress";
experienceItemId?: string;
legacyStyleRule?: boolean;
@@ -136,23 +134,9 @@ export async function updateSemanticCssFixture(
await pool.query(
`update "resume"
set data = $2,
stylesheet_revision = stylesheet_revision + $3,
render_data_version = render_data_version + $4,
updated_at = now()
where id = $1`,
[
resumeId,
data,
update.bumpRevision || update.stylesheet || update.legacyStyleRule ? 1 : 0,
update.stylesheet ||
update.portableLayout ||
update.experienceItemId ||
update.legacyStyleRule ||
update.hidePicture ||
update.basicsName
? 1
: 0,
],
[resumeId, data],
);
} finally {
await pool.end();
@@ -168,24 +152,12 @@ export async function readSemanticCssFixture(resumeId: string) {
basics?: { headline?: string };
metadata?: { stylesheet?: SemanticStylesheetSeed };
};
slug: string;
stylesheet_revision: number;
username: string;
}>(
`select r.data, r.slug, r.stylesheet_revision, u.username
from "resume" r
inner join "user" u on u.id = r.user_id
where r.id = $1`,
[resumeId],
);
}>(`select data from "resume" where id = $1`, [resumeId]);
const row = result.rows[0];
if (!row) throw new Error(`Resume ${resumeId} was not found.`);
return {
stylesheet: row.data.metadata?.stylesheet,
headline: row.data.basics?.headline,
revision: row.stylesheet_revision,
slug: row.slug,
username: row.username,
};
} finally {
await pool.end();
+4 -15
View File
@@ -1,4 +1,4 @@
import type { Download, Locator, Page, TestInfo } from "@playwright/test";
import type { Locator, Page, TestInfo } from "@playwright/test";
import { expect } from "@playwright/test";
import { updateSemanticCssFixture } from "./db";
import { ACTIVE_PREVIEW_PAGE_SELECTOR, activePreviewPageSelector, readPreviewPageDataUrl } from "./preview";
@@ -12,7 +12,6 @@ const EMPTY_SEMANTIC_STYLESHEET = {
type SemanticStylesheetSeed = {
mode: "semantic";
source: { languageVersion: number; text: string };
applied: { languageVersion: number; text: string };
};
export const PORTABLE_STYLESHEET = `@version 1;
@@ -85,7 +84,6 @@ export async function seedSemanticCssResume(
stylesheet = {
mode: "semantic",
source: EMPTY_SEMANTIC_STYLESHEET,
applied: EMPTY_SEMANTIC_STYLESHEET,
},
}: {
basicsName?: string;
@@ -104,7 +102,7 @@ export async function seedSemanticCssResume(
});
await page.reload();
await openSemanticCssEditor(page);
await waitForStylesheetStatus(page, "Applied");
await waitForStylesheetStatus(page, "Valid");
}
export async function openSemanticCssEditor(page: Page) {
@@ -125,7 +123,7 @@ export function readStylesheetSource(page: Page) {
);
}
export async function waitForStylesheetStatus(page: Page, status: string) {
async function waitForStylesheetStatus(page: Page, status: string) {
await expect(page.getByText(status, { exact: true }).filter({ visible: true }).last()).toBeVisible({
timeout: 30_000,
});
@@ -135,7 +133,7 @@ export async function activateStylesheet(page: Page) {
const button = page.getByRole("button", { name: "Activate Semantic CSS" });
await expect(button).toBeEnabled({ timeout: 30_000 });
await button.click();
await waitForStylesheetStatus(page, "Applied");
await waitForStylesheetStatus(page, "Valid");
}
async function firstPreviewPage(page: Page, selector = ACTIVE_PREVIEW_PAGE_SELECTOR): Promise<Locator> {
@@ -180,12 +178,3 @@ export async function switchTemplate(page: Page, template: string) {
}
await waitForStablePreview(page, targetPreview);
}
export async function downloadPdf(page: Page): Promise<Download> {
await page.getByRole("button", { name: "Download options" }).click();
const dialog = page.getByRole("dialog", { name: "Download" });
await expect(dialog).toBeVisible();
const download = page.waitForEvent("download");
await dialog.getByRole("button", { name: "Download PDF" }).click();
return download;
}