JavaScript의 BDD : Cucumber와 Gherkin을 시작합니다

테스트 중심 개발 (TDD)의 이점은 잘 알려져 있으며 제품 품질 및 개발 효율성을 향상시킵니다. 코드 테스트를 작성할 때마다 코드의 정확성을 보장하고 가능한 향후 코드 오류를 즉시 감지 할 수 있습니다. 행동 중심 개발 (BDD)은 이에 대해 한 걸음 더 나아가서 제품이 기대치와 일치하도록하는 것이 아니라 코드가 아닌 제품의 동작을 테스트합니다. 이 기사는 오이 프레임 워크를 사용하여 BDD 스타일 자동 수락 테스트를 작성하는 방법을 설명합니다. 오이의 장점은 테스트 사례가 프로젝트의 비 기술적 인 직원이 쉽게 이해하기 위해 간결한 자연어로 작성 될 수 있다는 것입니다. 이 기사를 읽은 후 오이가 팀에 적합한 지 알 수 있고 자신의 수락 테스트를 작성하기 시작할 수 있습니다. 준비가 된? 시작합시다!

키 포인트

BDD TDD를 기반으로 한이 제품은 코드가 아닌 제품의 동작에 대해 테스트되므로 비 기술적 인 직원을 포함한 더 넓은 범위의 이해 관계자가 이해하기가 더 쉽습니다. 오이는 테스트 사례를 정의하기 위해 이해하기 쉬운 언어 인 Gherkin을 사용하는 BDD 프레임 워크로서 모든 이해 관계자가 테스트 프로세스에 이해하고 참여할 수 있도록하는 BDD 프레임 워크입니다. Gherkin 구문 구조는 시나리오와 기능으로 테스트, 간단한 주어진시기를 사용하여 기술 구현을 지정하지 않고 동작을 설명하는 단계를 테스트합니다.

<..> cucumber.js는 JavaScript 프로젝트와 통합되고 Gherkin 정의 테스트를 실행하며 다양한 플러그인 및 구성을 통해 비동기 작업 및 외부 테스트 도구를 지원합니다.

<..> cucumber.js 설정에는 NPM을 통해 모듈 설치, 기능 파일 및 단계 정의를 찾도록 구성하고 선택적으로 Grunt 또는 Gulp와 같은 빌드 스크립트 또는 작업 러너에 통합하는 것이 포함됩니다. 이 기사는 간단한 주장을 사용하여 이러한 작업의 정확성을 확인하기 위해 추가 및 곱셈을위한 Gherkin 시나리오를 설정하는 기본 오이 테스트 예제를 제공합니다. 이 기사는 또한 비동기 테스트 지원, 매개 변수화 된 테스트를위한 시나리오 개요 및 테스트 기능을 향상시키기위한 전제 조건 및 후 조약을 설정하기위한 후크와 같은 Cucumber.js의 고급 기능을 간략하게 설명합니다.

