【SAPUI5】튜토리얼을 보면서 Test Driven Development를 체험한다 (5) 검색 기능

OPA5에서 검색 기능 테스트

목록 위에 Search Field를 추가하고 입력한 내용과 일치하는 결과가 표시되는지 테스트합니다. 이번 포인트는 OPA5로 입력 조작을 하는 곳입니다.

참고할 자습서
Step 11: Testing User Input
Step 12: Adding a Search

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

User Journey

목록에서 특정 단어 ( "Bear") 검색

리스트에 1건만 표시된다 (좁힌 결과)

테스트용 구성

이번에는 WorklistJourney.js와 Worklist.js에 코드를 추가합니다.

test/integration/WorklistJourney.js

다음 테스트를 추가합니다.

    opaTest("Should be able to search for items", function (Given, When, Then){
        // Actions: "Bear"を検索
        When.onTheWorklistPage.iSearchFor("Bear");

        // Assertions: リストに1行だけ表示される
        Then.onTheWorklistPage.theTableHasOneItem();

        // Cleanup
        Then.iTeardownMyApp();      
    });

앱을 닫는 과정입니다.

test/integration/pages/Worklist.js

검색 필드에 입력하려면 EnterText를 dependency에 추가합니다.

sap.ui.define([
        'sap/ui/test/Opa5',
        'sap/ui/test/matchers/AggregationLengthEquals',
        'sap/ui/test/matchers/I18NText',
        'sap/ui/test/matchers/BindingPath',
        'sap/ui/test/actions/Press',
        'sap/ui/test/actions/EnterText' ←追加
    ],
    function (Opa5,
              AggregationLengthEquals,
              I18NText,
              BindingPath,
              Press,
              EnterText) ←追加{

액션을 추가합니다.

                    iSearchFor: function(sSearchString) {
                        return this.waitFor({
                            id: "searchField",
                            viewName: sViewName,
                            actions: new EnterText({
                                text: sSearchString
                            }),
                            errorMessage: "SearchField was not found."
                        });
                    }

어설션을 추가합니다.

                    theTableHasOneItem: function () {
                        return this.waitFor({
                            id: sTableId,
                            viewName: sViewName,
                            matchers: new AggregationLengthEquals({
                                name: "items",
                                length: 1
                            }),
                            success: function() {
                                Opa5.assert.ok(true, "The table contains one corresponding entry");
                            },
                            errorMessage: "The table does not contain one item"
                        });
                    }

실행해보기

실행하면 SearchField를 찾을 수 없다는 오류가 발생합니다.

검색 기능 구현

webapp/view/Worklist.view.xml

헤더에 검색창을 추가합니다.

                <headerToolbar>
                    <Toolbar>
                        <Label id="tableHeader" text="{worklistView>/worklistTableTitle}"/>
                        <ToolbarSpacer /> ←追加
                        <SearchField id="searchField" width="auto" search=".onFilterPosts" /> ←追加
                    </Toolbar>
                </headerToolbar>

Then.iTeardownMyApp(); 는 검색창을 오른쪽으로 맞추기 위해 넣은 스페이서입니다.
실행하면 다음과 같습니다.

webapp/controller/Worklist.controller.js

검색 버튼을 누를 때 호출되는 기능을 수행합니다.
먼저 dependency로 Filter 및 FilterOperator를 추가합니다.

검색용 함수는 다음과 같이 구현합니다. 여기에서는 Title이라는 항목이 검색창에 입력한 문자열을 포함하는 것을 추출합니다.

        onFilterPosts: function (oEvent) {
            //buld filter array
            var aFilter = [];
            var sQuery = oEvent.getParameter("query");
            if(sQuery) {
                aFilter.push(new Filter("Title", FilterOperator.Contains, sQuery));
            }

            // filter binding
            var oTable = this.byId("table");
            var oBinding = oTable.getBinding("items");
            oBinding.filter(aFilter);
        },

동작 확인

필터에 입력하면 이름 항목으로 출력 레코드가 좁혀졌습니다. (Title이라는 항목에 바인딩되었지만 표시는 Name)

테스트 실행

검색 기능에 대한 테스트가 성공적으로 완료되었습니다.

감상

“튜토리얼을 보면서 Test Driven Development를 체험한다”라는 제목으로 QUnit 테스트, OPA5 테스트 실행의 흐름에 대해 써 왔습니다.
QUnit에 관해서는, 테스트 작성이 비교적 간단하고, 기능을 구현하기 전에 테스트를 작성하는 것의 유효성을 실감할 수 있었습니다.
한편 OPA5는 테스트가 제대로 움직이는 곳까지 가져가는 곳에서 고생할 것 같다고 느꼈습니다. 거기에 노력을 나누는 것이라면, 사람이 테스트하는 것이 빠르다고 생각하거나.
「이런 조작의 경우는 이런 쓰는 방법을 한다」라고 하는 것이 어느 정도 정형화되어, 별로 생각하지 않아도 테스트를 쓸 수 있는 상태라면 OPA5도 유효한 것일지도 모릅니다.