prepare for week 3

WebEngineering-FHNW · Oct 3, 2019 · c772653 · c772653
1 parent 9cdf3f3
commit c772653
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 0 deletions.
diff --git a/docs/lecture-3/README-3-MVC.md b/docs/lecture-3/README-3-MVC.md
@@ -0,0 +1,86 @@
+# WebEngineering Module, MVC
+
+## Goals
+
+### Abilities
+- Writing tests for page navigation
+- Writing tests for form submission
+- Implementing basic workflow: form - controller - view
+- Constructing html views with derived content
+- Validating appropriately
+
+### Knowledge
+- Understanding the purpose and benefit of functional tests on the web
+- Understanding the purpose and benefit of unit tests
+- Understanding the web MVC cycle, request-response paradigm
+- Using models for request data binding and response view creation
+- Where and how to validate
+
+## Assignment 1
+
+Make sure that you have a Java JDK for any version 9/10/11/12 installed and `JAVA_HOME` 
+set appropriately. Check by running
+
+    java -version
+
+Run the tests
+
+    ./grailsw test-app
+
+_this will take a while to download the first time_    
+
+Run the application
+
+    ./grailsw run-app
+
+Browse to http://localhost:8080/static/Home.html .
+
+## Assignment 2
+
+Have a look at src/integration-test/groovy/mvc/HomeSecondSpec.groovy .
+
+Write a test, that goes to http://www.fhnw.ch
+and clicks on a link with text "Studierende".
+Validate the page title.
+
+## Assignment 3
+
+Have a look at 
+- http://localhost:8080/static/GradeCalculator.html
+- src/integration-test/groovy/mvc/CalculatorSpec.groovy (note the commented line 26)
+- src/main/resources/public/GradeCalculator.html 
+- grails-app/controllers/mvc/CalculatorController.groovy
+- views/calculator/CalculatorOutput.gsp (note the output placeholder)
+- src/test/groovy/mvc/CalculatorControllerSpec.groovy
+
+Uncomment line 26 in the integration test and run `./grailsw test-app`.
+
+Use `./grailsw open test-report` to see which test failed and why.
+
+Use `${ result }` in CalculatorOutput.gsp to put that calculated result in the right place.
+
+## Assignment 4
+
+In the GradeCalculator:
+what happens when _en_ or _exam_ do not represent numbers?
+
+Extend the integration test to cover the invalid input scenario.
+
+## Assignment 5
+
+What happens when _en_ or _exam_ do not fall into 1.0 - 6.0?
+
+Write down how you would address this issue.
+Unit test or integration test?
+Which code needs change: test, controller, view?
+
+## Homework 
+
+Take the InPlaceCalculator and modify the current solution so that
+- when the "en" field does not validate,
+  an error message is displayed right beneath the field and
+  the en input field itself is marked with a red border  
+- when the "exam" field does not validate,
+  an error message is displayed right beneath the field and
+  the exam input field itself is marked with a red border
+- note that both, en and exam, may be erroneous at the same time.  
diff --git a/docs/lecture-3/WebMVC.pdf b/docs/lecture-3/WebMVC.pdf
diff --git a/grails-app/controllers/webec/CalculatorController.groovy b/grails-app/controllers/webec/CalculatorController.groovy
@@ -0,0 +1,9 @@
+package webec
+
+class CalculatorController {
+
+    def calc(double en, double exam) {
+        double result = (en + exam) / 2
+        render view: "CalculatorOutput", model: [result: result]
+    }
+}
diff --git a/grails-app/views/calculator/CalculatorOutput.gsp b/grails-app/views/calculator/CalculatorOutput.gsp
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+<head>
+    <title>
+        Average
+    </title>
+</head>
+<body>
+
+<p> Your average is <output>placeholder goes here</output>.</p>
+
+<p> Back to the <a href="/static/GradeCalculator.html">calculator</a>.</p>
+
+</body>
+</html>
diff --git a/src/integration-test/groovy/webec/CalculatorSpec.groovy b/src/integration-test/groovy/webec/CalculatorSpec.groovy
@@ -0,0 +1,34 @@
+package webec
+
+import geb.spock.GebSpec
+import grails.testing.mixin.integration.Integration
+
+/**
+ * See http://www.gebish.org/manual/current/ for more instructions
+ */
+@Integration
+class CalculatorSpec extends GebSpec {
+
+
+    void "Basic calculation"() {
+        when:
+            go '/static/GradeCalculator.html'
+        then:
+        	title == "Grade Calculator"
+
+        when: "set valid input"
+            $("form").en   = 5
+            $("form").exam = 6
+            $("input", type: "submit").click()
+
+        then: "Result Page is displayed"
+            title == "Average"
+//            $("output").text() == "5.5"
+
+
+        when: "click on back link"
+            $("a", text: "calculator").click()
+        then:
+            title == "Grade Calculator"
+    }
+}
diff --git a/src/integration-test/groovy/webec/HomeSecondSpec.groovy b/src/integration-test/groovy/webec/HomeSecondSpec.groovy
@@ -0,0 +1,36 @@
+package webec
+
+
+import geb.spock.*
+import grails.testing.mixin.integration.Integration
+
+/**
+ * See http://www.gebish.org/manual/current/ for more instructions
+ */
+@Integration
+class HomeSecondSpec extends GebSpec {
+
+    void "test home is there"() {
+        when:"The home page is visited"
+            go '/static/Home.html'
+        then:"The title is Homepage"
+        	title == "Homepage"
+    }
+
+    void "home links to Second and Second links back"() {
+        when:"The home page is visited"
+            go '/static/Home.html'
+        then:"The title is Homepage"
+        	title == "Homepage"
+
+        when: "click on link to second"
+            $("a", text: "second").click()
+        then: "Second page is displayed"
+            title == "Second"
+
+        when: "click on back link"
+            $("a", text: "home").click()
+        then: "Home page is displayed, again"
+            title == "Homepage"
+    }
+}
diff --git a/src/main/resources/public/GradeCalculator.html b/src/main/resources/public/GradeCalculator.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+    <title>
+        Grade Calculator
+    </title>
+</head>
+<body>
+<form action="/calculator/calc" method="GET">
+    <div class="row">
+        <label for="en">continuous assessment grade</label> <input id="en" name="en" type="number">
+    </div>
+    <div class="row">
+        <label for="exam">final exam</label> <input id="exam" name="exam" type="number">
+    </div>
+    <div class="row">
+        <input type="submit">
+    </div>
+
+
+</form>
+</body>
+</html>
diff --git a/src/main/resources/public/Home.html b/src/main/resources/public/Home.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+    <title>
+        Homepage
+    </title>
+</head>
+<body>
+    Some text that links to a <a href="Second.html">second</a> page.
+</body>
+</html>
diff --git a/src/main/resources/public/Second.html b/src/main/resources/public/Second.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+    <title>
+        Second
+    </title>
+</head>
+<body>
+    Some text that links back to the <a href="Home.html">home</a> page.
+</body>
+</html>
diff --git a/src/test/groovy/webec/CalculatorControllerSpec.groovy b/src/test/groovy/webec/CalculatorControllerSpec.groovy
@@ -0,0 +1,24 @@
+package webec
+
+
+import grails.testing.web.controllers.ControllerUnitTest
+import spock.lang.Specification
+
+/**
+ * See the API for {@link ControllerUnitTest} for usage instructions.
+ */
+class CalculatorControllerSpec extends Specification implements ControllerUnitTest<CalculatorController> {
+
+    void "average of #en and #exam should be #result"(en, exam, result) {
+        when:
+        controller.calc(en, exam)
+        then: "average calculation"
+        model.result == result
+        where:
+        en  | exam | result
+        0.0 | 0.0  | 0.0
+        1.0 | 2.0  | 1.5
+        2.0 | 1.0  | 1.5
+
+    }
+}