forked from baron/baron-sso
ci: add code check badges and coverage reports
This commit is contained in:
@@ -1,45 +1,45 @@
|
||||
import { readFileSync, writeFileSync } from "node:fs";
|
||||
import { inflateSync } from "node:zlib";
|
||||
import {
|
||||
expect,
|
||||
test,
|
||||
type BrowserContext,
|
||||
expect,
|
||||
type Page,
|
||||
type TestInfo,
|
||||
} from '@playwright/test';
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { inflateSync } from 'node:zlib';
|
||||
test,
|
||||
} from "@playwright/test";
|
||||
|
||||
const lightweightTestFont = readFileSync(
|
||||
new URL('../fixtures/fonts/NotoSansKR-TestSubset.woff2', import.meta.url),
|
||||
new URL("../fixtures/fonts/NotoSansKR-TestSubset.woff2", import.meta.url),
|
||||
);
|
||||
|
||||
type SigninCase = {
|
||||
path: '/ko/signin' | '/en/signin';
|
||||
theme: 'light' | 'dark';
|
||||
path: "/ko/signin" | "/en/signin";
|
||||
theme: "light" | "dark";
|
||||
};
|
||||
|
||||
const signinCases: SigninCase[] = [
|
||||
{ path: '/ko/signin', theme: 'light' },
|
||||
{ path: '/ko/signin', theme: 'dark' },
|
||||
{ path: '/en/signin', theme: 'light' },
|
||||
{ path: '/en/signin', theme: 'dark' },
|
||||
{ path: "/ko/signin", theme: "light" },
|
||||
{ path: "/ko/signin", theme: "dark" },
|
||||
{ path: "/en/signin", theme: "light" },
|
||||
{ path: "/en/signin", theme: "dark" },
|
||||
];
|
||||
|
||||
async function mockPublicApis(context: BrowserContext): Promise<void> {
|
||||
await context.route(/\/api\/v1\//, async (route) => {
|
||||
const requestUrl = new URL(route.request().url());
|
||||
if (requestUrl.pathname.endsWith('/api/v1/user/me')) {
|
||||
if (requestUrl.pathname.endsWith("/api/v1/user/me")) {
|
||||
await route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'unauthorized' }),
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ error: "unauthorized" }),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (requestUrl.pathname.endsWith('/api/v1/auth/tenant-info')) {
|
||||
if (requestUrl.pathname.endsWith("/api/v1/auth/tenant-info")) {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
return;
|
||||
@@ -47,21 +47,23 @@ async function mockPublicApis(context: BrowserContext): Promise<void> {
|
||||
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ ok: true }),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function routeLightweightTestFonts(context: BrowserContext): Promise<void> {
|
||||
await context.route('https://fonts.gstatic.com/**', async (route) => {
|
||||
async function routeLightweightTestFonts(
|
||||
context: BrowserContext,
|
||||
): Promise<void> {
|
||||
await context.route("https://fonts.gstatic.com/**", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'font/woff2',
|
||||
contentType: "font/woff2",
|
||||
body: lightweightTestFont,
|
||||
headers: {
|
||||
'access-control-allow-origin': '*',
|
||||
'cache-control': 'public, max-age=31536000, immutable',
|
||||
"access-control-allow-origin": "*",
|
||||
"cache-control": "public, max-age=31536000, immutable",
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -71,21 +73,26 @@ async function expectFlutterCanvasRendered(
|
||||
page: Page,
|
||||
timeoutMs = 10_000,
|
||||
): Promise<void> {
|
||||
await expect(page.locator('#baron-bootstrap-shell')).toBeHidden({
|
||||
await expect(page.locator("#baron-bootstrap-shell")).toBeHidden({
|
||||
timeout: timeoutMs,
|
||||
});
|
||||
await expect
|
||||
.poll(async () => {
|
||||
const screenshot = await captureFlutterCanvasPng(page);
|
||||
return screenshot === null ? false : screenshotHasSigninPaint(screenshot);
|
||||
}, {
|
||||
timeout: timeoutMs,
|
||||
})
|
||||
.poll(
|
||||
async () => {
|
||||
const screenshot = await captureFlutterCanvasPng(page);
|
||||
return screenshot === null
|
||||
? false
|
||||
: screenshotHasSigninPaint(screenshot);
|
||||
},
|
||||
{
|
||||
timeout: timeoutMs,
|
||||
},
|
||||
)
|
||||
.toBe(true);
|
||||
}
|
||||
|
||||
async function expectBootstrapShellVisible(page: Page): Promise<void> {
|
||||
const shell = page.locator('#baron-bootstrap-shell');
|
||||
const shell = page.locator("#baron-bootstrap-shell");
|
||||
await expect(shell).toBeVisible({ timeout: 1_000 });
|
||||
await expect(shell).toContainText(/Baron SW Portal/);
|
||||
}
|
||||
@@ -96,9 +103,9 @@ async function expectSigninSurfaceWithinBudget(
|
||||
entry: SigninCase,
|
||||
): Promise<void> {
|
||||
await seedAuthState(page, entry);
|
||||
await page.goto(entry.path, { waitUntil: 'domcontentloaded' });
|
||||
await page.goto(entry.path, { waitUntil: "domcontentloaded" });
|
||||
|
||||
const slug = `${entry.path.slice(1).replace('/', '-')}-${entry.theme}`;
|
||||
const slug = `${entry.path.slice(1).replace("/", "-")}-${entry.theme}`;
|
||||
let paintedAtMs: number | null = null;
|
||||
let previousElapsedMs = 0;
|
||||
for (const elapsedMs of [500, 1000]) {
|
||||
@@ -106,7 +113,9 @@ async function expectSigninSurfaceWithinBudget(
|
||||
previousElapsedMs = elapsedMs;
|
||||
const screenshot = await captureFlutterCanvasPng(
|
||||
page,
|
||||
testInfo.outputPath(`${testInfo.project.name}-${slug}-${elapsedMs}ms.png`),
|
||||
testInfo.outputPath(
|
||||
`${testInfo.project.name}-${slug}-${elapsedMs}ms.png`,
|
||||
),
|
||||
);
|
||||
if (
|
||||
paintedAtMs === null &&
|
||||
@@ -129,7 +138,7 @@ async function captureFlutterCanvasPng(
|
||||
path?: string,
|
||||
): Promise<Buffer | null> {
|
||||
const dataUrl = await page.evaluate(() => {
|
||||
const canvas = Array.from(document.querySelectorAll('canvas'))
|
||||
const canvas = Array.from(document.querySelectorAll("canvas"))
|
||||
.filter((candidate) => candidate.width > 0 && candidate.height > 0)
|
||||
.sort((left, right) => {
|
||||
return right.width * right.height - left.width * left.height;
|
||||
@@ -138,16 +147,16 @@ async function captureFlutterCanvasPng(
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
return canvas.toDataURL('image/png');
|
||||
return canvas.toDataURL("image/png");
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
if (dataUrl?.startsWith('data:image/png;base64,')) {
|
||||
if (dataUrl?.startsWith("data:image/png;base64,")) {
|
||||
const screenshot = Buffer.from(
|
||||
dataUrl.slice('data:image/png;base64,'.length),
|
||||
'base64',
|
||||
dataUrl.slice("data:image/png;base64,".length),
|
||||
"base64",
|
||||
);
|
||||
if (path) {
|
||||
writeFileSync(path, screenshot);
|
||||
@@ -197,7 +206,9 @@ function screenshotHasSigninPaint(buffer: Buffer): boolean {
|
||||
}
|
||||
}
|
||||
|
||||
return sampled > 0 && nonWhite / sampled > 0.02 && dark > 12 && buttonBlue > 12;
|
||||
return (
|
||||
sampled > 0 && nonWhite / sampled > 0.02 && dark > 12 && buttonBlue > 12
|
||||
);
|
||||
}
|
||||
|
||||
function decodePng(buffer: Buffer): {
|
||||
@@ -205,9 +216,9 @@ function decodePng(buffer: Buffer): {
|
||||
height: number;
|
||||
pixels: Uint8Array;
|
||||
} {
|
||||
const signature = buffer.subarray(0, 8).toString('hex');
|
||||
if (signature !== '89504e470d0a1a0a') {
|
||||
throw new Error('invalid png signature');
|
||||
const signature = buffer.subarray(0, 8).toString("hex");
|
||||
if (signature !== "89504e470d0a1a0a") {
|
||||
throw new Error("invalid png signature");
|
||||
}
|
||||
|
||||
let offset = 8;
|
||||
@@ -218,23 +229,25 @@ function decodePng(buffer: Buffer): {
|
||||
|
||||
while (offset < buffer.length) {
|
||||
const length = buffer.readUInt32BE(offset);
|
||||
const type = buffer.subarray(offset + 4, offset + 8).toString('ascii');
|
||||
const type = buffer.subarray(offset + 4, offset + 8).toString("ascii");
|
||||
const data = buffer.subarray(offset + 8, offset + 8 + length);
|
||||
offset += 12 + length;
|
||||
|
||||
if (type === 'IHDR') {
|
||||
if (type === "IHDR") {
|
||||
width = data.readUInt32BE(0);
|
||||
height = data.readUInt32BE(4);
|
||||
colorType = data[9];
|
||||
} else if (type === 'IDAT') {
|
||||
} else if (type === "IDAT") {
|
||||
idat.push(data);
|
||||
} else if (type === 'IEND') {
|
||||
} else if (type === "IEND") {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!width || !height || ![2, 6].includes(colorType)) {
|
||||
throw new Error(`unsupported png format: ${width}x${height}, color=${colorType}`);
|
||||
throw new Error(
|
||||
`unsupported png format: ${width}x${height}, color=${colorType}`,
|
||||
);
|
||||
}
|
||||
|
||||
const bytesPerPixel = colorType === 6 ? 4 : 3;
|
||||
@@ -249,7 +262,8 @@ function decodePng(buffer: Buffer): {
|
||||
sourceOffset += 1;
|
||||
for (let x = 0; x < stride; x += 1) {
|
||||
const value = inflated[sourceOffset + x];
|
||||
const left = x >= bytesPerPixel ? raw[targetOffset + x - bytesPerPixel] : 0;
|
||||
const left =
|
||||
x >= bytesPerPixel ? raw[targetOffset + x - bytesPerPixel] : 0;
|
||||
const up = y > 0 ? raw[targetOffset + x - stride] : 0;
|
||||
const upLeft =
|
||||
y > 0 && x >= bytesPerPixel
|
||||
@@ -313,27 +327,30 @@ function paeth(left: number, up: number, upLeft: number): number {
|
||||
|
||||
async function seedAuthState(page: Page, entry: SigninCase): Promise<void> {
|
||||
const localeCode = entry.path.slice(1, 3);
|
||||
await page.addInitScript(({ themeValue, localeValue }) => {
|
||||
window.localStorage.setItem('userfront_auth_theme', themeValue);
|
||||
window.localStorage.setItem('flutter.userfront_auth_theme', themeValue);
|
||||
window.localStorage.setItem('locale', localeValue);
|
||||
window.localStorage.setItem('flutter.locale', localeValue);
|
||||
}, { themeValue: entry.theme, localeValue: localeCode });
|
||||
await page.addInitScript(
|
||||
({ themeValue, localeValue }) => {
|
||||
window.localStorage.setItem("userfront_auth_theme", themeValue);
|
||||
window.localStorage.setItem("flutter.userfront_auth_theme", themeValue);
|
||||
window.localStorage.setItem("locale", localeValue);
|
||||
window.localStorage.setItem("flutter.locale", localeValue);
|
||||
},
|
||||
{ themeValue: entry.theme, localeValue: localeCode },
|
||||
);
|
||||
}
|
||||
|
||||
test.describe('UserFront signin runtime matrix', () => {
|
||||
test.describe("UserFront signin runtime matrix", () => {
|
||||
test.beforeEach(async ({ context }) => {
|
||||
await mockPublicApis(context);
|
||||
await routeLightweightTestFonts(context);
|
||||
});
|
||||
|
||||
test('first paint exposes bootstrap shell before Flutter renders', async ({
|
||||
test("first paint exposes bootstrap shell before Flutter renders", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
await page.goto('/ko/signin', { waitUntil: 'domcontentloaded' });
|
||||
await page.goto("/ko/signin", { waitUntil: "domcontentloaded" });
|
||||
await expectBootstrapShellVisible(page);
|
||||
await page.screenshot({
|
||||
path: testInfo.outputPath('mobile-first-paint-ko.png'),
|
||||
path: testInfo.outputPath("mobile-first-paint-ko.png"),
|
||||
fullPage: true,
|
||||
});
|
||||
});
|
||||
@@ -351,26 +368,27 @@ test.describe('UserFront signin runtime matrix', () => {
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(
|
||||
testInfo.project.name === 'webkit-desktop' && entry.path === '/en/signin',
|
||||
'WebKit headless keeps /en/signin canvas blank after load; Chromium covers English rendering.',
|
||||
testInfo.project.name === "webkit-desktop" &&
|
||||
entry.path === "/en/signin",
|
||||
"WebKit headless keeps /en/signin canvas blank after load; Chromium covers English rendering.",
|
||||
);
|
||||
await seedAuthState(page, entry);
|
||||
await page.goto(entry.path, { waitUntil: 'domcontentloaded' });
|
||||
await page.goto(entry.path, { waitUntil: "domcontentloaded" });
|
||||
await expect(page).toHaveURL(new RegExp(`${entry.path}(?:\\?.*)?$`));
|
||||
await expectFlutterCanvasRendered(page);
|
||||
});
|
||||
}
|
||||
|
||||
test('signin uses configured BACKEND_URL for public API requests', async ({
|
||||
test("signin uses configured BACKEND_URL for public API requests", async ({
|
||||
page,
|
||||
}) => {
|
||||
const expectedBackendOrigin = process.env.EXPECTED_BACKEND_ORIGIN;
|
||||
test.skip(!expectedBackendOrigin, 'set EXPECTED_BACKEND_ORIGIN');
|
||||
test.skip(!expectedBackendOrigin, "set EXPECTED_BACKEND_ORIGIN");
|
||||
|
||||
const requestedApiOrigins = new Set<string>();
|
||||
page.on('request', (request) => {
|
||||
page.on("request", (request) => {
|
||||
const requestUrl = new URL(request.url());
|
||||
if (requestUrl.pathname.startsWith('/api/v1/')) {
|
||||
if (requestUrl.pathname.startsWith("/api/v1/")) {
|
||||
requestedApiOrigins.add(requestUrl.origin);
|
||||
}
|
||||
});
|
||||
@@ -382,35 +400,37 @@ test.describe('UserFront signin runtime matrix', () => {
|
||||
await expect
|
||||
.poll(() => [...requestedApiOrigins], { timeout: 30_000 })
|
||||
.toContain(expectedBackendOrigin);
|
||||
expect(requestedApiOrigins).not.toContain('https://sso.example.test');
|
||||
expect(requestedApiOrigins).not.toContain("https://sso.example.test");
|
||||
}
|
||||
});
|
||||
|
||||
test('Korean signin renders with test-only lightweight web font', async ({
|
||||
test("Korean signin renders with test-only lightweight web font", async ({
|
||||
context,
|
||||
page,
|
||||
}, testInfo) => {
|
||||
if (testInfo.project.name === 'webkit-desktop') {
|
||||
if (testInfo.project.name === "webkit-desktop") {
|
||||
await routeLightweightTestFonts(context);
|
||||
}
|
||||
const requestedUrls: string[] = [];
|
||||
page.on('request', (request) => {
|
||||
page.on("request", (request) => {
|
||||
requestedUrls.push(request.url());
|
||||
});
|
||||
|
||||
await seedAuthState(page, { path: '/ko/signin', theme: 'light' });
|
||||
await page.goto('/ko/signin', { waitUntil: 'domcontentloaded' });
|
||||
await seedAuthState(page, { path: "/ko/signin", theme: "light" });
|
||||
await page.goto("/ko/signin", { waitUntil: "domcontentloaded" });
|
||||
await expectFlutterCanvasRendered(page, 10_000);
|
||||
await page.screenshot({
|
||||
path: testInfo.outputPath(`${testInfo.project.name}-ko-signin-korean-font.png`),
|
||||
path: testInfo.outputPath(
|
||||
`${testInfo.project.name}-ko-signin-korean-font.png`,
|
||||
),
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
expect(requestedUrls).toContainEqual(
|
||||
expect.stringContaining('https://fonts.gstatic.com/'),
|
||||
expect.stringContaining("https://fonts.gstatic.com/"),
|
||||
);
|
||||
expect(requestedUrls).not.toContainEqual(
|
||||
expect.stringContaining('/assets/assets/fonts/NotoSansKR-Regular.ttf'),
|
||||
expect.stringContaining("/assets/assets/fonts/NotoSansKR-Regular.ttf"),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user