105 lines
4.9 KiB
TypeScript
105 lines
4.9 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test';
|
|
import { gamePath } from './gameTestPaths.js';
|
|
|
|
const currentCommitSha = process.env.PLAYWRIGHT_BUILD_COMMIT_SHA ?? '0123456789abcdef0123456789abcdef01234567';
|
|
const nextCommitSha = '89abcdef0123456789abcdef0123456789abcdef';
|
|
const noticeMessage = '새 버전이 준비되었습니다. 새로고침하면 변경사항이 반영됩니다.';
|
|
|
|
const installVersionFixture = async (page: Page) => {
|
|
let availableCommitSha = currentCommitSha;
|
|
let requests = 0;
|
|
const requestUrls: string[] = [];
|
|
await page.route('**/deployment-version.json', async (route) => {
|
|
requests += 1;
|
|
requestUrls.push(route.request().url());
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ commitSha: availableCommitSha }),
|
|
});
|
|
});
|
|
return {
|
|
deployNextVersion: () => {
|
|
availableCommitSha = nextCommitSha;
|
|
},
|
|
requestCount: () => requests,
|
|
requestUrls: () => requestUrls,
|
|
};
|
|
};
|
|
|
|
test('revalidates the stable production version URL with the browser-managed ETag', async ({ page }) => {
|
|
test.skip(process.env.PLAYWRIGHT_FRONTEND_MODE !== 'production', 'Vite production ETag is required.');
|
|
const requests: Array<Promise<{ url: string; ifNoneMatch: string | null }>> = [];
|
|
const responseStatuses: number[] = [];
|
|
page.on('request', (request) => {
|
|
if (!new URL(request.url()).pathname.endsWith('/deployment-version.json')) return;
|
|
requests.push(
|
|
request.headerValue('if-none-match').then((ifNoneMatch) => ({
|
|
url: request.url(),
|
|
ifNoneMatch,
|
|
}))
|
|
);
|
|
});
|
|
page.on('response', (response) => {
|
|
if (!new URL(response.url()).pathname.endsWith('/deployment-version.json')) return;
|
|
responseStatuses.push(response.status());
|
|
});
|
|
|
|
await page.goto(gamePath('/version-notice-etag-fixture'));
|
|
await expect.poll(() => requests.length).toBeGreaterThan(0);
|
|
await expect.poll(() => responseStatuses.length).toBeGreaterThan(0);
|
|
const completedResponses = responseStatuses.length;
|
|
await page.evaluate(() => window.dispatchEvent(new Event('online')));
|
|
await expect.poll(() => requests.length).toBeGreaterThan(1);
|
|
await expect.poll(() => responseStatuses.length).toBeGreaterThan(completedResponses);
|
|
const requestDetails = await Promise.all(requests);
|
|
|
|
expect(new Set(requestDetails.map(({ url }) => url))).toEqual(
|
|
new Set([new URL('deployment-version.json', page.url()).toString()])
|
|
);
|
|
expect(requestDetails[0]?.ifNoneMatch).toBeNull();
|
|
expect(requestDetails.slice(1).some(({ ifNoneMatch }) => Boolean(ifNoneMatch))).toBe(true);
|
|
// Chromium exposes a successfully revalidated cached response to Fetch as the usable 200 response.
|
|
expect(responseStatuses.every((status) => status === 200)).toBe(true);
|
|
});
|
|
|
|
for (const viewport of [
|
|
{ name: 'desktop', width: 1280, height: 800 },
|
|
{ name: 'mobile', width: 390, height: 844 },
|
|
]) {
|
|
test(`shows one quiet update toast without forcing reload on ${viewport.name}`, async ({ page }) => {
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
|
const fixture = await installVersionFixture(page);
|
|
await page.goto(gamePath('/version-notice-fixture'));
|
|
await expect(page.getByRole('heading', { name: 'Not Found' })).toBeVisible();
|
|
await expect.poll(fixture.requestCount).toBeGreaterThan(0);
|
|
expect(fixture.requestUrls().every((url) => new URL(url).search === '')).toBe(true);
|
|
await page.evaluate(() => {
|
|
Object.assign(window, { __versionNoticePageMarker: 'kept' });
|
|
});
|
|
|
|
fixture.deployNextVersion();
|
|
await expect
|
|
.poll(async () => {
|
|
await page.evaluate(() => window.dispatchEvent(new Event('online')));
|
|
return fixture.requestCount();
|
|
})
|
|
.toBeGreaterThan(1);
|
|
const toast = page.getByTestId('game-toast').filter({ hasText: noticeMessage });
|
|
await expect(toast).toBeVisible();
|
|
await expect(toast).toHaveAttribute('data-feedback-kind', 'info');
|
|
await expect(toast).toHaveCSS('transform', 'none');
|
|
const box = await toast.boundingBox();
|
|
expect(box).not.toBeNull();
|
|
expect(box!.x).toBeGreaterThanOrEqual(0);
|
|
expect(box!.y).toBeGreaterThanOrEqual(0);
|
|
expect(box!.x + box!.width).toBeLessThanOrEqual(viewport.width);
|
|
expect(box!.y + box!.height).toBeLessThanOrEqual(viewport.height);
|
|
expect(await page.evaluate(() => Reflect.get(window, '__versionNoticePageMarker'))).toBe('kept');
|
|
|
|
await page.getByRole('button', { name: '알림 닫기' }).click();
|
|
await page.evaluate(() => window.dispatchEvent(new Event('online')));
|
|
await expect(toast).toHaveCount(0);
|
|
});
|
|
}
|