Week4 miyasuta

wdio.conf.js

@@ -2,7 +2,7 @@ exports.config = {
     wdi5: {
         screenshotPath: require("path").join("webapp", "test", "screenshots"), // [optional] {string}, default: ""
         screenshotsDisabled: false, // [optional] {boolean}, default: false; if set to true, screenshots won't be taken and not written to file system
-        logLevel: "error", // [optional] error | verbose | silent, default: "error"
+        logLevel: "silent", // [optional] error | verbose | silent, default: "error"
         url: "index.html", // [mandatory] {string} name of your bootstrap html file. If your server autoredirects to a 'domain:port/'-like root url, use empty string ''
         skipInjectUI5OnStart: false, // [optional] {boolean}, default: false; true when UI5 is not on the start page, you need to later call <wdioUI5service>.injectUI5() manually
         waitForUI5Timeout: 15000 // [optional] {number}, default: 15000; maximum waiting time in milliseconds while checking for UI5 availability
@@ -84,7 +84,7 @@ exports.config = {
     // Define all options that are relevant for the WebdriverIO instance here
     //
     // Level of logging verbosity: trace | debug | info | warn | error | silent
-    logLevel: 'info',
+    logLevel: 'silent',
     //
     // Set specific log levels per logger
     // loggers:

webapp/controller/BaseController.js

@@ -1,6 +1,9 @@
 sap.ui.define([
-    "sap/ui/core/mvc/Controller"
-], function (Controller) {
+    "sap/ui/core/mvc/Controller",
+    "sap/ui/core/UIComponent",
+    "sap/ui/core/Fragment",
+    "sap/ui/core/routing/History"
+], function (Controller, UIComponent, Fragment, History) {
     "use strict";
 
     return Controller.extend("ui5.challenge.controller.BaseController", {
@@ -10,8 +13,49 @@ sap.ui.define([
         getRouter: function () {
             return UIComponent.getRouterFor(this);
         },
+
+		onNavBack: function () {
+			var oHistory = History.getInstance();
+			var sPreviousHash = oHistory.getPreviousHash();
+
+			if (sPreviousHash !== undefined) {
+				window.history.go(-1);
+			} else {
+				var oRouter = this.getOwnerComponent().getRouter();
+				oRouter.navTo("Main", {}, true);
+			}
+		},
+
         onPress: function () {
 
+        },
+
+        loadFragment: function (sFragmentName, oController, sId) {
+            if (!this._aFragments) {
+                this._aFragments = {};
+            }
+
+            return new Promise(function(resolve, reject) {
+                if (!this._aFragments[sFragmentName]) {
+                    var sName = this.getOwnerComponent().getMetadata().getComponentName() + ".fragment." + sFragmentName;
+                    Fragment.load({
+                        id: sId,
+                        name: sName,
+                        controller: oController
+                    }).then(function(oFragment) {
+                        this._aFragments[sFragmentName] = oFragment;
+                        this.getView().addDependent(oFragment);
+                        resolve(this._aFragments[sFragmentName]);
+                    }.bind(this));              
+                }else {
+                    resolve(this._aFragments[sFragmentName]);
+                }
+            }.bind(this));
+        },
+
+        getFragment: function (sFragmentName) {
+            return this._aFragments[sFragmentName];
         }
+
     });
 });

webapp/controller/Detail.controller.js

@@ -0,0 +1,27 @@
+sap.ui.define([
+    "./BaseController",
+    "sap/ui/model/json/JSONModel"
+], function (BaseController, JSONModel) {
+    "use strict";
+
+    return BaseController.extend("ui5.challenge.controller.Detail", {
+        onInit: function () {
+        },
+
+        onOpenDialog: function () {
+            this.loadFragment("Dialog", this, undefined)
+            .then(oDialog => {
+                oDialog.open()
+            })
+        },
+
+        onCloseDialog: function () {
+            this.getFragment("Dialog").close()
+        },
+
+        onBack: function () {
+            this.onNavBack()
+        }
+
+    });
+});

webapp/controller/Main.controller.js

@@ -0,0 +1,37 @@
+sap.ui.define([
+    "./BaseController",
+    "sap/ui/model/json/JSONModel",
+    "sap/m/MessageBox"
+], function (BaseController,
+	JSONModel,
+	MessageBox) {
+    "use strict";
+
+    return BaseController.extend("ui5.challenge.controller.Main", {
+        onInit: function () {
+            let model = {
+                items : [{
+                    title: "First Item",
+                    counter: 1 
+                },{
+                    title: "Secone Item",
+                    counter: 2 
+                },{
+                    title: "Third Item",
+                    counter: 1 
+                }]
+            }
+            this.getView().setModel(new JSONModel(model), "viewModel")
+        },
+
+        onGoToDetail: function () {
+            this.navTo("Detail", undefined, undefined)
+        },
+
+        onMainButtonPress: function () {
+            const message = this.getOwnerComponent().getModel("i18n").getResourceBundle().getText("message")
+            MessageBox.information(message)
+        }
+
+    });
+});

webapp/fragment/Dialog.fragment.xml

@@ -0,0 +1,12 @@
+<c:FragmentDefinition
+	xmlns="sap.m"
+	xmlns:c="sap.ui.core"
+>
+    <Dialog id="myDialog" type="Message" title="{i18n>myDialog}">
+        <content>
+        </content>
+        <endButton>
+            <Button text="{i18n>close}" press="onCloseDialog"/>
+        </endButton>
+    </Dialog>
+</c:FragmentDefinition>

webapp/i18n/i18n.properties

@@ -0,0 +1,11 @@
+mainTitleText=wdi5 rocks
+detailTitleText=ui5-challenge
+
+mainButton=Main Button
+myControl=Go to Detail
+navButton=Back to Main
+dialogButton=Open Dialog
+myDialog=My Dialog
+close=Close
+
+message=wdi5 test success!

webapp/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>title</title>
+    <title>ui5-challenge</title>
 
     <script
         id="sap-ui-bootstrap"

webapp/manifest.json

@@ -47,8 +47,28 @@
         "controlId": "app",
         "clearControlAggregation": false
       },
-      "routes": [],
-      "targets": {}
+      "routes": [
+        {
+					"pattern": "",
+					"name": "Main",
+					"target": "Main"
+				},
+        {
+					"pattern": "RouteDetail",
+					"name": "Detail",
+					"target": "Detail"
+				}       
+      ],
+      "targets": {
+				"Main": {
+					"viewId": "Main",
+					"viewName": "Main"
+				},
+				"Detail": {
+					"viewId": "Detail",
+					"viewName": "Detail"
+				}        
+      }
     },
     "rootView": {
       "viewName": "ui5.challenge.view.App",

webapp/test/e2e/week4.test.js

@@ -19,16 +19,42 @@ https://groups.community.sap.com/t5/coffee-corner-discussions/sap-community-code
 
 describe("week4: main or detail page ...", () => {
     before(async () => {
-        await Main.open()
+        //await Main.open()
         // or
         await Detail.open()
     })
 
-    it("", async () => {
-        // your first test
-    })
+    it("should have the right title", async () => {
+        const title = await browser.getTitle()
+        expect(title).toEqual("ui5-challenge")
+    })    
 
-    it("", async () => {
-        // your second test
+    it("Should go back to main page", async () => {
+        const navButton = await browser.asControl({
+            selector: {
+                id: "navButton",
+                viewName: Detail._viewName
+              }
+        })
+        await navButton.firePress()
+        const url = await browser.getUrl()
+        expect(url).toMatch(/.*\/index.html#*$/)
     })
+
+    // it("In the main page, press Main Button and get message", async () => {
+    //     const mainButton = await browser.asControl({
+    //         selector: {
+    //             id: "mainButton",
+    //             viewName: Main._viewName
+    //           }
+    //     })
+    //     await mainButton.firePress()
+
+    //     const messageBox = await await browser.asControl({
+    //         controlType: "sap.m.MessageBox",
+    //         viewName: Main._viewName
+    //     })
+    //     expect(messageBox).toBeTruthy()
+
+    // })
 })

webapp/view/Detail.view.xml

@@ -0,0 +1,13 @@
+<mvc:View 
+    controllerName="ui5.challenge.controller.Detail"
+    xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
+    <VBox>
+        <Title text="{i18n>detailTitleText}"/>     
+        <OverflowToolbar
+        >
+            <Button id="navButton" text="{i18n>navBack}" press="onBack"/>
+            <Button id="dialogButton" text="{i18n>dialogButton}" press="onOpenDialog"/>             
+        </OverflowToolbar>
+
+    </VBox>
+</mvc:View>

webapp/view/Main.view.xml

@@ -0,0 +1,24 @@
+<mvc:View 
+    controllerName="ui5.challenge.controller.Main"
+    xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
+    <VBox>
+        <Title text="{i18n>mainTitleText}"/>
+        <List
+            items="{
+                path: 'viewModel>/items'
+            }" >
+            <headerToolbar>
+                <OverflowToolbar>
+                    <ToolbarSpacer/>
+                    <Button id="mainButton" text="{i18n>mainButton}" press="onMainButtonPress"/>
+                    <Button id="myControl" text="{i18n>myControl}" press="onGoToDetail"/>
+                </OverflowToolbar>
+            </headerToolbar>            
+            <items>
+                <StandardListItem
+                    title="{viewModel>title}"
+                    counter="{viewModel>counter}"/>
+            </items>
+        </List>        
+    </VBox>
+</mvc:View>