Web3 세상에서는 중앙 서버가 해체되어 존재하지 않게 됩니다 (Decentralized).

Web3 세상은 중앙 서버가 아니라 P2P 프로토콜에 의해 지탱됩니다.

Web3 세상에서는 웹 브라우저가 어플리케이션 실행 플랫폼 역할을 수행할 것이라고 생각합니다.

그래서 웹 프론트엔드 기술이 중요해질 것이라고 생각합니다.

그런 맥락에서 Web3 프론트엔드 어플리케이션의 e2e 테스트에 대해 소개합니다.

Cypress 와 Synpress, 두 단어만 기억하시면 성공입니다.

e2e 테스트가 필요한 순간

• TDD (Test Driven Development) 방식으로 Web3 어플리케이션을 개발하고 있었음
• 터미널 한쪽 구석에 Unit Test를 실행시켜 놓고 소스 파일을 수정할 때마다 모든 Unit Test가 성공하는지 확인하며 개발했음
• 하지만, 모든 Unit Test를 통과했음에도 버그가 발생하는 상황을 겪음
• 서버, 네트워크, 브라우저-애드온 같은 모든 컴포넌트들이 참여하는 상황에서만 확인 가능한 버그가 있었음

e2e 테스트 도구, Cypress

• 현재 많이 쓰이는 e2e 테스트 도구는 Cypress와 Selenium
• Cypress는 브라우저 안에서 일어나는 거의 모든 일을 JavaScript로 확인 가능한 개발자 친화적 도구
• 반면 Selenium은 QA 엔지니어 친화적 도구

Web3 어플리케이션 테스트를 위한 Cypress 플러그인, Synpress

• Web3 어플리케이션은 MetaMask 브라우저 애드온이 있어야 동작
• MetaMask 브라우저 애드온이 개입하는 사용자 시나리오를 테스트하기 위해 Synpress가 필요 (MetaMask 활성화 시나리오, MetaMask wallet-connect 승인 시나리오, MetaMask TX 승인 시나리오, ...)

Cypress & Synpress 테스트 팁

• Cypress 테스트 구문은 query-assert 또는 query-command 형태
  • Cypress 구문은 assert나 command로 마무리 짓는 것이 Good Practice (assert나 command 이후에 query를 덧붙이지 않는다)
• 이더리움 메인넷을 타겟으로 하는 테스트는 Synpress의 task setupMetamask 단계에서 실패함
  • Synpress가 MetaMask 애드온을 설정한 다음, 성공 여부를 판정하기 위해 mainnet 문구를 찾지만, 한글 브라우저에서 메인넷이라고 표시되기 때문에 문자열 불일치로 인한 assertion fail이 발생한다
  • 메인넷 대신 테스트넷을 타겟으로 테스트 시나리오를 작성하는 편이 좋다 (한글 브라우저에서도 Goerli는 고얼리라고 표시하지 않고 Goerli라고 표시한다)

그래서 e2e 테스트는?

• 모든 컴포넌트가 참여하는 상황에서만 확인할 수 있는 버그가 있음. 이를 잡아내는 것이 e2e 테스트
• Unit Test 수행 시간은 msec 단위, e2e 테스트 수행시간은 min 단위 (테스트 비용이 크다)
• 프론트엔드 테스트 피라미드가 제시하는 바대로 e2e 테스트는 아껴 써야 함

출처: "Testing Vue.js Applications"/ Edd Yerburgh 지음/ Manning Publications 펴냄

Ref.

별 4개급 참조 문서

• End-to-end testing using Synpress
  • 2023-04-06
  • 클레이튼 dApp을 Synpress로 테스트하는 튜토리얼
  • 유용한 샘플 코드 제시
• Synpress-examples 소스 레포
  • 유용한 샘플 코드 제시
• Cypress 문서: Retry-ability
  • Cypress 테스트 구문은 query-assert 또는 query-command 체이닝 형태
  • 체이닝 구문은 assert나 command로 마무리 짓는 것이 Good Practice
• Cypress 문서
• Synpress 소스 레포

별 3개급 참조 문서

• Story: “What is the Most Challenging in E2E Test Automation?”
  • 테스트에 있어 가장 어려운 것은 '테스트 유지/보수'
• [Track 1-6] 김동우 - 진정한 CI CD를 위한 E2E Test 시작하기
  • 2019-11-18, 40분 동영상
  • 단위 테스트가 성공하더라도 실제 동작에서 오류가 발생할 수 있다
  • e2e 테스트는 UI에 의존적, 그래서 테스트 코드 변경이 자주 필요하다
• 개발 생산성과 품질 향상을 위한 E2E 테스트 자동화로 얻은 것 -한국어판-
  • 2022-11-30, 40분 동영상
  • 적은 인력으로 장기적으로 보수해야 하는 상황에서 테스트 자동화가 필요
• Cypress 튜토리얼: Writing Your First E2E Test
  • cy.get()으로 엘리먼트를 찾고, .type()으로 문자열을 입력하고, .should()로 검증한다
  • action 명령 다음엔 chain을 걸지 않는 것이 베스트 프랙틱스다

