(async ({ user }) => {
return {
// 프리즈마 클라이언트를 래핑한 함수를 통해 데이터베이스에서 데이터를 취득
profile: await getMyProfileEdit({ id: user.id }),
authorName: user.name // 제목에 사용할 유저명을 Props에 포함시킴
}
})
```
#### 프로필 정보를 갱신하는 API Routes
* Next.js는 API Routes라는 웹 API 구현 기능을 제공함
* UI를 조작해 비동기로 데이터를 취득하거나 갱신하는 요청을 받았을 때 서버 프로세스에서 작업을 처리하여 JSON 같은 형식으로 API 응답을 반환한다.
* "대부분 코드가 프리즈마 의존성있는 코드라 일단 스킵"
```typescript
import { expect, test } from '@playwright/test';
import { UserName } from '../prisma/fixtures/user';
import { login, url } from './util';
test.describe("프로필 편집 페이지", () => {
const path = "/my/profile/edit";
const userName: UserName = "User-MyProfileEdit";
const newName = "NewName";
test("프로필을 편집하면 프로필에 반영된다.", async ({ page }) => {
await page.goto(url(path));
await login({ page, userName });
// 여서부터 프로필 편집 화면
await expect(page).toHaveURL(url(path));
await expect(page).toHaveTitle(`${userName}님의 프로필 편집`);
await page.getByRole("textbox", { name: "사용자명" }).fill(newName);
await page.getByRole("button", { name: "프로필 변경하기" }).click();
await page.waitForURL(url("/my/posts"));
// 페이지 제목에 방금 입력한 이름이 포함됨
await expect(page).toHaveTitle(`${newName}님의 기사 목록`);
await expect(page.getByRole("region", { name: 프로필" })).toContainText(newName);
await expect(page.locator("[aria-label='로그인한 사용자']")).toContainText(newName);
})
})
```
### Like 기능 E2E 테스트
* 기획
* 로그인한 사용자만 Like를 누를 수 있다.
* 단, 자신이 작성한 기사에는 누를 수 없다.
* 검증
* 다른 사람이 작성한 기사에는 Like를 누를 수 있어야 한다.
* 자신의 기사에는 Like를 누를 수 없어야 한다.
#### 다른 사람이 작성한 기사에는 Like 버튼을 누를 수 있어야 한다.
```typescript
test("다른 사람의 기사에는 Like 할 수 있다.", async ({ page }) => {
await page.goto(url("/login"));
await login({ page, userName: "Jpub" });
await expect(page).toHaveURL(url("/"));
// 여기서부터 기사 목록 페이지
await page.goto(url("/posts/10"));
const buttonLike = page.getByRole("button", { name: "Like" });
const buttonText = page.getByTestId("likeStatus");
// like 버튼이 활성화되고, 현재 Like 수는 0
await expect(buttonLike).toBeEnabled();
await expect(buttonLike).toHaveText("0");
await expect(buttonText).toHaveText("Like");
await buttonLike.click();
// like를 클릭하면 카운트가 1증가하고 이미 like 누른 상태가 된다.
await expect(buttonLike).toHaveText("1");
await expect(buttonText).toHaveText("Liked");
})
```
#### 본인이 작성한 기사에는 like 버튼을 누를 수 없다.
```typescript
test("본인이 작성한 기사에는 Like 할 수 없다.", async ({ page }) => {
await page.goto(url("/login"));
await login({ page, userName: "Jpub" });
await expect(page).toHaveURL(url("/"));
// 여기서부터 기사 목록 페이지
await page.goto(url("/posts/90"));
const buttonLike = page.getByRole("button", { name: "Like" });
const buttonText = page.getByTestId("likeStatus");
// like 버튼이 비활성화되고, Like 문자도 사라짐
await expect(buttonLike).toBeDisabled();
await expect(buttonText).not.toHavetext("Like");
})
```
### 신규 작성 페이지 E2E 테스트
* 이른바 CRUD라 불리는 기능의 페이지 테스트
* CRUD 기능 테스트는 다른 테스트에 영향을 미치지 않는지 세심히 살펴봐야 한다.
* 기본적으로 Publish 기능 테스트는 새로운 기사를 작성한 후 해당 기사를 대상으로 CRUD해야 한다.
#### 신규 작성 페이지에 접근해 컨텐츠를 입력하는 함수
* 투고 기능의 E2E 테스트에는 새 기사를 작성하는 작업을 여러 번 실행해야 한다.
* 컨텐츠 내용은 신경쓰지 말고 필수 입력 항목만 채우는 인터렉션 함수를 만든다.
* 다른 테스트에 영향을 미치지 않도록 재사용 가능한 기사 작성 함수를 만들어보자.
//e2e/postUtils.ts
export async function gotoAndFillPostContents({
page,
title,
userName,
}: {
page: Page;
title: string;
userName: UserName;
}) {
await page.goto(url("/login"));
await login({ page, userName });
await expect(page).toHaveURL(url("/"));
await page.goto(url("/my/posts/create"));
await page.setInputFiles("data-testid=file", [
"public/__mocks__/images/img01.jpg",
]);
await page waitForLoadState("networkidle", { timeout: 30000 });
await page.getbyRole("textbox", { name: "제목" }).fill(title);
}
#### 신규 기사를 비공개 상태로 저장하는 함수
* 신규 기사를 비공개 상태로 저장하는 작업도 여러 번 실행되는 인터렉션
```typescript
//e2e/postUtils.ts
export async function gotoAndCreatePostAsDraft({
page,
title,
userName,
}: {
page: Page;
title: string;
userName: UserName;
}) {
await gotoAndFillPostContents({ page, title, userName });
await page.getByRole("button", { name: "비공개 상태로 저장" }).click();
await page.waitForNavigation();
await expect(page).toHaveTitle(title);
}
```
#### 신규 기사를 공개하는 함수
```typescript
//e2e/postUtils.ts
export async function gotoAndCreatePostAsPublish({
page,
title,
userName,
}: {
page: Page;
title: string;
userName: UserName;
}) {
await gotoAndFillPostContents({ page, title, userName });
await page.getByText("공개 여부").click();
await page.getByRole("button", { name: "공개하기" }).click();
await page.getByRole("button", { name: " " }).click();
await page.waitForNavigation();
await expect(page).toHaveTitle(title);
}
```
#### 재사용되는 유틸 함수들을 활용하여 E2E 테스트 작성하기
* `expect` 함수를 사용하는 단언문도 앞서 만든 함수들에 포함됐으므로 검증이 간단해진다.
```typescript
//e2e/MyPostscreate.spec.ts
import { test } from '@playwright/test';
import { UserName } from '../prisma/fixtures/user';
import {
gotoAndCreatePostAsDraft,
gotoAndCreatePostAsPublish
} from './postUtil';
test.describe("신규 기사 페이지", () => {
const path = "/my/posts/create";
const userName: UserName = "JPub";
test("신규 기사를 비공개 상태로 저장할 수 있다.", async ({ page }) => {
const title = "비공개 상태로 저장하기 테스트";
await gotoAndCreatePostAsDraft({ page, title, userName });
})
test("신규 기사를 공개할 수 있다.", async ({ page }) => {
const title = "공개하기 테스트";
await gotoAndCreatePostAsPublish({ page, title, userName });
})
})
```
### 기사 편집 페이지 E2E 테스트
* 기사를 편집했을 때 기사 목록에 미치는 영향과 기사를 삭제하는 기능에 대한 E2E 테스트
#### 공통 함수
* 작성된 기사 페이지로 이동한 뒤 편집 페이지로 이동하는 인터렉션 함수
```typescript
export async function gotoEditPostPage({
page,
title,
}: {
page: Page;
title: string;
}) {
await page.getByRole("link", { name: "편집하기" }).click();
await page.waitForNavigation();
await expect(page).toHaveTitle(`기사 편집 | ${title}`);
}
```
#### 검증
* 비공개 상태로 저장한 기사를 편집해 내용이 갱신되는지 검증
* 비공개 상태로 저장한 기사 공개 상태로 변경할 수 있는지 검증
* 공개된 기사를 편집하고 비공개 상태로 변경할 수 있는지 검증
* 공개된 기사를 삭제할 수 있는지 검증
```typescript
import { expect, test } from "@playwright/test";
import { checkA11y, injectAxe } from "axe-playwright";
import { UserName } from "../prisma/fixtures/user";
import {
gotoAndCreatePostAsDraft,
gotoAndCreatePostAsPublish,
gotoEditPostPage,
} from "./postUtil";
import { assertUnauthorizedRedirect, url } from "./util";
test.describe("기사 편집 페이지", () => {
const path = "/my/posts/1/edit";
const userName: UserName = "JPub";
test("로그인 상태가 아니면 로그인 화면으로 리다이렉트된다", async ({ page }) => {
await assertUnauthorizedRedirect({ page, path });
});
test("비공개 기사를 편집할 수 있다", async ({ page }) => {
const title = "비공개 편집 테스트";
const newTitle = "비공개 편집 테스트 갱신 완료";
await gotoAndCreatePostAsDraft({ page, title, userName });
await gotoEditPostPage({ page, title });
await page.getByRole("textbox", { name: "제목" }).fill(newTitle);
await page.getByRole("button", { name: "비공개 상태로 저장" }).click();
await page.waitForNavigation();
await expect(page).toHaveTitle(newTitle);
});
test("비공개 기사를 공개할 수 있다", async ({ page }) => {
const title = "비공개 기사 공개 테스트";
await gotoAndCreatePostAsDraft({ page, title, userName });
await gotoEditPostPage({ page, title });
await page.getByText("공개 여부").click();
await page.getByRole("button", { name: "공개하기" }).click();
await page.getByRole("button", { name: "네" }).click();
await page.waitForNavigation();
await expect(page).toHaveTitle(title);
});
test("공개된 기사를 비공개할 수 있다", async ({ page }) => {
const title = "기사 비공개 테스트";
await gotoAndCreatePostAsPublish({ page, title, userName });
await gotoEditPostPage({ page, title });
await page.getByText("공개 여부").click();
await page.getByRole("button", { name: "비공개 상태로 저장" }).click();
await page.waitForNavigation();
await expect(page).toHaveTitle(title);
});
test("공개된 기사를 삭제할 수 있다", async ({ page }) => {
const title = "기사 삭제 테스트";
await gotoAndCreatePostAsPublish({ page, title, userName });
await gotoEditPostPage({ page, title });
await page.getByRole("button", { name: "삭제하기" }).click();
await page.getByRole("button", { name: "네" }).click();
await page.waitForNavigation();
await expect(page).toHaveTitle(`${userName}님의 기사 목록`);
});
test("접근성 검증", async ({ page }) => {
await page.goto(url(path));
await injectAxe(page as any);
await checkA11y(page as any);
});
});
```
### 기사 목록 페이지 E2E 테스트
* 신규 기사가 작성되면 기사 목록에 어떤 영향을 미치는지에 대한 E2E 테스트
* 기사 목록은 메인 페이지와 마이 페이지 두 곳에 존재
* 비공개 상태로 저장한 기사는 작성자 외 열람이 불가능하므로 메인 페이지에선 노출되지 않아야함
#### 검증
* 마이 페이지의 기사 목록에 신규 기사가 추가됐는지 검증
* 비공개 상태로 저장한 기사와 공개 상태로 저장한 기사 모두 목록에 추가돼야함
* 메인 페이지의 기사 목록에 신규 기사가 추가됐는지 검증
* 비공개 상태로 저장한 기사는 목록에 안보여야함
```typescript
import { expect, test } from "@playwright/test";
import { checkA11y, injectAxe } from "axe-playwright";
import { UserName } from "../prisma/fixtures/user";
import {
gotoAndCreatePostAsDraft,
gotoAndCreatePostAsPublish,
} from "./postUtil";
import { assertUnauthorizedRedirect, login, url } from "./util";
/* 코드 10-15
test("로그인 상태가 아니면 로그인 화면으로 리다이렉트된다", async ({ page }) => {
const path = "/my/posts";
await assertUnauthorizedRedirect({ page, path });
});
*/
test.describe("게재된 기사 목록 페이지", () => {
const path = "/my/posts";
const userName: UserName = "JPub";
test("로그인 상태가 아니면 로그인 화면으로 리다이렉트된다", async ({ page }) => {
await assertUnauthorizedRedirect({ page, path });
});
test("자신의 프로필을 열람할 수 있다", async ({ page }) => {
await page.goto(url(path));
await login({ page });
await expect(page).toHaveURL(url(path));
const profile = page.getByRole("region", { name: "프로필" });
await expect(profile).toContainText("JPub");
});
test("신규 기사를 비공개 상태로 저장하면 게재된 기사 목록에 기사가 추가된다", async ({
page,
}) => {
const title = "비공개로 저장된 기사 목록 테스트";
await gotoAndCreatePostAsDraft({ page, title, userName });
await page.goto(url(path));
await expect(page.getByText(title)).toBeVisible();
});
test("신규 기사를 공개 상태로 저장하면 게재된 기사 목록에 기사가 추가된다", async ({
page,
}) => {
const title = "공개 상태로 저장된 기사 목록 테스트";
await gotoAndCreatePostAsPublish({ page, title, userName });
await page.goto(url(path));
await expect(page.getByText(title)).toBeVisible();
});
test("접근성 검증", async ({ page }) => {
await page.goto(url(path));
await injectAxe(page as any);
await checkA11y(page as any);
});
});
```
## 불안정한 테스트 대처 방법
* 흔히 E2E 테스트는 안정적이지 않다고 생각함
* 불안정한 테스트는 네트워크 지연이나, 메모리 부족에 의한 서버 응답 지연 등 다양한 원인으로 발생함
* 테스트 실행 순서의 영향으로 의도하지 않은 상태에서 테스트를 시작하여 문제가 발생하기도 함
* 이런 다양한 원인으로 **불안정한 테스트가 발생하는 것은 E2E 테스트에선 피할 수 없는 문제**
* **몇가지 대처 방법은 존재한다.**
### 실행할 때마다 데이터베이스 재설정하기
* DB를 사용하는 E2E 테스트는 테스트를 실행하면 데이터가 변경된다.
* 일관성있는 결과를 얻으려면 테스트 시작 시점의 상태는 항상 동일해야 한다.
* 테스트를 실행할 때마다 시드 스크립트로 초깃값을 재설정 해야함?
### 테스트마다 사용자를 새로 만들기
* 프로필 편집 기능을 테스트한다고 기존 사용자 정보를 변경하면 안됨
* 테스트에선 각 테스트를 위해 생성한 사용자를 사용해야 한다.
* 테스트가 끝나면 테스트용 사용자는 제거
### 테스트 간 리소스가 경합하지 않도록 주의
* CRUD 기능의 E2E 테스트처럼 각 테스트에서 매번 새로운 리소스를 작성하도록 해야함
* **플레이라이트 테스트는 병렬처리되기 때문에 테스트 실행 순서를 보장할 수 없다.**
* 불안정한 테스트가 발견되면 리소스 경합이 발생하고 있는지 검토해야함
{% hint style="info" %}
**리소스 경합**이란?
* 여러 프로세스나 스레드가 동시에 동일한 자원(예: CPU, 메모리, 디스크, 네트워크 등)에 접근하려고 할 때 발생하는 문제를 말한다
{% endhint %}
### 빌드한 애플리케이션 서버로 테스트하기
* next.js 애플리케이션에서 개발할 때는 개발 서버에서 디버깅하며 코드를 작성하지만 **E2E 테스트는 개발 서버에서 실행하지 않도록 주의**해야 한다.
* 빌드한 Next.js 애플리케이션은 개발 서버와 다르게 동작하기 때문
* 또한 개발 서버는 응답 속도도 느려서 불안정한 테스트의 원인이 되기도함
### 비동기 처리 대기하기
* 예를들어 이미지 업로드 인터렉션이 있다면, 네트워크 통신이 완료될 때까지 기다려야 한다.
* 이처럼 시간이 걸리는 작업은 단위 테스트에서 했던것처럼 **비동기 처리 응답을 대기**해야 한다.
* 만약 조작할 요소가 존재하고 문제없이 인터렉션이 할당됐음에도 테스트가 실패한다면 비동기 처리를 제데로 대기하는지 확인해야함
### --debug로 테스트 실패 원인 조사하기
* 불안정한 테스트의 원인을 파악하려면 디버거를 활용해야함
* 플레이라이트는 실행할 때 `--debug` 를 붙이면 디버거를 실행할 수 있음
* 직접 디버거에서 한 줄 씩 작동을 확인하며 실패 원인을 파악해보자.
### CI 환경과 CPU 코어 수 맞추기
* 로컬에서 테스트를 실행하는 경우 모두 통과하지만 CI 환경에서는 실패하기도 한다.
* 이 경우 **로컬 기기의 CPU 코어 수와 CI 코어수가 동일한지 체크**해야 한다.
* 플레이라이트나 제스트는 코어 수를 명시적으로 지정하지 않으면 실행 환경에서 실행 가능한 만큼 테스트 스위트를 병렬 처리한다.
* 즉, 병렬처리되는 숫자는 실행 환경의 CPU 코어 수 떄문에 변동됨
* CPU 코어 수가 변도되지 않도록 고정하는 설정을 추가한다. (테스트 러너에 지정할 수 있음)
* **CI의 코어 수에 맞춰 설정한 후, 로컬에서도 모든 테스트가 통과되면 문제 해결**
* 만약 **해결되지 않은 경우 대기 시간의 상한을 늘려보자.**
* 전체적으로 보면 CI에서 테스트가 실패해 계속 재시도 하는 것보다 시간을 단축시킬 수 있다.
### 테스트 범위 최소화
* **상황에 따라 E2E 테스트로 검증하는 것이 적절한지 살펴봐야 한다.**
* 테스트 피라미드 상층부에 가까울 수록 실제 상황과 유사한 테스트가 가능하지만, 반대로 불안정성이 증가하고 실행시간도 길어짐
* **E2E 테스트를 더 넓은 범위의 통합 테스트로 대체가능하면 더 적은 비용으로 안정적인 테스트를 할 수 있다.**
* 검증 내용에 맞는 최적의 테스트 범위를 찾아야 불안정한 테스트가 생길 가능성이 낮아진다.