1
0
forked from baron/baron-sso

ci: add code check badges and coverage reports

This commit is contained in:
2026-05-29 12:05:43 +09:00
parent c489c7c38f
commit a830242947
164 changed files with 9059 additions and 2012 deletions

View File

@@ -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"),
);
});
});