의존 주입을 사용하여 코드를 테스트할 수 있습니다

코드를 위한 단원 테스트를 생각해 본 적이 있습니까? 그러나 이 정도는 하기 어렵다는 것을 발견했습니까?이것은 통상적으로 코드를 작성할 때 테스트를 고려하지 않았기 때문이다.이 문제를 해결하는 간단한 방법은 test-driven development를 이용하는 것입니다. 이것은 개발 과정입니다. 응용 프로그램 코드를 작성하기 전에 테스트를 작성합니다.
그러나 테스트 드라이브 개발을 좋아하지 않더라도 간단한 기술, 즉 주입에 의존하여 코드를 더욱 쉽게 테스트할 수 있습니다. 우리는 본고에서 이 점을 토론하고자 합니다.

무엇이 의존 주입입니까?

의존 주입은 매우 간단하지만 기능이 강한 기술이다.간단히 말하면 의존항을 함수에 하드코딩하는 것과 달리 이 함수는 이 함수를 사용하는 개발자가 매개 변수를 통해 필요한 의존항을 전달할 수 있도록 한다.
이 개념을 공고히 하는 데 도움을 주기 위해서 우리 함께 예를 하나 봅시다.

쿠키 문자열 분석

존 댄서의 Unsplash 사진
자바스크립트 함수를 작성하려면 문자열의 단일 쿠키 키 값 쌍을 해석할 수 있습니다.
예를 들어 document.cookie라는 쿠키가 있는지 확인하고 싶다면, 그 값이 enable_cool_feature라면, 사이트를 방문하는 사용자를 위해 멋진 기능을 사용하고 싶다.
불행히도 true 문자열은 자바스크립트에서 사용하기에 매우 나쁘다.만약 우리가 document.cookie 같은 값으로 속성 값을 찾을 수 있다면 다행이지만, 유감스럽게도 우리는 할 수 없다.
따라서 우리는 자신의 쿠키 해석 함수를 작성할 것이다. 이 함수는 잠재적으로 복잡한 밑바닥 코드에 간단한 외관을 제공할 것이다.
(설명할 것은 몇 개의 자바스크립트 라이브러리와 패키지가 이미 이 점을 해냈기 때문에 당신이 원하지 않으면 자신의 응용 프로그램에서 이 함수를 다시 작성할 필요가 없다는 것이다.)
우선, 우리는 다음과 같은 간단한 함수를 정의하기를 원할 수도 있다.

function getCookie(cookieName) { /* body here */ }

이 함수를 사용하면 특정 쿠키의 값을 찾을 수 있습니다.

getCookie('enable_cool_feature')

샘플 용액

Absolut Vision이 Unsplash에서 찍은 사진입니다.
구글 검색은'자바스크립트의 쿠키 문자열을 어떻게 해석하는가'는 서로 다른 개발자들의 다양한 해결 방안을 제시했다.본고에 대해 우리는 W3Schools가 제공한 해결 방안을 연구할 것이다.보아하니 이렇다.

export function getCookie(cookieName) {
  var name = cookieName + '='
  var decodedCookie = decodeURIComponent(document.cookie)
  var ca = decodedCookie.split(';')

  for (var i = 0; i < ca.length; i++) {
    var c = ca[i]
    while (c.charAt(0) == ' ') {
      c = c.substring(1)
    }

    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length)
    }
  }

  return ''
}

샘플 용액의 비판

Unsplash에 있는 사진입니다.
지금, 이게 왜 그래?우리는 코드 자체의 주체를 비판하지 않고 이 줄의 코드를 볼 것이다.

var decodedCookie = decodeURIComponent(document.cookie)

함수document.cookie.enable_cool_feature는 getCookie 대상과 document 속성에 의존합니다!처음에는 큰 일이 아닌 것 같았지만, 그것은 확실히 약간의 결점이 있었다.
우선, 어떤 이유로든 저희 코드가 cookie 대상에 접근할 수 없다면 어떻게 해야 합니까?예를 들어, 노드 환경의 경우 document 은 document 입니다.이 점을 설명하기 위해 예시 테스트 코드를 봅시다.
Jest를 테스트 프레임워크로 사용하고 두 가지 테스트를 작성합니다.

import { getCookie } from './get-cookie-bad'

describe('getCookie - Bad', () => {
  it('can correctly parse a cookie value for an existing cookie', () => {
    document.cookie = 'key2=value2'
    expect(getCookie('key2')).toEqual('value2')
  })

  it('can correctly parse a cookie value for a nonexistent cookie', () => {
    expect(getCookie('bad_key')).toEqual('')
  })
})

이제 출력을 보기 위해 테스트를 실행합시다.

ReferenceError: document is not defined

아, 아니야!노드 환경에서 정의되지 않음undefined.다행히도, 우리는 document 파일에서 Jest 설정을 변경할 수 있습니다. 이것은 우리가 테스트에서 사용할 수 있도록 DOM을 만들 것입니다.

