HeuJung
0f0ef8fa8d
레이아웃 편집기 spec 중 저장(PUT)까지 수행하는 것들이 제품 화면에 편집 결과를 영속시켜, 실행할 때마다 개발 사이트에 노드가 누적됐다(home 에 빈 표 7개, 관리자 대시보드에 빈 차트 5개). spec 안에 "추가한 노드 삭제 후 재저장" 원복을 넣어도 소용이 없었다 — 원복 후에도 레이아웃이 오염 시점과 정확히 같은 크기로 되돌아왔다. 원복에 기대는 대신 저장 대상 자체를 E2E 전용 시드 화면으로 분리한다. 시드 화면은 활성 템플릿 디렉토리에만 설치되므로 배포 원본과 릴리스 산출물은 변하지 않는다. globalSetup 이 매 실행 fixture 원본으로 덮어써 회차 간 누적이 성립하지 않으므로 저장 spec 에 원복 절차가 필요 없다. 설치는 레이아웃 파일과 라우트, DB 행 세 가지를 함께 다루되 시드 행만 건드린다 — 전체 재동기화를 쓰면 편집기로 저장한(파일에 없는) 변경이 실행할 때마다 사라지기 때문이다. 전수 실행에서 드러난 기존 실패도 함께 처리했다. 35건 중 27건은 절전·부하 아티팩트였고 나머지는 원인을 확정해 고쳤다. 템플릿 식별자 자리에 모듈 id 를 넣어 라우트 트리가 비어 있었고, "캔버스 텍스트가 길어진다"는 대리 지표가 렌더 여부와 무관했으며(정상 렌더에도 짧아진다), 팔레트 삽입 위치가 잠금 서브트리 안이면 선택이 조상으로 밀려 노드를 지목할 수 없었고, 상태 개수 단언이 상태 추가로 낡았고, if 게이트상 그 탭에 등록되지 않는 소스를 refetch 하고 있었고, 무통신 구간이 오지 않는 관리자 화면에 networkidle 을 기다렸고, 테스트 종료 후 도착한 route 콜백이 워커를 중단시켰고, 같은 설정 화면에 저장하는 테스트들이 병렬로 충돌했다. 측정 방법에서 반복해 틀린 지점들은 E2E 가이드에 표로 남겼다 — 가림은 가시성 판정으로 잡히지 않고, 길이 증감은 렌더 신호가 아니며, 총 개수 단언은 스펙이 늘면 깨지고, networkidle 은 실시간 연결이 있는 화면에서 오지 않는다.
46 lines
2.8 KiB
TypeScript
46 lines
2.8 KiB
TypeScript
/**
|
|
* Layout Editor — 캔버스가 번들 editor-spec sampleData 로 데이터 의존 화면을 채우는지 회귀 가드.
|
|
*
|
|
* 배경:
|
|
* - PreviewCanvas 가 `useSampleData({ editorSpec: undefined })` 로 하드코딩되어,
|
|
* Phase 4 에서 도입한 번들 editor-spec.sampleData 가 캔버스 샘플 해소에 전혀 반영되지 않았다.
|
|
* 그 결과 상품 상세 등 데이터 의존 화면이 캔버스에서 빈 상태로 표시됐다(이미지 없음/가격 공백/"출시예정").
|
|
* - 수정: Chrome 이 주입하는 병합 spec 을 `useSampleData` 에 연결(`editorSpec: spec ?? undefined`).
|
|
* - 본 spec 은 sirsoft-basic 편집기에서 상품 상세 라우트를 선택하면 캔버스가 product 샘플로
|
|
* 채워져 가격(`원`) 텍스트가 나타나는지(= sampleData 가 실제 캔버스 바인딩을 채움) 검증한다.
|
|
* Vitest 는 JSON+격리 렌더, 본 spec 은 실제 편집기 chrome + 캔버스 통합 렌더.
|
|
*
|
|
* @scenario route_select:data_dependent + sample_provider_source:bundled_editor_spec
|
|
* @effects canvas_data_dependent_screen_filled_with_sample_data
|
|
* @effects preview_canvas_uses_merged_editor_spec_sampledata
|
|
*/
|
|
import { test, expect, issueToken, authenticatePage } from '../../fixtures/auth';
|
|
|
|
test.describe('@layout-editor 캔버스 샘플 데이터 렌더', () => {
|
|
test('sirsoft-basic — 상품 상세 라우트 선택 시 캔버스가 product 샘플로 채워진다', async ({ page }) => {
|
|
const tokenAuth = issueToken('core.templates.layouts.edit');
|
|
await authenticatePage(page, tokenAuth);
|
|
|
|
// 상품 상세 라우트의 파라미터명은 `:product_code` 다 — `:id` 라우트는 존재하지 않아
|
|
// 레이아웃이 해석되지 않고 캔버스가 끝내 뜨지 않는다.
|
|
await page.goto('/admin/layout-editor/sirsoft-basic?route=%2Fshop%2Fproducts%2F%3Aproduct_code');
|
|
await page.waitForLoadState('domcontentloaded', { timeout: 30_000 });
|
|
|
|
const canvas = page.getByTestId('g7le-preview-canvas');
|
|
await canvas.waitFor({ state: 'visible', timeout: 30_000 });
|
|
|
|
// product 샘플의 sales_status='on_sale' + selling_price_formatted 가 해소되면 가격(원)이 캔버스에 렌더된다.
|
|
// 회귀(editorSpec: undefined)였다면 product 가 빈 객체로 떨어져 "출시예정" 분기만 보이고 가격은 없다.
|
|
await expect
|
|
.poll(async () => (await canvas.innerText()).includes('원'), {
|
|
message: '상품 상세 캔버스에 가격(원) 이 렌더되어야 함 — product 샘플이 채워졌다는 신호',
|
|
timeout: 20_000,
|
|
})
|
|
.toBe(true);
|
|
|
|
// 회귀 신호인 "출시예정 상품" 만 단독으로 보이는 빈 상태가 아니어야 한다(가격이 함께 있으면 on_sale 분기 렌더).
|
|
const text = await canvas.innerText();
|
|
expect(text).toContain('원');
|
|
});
|
|
});
|