【SAPUI5】튜토리얼을 보면서 Test Driven Development를 체험한다 (2) QUnit

Test Driven에서 포맷터 구현

이번에는 Test Driven(테스트를 먼저 쓰는 방식)으로 포맷터의 기능을 구현합니다. 포맷터는 데이터를 소정의 표시 형식이 되도록 성형하는 기능입니다.
다음 자습서를 참조하십시오.
Step 2: A First Unit Test
Step 3: Adding the Price Formatter

튜토리얼을 보면서 Test Driven Development 체험 시리즈의 목차는 여기

QUnit 테스트용 설정 확인

이번 테스트에서 사용하는 파일은 test/unit 폴더 아래에 저장됩니다.

QUnit 테스트를 실행할 때 unitTests.qunit.html을 실행합니다.
여기에서 unitTests.qunit.js가 호출되고 AllTests.js가 호출되는 구성이 있습니다. 템플릿에서 앱을 만든 경우에도 동일한 구성입니다. (모범 사례)


각 파일의 내용을 살펴 보겠습니다.
unitTests.qunit.js
QUnit을 시작하고 있습니다.


AllTests.js
테스트 대상 기능 (formatter 등)을 호출하는 js 파일을 dependency로 설정합니다.


model/formatter.js
Number unit의 테스트 케이스가 들어 있습니다.


model/models.js
장치 모델링 테스트 케이스가 들어 있습니다.


알 수 있듯이 테스트 폴더와 파일은 테스트 대상 기능과 동일한 구성입니다. 이것이 관례라고 합니다.

어디에 손을 넣으면 좋을까?

AllTests.js와 테스트 대상 기능을 호출하는 js 파일을 손에 넣습니다.
AllTests.js는 테스트할 js 파일을 추가한 경우에만 변경이 필요하며 이번에는 변경하지 않습니다.

Test Driven Development 단계

Test Driven Development는 다음 순서로 진행됩니다.
1. 테스트 작성
2. 기능 구현
3. 테스트 실행
4. 기능을 앱에 통합

구현할 기능

가격의 색상이 금액에 따라 달라집니다.

조건

1. 테스트 작성

사양이 정해진 곳에서 조속히 테스트를 씁니다.

포맷터의 갈라만 작성

테스트 실행 js에서 호출 할 수 있도록 포맷터의 갈라 만 먼저 만들어 둡니다.
webapp/model/formatter.js

        priceState: function(){
        }

QUnit 테스트 작성

PriceState용 모듈(테스트 단위)과 priceState를 호출하는 미니 함수를 정의합니다. 이 함수는 다음에 다양한 값으로 테스트를 실행할 때 사용합니다.
assertion에서 PriceState에서 반환된 값과 가정 결과를 비교하고 일치하면 OK입니다.

webapp/test/unit/model/formatter.js

    QUnit.module("Price State");
    function priceStateTestCase(oOptions){
        // Act
        var sState = formatter.priceState(oOptions.price);
        // Assert
        oOptions.assert.strictEqual(sState, oOptions.expected, "The price state was correct");
    }

그런 다음 위의 함수를 호출하여 테스트를 실행합니다. 테스트해야 할 조건을 주석으로 먼저 쓰면 좋다고 생각합니다.

    //price < 50: Status is green (Success)
    //price >= 50 and price < 250: Status is normal (None)
    //price >= 250 and price < 2000: Status is orange (Warning)
    //price >= 2000: Status is red (Error)

주석 아래에 테스트를 작성합니다.

    //price < 50: Status is green (Success)
    QUnit.test("Should format the products with a price lower than 50 to Success", function(assert){
        priceStateTestCase.call(this, {
            assert: assert,
            price: 42,
            expected: "Success"
        });
    });

나머지 경우도 마찬가지로 목적에 맞는 가격과 가정 결과의 조합을 제공합니다.

    //price >= 50 and price < 250: Status is normal (None)
    QUnit.test("Should format the products with a price of 50 to Normal", function(assert){
        priceStateTestCase.call(this, {
            assert: assert,
            price: 50,
            expected: "None"
        });
    }); 

    QUnit.test("Should format the products with a price betweenn 50 and 250 to Normal", function(assert){
        priceStateTestCase.call(this, {
            assert: assert,
            price: 112,
            expected: "None"
        });
    }); 

    //price >= 250 and price < 2000: Status is orange (Warning)
    QUnit.test("Should format the products with a price betweenn 250 and 2000 to Warning", function(assert){
        priceStateTestCase.call(this, {
            assert: assert,
            price: 798,
            expected: "Warning"
        });
    }); 

    //price >= 2000: Status is red (Error)
    QUnit.test("Should format the products with a price higher than 2000 to Error", function(assert){
        priceStateTestCase.call(this, {
            assert: assert,
            price: 2001,
            expected: "Error"
        });
    });     

실행 결과

PriceSate의 테스트 결과는 모두 오류가 발생했습니다. 아직 기능을 구현하지 않았기 때문에 예상대로입니다.

2. 기능 구현

포맷터를 구현합니다.

        priceState: function(iPrice){
            if(iPrice < 50){
                return "Success";
            }else if(iPrice >= 50 && iPrice < 250){
                return "None";
            }else if(iPrice >= 250 && iPrice < 2000){
                return "Warning";
            }else{
                return "Error";
            }
        }

3. 테스트 실행

구현 후 다시 테스트합니다. 이번에는 정상 종료됩니다.
이제 기능이 올바르게 구현되었음을 확인했습니다.

4. 기능을 앱에 통합

ObjectNumber의 컨트롤 (price를 내고있는 곳)에 state라는 속성을 추가합니다. 여기에 priceState를 설정합니다.
view/Worklist.view.xml

                            <ObjectNumber
                                number="{
                                    path: 'Price',
                                    formatter: '.formatter.numberUnit'
                                }"
                                state="{
                                    path: 'Price',
                                    formatter: '.formatter.priceState'
                                }"
                                unit="{Currency}"
                                />

실행 결과

가격의 색상이 금액에 따라 변경되었습니다. 구현과 동시에 테스트도 끝났습니다!

관련 기사

튜토리얼을 보면서 Test Driven Development 체험 (1) 개요
튜토리얼을 보면서 Test Driven Development 체험 (3) OPA5