• bdd와 tdd 의 차이 는 주로 테스트의 구조 및 쓰기 방법에 반영됩니다. TDD에서는 개발자가 코드를 작성하여 작성, 유지 및 이해합니다. 다른 사람들은 읽기 테스트가 전혀 필요하지 않을 수 있으며, 완전히 괜찮습니다. 그러나 BDD에서는 기능을 작성하는 개발자보다 더 많은 사람들이 테스트를 이해해야합니다. 많은 이해 관계자들은 QA 직원, 제품 분석가, 영업 담당자 및 심지어 고위 경영진과 같은 제품이 올바르게 작동하는지 여부를 걱정합니다. 이는 이상적으로 BDD 테스트가 제품을 이해하는 사람이라면 누구나 이해할 수있는 방식으로 작성해야 함을 의미합니다. 차이점은 다음과 같습니다.
• 및 :

  const assert = require('assert');
  const webdriver = require('selenium-webdriver');
  const browser = new webdriver.Builder()
    .usingServer()
    .withCapabilities({'browserName': 'chrome' })
    .build();
  
  browser.get('http://en.wikipedia.org/wiki/Wiki');
  browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
  .then(function(links){
    assert.equal(19, links.length); // 假设的数字
    browser.quit();
  });

  이 두 테스트는 동일하지만, 하나는 자연 언어를 읽을 수 있고 다른 하나는 자바 스크립트와 셀레늄을 아는 사람들에 의해서만 이해됩니다. 이 기사에서는 Cucumber.js 프레임 워크를 사용하여 JavaScript 프로젝트에서 BDD 테스트를 구현하는 방법을 보여 주므로 제품이 이러한 수준의 테스트를 통해 혜택을 볼 수 있습니다.

  <🎜 🎜> <<> 오이/gherkin이란 무엇입니까?

  <<> 오이는 행동 중심 개발을위한 테스트 프레임 워크입니다. 이를 통해 Gherkin 형식으로 테스트를 정의하고 코드에 바인딩 하여이 Gherkins를 실행할 수 있습니다. Gherkin은 오이 테스트를 작성하는 데 사용되는 도메인 별 언어 (DSL)입니다. 이를 통해 인간이 읽을 수있는 형식의 테스트 스크립트를 작성하여 제품 개발의 모든 이해 관계자와 공유 할 수 있습니다. Gherkin 파일은 Gherkin 언어로 작성된 테스트가 포함 된 파일입니다. 이 파일에는 일반적으로 .feature 파일 확장자가 있습니다. 이 Gherkin 파일의 내용은 일반적으로 "Gherkin"이라고합니다.

  <<> gherkin

  Gherkin 정의 테스트에는

  특징 <🎜 🎜> 및

  시나리오의 개념이 있습니다. 이들은 다른 테스트 프레임 워크에서 테스트 스위트 및 테스트 사례와 유사하며 테스트를 구조화하는 명확한 방법을 제공합니다. 시나리오는 별도의 테스트 일뿐입니다. 응용 프로그램의 한 측면 만 테스트해야합니다. 기능은 관련 시나리오 세트입니다. 따라서 응용 프로그램의 많은 관련 측면을 테스트합니다. 이상적으로 Gherkin 파일의 기능은 응용 프로그램의 기능과 밀접하게 매핑됩니다. 각 Gherkin 파일에는 기능이 포함되어 있으며 각 기능에는 하나 이상의 시나리오가 포함되어 있습니다. 그런 다음 장면은 단계로 구성되며 특정 순서로 배열됩니다.

  주어진 -이 단계는 테스트가 실행되기 전에 초기 상태를 설정하는 데 사용됩니다. 시기 -이 단계는 실제로 수행 될 테스트입니다 그런 다음 -이 단계는 테스트 결과를 주장하는 데 사용됩니다

  이상적으로는 각 시나리오는 별도의 테스트 사례 여야하므로시기의 수를 매우 작게 유지해야합니다. 단계는 완전히 선택 사항입니다. 예를 들어, 아무것도 설정할 필요가 없다면 주어진 단계가 없을 수 있습니다. Gherkin 파일은 읽기 쉬운 제품 개발과 관련된 사람에게 도움이되도록 설계되었습니다. 여기에는 비 기술적 인 사람들이 포함되므로 Gherkin 파일은 항상 기술 언어보다는 비즈니스 언어로 작성되어야합니다. 예를 들어, 단일 UI 구성 요소를 참조하지 않고 테스트하려는 제품 개념을 설명합니다.

  <🎜 🎜> <<> Gherkin 테스트 예 <🎜 🎜> 다음은 google의 cucumber.js에 대한 Gherkin 예제입니다. 우리는이 테스트가 어떻게 해야하는지, 어떻게 해야하는지 알려주는 것을 즉시 알 수 있습니다. 누구나 이해할 수있는 언어로 작성되었으며, 최종 제품이 어떻게 조정하든 상관없이 가장 잘 유지 될 가능성이 높습니다. Google은 UI를 완전히 변경하기로 결정할 수 있지만 기능이 동등한 한 Gherkin은 여전히 ​​정확합니다. 오이 위키에서 주어진 것에 대해 더 많이 읽을 수 있습니다. <<> cucumber.js

  <🎜 🎜> Gherkin 형식으로 테스트 케이스를 작성한 후에는 실행 방법이 필요합니다. JavaScript 세계에는 cucumber.js라는 모듈이 있습니다. Cucumber.js가 Gherkin 파일에 정의 된 다양한 단계에 연결할 수있는 JavaScript 코드를 정의 할 수 있습니다. 그런 다음 Gherkin 파일을로드하고 올바른 순서로 각 단계와 관련된 JavaScript 코드를 실행하여 테스트를 실행합니다. 예를 들어, 위의 예에는 다음 단계가 있습니다.
  이러한 모든 의미에 대해 너무 걱정하지 마십시오. 나중에 자세히 설명 할 것입니다. 그러나 본질적으로 Cucumber.js 프레임 워크가 코드를 Gherkin 파일의 단계에 바인딩하는 데 사용할 수있는 몇 가지 방법을 정의합니다.

  const assert = require('assert');
  const webdriver = require('selenium-webdriver');
  const browser = new webdriver.Builder()
    .usingServer()
    .withCapabilities({'browserName': 'chrome' })
    .build();
  
  browser.get('http://en.wikipedia.org/wiki/Wiki');
  browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
  .then(function(links){
    assert.equal(19, links.length); // 假设的数字
    browser.quit();
  });

  <<> (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) <🎜 🎜>

  빌드에 cucumber.js를 포함하십시오

  빌드에 cucumber.js를 포함시키고, 오이 모듈을 빌드에 추가하고 실행하도록 구성하십시오. 첫 번째 단계는 다음과 같습니다. 두 번째 단계는 빌드를 수행하는 방법에 따라 다릅니다.

  <<> 수동으로 실행하십시오

  오이를 수동으로 실행하는 것은 비교적 쉽고, 다음 솔루션이 자동으로 동일하게 수행 할 수있는 방법이므로 먼저 수행 할 수 있는지 확인하는 것이 가장 좋습니다. 설치 후 실행 파일은

  입니다. 실행할 때는 파일 시스템의 위치를 ​​알아야합니다. 필요한 모든 파일을 찾을 수 있습니다. 이 파일에는 Gherkin 파일과 실행할 JavaScript 코드가 모두 포함됩니다. 컨벤션별로 모든 Gherkin 파일은 기능 디렉토리에 저장되며 다른 작업을 수행하도록 지시하지 않으면 Cucumber는 동일한 디렉토리에서 JavaScript 코드를 실행할 수 있습니다. 그러나 빌드 프로세스를 더 많이 제어 할 수 있도록 이러한 파일의 위치를 ​​찾도록 지시하는 것이 좋습니다. 예를 들어, MyFeatures 디렉토리에 모든 Gherkin 파일을 저장하면 mysteps에 모든 JavaScript 코드를 저장하면 다음을 수행 할 수 있습니다.

  Given I have opened a Web Browser
  When I load the Wikipedia article on "Wiki"
  Then I have "19" Wiki Links

  <🎜 🎜>

  플래그는 오이가 자동으로 테스트를 위해로드 할 JavaScript 파일을 포함하는 디렉토리입니다. 흥미로운 다른 징후도 있습니다. 도움이되는 텍스트를 읽으십시오. 이 디렉토리는 재귀 적으로 스캔하므로 상황에 따라 얕거나 깊은 파일을 둥지 할 수 있습니다.

  <🎜 🎜> <<> npm 스크립트

  <🎜 🎜> 오이를 수동으로 실행 한 후 NPM 스크립트로 빌드에 추가하는 것은 간단한 경우입니다. 다음과 같이 다음 명령 (NPM이 귀하를 위해 처리 할 수 ​​있으므로 자격을 갖춘 경로 없음)을 추가하십시오. 완료되면 실행할 수 있습니다 이전과 같이 오이 테스트를 수행합니다.

  <<> grunt ./node_modules/.bin/cucumber.js

  cucumber.js 테스트를 수행하기 위해 Grunt 플러그인이 있습니다. 불행히도, 그것은 구식이며 최신 버전의 cucumber.js에서는 작동하지 않으므로 사용하면 많은 개선 사항을 놓칠 것입니다. 대신, 내가 선호하는 방식은 단순히 Grunt-Shell 플러그인을 사용하여 위와 동일한 방식으로 명령을 실행하는 것입니다. 설치 후 구성하기 만하면 다음 플러그인 구성을 gruntfile.js에 추가하겠습니다.

  이제, 이전과 같이

  를 실행하여 테스트를 수행 할 수 있습니다.

  const assert = require('assert');
  const webdriver = require('selenium-webdriver');
  const browser = new webdriver.Builder()
    .usingServer()
    .withCapabilities({'browserName': 'chrome' })
    .build();
  
  browser.get('http://en.wikipedia.org/wiki/Wiki');
  browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
  .then(function(links){
    assert.equal(19, links.length); // 假设的数字
    browser.quit();
  });

  <<> gulp grunt shell:cucumber

  Gulp는 기존 플러그인이 구식이며 구형 버전의 오이 도구를 사용하기 때문에 Grunt와 정확히 동일합니다. 다시 말하지만, Gulp-Shell 모듈을 사용하여 다른 시나리오와 마찬가지로 cucumber.js 명령을 실행할 수 있습니다. 그것을 설정하는 것은 간단합니다 : <🎜 🎜>

  이제, 이전과 같이 를 실행하여 테스트를 수행 할 수 있습니다. <🎜 🎜> <<> 첫 번째 오이 테스트

  이 기사의 모든 코드 예제는 Github에서 찾을 수 있습니다.

  Given I have opened a Web Browser
  When I load the Wikipedia article on "Wiki"
  Then I have "19" Wiki Links

  이제 오이를 실행하는 방법을 알았으므로 실제로 테스트를 작성합시다. 이 예에서는 시스템의 작동 방식을 보여주기 위해 매우 인공적인 일을 할 것입니다. 실제로 테스트중인 코드를 직접 호출하거나 HTTP API가 서비스 실행에 전화를 걸거나 셀레늄을 제어하여 웹 브라우저를 구동하여 응용 프로그램을 테스트하는 등 복잡한 작업을 수행합니다. 우리의 간단한 예는 수학이 여전히 유효하다는 것을 증명할 것입니다. 추가와 곱셈의 두 가지 특성이 있습니다. 먼저 설정하겠습니다. gulp cucumber

  테스트 수행 방법은 전적으로 귀하에게 달려 있습니다. 이 예에서는 단순성을 위해 수동으로 수행합니다. 실제 프로젝트에서는 위의 옵션 중 하나를 사용하여 빌드에 통합됩니다.

  <'s> 이제 첫 번째 실제 기능을 쓰자. 이것은 : <🎜 🎜>에 배치됩니다 매우 간단하고 읽기가 매우 쉽습니다. 그것은 우리에게 어떻게 해야하는지 말하지 않고 정확히 우리에게 무엇을하고 있는지 알려줍니다. 시도해 봅시다 :

  <<> (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) <🎜 🎜>

  그런 다음 첫 번째 단계 파일을 작성해 봅시다. 오이 출력이 말한대로 단계를 구현하면 유용한 일이 없지만 출력을 분류합니다. 이것은 : <🎜 🎜>에 배치됩니다

  const assert = require('assert');
  const webdriver = require('selenium-webdriver');
  const browser = new webdriver.Builder()
    .usingServer()
    .withCapabilities({'browserName': 'chrome' })
    .build();
  
  browser.get('http://en.wikipedia.org/wiki/Wiki');
  browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
  .then(function(links){
    assert.equal(19, links.length); // 假设的数字
    browser.quit();
  });

  Hook는 Cucumber.js의 방법으로 다양한 상황에 사용될 코드를 제공 할 수 있습니다. 이 모든 것이 다루어 지지만 기본적으로 오이가 직접 호출 할 코드를 작성하려면이 블록 중 하나에 있어야합니다. 여기서 샘플 코드는 세 가지 다른 단계 (각 주어진마다 하나)를 정의합니다. 각 블록은 속성 파일의 단계와 일치하는 문자열 (또는 필요한 경우 정규 표현식)과 해당 단계가 일치 할 때 실행되는 함수를 제공합니다. 자리 표시자는 단계 문자열에 배치 할 수 있으며 (또는 정규 표현식을 사용하는 경우 대신 캡처 표현식을 사용할 수 있으며, 이러한 자리 표시자는 추출하여 기능에 대한 인수로 제공됩니다. 이렇게하면 실제로는 아무것도하지 않고 더 깨끗한 출력을 제공합니다.

  <<> (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) <🎜 🎜> defineSupportCode 이제 모든 것이 작동하도록합시다. 단계 정의에서 코드를 구현하면됩니다. 우리는 또한 독서를 더 쉽게하기 위해 일종의 분류를 할 것입니다. 이는 비동기 작업을 수행하지 않기 때문에 실제로 콜백 매개 변수의 필요성을 제거합니다. 그 후, 우리의 <<>는 다음과 같이 보일 것입니다

  execute 다음과 같이 보입니다

  <<> (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) <🎜 🎜> <,> 그게 다야, 우리는 수학이 정확하다는 것을 증명하는 테스트 스위트를 확장하기가 매우 쉬웠다. 운동으로, 뺄셈을 지원하기 위해 확장하려고하는 이유는 무엇입니까? 문제가 있으면 의견에 도움을 요청할 수 있습니다.

  <<> (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체되며 일부 장은 병합되고 단순화됩니다)

  steps/maths.js <🎜 🎜> <<> 더 많은 고급 cucumber.js 팁 <🎜 <🎜

  모두 좋지만 오이는 우리의 삶을 더 편하게 만들기 위해 더 진보 된 일을 할 수 있습니다.

  Given I have opened a Web Browser
  When I load the Wikipedia article on "Wiki"
  Then I have "19" Wiki Links

  비동기 단계 정의

  지금까지 우리는 동기화 단계 정의 만 작성했습니다. 그러나 JavaScript 세계에서는 일반적으로 충분하지 않습니다. JavaScript의 많은 것들이 비동기식이어야하므로 처리 할 방법이 필요합니다. 고맙게도 Cucumber.js는 선호도에 따라이를 다루는 몇 가지 내장 방법이 있습니다. 비동기 단계를 처리하는보다 전통적인 JavaScript 메소드 인 위에서 제안한 방법은 콜백 기능을 사용합니다. 단계 정의에 콜백 함수가 마지막 매개 변수로서 있어야한다고 지정하면이 콜백이 트리거 된 후에 만 ​​단계가 완료되는 것으로 간주됩니다. 이 경우 콜백이 인수로 트리거되면 오류로 간주되며 단계가 실패합니다. 매개 변수없이 트리거되면 단계는 성공적인 것으로 간주됩니다. 그러나 콜백이 전혀 트리거되지 않으면 프레임 워크가 결국 시간이 걸리고 단계에 실패합니다. 이야기의 의미? 콜백 매개 변수를 수락하는 경우 호출하십시오. 예를 들어, 콜백을 사용한 HTTP API 호출의 단계 정의는 다음과 같습니다. 응답에서 콜백을 사용하기 때문에 요청을 사용하여 작성됩니다.

  (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다)

  더 선호되는 또 다른 방법은 유형을 반환하는 것입니다. 단계에서 약속을 반환하면 약속이 완료 될 때만 단계가 완료된 것으로 간주됩니다. 약속이 거부되면, 약속이 이행되면, 단계는 성공할 것입니다. 또는 반환 한 콘텐츠가 약속이 아닌 경우 단계는 즉시 성공적인 것으로 간주됩니다. 여기에는 정의되지 않은 또는 널 반환이 포함됩니다. 즉, 단계 실행 중 약속을 반환 해야하는지 여부를 선택할 수 있으며 프레임 워크가 필요에 따라 조정됩니다. 예를 들어, 약속을 사용하여 HTTP API 호출을위한 단계 정의는 다음과 같습니다. 이것은 Fetch API를 사용하여 작성됩니다. 응답에 대한 약속을 반환하기 때문입니다. (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체되며 일부 장은 병합되고 단순화됩니다)

  기능 배경, 장면 개요, 데이터 테이블, 후크, 이벤트 및 세계 기능 배경, 장면 개요, 데이터 테이블 및 후크 기능 (전, 후, Beforestep, AfterSp, AfterStep 등) 및 이벤트 처리 메커니즘과 같은 이러한 고급 기능은 테스트 효율성과 수상성을 크게 향상시킬 수 있습니다. 이러한 기능을 합리적으로 사용하면 BDD 테스트를보다 간결하고 쉽게 작성할 수 있습니다. 객체는 다른 단계 정의 사이에 데이터와 상태를 공유하여 테스트 로직을 단순화 할 수 있습니다.

  (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) 요약

  행동 중심 개발은 제품이 올바른 행동을 보장하는 훌륭한 방법이며, 오이는 도구로서 제품의 모든 이해 관계자가 읽고 이해하고 쓸 수 있도록이를 달성하는 매우 강력한 방법입니다. 행동 테스트. 이 기사는 오이가 할 수있는 일에 대한 피부를 다루므로 그 힘을 이해하기 위해 직접 시도해 보는 것이 좋습니다. 오이는 또한 매우 활발한 커뮤니티를 보유하고 있으며 메일 링리스트와 Gitter 채널이 필요한 경우 도움을받을 수있는 좋은 방법입니다. 이미 오이를 사용하고 있습니까? 이 기사에서 시도해 보도록 권장합니까? 어느 쪽이든, 나는 아래 의견에서 당신을 듣고 싶습니다. 이 기사는 Jani Hartikainen이 동료 검토했습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewers에게 감사합니다!

  (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다) 오이와 gherkin을 사용하여 JavaScript의 BDD에 대한 FAQ

  (다음 내용은 기본적으로 원본 텍스트와 일치하며 유창성과 가독성을 유지하도록 약간 조정되며 일부 문장은 동의어로 대체됩니다)

위 내용은 JavaScript의 BDD : Cucumber와 Gherkin을 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!