최초로 crunchingnumbers.live년에 출판되었다
Ember은 테스트를 작성할 수 있고 첫날부터 효과가 있습니다.너는 너의 응용 프로그램이 오늘과 몇 년 후에 모두 정확하다고 믿을 수 있다.또 하나의 질문: 테스트를 어떻게 작성해야 합니까?
테스트는 Ember 프레임워크와 당신의 개발 주기의 핵심 부분이기 때문에 저는 저의 업무 경험과 이전에 수학자로서의 생활에 따라 블로그에 테스트를 작성하는 가장 좋은 실천에 관한 글을 몇 편 발표할 것입니다.
오늘, 우리는 왜 테스트가 중요한지, 어떤 도구가 당신의 테스트를 도울 수 있는지, 그리고 어떻게 테스트를 실행하고 디버깅하는지 소개할 것입니다.
일부 도구는 Ember에만 사용할 수 있습니다.그러나 내가 언급하고자 하는 최선의 실천은 반드시 당신의 틀에 독립해야 합니다.어쨌든 시험은 수학처럼 통용되는 언어이다.

1. 왜 내가 테스트를 해야 합니까?

만약 사용자와 이해관계자에게 응용 프로그램 (대소를 막론하고) 이 주어진 시간에 예상대로 실행될 수 있도록 보장하고 싶다면, 테스트를 작성하는 것은 필수적인 구성 부분이다.응용 프로그램이 클수록 수동 테스트의 원가가 높고 오류가 발생하기 쉽다.

xkcd는 테스트를 거치지 않은 방법에 대해 가볍게 쳤다.( source )
테스트를 작성하는 것도 흥미로운 활동으로 매일 납품하는 특성의 좋은 변화이자 코드를 재구성하고 개발자로서 개선하는 데 도움을 주는 방식이다.테스트도 살아있는 문서로 삼을 수 있다는 것이 새 개발자의 입사의 관건이다.

2. 어떤 도구가 나를 도울 수 있습니까?

a、 QUnit，QUnit DOM

각 Ember 애플리케이션에는 QUnit 및 QUnit DOM이 함께 제공됩니다.QUnit은 테스트 프레임워크이고 QUnit DOM은 라이브러리로 간결하고 읽기 쉬운 테스트를 작성할 수 있습니다.Ember가 아닌 모든 JavaScript 프레임워크에 Qunit 및 Qunit DOM을 사용할 수 있습니다.
Qunit DOM의 강력한 기능을 알아보려면 다음 코드 세그먼트를 고려하십시오.버튼 구성 요소에 올바른 태그와 속성이 표시되는지 확인합니다.

File: /tests/integration/components/simple-button-test.js

/*
    For simplicity, the import, module, and setup statements
    are omitted here. Our component accepts two arguments,
    label (string) and isDisabled (boolean).
*/
test('should show label', async function(assert) {
    await render(hbs`
        <SimpleButton
            @text="Hello world!"
        />
    `);
    let button = this.element.querySelector('button');

    // QUnit
    assert.strictEqual(button.textContent.trim(), 'Hello world!');

    // QUnit DOM
    assert.dom(button).hasText('Hello world!');
});

test('should allow disabling the button', async function(assert) {
    await render(hbs`
        <SimpleButton
            @text="Hello world!"
            @isDisabled={{true}}
        />
    `);
    let button = this.element.querySelector('button');

    // QUnit
    assert.strictEqual(button.disabled, true);
    assert.ok(button.classList.contains('is-disabled'));

    // QUnit DOM
    assert.dom(button).hasAttribute('disabled');
    assert.dom(button).hasClass('is-disabled');
});

b, Chai DOM 모카

Mocha은 또 다른 테스트 프레임워크다.모카에 더 익숙해지면 ember-mocha과 Chai DOM을 설치할 수 있습니다.
마찬가지로 모든 JavaScript 프레임워크와 함께 Mocha 및 Chai DOM을 사용할 수 있습니다.Ember를 사용하는 경우 ember-qunit-setupTest, setupRenderingTest 및 setupApplicationTest의 설정 기능을 ember-mocha의 설정 기능으로 교체해야 합니다.

c、 Ember CLI

Ember CLI을 사용하여 Ember 객체 (예: 구성 요소, 모델, 서비스) 를 생성할 때 테스트 파일을 생성합니다. 이 설정은 테스트 프레임워크와 type of test that you should write을 정확하게 해결합니다.
Ember CLI를 사용하여 객체와 별도로 테스트 파일을 생성할 수도 있습니다.예를 들어 터미널에 다음 줄을 입력하면

