test/#84 Divider vrt 테스트 추가 (#91)

* test: Divider 컴포넌트의 e2e 테스트 코드 작성

* chore: Button 관련 파일들 모두 삭제

* rename: 컴포넌트명 케밥케이스로 변경

* chore: 테스트 파일 내부 텍스트 변경

* chore: 캐시된 내용 삭제

* rename: e2e 테스트 폴더 구조 변경

* feat/#50 github action 워크플로우 최적화 (#90)

* chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경

* chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경

* chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경

* chore: chromatic_auto_deploy 코드 리뷰 반영

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* chore: 코드 리뷰 반영

* chore: ${action} 캐시 형식으로 각 step name 변경

* chore: 각 action 최신 버전을 사용하도록 버전 수정

* chore: 의존성 설치 관련 스크립트 분리 후 재사용

* chore: playwright 설치 관련 스크립트 분리 후 재사용

* chore: 잘못된 경로 설정 수정

* chore: 잘못된 경로 설정 수정

* chore: pnpm, node 버전 환경 변수로 불러오도록 설정

* chore: 환경 변수 설정 별도 스크립트로 분리

* chore: pnpm/action-setup v4 버전으로 변경

* chore: eol 이슈 해결

* chore: 워크플로우 name 변경

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92)

* feat: e2e 테스트 코드 템플릿 파일 생성

* feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성

* chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정

* chore: 예시 버튼 e2e 테스트 파일 삭제

* chore: 스토리북 템플릿 id ui로 시작되도록 수정

* fix: e2e 테스트 plob 템플릿 수정

---------

Co-authored-by: 홍서현 <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

e2e/components/primitive/divider.test.ts

@@ -0,0 +1,48 @@
+import { Page, expect, test } from "@playwright/test";
+
+import { axeAccessibilityScan } from "../../test-utils/a11y";
+import { visit } from "../../test-utils/storybook";
+
+test.describe("divider 컴포넌트", () => {
+  test("horizontal 시각적 회귀 테스트를 통과해야 합니다.", async ({ page }: { page: Page }) => {
+    await visit(page, {
+      id: "ui-divider--horizontal",
+    });
+
+    await expect(page).toHaveScreenshot();
+  });
+
+  test("vertical 시각적 회귀 테스트를 통과해야 합니다.", async ({ page }: { page: Page }) => {
+    await visit(page, {
+      id: "ui-divider--vertical",
+    });
+
+    await expect(page).toHaveScreenshot();
+  });
+
+  test("axe를 사용한 웹 접근성 테스트를 통과해야 합니다.(horizontal)", async ({
+    page,
+  }: {
+    page: Page;
+  }) => {
+    await visit(page, {
+      id: "ui-divider--horizontal",
+    });
+
+    const accessibilityScanResults = await axeAccessibilityScan(page);
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test("axe를 사용한 웹 접근성 테스트를 통과해야 합니다.(vertical)", async ({
+    page,
+  }: {
+    page: Page;
+  }) => {
+    await visit(page, {
+      id: "ui-divider--vertical",
+    });
+
+    const accessibilityScanResults = await axeAccessibilityScan(page);
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

turbo/generators/config.ts

@@ -70,12 +70,18 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
         name: "componentName",
         message: "생성할 컴포넌트의 이름을 입력하세요 (예: Button): ",
       },
+      {
+        type: "list",
+        name: "packageName",
+        message: "컴포넌트를 생성할 패키지를 선택하세요: \n",
+        choices: ["primitive", "themed"]
+      },
     ],
     actions: [
       {
         type: "add",
         templateFile: "./templates/e2e/test.ts.hbs",
-        path: 'e2e/components/{{kebabCase componentName}}.test.ts',
+        path: 'e2e/components/{{packageName}}/{{kebabCase componentName}}.test.ts',
       },
     ],
   });

turbo/generators/templates/e2e/test.ts.hbs

@@ -1,7 +1,7 @@
 import { Page, expect, test } from "@playwright/test";
 
-import { axeAccessibilityScan } from "../test-utils/a11y";
-import { visit } from "../test-utils/storybook";
+import { axeAccessibilityScan } from "../../test-utils/a11y";
+import { visit } from "../../test-utils/storybook";
 
 test.describe("{{componentName}} 컴포넌트", () => {
   test("시각적 회귀 테스트를 통과해야 합니다.", async ({ page }: { page: Page }) => {