mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-08-24 15:22:20 +10:00
refactor(stylesheet): move Semantic CSS to the browser (#3329)
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user