iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0
佛心分享-SideProject30

NUXT3xVUE3xPINIA: 從零開始寫電商系列 第 23

[Day 23] Unit test - Vitest

  • 分享至 

  • xImage
  •  

基本上文件寫得很清楚,所以照著做就差不多。
然後我覺得單元測試可以講很多,這篇簡單帶過一個測試案例。

目錄

  • Installation & Configuration
  • 編寫測試案例
  • 結果

Installation & Configuration

npm i --save-dev @nuxt/test-utils vitest
.package.json
"scripts": {
    ...
    "test": "vitest",
  },

編寫測試案例

import { describe, it, expect } from 'vitest';
import { productToCartFormatter } from '../../formatter';
import type { ProductDetailModel } from '~/models/apiModel';
import type { cartProductModel } from '~/models/viewModel';

describe('Formatter - productToCartFormatter', () => {
    const pModes: ProductDetailModel = {
        id: '1',
        title: "Essence Mascara Lash Princess",
        description: "The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.",
        category: "beauty",
        price: 9.99,
        discountPercentage: 7.17,
        rating: 4.94,
        stock: 5,
        tags: [
            "beauty",
            "mascara"
        ],
        brand: "Essence",
        sku: "RCH45Q1A",
        weight: 2,
        dimensions: {
            width: 23.17,
            height: 14.43,
            depth: 28.01
        },
        warrantyInformation: "1 month warranty",
        shippingInformation: "Ships in 1 month",
        availabilityStatus: "Low Stock",
        reviews: [
            {
                rating: 2,
                comment: "Very unhappy with my purchase!",
                date: "2024-05-23T08:56:21.618Z",
                reviewerName: "John Doe",
                reviewerEmail: "john.doe@x.dummyjson.com"
            },
            {
                rating: 2,
                comment: "Not as described!",
                date: "2024-05-23T08:56:21.618Z",
                reviewerName: "Nolan Gonzalez",
                reviewerEmail: "nolan.gonzalez@x.dummyjson.com"
            },
            {
                rating: 5,
                comment: "Very satisfied!",
                date: "2024-05-23T08:56:21.618Z",
                reviewerName: "Scarlett Wright",
                reviewerEmail: "scarlett.wright@x.dummyjson.com"
            }
        ],
        returnPolicy: "30 days return policy",
        minimumOrderQuantity: 24,
        meta: {
            createdAt: "2024-05-23T08:56:21.618Z",
            updatedAt: "2024-05-23T08:56:21.618Z",
            barcode: "9164035109868",
            qrCode: "https://assets.dummyjson.com/public/qr-code.png"
        },
        images: [
            "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/1.png"
        ],
        thumbnail: "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/thumbnail.png"
    }
    
    const cModel: cartProductModel = {
        "id": "1",
        "title": "Essence Mascara Lash Princess",
        "price": 9.99,
        "stock": 5,
        "thumbnail": "https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/thumbnail.png",
        "quantity": 1
    }
    it('Generate cartProductModel successfully', () => {
        expect(productToCartFormatter(pModes, 1)).toMatchObject(cModel);
    });
});

結果

 RERUN  tests/formatter/index.test.ts x7

 ✓ tests/formatter/index.test.ts (1)
   ✓ Formatter - productToCartFormatter (1)
     ✓ Generate cartProductModel successfully

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  13:50:24
   Duration  37ms


 PASS  Waiting for file changes...
       press h to show help, press q to quit

上一篇
[Day 22] 用middleware做登入與否的操作
下一篇
[Day 24] CI/CD: 自動部署到GitPage & 自動測試
系列文
NUXT3xVUE3xPINIA: 從零開始寫電商29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言