• 웹 프론트엔드 TDD?
  • '프론트엔드 테스트 피라미드'를 소개

$ node -v
v16.20.0

$ npm init vue@latest

Vue.js - The Progressive JavaScript Framework

✔ Project name: … todo
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No

Scaffolding project in /home/ingee/work/todo/todo...

Done. Now run:

  cd todo
  npm install
  npm run dev

import { describe, it, expect, vi } from 'vitest'
import { shallowMount, flushPromises } from '@vue/test-utils'
import { mount } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'
import merge from 'lodash.merge'
import App from '@/App.vue'

describe('App.vue', () => {
  function createWrapper (option) {
    const pinia = createTestingPinia({
      initialState: option
        ? {
            todo: option.initialState,
          }
        : {},
      createSpy: vi.fn,
    })
    const defaultOpt = {
      global: {
        plugins: [pinia],
      },
    }
    return shallowMount(App, merge(defaultOpt, option))
  }

  it('shows todos in store', () => {
    const todos = [
      'wake up',
      'wash up',
      'go to work',
    ]
    const initialState = { todos }
    const wrapper = createWrapper({ initialState })
    for (const todo of todos) {
      expect(wrapper.text()).toContain(todo)
    }
  })
})

 ❯ src/__tests__/App.spec.js (1)
   ❯ App.vue (1)
     × shows todos in store

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/__tests__/App.spec.js > App.vue > shows todos in store
AssertionError: expected 'Todo Lorem Ipsum is simply dummy text…' to include 'wake up'
 ❯ src/__tests__/App.spec.js:35:30
     33|     const wrapper = createWrapper({ initialState })
     34|     for (const todo of todos) {
     35|       expect(wrapper.text()).toContain(todo)
       |                              ^
     36|     }
     37|   })

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  13:08:02
   Duration  90ms


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

 ✓ src/__tests__/App.spec.js (1)

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  13:11:57
   Duration  108ms


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

  it('adds todo-item when add-btn is clicked', async () => {
    const wrapper = createWrapper()

    const todo = 'have lunch'
    const todoInput = wrapper.find('[data-test="todo-input"]')
    await todoInput.setValue(todo)

    const addBtn = wrapper.find('[data-test="add-btn"]')
    await addBtn.trigger('click')

    const store = useTodoStore()
    expect(store.addTodo).toBeCalledWith(todo)
  })

 ❯ src/__tests__/App.spec.js (2)
   ❯ App.vue (2)
     ✓ shows todos in store
     × adds todo-item when add-btn is clicked

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/__tests__/App.spec.js > App.vue > adds todo-item when add-btn is clicked
Error: Cannot call setValue on an empty DOMWrapper.
 ❯ Object.get node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs:1517:27
 ❯ src/__tests__/App.spec.js:44:21
     42|     const todo = 'have lunch'
     43|     const todoInput = wrapper.find('[data-test="todo-input"]')
     44|     await todoInput.setValue(todo)
       |                     ^
     45|
     46|     const addBtn = wrapper.find('[data-test="add-btn"]')

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 1 passed (2)
   Start at  13:35:46
   Duration  121ms

 ✓ src/__tests__/App.spec.js (2)

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  13:45:47
   Duration  160ms


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

  async function setStore (state) {
    const store = useTodoStore()
    store.$patch(state)
    await flushPromises()
    return store
  }
  ...
  
  it('removes todo-item when rm-btn is clicked', async () => {
    const todo = 'something to do'
    const wrapper = createWrapper({
      initialState: {
        todos: [ todo ],
      },
    })
    let rmBtns = wrapper.findAll('[data-test="rm-btn"]')
    expect(rmBtns.length).toBe(1)
    await rmBtns.at(0).trigger('click')
    let store = useTodoStore()
    expect(store.rmTodo).toBeCalledWith(0)

    const todos = [
      'something #1',
      'something #2',
      'something #3',
    ]
    store = await setStore({ todos })
    rmBtns = wrapper.findAll('[data-test="rm-btn"]')
    expect(rmBtns.length).toBe(todos.length)
    await rmBtns.at(1).trigger('click')
    expect(store.rmTodo).toBeCalledWith(1)
  })

 ❯ src/__tests__/App.spec.js (3)
   ❯ App.vue (3)
     ✓ shows todos in store
     ✓ adds todo-item when add-btn is clicked
     × removes todo-item when rm-btn is clicked

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/__tests__/App.spec.js > App.vue > removes todo-item when rm-btn is clicked
AssertionError: expected +0 to be 1 // Object.is equality
 ❯ src/__tests__/App.spec.js:68:27
     66|     })
     67|     let rmBtns = wrapper.findAll('[data-test="rm-btn"]')
     68|     expect(rmBtns.length).toBe(1)
       |                           ^
     69|     await rmBtns.at(0).trigger('click')
     70|     let store = useTodoStore()

  - Expected   "1"
  + Received   "0"

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 2 passed (3)
   Start at  13:49:05
   Duration  106ms

obj = document.getElementsByClassName('r-dkhcqf'); for (o of obj) { o.style.opacity = 0.1 }