Terminal: /

ember g model-test student
ember g component-test student
ember g acceptance-test students

student 모델의 단원 테스트, student 구성 요소의 렌더링 테스트(통합 테스트), students 루트와 하위 루트를 검사하는 응용 프로그램 테스트(검수 테스트)를 얻을 수 있습니다.

d, 남은 재 테스트 선택기

테스트에서 DOM 요소를 가져오기를 원합니다.Ember는 JavaScript일 뿐이므로 querySelector 및 querySelectorAll 을 사용할 수 있습니다.이러한 방법은 선택기, 표지에 필요한 요소의 문자열을 전달해야 한다.
CSS 클래스를 선택기로 사용할 수 있지만 테스트의 가장 좋은 실천은 스타일과 테스트 간의 관계를 분리하는 것이다.클래스 이름과 DOM 구조는 시간의 흐름에 따라 당신, 당신의 팀, 플러그인 개발자의 발전에 따라 달라집니다.CSS 클래스에 의존하면 테스트가 중단되고 중대한 재작성이 필요합니다.
Ember Test Selectors은 DOM 변경에 대한 탄력적인 테스트를 작성하는 데 도움을 주는 플러그인입니다.테스트에 사용할 요소를 표시하려면 data-test-* 속성을 사용하십시오.이 플러그인은 @ember/test-helpers의 Qunit DOM과 조수와 함께 작동합니다.또한 프로덕션 빌드의 data-test-* 속성도 삭제됩니다.
버튼 구성 요소의 예시를 다시 한 번 고려하십시오.이번에는 우리 구성 요소가 레이블 외부에 재료 아이콘을 표시할 수 있습니다.

File: /app/components/simple-button.hbs

<button
    data-test-button={{@label}}
    type="button"