module.exports = {
  testEnvironment: 'jsdom'
}

지금, 만약 우리가 다시 테스트를 실행한다면, 그것들은 통과할 것이다.그러나 우리는 여전히 약간의 문제가 있다.우리는 전역적으로 jest.config.js 문자열을 수정하고 있습니다. 이것은 우리의 테스트가 현재 상호 의존적이라는 것을 의미합니다.만약 우리의 테스트가 다른 순서로 운행된다면, 이것은 약간의 이상한 테스트 용례를 초래할 수 있다.
예를 들어, 만약 우리가 두 번째 테스트에서 jsdom 를 작성한다면, 그것은 여전히 document.cookie 를 출력할 것이다.아, 아니야!이것은 우리가 원하는 것이 아니다.우리의 첫 번째 테스트는 우리의 두 번째 테스트에 영향을 주었다.이런 상황에서 두 번째 테스트는 여전히 통과되었지만, 테스트가 서로 격리되지 않을 때, 곤혹스러운 상황에 빠질 수 있습니다.
이 문제를 해결하기 위해 우리는 첫 번째 테스트console.log(document.cookie) 성명 후에 정리할 수 있다.

it('can correctly parse a cookie value for an existing cookie', () => {
  document.cookie = 'key2=value2'
  expect(getCookie('key2')).toEqual('value2')
  document.cookie = 'key2=; expires = Thu, 01 Jan 1970 00:00:00 GMT'
})

(일반적으로, 나는 당신이 key2=value2 방법 중에서 일부 정리를 하는 것을 건의합니다. 이 방법은 매번 테스트를 한 후에 그 코드를 실행합니다.하지만 쿠키 삭제는 expect처럼 간단하지 않다afterEach 속성에 현재 설정되지 않은 쿠키 문자열을 확인하려면 W3Schools 솔루션의 두 번째 문제가 발생합니다.어떻게 할 거예요?이런 상황에서 너는 할 수 없다!

더 좋은 방법이 있어요.

Cam Adams의 Unsplash 사진
기왕 우리가 가능한 해결 방안과 그 중의 두 가지 문제를 탐색한 이상, 우리는 이 방법을 작성하는 더 좋은 방법을 봅시다.우리는 의존 주입을 사용할 것이다!
우리의 함수 서명은 보기에 초기 해석과 약간 다르다.이번에는 두 개의 매개변수를 수용합니다.

function getCookie(cookieString, cookieName) { /* body here */ }

우리는 그것을 이렇게 부를 수 있다.

getCookie(<someCookieStringHere>, 'enable_cool_feature')

예제 구현은 다음과 같습니다.

export function getCookie(cookieString, cookieName) {
  var name = cookieName + '='
  var decodedCookie = decodeURIComponent(cookieString)
  var ca = decodedCookie.split(';')

  for (var i = 0; i < ca.length; i++) {
    var c = ca[i]
    while (c.charAt(0) == ' ') {
      c = c.substring(1)
    }

    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length)
    }
  }

  return ''
}

이 함수와 원시 함수 사이의 유일한 차이점은 이 함수는 현재 두 개의 매개 변수를 받아들이고 세 번째 줄에서 쿠키를 디코딩할 때 document.cookie = '' 의 매개 변수를 사용한다는 것입니다.
이제 이 함수를 위해 두 개의 테스트를 작성합시다.이 두 테스트는 우리의 최초의 두 테스트와 같은 내용을 테스트할 것이다.

import { getCookie } from './get-cookie-good'

describe('getCookie - Good', () => {
  it('can correctly parse a cookie value for an existing cookie', () => {
    const cookieString = 'key1=value1;key2=value2;key3=value3'
    const cookieName = 'key2'
    expect(getCookie(cookieString, cookieName)).toEqual('value2')
  })

  it('can correctly parse a cookie value for a nonexistent cookie', () => {
    const cookieString = 'key1=value1;key2=value2;key3=value3'
    const cookieName = 'bad_key'
    expect(getCookie(cookieString, cookieName)).toEqual('')
  })
})

우리가 현재 사용하고 있는 쿠키 문자열을 완전히 제어하는 방법을 주의하십시오.
우리는 환경에 의존할 필요도, 어떠한 테스트 장애에도 직면할 필요도, 항상 document.cookie 에서 쿠키를 직접 해석한다고 가정할 필요도 없다.
많이 좋아졌어!

결론

그렇습니다!의존 주입의 실현은 매우 간단합니다. 이것은 당신의 테스트를 작성하기 쉽고 당신의 의존을 시뮬레이션하기 쉽도록 함으로써 당신의 테스트 체험을 크게 개선할 것입니다.(코드를 결합시키는 데 도움이 되는 것은 말할 것도 없지만, 이것은 다른 날의 주제이다.)
읽어주셔서 감사합니다!