// vitest.config.js export default defineConfig({ test: { setupFiles: path.resolve(__dirname, "__vitest__/vitest.setup.js"), // 환경 설정 globals: true, environment: "jsdom", // 리포팅 silent: process.env.CI === "true", reporters: process.env.CI === "true" ? ["default", "junit"] : ["default"], outputFile: { junit: "./junit.xml" }, // 테스트 파일 include: [path.resolve(__dirname, "__vitest__/**/*.test.{js,ts,tsx}")], // 커버리지 coverage: { enabled: process.env.COVERAGE === "true", reporter: ["html", "json-summary", "text", "cobertura"], include: ["__vitest__/**/*.test.{js,ts,tsx}", "src/**/*.{js,ts,vue,tsx,ts}"], } }, resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], }, });

// /__vitest__/vitest.setup.js import Vue from "vue"; import { vi } from "vitest"; import modulesPlugin from "@/assets/js/modulesPlugin.js"; import productMixinV2 from "@/assets/js/productMixinV2.js"; import { moduleUtil, stringUtil } from "@lotteon/display-utils"; // 1. Vue 기본 설정 Vue.use(modulesPlugin); Vue.mixin(productMixinV2); // 2. 외부 의존성 Mocking global.EventBus = { $emit: vi.fn(), $on: vi.fn(), $off: vi.fn() }; global.$modal = { show: vi.fn(), hide: vi.fn() }; // 3. 이미지 최적화 함수 Mocking const $imgOptimize = (url, dims) => `${url || ""}${dims || ""}`; global.$imgOptimize = $imgOptimize; // 4. 전역 유틸리티 함수 등록 Object.assign(global, { moduleUtil, stringUtil });

// src/mocks/handlers/product_05.handler.js - 재사용 가능한 핸들러 팩토리 import { http, HttpResponse } from "msw"; import MockDataBuilder from "@mock/builder/MockDataBuilder.js"; export const createProduct05Handlers = () => ({ // 기본 핸들러 (상품 2개) default: http.get("/api/display/product_05", () => { const data = new MockDataBuilder().addModule("product_05").withProducts(2).build(); return HttpResponse.json({ returnCode: "200", data }); }), // 에러 응답 핸들러 error: http.get("/api/display/product_05", () => HttpResponse.json(null, { status: 500 })), });

describe("product_05 컴포넌트", () => { // 시나리오: 상품이 2개 미만이면 모듈이 노출되지 않아야 함 it("productListData.product가 2개 미만이면 노출 안 됨", () => { // Arrange: 상품 1개 데이터 생성 const data = new MockDataBuilder() .addModule("product_05") .withProducts(1) .build(); // Act: 컴포넌트 마운트 const wrapper = mount(Product05, { propsData: { data } }); // Assert: isView는 false이고, module-wrapper가 없음 expect(wrapper.vm.isView).toBe(false); expect(wrapper.html()).not.toContain("module-wrapper"); }); });

describe("product_05 컴포넌트 (API 연동)", () => { // 시나리오: API로부터 상품 2개를 받아와서 모듈이 노출되어야 함 it("API로부터 상품 2개를 받아와서 모듈이 노출되어야 함", async () => { // Arrange: MSW로 API 응답 모킹 (상품 2개 반환) server.use(createProduct05Handlers().default); // Act: API 호출 및 컴포넌트 마운트 const response = await fetch("/api/display/product_05"); const result = await response.json(); const wrapper = mount(Product05, { propsData: { data: result.data } }); // Assert: isView는 true이고, 상품 2개가 렌더링됨 expect(wrapper.vm.isView).toBe(true); expect(wrapper.vm.productListData.product.length).toBe(2); }); });

describe("product_05 컴포넌트 (Edge Case)", () => { // 시나리오: API로부터 상품을 1개만 받으면 모듈이 노출되지 않아야 함 it("API로부터 상품 1개만 받으면 모듈이 노출되지 않아야 함", async () => { // Arrange: MSW로 상품 1개만 반환하도록 모킹 server.use(createProduct05Handlers().custom(1)); // Act: API 호출 및 컴포넌트 마운트 const response = await fetch("/api/display/product_05"); const result = await response.json(); const wrapper = mount(Product05, { propsData: { data: result.data } }); // Assert: isView는 false이고, module-wrapper가 없음 expect(wrapper.vm.isView).toBe(false); expect(wrapper.html()).not.toContain("module-wrapper"); }); });

// .gitlab-ci.yml coverage: stage: test variables: CI: "true" COVERAGE: "true" script: - npx vitest run artifacts: reports: junit: junit.xml coverage_report: coverage_format: cobertura path: coverage/cobertura-coverage.xml