【SAPUI5】라이브러리의 컴퍼넌트를 테스트하는 방법

12612 단어 SAPUI5피오리맞춤 라이브러리SAP

하고 싶은 일



다음과 같이 로직과 UI가 통합된 컴포넌트를 라이브러리에 정의합니다.
컴포넌트는 앱에 통합할 부품으로 사용하지만, 통합하기 전에 동작을 확인할 수 있도록 하고 싶습니다. 이를 위해서는 라이브러리에서 구성 요소를 호출하고 테스트할 수 있는 것이 바람직합니다.
간단한 예로서, 버튼을 표시하는 것만의 컴퍼넌트를 테스트해 보겠습니다.

버튼을 누르면 대화 상자가 나옵니다.


먼저 생각한 것 : QUnit이나 OPA5의 구조는 사용할 수 없습니까?



QUnit



QUnit은 로직 테스트용이므로 컴포넌트의 움직임을 확인하는 이번 용도에는 적합하지 않은 것으로 보였습니다. 그러나 표준 라이브러리 (sap.m 등)에서는 컨트롤에 정의 된 메서드의 동작 확인을 위해 QUnit이 사용되었으므로 다른 기회를 시도해 보겠습니다.

OPA5



OPA5를 사용하여 라이브러리를 테스트하는 예를 찾지 못했습니다. 또, 컴퍼넌트를 짜넣은 앱측에서 OPA5를 사용해 보았는데, 왠지 컴퍼넌트를 인식하지 않았기 때문에 단념했습니다.

정책



자동 테스트는 포기하고 브라우저에서 동작 확인하는 것에 그쳤습니다.
참고로 한 것은 다음 블로그입니다.
Create your own UI5 Library for UI5Lab

※ 실행 환경 : WebIDE

단계


  • 라이브러리에 테스트를위한 폴더 만들기
  • library.json 파일 만들기
  • 테스트를위한 HTML 만들기

    • 1. 라이브러리에 테스트용 폴더 만들기



    테스트 폴더는 테스트 폴더 아래에 라이브러리의 폴더 구성과 동일한 경로를 갖도록 만듭니다.


    2. library.json 파일 만들기



    library.json 파일에는 라이브러리의 이름이 들어 있습니다.

    library.json
    {
    "libraries": [
        "demo.library.zdemolibrary"
    ]   
}

    3. 테스트용 html 작성



    참고로 한 블로그에 따라 테스트용 파일을 sample 폴더 아래에 두었습니다.

    myButton.html
    <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Example - demo.library.zdemolibrary.myButton</title>
    <script id="sap-ui-bootstrap"
            type="text/javascript"
            data-sap-ui-libs="demo.library.zdemolibrary"
            src="../../../../../resources/sap-ui-core.js"
            data-sap-ui-theme="sap_fiori_3"
            >
    </script>

    <script type="text/javascript">
        sap.ui.getCore().attachInit(function () {
            sap.ui.component({
                name: "demo.library.zdemolibrary.myButton",
                settings: {},
                componentData: {},
                async: true,
                manifest : true          
            }).then(function(oComp){
                var oContainer = new sap.ui.core.ComponentContainer({
                    component: oComp
                });
                oContainer.placeAt("content");
            }.bind(this)).catch(function(oError) {
                jQuery.sap.log.error(oError);
            });
        });
    </script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
    src="../../../../../resources/sap-ui-core.js" 의 ../../../../../ 부분은 html 파일이 있는 위치에서 test 폴더까지의 상대 경로입니다.
    중앙 script에서 보통 컨트롤러에서 하는 것과 같은 방법으로 컴포넌트를 생성하고 body에 배치합니다.

    실행 결과



    myButton.html을 실행하면 다음과 같습니다. 이제 라이브러리 안에서 동작 확인을 할 수 있게 되었습니다.

    버튼을 누른 후


    참고



    라이브러리 소스

    Component.js
    sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/m/Button",
    "sap/m/MessageBox"
], function (UIComponent, Button, MessageBox) {
    "use strict";

    return UIComponent.extend("demo.library.zdemolibrary.myButton.Component", {

        metadata: {
            manifest: "json"
        },

        init: function () {
            UIComponent.prototype.init.apply(this, arguments);
        },

        destroy: function () {
            UIComponent.prototype.destroy.apply(this, arguments);
        },

        createContent: function  () {
            var oButton = this._getButton();
            return oButton;
        },

        onPress: function () {
            MessageBox.alert("Component Button pressed!");
        },

        _getButton: function () {
            if (!this.oButton) {
                this._oButton = new Button("button123", {
                    text: "myButton",
                    type: "Emphasized",
                    press: this.onPress
                });
            }
            return this._oButton;
        }
    });
});
    【SAPUI5】라이브러리의 messagebundle을 어플리케이션으로 사용하는 방법
    SAP S/4HANA에서 구매 오더가 등록 될 때마다 iPhone에 "아이언"과 Push 알림이 오면 꽤 흥분 버립니다 (정리)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage