웹3 세상에서는 개인이 identity와 data에 대한 통제권을 갖습니다.
그래서 웹3 세상을 열기 위해서는 identity와 data 관리에 대한 고민이 필수적입니다.
그런 맥락에서 현실 세계의 대표적인 identity 관리 방식인 OAuth2와 OpenID Connect을 살펴봅니다.

 

OAuth2 표준과 OpenID Connect 표준

  • OAuth2는 Authorization(이후 authZ)에 대한 표준이다.
  • 반면 OpenID Connect(이후 OIDC)는 Authentication(이후 authN)에 대한 표준이다.
  • OIDC 표준은 OAuth2 표준을 기반으로 정의되었다.

 

OIDC AuthZ code flow

그림1. OAuth2 시퀀스 그림2. OIDC 시퀀스
  • 그림1은 OAuth2 authZ code grant type의 동작 시퀀스다.
  • 그림2는 OIDC authZ code flow의 동작 시퀀스다.
  • 두 시퀀스는 사실상 동일하다. 두 시퀀스의 차이점은 id-provider 서버(그림의 'KEYCLOAK')로부터 받아 오는 토큰이다(양쪽 그림의 5번 'Exchange authZ code...' 화살표).
    • 이때 OAuth2 프로토콜은 Access Token을 발급하고, OIDC 프로토콜은 ID Token을 발급한다.

 

OIDC JWT 표준

  • ID Token의 규격은 OIDC 표준이 정한다.
    • ID Token은 JWT(JSON Web Token) 포맷을 따른다.
  • JWT 토큰에는 토큰 발급자(issuer, 이후 iss)의 priv-key를 이용해서 만든 서명이 포함되어 있어서, 누구나 iss의 pub-key를 이용해서 토큰의 무결성을 검증할 수 있다.
  • Access Token 관련해서는 정해진 규격이 없다.
    • OAuth2 표준은 Access Token의 포맷을 규정하지 않는다. 그래서 어떤 포맷을 사용하더라도 표준에 부합한다.
    • Access Token 포맷으로 JWT를 사용하는 경우가 많다.
  • 관련용어
    • JWT: JSON Web Token
    • JWS: JSON Web Signature
    • JWKS: JSON Web Key Set

 

JWT 토큰 검증

https://jwt.io

https://jwt.io 페이지에서 JWT 포맷으로 발급된 토큰을 검증할 수 있다.

  1. 로컬머신에 OIDC id-provider 서버를 띄우고 JWT 포맷의 Access Token을 발급 받는다.
  2. 발급 받은 토큰을 https://jwt.io/ 에 Copy & Paste 한다.
  3. "Signature Verified" 문구를 확인할 수 있다.
토큰샘플 eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6ImtlT0tCZGNNdVNGcnhWU0dTZlhBcFNmLXlYR3BRMEFmQmx1YnU4OVJ1R1kifQ.eyJleHAiOjE2OTk1OTY3NjQsImlhdCI6MTY5OTUxMDM2NCwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo4MzgwIiwic3ViIjoidGVzdC1hY2Nlc3MifQ.psH3-wi6cztRaVaXe0Exh9Aoo_qkvB7_UQhcs1Kzlk8zcLpOZrb20-BLJPs8cV4vlr1jkpm2E_q-cHfAq41ged48zRp0O3bwEPekTinE2T1qfKG3t_8WJu80Wn5Q4d64P8xQCPA8Ly_Q-Q8pRzdmjQBeUK9jZxzEmeqa9BGadna1IHM-WBd7LzCq5pCjS9gkphIy9t5J_bW2f6Nhp67T-VY9gneNy8izTgrja_ulXtifPqHZNaAK7IFFpyJxCvM__3RMOeEFuHYmtmGN7_pT2gT9QJ5cYwGRFbox2V1q95dUfLQWn0nQmC7l1VxOKBRMGcSgGtvvMBu8x-nPalY3gw
JWT 검증OK

잠깐, 뭘로 검증했지?

  • JWT 토큰에 포함된 Signature는 iss의 priv-key를 이용해 만들어진 값이다.
  • 이를 검증하려면 iss의 pub-key가 필요하다.
  • 그런데 JWT 토큰 안에는 iss의 pub-key가 존재하지 않는다. 어디서 가져왔을까?

JWKS URI

JWT 토큰을 검증하려면 iss의 pub-key를 확보해야 한다. 그 절차는 다음과 같다.

  1. 토큰에 포함된 iss 속성값으로부터 well-known URL을 유추한다 (iss + '/.well-known/openid-configuration').
  2. (예시로 든 토큰샘플의 iss는 http://localhost:8380 이다. 이 토큰을 검증해서 Signature Verified 결과를 얻으려면 http://localhost:8380/.well-known/openid-configuration 엔드포인트를 호스팅하는 id-provider가 떠 있어야 한다.)
  3. well-known URL에서 JWKS uri를 확보한다.
  4. JWKS uri에서 iss의 pub-key를 얻을 수 있다.

http://localhost:8380/.well-known/openid-configuration 엔드포인트의 응답

{
  "issuer": "http://localhost:8380",
  "authorization_endpoint": "http://localhost:8380/authz",
  "token_endpoint": "http://localhost:8380/token",
  "userinfo_endpoint": "http://localhost:8380/userinfo",
  "jwks_uri": "http://localhost:8380/jwks"
}

 

http://localhost:8380/jwks 엔드포인트의 응답

{
  "keys": [
    {
      "kty": "RSA",
      "kid": "keOKBdc...",
      "use": "sig",
      "alg": "RS256",
      "e": "AQAB",
      "n": "xPyyJCGj..."
    }
  ]
}

 

Ref

Keycloak Identity and Access Management for Modern Applications (2nd Ed.) 책

Understanding ID Token

How do you choose between OAuth2 and OpenID Connect for web authorization?

JWKs and node-jose

Validate an OpenID Connect JWT using a public key in JWKS

What is OIDC Discovery .well-known end-point?

 

Posted by ingeeC
,

IPFS 2023 컨퍼런스 요약

Dev 2023. 10. 16. 16:27
이름만으로 가슴 뛰게 만드는 프로젝트가 있습니다.
IPFS (InterPlanetary File System) 얘기입니다.
지난 4월 벨기에에서 IPFS 2023 컨퍼런스가 열렸습니다.
관련 내용을 요약합니다.

모든 발표 동영상은 유튜브에 올려져있습니다.
https://www.youtube.com/playlist?list=PLuhRWgmPaHtQ-TO65P62tqfUM85HCIqSj
 

IPFS þing 2023 - IPFS on the Web

 

www.youtube.com

 


IPFS on the Web in 2023 (so far) - Dietrich Ayala (30분)

https://youtu.be/dn8PssXkRbY

  • 행사 개요와 연사들을 소개한다
  • Brave 브라우저가 IPFS를 적극 지원하고 있다 - Brave는 IPFS엔진을 내장하고 있다
  • 모바일 IPFS 플랫폼 DURIN을 개발하고 있다 - 모바일에서 IPFS 컨텐츠를 볼 수 있다
  • IPFS를 인공위성에서 운영하는 실험을 하고 있다 - https://github.com/ipfs-shipyard/space

What Is The Web? - Robin Berjon (30분)

https://youtu.be/s878bm15mrk

  • 웹의 형태를 바꾸자 - 지금은 서버가 기능을 제공, 서버에 권력이 있다
  • 2023-03-28에 "IPFS Principles" 표준을 출간했다 - IPFS가 웹의 미래다

A better web: secure, private, p2p apps with user-owned data and identity - Ian Preston, 30분 동영상

https://youtu.be/mSElk2jcFqY

  • 감시와 통제, 아이덴티티, 데이터 소유권에 관한 문제를 해결하고자 Peergos(회사)가 노력하고 있다
  • 서버 없는 REST API, "Sandbox"를 잠깐 언급한다

WNFS: Versioned and Encrypted Data on IPFS - Philipp Krüger (30분)

https://youtu.be/LBMyRp4Ywew

  • fission(회사)가 데이터를 암호화해서 IPFS에 저장하는 서비스를 제공한다
  • 커뮤니티 프로젝트다, 참여하라 - https://github.com/wnfs-wg/

Content Based Addressing and the Web Security Model - Fabrice Desré (40분)

https://youtu.be/H_1JVGDnctI

  • 처음부터 Security를 고려한 파일시스템 Web Tiles를 소개한다
  • Web Tiles는 IPFS와 닮았지만 다르다

Hello Helia - achingbrain (30분)

https://youtu.be/T_FlhkLSgH8

  • js-ipfs와 js-libp2p 메인테이너가 "브라우저 IPFS 구현체"의 미래/마일스톤을 직접 소개한다
  • js-ipfs를 대치하는 Helia가 릴리즈되어 지금 당장 쓸 수 있다 - https://github.com/ipfs/helia

JavaScript performance - how to wring the most out of your Helia deployment - achingbrain (20분)

https://youtu.be/zPeLYosZ3Ak

  • 새로운 "브라우저 IPFS 구현체" Helia의 성능 측정 자료를 공개한다

Connecting everything, everywhere, all at once with libp2p - Prithvi Shahi (20분)

https://youtu.be/4v-iIB0C9_8

  • libp2p 프로토콜로 모든 소프트웨어와 모든 네트워크를 한번에 연결하자
  • libp2p가 QUIC, WebRTC, WebTransport를 어떻게 이용하는지 소개한다
  • 더 알고 싶다면 github를 참조하라 - github.com/libp2p/universal-connectivity

The Incredible Benefits of libp2p + HTTP - Marten Seemann & Marco Munizaga (15분)

https://youtu.be/Ixyo1G2tJZE

The Name Name Service - Blaine Cook (30분)

https://youtu.be/CHiCEd36KtI

  • NNS (Name Name Service)는 탈중앙화된 DNS를 목표로 한다
  • NNS는 DID를 이용한다 - NNS의 Name은 DID가 아니지만, 적어도 1개의 DID를 갖는다
  • Decentralized, Human Readable, Secure 사이의 상충을 보여주는 Zooko's Triangle을 소개한다

Building decentralized websites on IPFS - Ryan Shahine (30분)

https://youtu.be/TeFAHmzvIdg?si=2vGIcNfwYDBi58VV

  • giliam.eth 같은 ENS에 웹사이트를 생성/배포하는 도구를 개발했다 - Portrait
  • Brave 브라우저는 giliam.eth 같은 ENS를 해석/처리할 수 있다

ODD.js, a technical overview - icidasset (10분)

https://youtu.be/ByQbY3lNAck?si=gcAHRhoPqRDysdoy

  • ODD.js는 백엔드가 없는 어플리케이션을 위한 프레임워크다
  • ODD.js는 DID, WNFS, UCAN을 이용한다

IPFS native frontend development using Importmaps - Dilip Shukla (20분)

https://youtu.be/4HY_7DxScMo?si=5dp82haOtmpm3XHk

  • 웹페이지를 위한 package.json 역할을 하는 importmap을 소개한다
  • importmap을 지원하는 jspm 도구를 개발했다 - npm을 대체할 수 있다

Explorations into Decentralized Publishing - David Justice (10분)

https://youtu.be/fn5QNvRXMIo?si=eojMK9sD7jlbuwOb

  • IPFS와 FVM을 이용해서 팀블로그를 만들었다 - GH: meandavejustice/blog-builder
  • IPFS에 호스팅된 SPA 형태의 Viewer와 FVM에서 동작하는 스마트컨트랙트를 이용했다
  • 짧은 발표와 긴 Q&A가 인상적

 


기타 번외로 참조한 IPFS 동영상들을 나열합니다.

How IPFS deals with files - IPFS Camp Workshop

https://youtu.be/Z5zNPwMDYGg

  • 2019-09-18, 1시간 동영상
  • IPFS가 데이터를 다루는 방식을 자세히 소개한다
  • CID와 CID 탐색기를 소개한다 - cid.ipfs.tech
  • DAG와 DAG 빌더를 소개한다 - dag.ipfs.tech

libp2p NAT Hole Punching Success Rate - @dennis-tra - Measuring IPFS

https://youtu.be/fyhZWlDbcyM

  • 2022-08-10, 30분 동영상
  • 방화벽과 NAT 장벽을 넘어 p2p 연결을 달성하는 Hole Punching에 대해 소개한다
  • kubo v0.11 부터 kubo가 릴레이 역할을 함께 수행한다 (kubo는 go-ipfs의 새 이름)

Intro to libp2p: helping with real world application problems - Max Inden

https://www.youtube.com/watch?v=J7ZWbpo2AZk

  • 2022-11-01, 15분 동영상
  • libp2p 프로토콜은 IFPS, Ethereum2, Poladot 등에 적용되어 있다
  • 현재 libp2p 팀은 브라우저에서의 연결성 개선을 위해 노력하고 있다

Browser connectivity state of union and demo

https://youtu.be/qG_1bYVtGO4

  • 2022-11-01, 20분 동영상
  • 브라우저의 문제는 TCP 프로토콜과 QUIC 프로토콜을 쓸 수 없다는 점이다
  • libp2p의 브라우저 연결성 개선에 관하여 WebTransport 프로토콜에 기대를 걸고 있다

libp2p NAT Hole Punching

https://youtu.be/bzL7Y1wYth8

  • 2022-11-01, 30분 동영상
  • Hole Punching 개념과 DCUtR 프로토콜의 개요를 설명한다

WebRTC signalling data over QR codes

https://youtu.be/EQFUPZK9CwI

  • 2022-11-02, 10분 동영상
  • 일련의 QR코드 스트림(동영상)을 이용하여 기기와 기기가 WebRTC 통신을 수행하는 데모를 시연한다 - 재밌음

Why WebRTC

https://youtu.be/ZBIFFuakFHQ

  • 2022-11-02, 10분 동영상
  • libp2p 브라우저 연결성 개선을 위해 시도한 노력의 내용과 현황을 소개한다
  • 아직 완벽하지 않다

이상입니다.

 

Posted by ingeeC
,

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개급 참조 문서

별 3개급 참조 문서

 

Posted by ingeeC
,

도전! 프론트엔드 TDD

Dev 2023. 5. 16. 13:05

웹3 세상의 핵심 플랫폼은 브라우저일 거라고 생각합니다. 그래서 프론트엔드 개발이 중요하다고 생각합니다.

작은 프로젝트를 진행하면서 프론트엔드 TDD를 경험했습니다. TDD는 테스트 코드와 구현 코드를 함께 개발해 나가는 방식입니다. 간단한 Todo 앱을 예로 들어 제가 경험한 TDD를 설명하려 합니다.

프론트엔드 TDD 개념과 Vue3 & Pinia 테스트 코드 작성 사례를 전달하는 것이 목표입니다. Vue3 & Pinia 프로젝트 개발에 도움이 되면 좋겠습니다.

 

관련 코드는 GitHub https://github.com/ingee/todo 소스 레포에 있습니다.

 

웹앱 구상

  • 웹앱을 스케치합니다. todo를 등록하고 삭제하는 기능이 전부입니다.

 

스캐폴딩

  • npm init vue@latest 명령으로 Vue3와 Pinia를 이용하는 웹앱의 뼈대를 만듭니다.
$ 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

 

1. Pinia 스토어에 있는 todo 목록을 화면에 표시하자

목표

  • Pinia 스토어에 todos라는 이름으로 todo 목록을 저장할 계획입니다.
  • Pinia 스토어에 저장되어 있는 todo 목록을 화면에 표시하는 기능부터 구현하기로 합니다.

1.1 Unit Test를 작성합니다

src/ __tests__/ App.spec.js

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)
    }
  })
})
  • 테스트 wrapper 객체를 생성하기 위해 createWrapper() 함수를 작성합니다.
  • Pinia 스토어의 초기 상태를 지정하기 위해 createWrapper() 함수에 전달하는 option 객체를 이용합니다 (어디선가 솜씨 좋은 개발자로부터 배운 방식입니다).
  • 기능이 정상 동작하는지 검증하기 위해 "It shows todos in store" 유닛 테스트를 작성합니다.

1.2 실패 확인

  • 콘솔창에서 npm run test::unit 명령을 실행하고, 유닛 테스트가 실패함을 확인합니다 (아직 구현하지 않았으니 실패가 당연합니다).
  • 적절한 사유와 함께 실패함을 확인합니다.
    • Pinia의 초기 상태로 지정한 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

1.3 기능 구현 & 성공 확인

 ✓ 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

 

2. 입력창에 입력한 todo를 Pinia 스토어에 저장하자

목표

  • 화면에 입력한 todo를 Pinia 스토어에 저장할 계획입니다.
  • todo를 입력하고 Add 버튼을 클릭하면, 해당 항목이 Pinia 스토어에 저장되게 하기로 합니다.

2.1 Unit Test를 추가합니다

src/ __tests__/ App.spec.js

  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)
  })
  • "It adds todo-item when add-btn is clicked" 유닛 테스트를 추가합니다.
  • 테스트 wrapper의 setValue() 함수로 화면 입력 값을 지정합니다.
  • Add 버튼을 클릭하면 store의 addTodo() 함수가 적절한 인자와 함께 호출되는지 확인합니다.

2.2 실패 확인

  • 유닛 테스트가 적절한 사유와 함께 실패함을 확인합니다.
    • 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

2.3 기능 구현 & 성공 확인

 ✓ 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

 

3. 화면에 표시된 todo 항목을 제거하자

목표

  • todo 항목마다 옆에 X 버튼을 표시할 계획입니다.
  • X 버튼을 클릭하면 해당 항목이 삭제되게 하기로 합니다.

3.1 Unit Test를 추가합니다

src/ __tests__/ App.spec.js

  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)
  })
  • "It removes todo-item when rm-btn is clicked" 유닛 테스트를 추가합니다.
  • createWrapper() 함수를 호출할 때 option.initialState 인자를 전달해서 Pinia 스토어의 초기 상태를 지정합니다.
  • 유닛 테스트 도중 Pinia 스토어의 상태를 변경하기 위해 setStore() 함수를 작성합니다.

3.2 실패 확인

  • 유닛 테스트가 적절한 사유와 함께 실패함을 확인합니다.
    • X 버튼 (rm-btn)이 없다고 합니다. 적절합니다.
 ❯ 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

3.3 기능 구현 & 성공 확인

 

마무리

지금까지의 내용을 요약합니다.

 

TDD는,

  • 테스트 코드를 먼저 만들고,
  • 그 테스트 코드가 적절한 사유와 함께 실패함을 확인하고,
  • 그 테스트 코드가 성공하도록 구현하고, 이 과정을 반복하는 개발 방식입니다.

Vue3 & Pinia 웹앱의 유닛 테스트 코드를 작성함에 있어,

  • Pinia 스토어의 초기 상태를 지정하는 방법을 알아 보았습니다.
  • 웹 화면의 입력창에 사용자 입력값을 지정하는 방법을 알아 보았습니다.
  • 테스트 도중 Pinia 스토어의 상태를 변경하는 방법을 알아 보았습니다.

테스트 코드는 쉽게 작성해서 자주 써먹어야 합니다. 하지만 처음 시작하자면 넘어야 할 장벽이 있습니다. 이 글이 그 장벽을 넘는 데 도움이 되기를 희망합니다.

관련 코드는 GitHub https://github.com/ingee/todo 소스 레포에 있습니다.

 

Ref.

Posted by ingeeC
,

JS Proxy란? JS Object란?

Dev 2023. 2. 19. 16:19

배경

Vue3를 Composition API 스타일로 쓰는 연습 중이다. Composition API에서 새로 도입된 타입이 있다. ref() 함수로 정의하는 리액티브 타입이다. ref() 함수로 리액티브 변수를 정의해서 console.log()를 찍어보면 Proxy 라는 낯선 이름이 보인다. Proxy란 무엇일까?

 

Vue3 소스코드: ref() 함수로 변수를 선언하고 console에 출력

import { ref } from 'vue'

const hellos = ref([ 'hello', 'world', ])
console.log('hellos.value=', hellos.value)

 

console에 출력된 내용

Proxy { <target>: (2) […], <handler>: {…} }

 

console 출력 스크린 캡쳐

 

결론

JS Proxy가 무엇인지 제대로 소개하는 좋은 글이 있어 링크한다. JS Object가 무엇인지 질문을 던지며 시작한다.

 

ES6 In Depth: 프락시 (Proxy)

http://hacks.mozilla.or.kr/2016/03/es6-in-depth-proxies-and-reflect/

 

ES6 In Depth: 프락시 (Proxy) ★ Mozilla 웹 기술 블로그

ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. 오늘 우리가 살펴보려는 것은 다음 코드입니다. var obj = new Proxy({}, { g

hacks.mozilla.or.kr

 

누가 번역했는지 참 자연스럽게 잘했다. 2016년에 내가 번역한 글이다 (죄송 😊).

번역보다 중요한 건 원글이다. 질문을 던지고 생각하게 만드는 솜씨가 훌륭하다. 작가의 피가 흐르는 엔지니어다. 읽어보시길.

Posted by ingeeC
,