>
    {{#if @icon}}
        <i
            data-test-icon
            aria-hidden="true"
            class="material-icons"
        >
            {{@icon}}
        </i>
    {{/if}}

    <span data-test-label>{{@label}}</span>
</button>

File: /tests/integration/components/simple-button-test.js

test('should show icon and label', async function(assert) {
    await render(hbs`
        <SimpleButton
            @icon="face"
            @label="Hello world!"
        />
    `);

    // Bad
    assert.strictEqual(
        this.element.querySelector('.material-icons').textContent.trim(),
        'face',
        'The user sees the correct icon.'
    );

    assert.strictEqual(
        this.element.querySelector('span').textContent.trim(),
        'Hello world!',
        'The user sees the correct label.'
    );

    // Good
    assert.strictEqual(
        this.element.querySelector('[data-test-icon]').textContent.trim(),
        'face',
        'The user sees the correct icon.'
    );

    assert.strictEqual(
        this.element.querySelector('[data-test-label]').textContent.trim(),
        'Hello world!',
        'The user sees the correct label.'
    );

    // Great!
    assert.dom('[data-test-icon]')
        .hasText('face', 'The user sees the correct icon.');

    assert.dom('[data-test-label]')
        .hasText('Hello world!', 'The user sees the correct label.');
});

e, Ember CLI 환영

만약 응용 프로그램이 데이터를 수신하고 발송한다면, 이 동작을 성공적으로 실행할 수 있음을 보여 주십시오.오류 상태를 정확하게 처리할 수 있다는 것을 증명해야 합니다.
Ember CLI Mirage은 아날로그 서버를 만들 수 있는 플러그인입니다.너도 그것으로 너의 응용 프로그램이 서로 다른 서버 상태에서 테스트할 수 있다.테스트에서 Mirage 사용에 대한 자세한 내용은 visit the official website을 참조하십시오.

f, 잿더미 시험

너는 너의 테스트가 가능한 한 빨리 완성되기를 바란다.빠른 실행은 다른 해결 방안을 시도하고 여러 번 교체할 수 있다는 것을 의미한다.
Ember Exam은 병렬 운행을 허용하는 플러그인입니다.렌더링과 응용 프로그램 테스트가 많으면 테스트 속도를 현저히 높일 수 있습니다.

Ember 시험을 통해 병렬 및 임의 테스트를 수행할 수 있습니다.
Ember 시험은 또한 당신의 랜덤 테스트 운영 방식을 가능하게 할 수 있습니다.너는 왜 이렇게 하려고 하느냐?테스트를 정확하게 설정하고 삭제하지 않았을 때, 테스트 간에 의존 관계를 만들 수 있습니다.무작위 순서는 이런 무의식중에 발생한 오류를 포착하는 데 도움이 된다.

g, 포시

마지막으로 가장 중요하지 않은 것은 Percy은 시각화 회귀 테스트 도구로 의외의 스타일 변경을 포착하는 데 도움을 줄 수 있습니다.당신은 무료로 시험적으로 사용할 수 있으며, 추가 서비스 비용을 지불할 수 있습니다.

Percy의 시각적 차이는 의외의 스타일 변화를 포착할 수 있다.
일반적으로 권장하지 않지만 애플리케이션 테스트 대신 Percy를 사용하여 복잡한 워크플로우를 캡처할 수도 있습니다.

3. 테스트 실행 방법

테스트를 실행하는 옵션이 몇 개 있습니다.
먼저 터미널에 명령 ember test 또는 ember t을 입력하여 테스트 세트를 실행할 수 있습니다.이것은 한 번의 세트만 실행될 것이다.
반대로, 세트가 매번 파일이 변경된 후에 실행되기를 원한다고 가정하십시오.ember test --server 또는 ember t -s을 입력할 수 있습니다.
마지막으로 로컬 개발 서버(ember server)를 실행 중인 경우 /tests URI에 액세스할 수 있습니다.tests/index.html 템플릿이 표시됩니다.

Terminal: /

# Run all tests once
ember test
ember t

# Run all tests after every file change
ember test --server
ember t -s

a, 테스트 필터링 방법

단일 구성 요소나 페이지를 처리할 때, 파일이 변경될 때마다 일부 테스트를 실행하기를 원합니다.실행할 테스트를 지정하려면 --module 또는 --filter 옵션을 명령에 추가할 수 있습니다.--module 옵션을 사용하면 QUNit의 module() 또는 Mocha의 describe()에서 지정한 테스트 그룹을 선택할 수 있습니다.

Terminal: /

# Button component example
ember test --server --module="Integration | Component | simple-button"

# Run tests for a location service
ember t -s -m="Unit | Service | location"

--filter 옵션이 더 일반적입니다.모듈과 테스트 설명에 일치하는 단어를 제공할 수 있습니다.테스트 설명은 쿤트의 test() 또는 모카의 it()에 나타납니다.

Terminal: /

# Button component example
ember test --server --filter="should show icon and label"

# Test everything related to your dashboard
ember t -s -f="Dashboard"

# Run integration tests
ember t -s -f="Integration"

QUnit에서는 ember test --filter="!Acceptance"과 같이 필터의 시작 부분에 느낌표를 추가하여 테스트를 제외할 수 있습니다.모카에서 ember test --filter="Acceptance" --invert.
테스트 옵션에 대한 자세한 내용은 Ember CLI Documentation에 액세스하거나 명령줄에 ember help test을 입력합니다.

4. 테스트 디버깅 방법

테스트나 응용 프로그램 코드를 작성할 때 테스트의 실행이 실패할 수 있습니다.
문제를 찾아내려면 코드에 debugger 을 추가하여 중간 상태를 검사할 수 있다.테스트 코드와 응용 프로그램 코드에 이 줄을 추가할 수 있습니다.
Ember 설정으로 pauseTest() 및 resumeTest() 을 사용하여 테스트를 디버깅할 수 있습니다.pauseTest을 사용하면 DOM을 쉽게 검사할 수 있지만 테스트 코드에서만 사용할 수 있습니다.await pauseTest();을 테스트 코드에 추가하고 저장하기만 하면 됩니다.테스트가 이 줄에 도달했을 때, 프로그램의 상태를 검사할 수 있도록 멈추게 됩니다.완료되면 브라우저 콘솔에 resumeTest()을 입력하여 테스트를 계속합니다.

pauseTest를 사용하여 DOM을 확인할 수 있습니다.

테스트를 디버깅한 후 resumeTest를 입력합니다.

5. 요약

은백은 일등 공민을 시험하는 것을 고려했다.official tutorial 테스트를 포함하는 유일한 JavaScript 프레임워크인 것으로 알고 있습니다.Ember는 Qunit와 Mocha를 통합하는 간단한 방법을 제공하는 것 외에 개발자의 테스트 체험을 개선하기 위해 각종 플러그인과 디버깅 도구를 지원한다.
다음은 Ember 지원 유닛 테스트, 렌더링 테스트, 응용 프로그램 테스트의 3가지 유형을 살펴보겠습니다.우리는 모든 유형과 당신이 언제 그것들을 사용할 수 있는지 연구할 것입니다.