1. ความสำคัญของ Automated Testing

Automated Testing เป็นกระบวนการทดสอบแอปพลิเคชันอัตโนมัติเพื่อตรวจสอบความถูกต้องของโค้ด ช่วยลดข้อผิดพลาด เพิ่มความมั่นใจในการพัฒนา และเร่งความเร็วในกระบวนการ Deploy

2. ประเภทของ Automated Testing

2.1 Unit Testing

Unit Testing ใช้ทดสอบส่วนย่อยของโค้ด เช่น ฟังก์ชันหรือ Component โดยแยกจากส่วนอื่น

ตัวอย่างเครื่องมือที่ใช้:

• Vue Test Utils
• Jest

2.2 Integration Testing

Integration Testing ใช้ตรวจสอบการทำงานร่วมกันระหว่างส่วนต่าง ๆ เช่น Component และ API

ตัวอย่างเครื่องมือที่ใช้:

• Jest
• Cypress

2.3 End-to-End Testing

End-to-End Testing ใช้ทดสอบการทำงานของแอปพลิเคชันทั้งระบบจากมุมมองของผู้ใช้

ตัวอย่างเครื่องมือที่ใช้:

• Cypress
• Playwright

3. การติดตั้งเครื่องมือสำหรับการทดสอบ

3.1 การติดตั้ง Vue Test Utils และ Jest

npm install @vue/test-utils jest --save-dev

3.2 การติดตั้ง Cypress

npm install cypress --save-dev

4. การเขียน Unit Test ด้วย Vue Test Utils และ Jest

ตัวอย่างการทดสอบ Component:

HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
};
</script>

tests/unit/HelloWorld.spec.js

import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello Vue.js!';
    const wrapper = mount(HelloWorld, {
      props: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

5. การเขียน End-to-End Test ด้วย Cypress

ตัวอย่างการทดสอบ:

cypress/integration/app.spec.js

describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/');
    cy.contains('h1', 'Welcome to Vue.js');
  });

  it('Navigates to About page', () => {
    cy.visit('/');
    cy.contains('About').click();
    cy.url().should('include', '/about');
    cy.contains('h1', 'This is the about page.');
  });
});

การรัน Cypress Test:

npx cypress open

6. การตั้งค่า Coverage Report

Coverage Report ช่วยให้เห็นภาพรวมของโค้ดที่ได้รับการทดสอบ

การติดตั้ง:

npm install --save-dev jest jest-coverage

การตั้งค่า jest.config.js:

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**'],
  coverageReporters: ['html', 'text-summary']
};

การรัน Coverage Report:

npx jest --coverage

7. การรวม Automated Testing เข้ากับ CI/CD

ตัวอย่างการตั้งค่า GitHub Actions:

.github/workflows/test.yml

name: Run Tests

on:
  push:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm run test

8. เคล็ดลับสำหรับ Automated Testing

1. ทดสอบเฉพาะสิ่งที่จำเป็น:

• มุ่งเน้นการทดสอบฟีเจอร์ที่มีความสำคัญ

1. เขียน Test ที่อ่านง่าย:

• ใช้คำอธิบายที่ชัดเจนและเข้าใจง่ายใน describe และ it

1. บูรณาการการทดสอบในกระบวนการพัฒนา:

• รัน Test ทุกครั้งที่มีการ Push โค้ดหรือ Pull Request

9. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการสร้างระบบทดสอบอัตโนมัติใน Vue.js โดยใช้เครื่องมือ เช่น Vue Test Utils, Jest, และ Cypress พร้อมกับการตั้งค่า Coverage Report และการบูรณาการการทดสอบเข้ากับ CI/CD การทำ Automated Testing ช่วยเพิ่มความมั่นใจในคุณภาพของแอปพลิเคชันและลดความเสี่ยงจากข้อผิดพลาด

ในบทถัดไป เราจะสำรวจการเพิ่มฟีเจอร์แบบ Realtime ในแอปพลิเคชัน Vue.js ด้วย WebSocket!