Testing

WebView/app/build.gradle

@@ -63,6 +63,16 @@ dependencies {
     implementation "com.google.android.material:material:$material_components_version"
 
     testImplementation 'junit:junit:4.13'
+    testImplementation 'androidx.test:core:1.0.0'
+    testImplementation 'org.mockito:mockito-core:1.10.19'
+
     androidTestImplementation 'androidx.test.ext:junit:1.1.1'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
-}
+    androidTestImplementation 'androidx.test.espresso:espresso-web:3.1.0'
+    androidTestImplementation 'com.android.support.test.espresso:espresso-contrib:3.0.2'
+    androidTestImplementation 'com.android.support.test.espresso:espresso-intents:3.0.2'
+    androidTestImplementation 'androidx.test:rules:1.1.1'
+    androidTestImplementation 'androidx.test:runner:1.1.0'
+    androidTestImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.0"
+
+}

WebView/app/src/androidTest/java/com/android/samples/webviewdemo/MainActivityTest.kt

@@ -0,0 +1,170 @@
+/*
+ * Copyright (C) 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.android.samples.webviewdemo
+
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import android.webkit.WebView
+import androidx.test.core.app.ApplicationProvider
+import androidx.test.espresso.web.assertion.WebViewAssertions.webMatches
+import androidx.test.espresso.web.model.Atoms.castOrDie
+import androidx.test.espresso.web.model.Atoms.script
+import androidx.test.espresso.web.sugar.Web.onWebView
+import androidx.test.espresso.web.webdriver.DriverAtoms.findElement
+import androidx.test.espresso.web.webdriver.DriverAtoms.getText
+import androidx.test.espresso.web.webdriver.DriverAtoms.webClick
+import androidx.test.espresso.web.webdriver.Locator
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import androidx.test.rule.ActivityTestRule
+import junit.framework.Assert.assertEquals
+import junit.framework.Assert.assertTrue
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.async
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.runBlocking
+import org.hamcrest.CoreMatchers.`is`
+import org.hamcrest.CoreMatchers.containsString
+import org.junit.Rule
+import org.junit.Test
+import org.junit.runner.RunWith
+
+
+/**
+ * Launch, interact, and verify conditions in an activity that has a WebView instance.
+ */
+@RunWith(AndroidJUnit4::class)
+
+
+class MainActivityTest {
+
+    val context = ApplicationProvider.getApplicationContext<Context>()
+
+    @Rule
+    @JvmField
+    val mainActivityRule = ActivityTestRule(MainActivity::class.java)
+    fun afterActivityLaunched() {
+        // Technically we do not need to do this - MainActivity has javascript turned on.
+        // Other WebViews in your app may have javascript turned off, however since the only way
+        // to automate WebViews is through javascript, it must be enabled.
+        onWebView().forceJavascriptEnabled()
+    }
+
+    // Test to check that the drop down menu behaves as expected
+    @Test
+    fun dropDownMenu_SanFran() {
+        mainActivityRule.getActivity()
+        onWebView()
+            .withElement(findElement(Locator.ID, "location"))
+            .perform(webClick()) // Similar to perform(click())
+            .withElement(findElement(Locator.ID, "SF"))
+            .perform(webClick()) // Similar to perform(click())
+            .withElement(findElement(Locator.ID, "title"))
+            .check(webMatches(getText(), containsString("San Francisco")))
+    }
+
+    // Test for checking createJsObject
+    @Test
+    fun jsObjectIsInjectedAndContainsPostMessage() {
+        mainActivityRule.getActivity()
+        onWebView()
+            .check(
+                webMatches(
+                    script(
+                        "return jsObject && jsObject.postMessage != null;",
+                        castOrDie(Boolean::class.javaObjectType)
+                    ),
+                    `is`(true)
+                )
+            )
+    }
+
+    @Test
+    fun valueInCallback_compareValueInput_returnsTrue() = runBlocking() {
+        mainActivityRule.activity
+        // Setup
+        val jsObjName = "jsObject"
+        val allowedOriginRules = setOf<String>("https://example.com")
+        val expectedMessage = "hello"
+        val callback = async { return@async "hello" }
+        // Get a handler that can be used to post to the main thread
+        val mainHandler = Handler(Looper.getMainLooper());
+        mainHandler.post {
+            run {
+                val webView = WebView(context)
+                // Create JsObject
+                createJsObject(
+                    webView,
+                    jsObjName,
+                    allowedOriginRules
+                ) { message -> callback
+                }
+                //Inject JsObject into Html
+                webView.loadDataWithBaseURL(
+                    "https://example.com", "<html></html>",
+                    "text/html", null, null
+                )
+                //Call js code to invoke callback
+                webView.evaluateJavascript("${jsObjName}.postMessage(`hello`)", null)
+            }
+        }
+        // evaluate what comes out -> it should be hello
+        assertEquals(expectedMessage, callback.await())
+    }
+
+    @Test
+    // Checks that postMessage runs on the UI thread
+    fun checkingThreadCallbackRunsOn() = runBlocking {
+        mainActivityRule.activity
+        // Setup
+        val jsObjName = "jsObject"
+        val allowedOriginRules = setOf<String>("https://example.com")
+        val callback = async { isUiThread() }
+        // Get a handler that can be used to post to the main thread
+        val mainHandler = Handler(Looper.getMainLooper())
+        // Start Interacting with webView on UI thread
+        mainHandler.post {
+            run {
+                val webView = WebView(context)
+                // Create JsObject
+                createJsObject(
+                    webView,
+                    jsObjName,
+                    allowedOriginRules
+                ) { message -> callback }
+                //Inject JsObject into Html
+                webView.loadDataWithBaseURL(
+                    "https://example.com", "<html></html>",
+                    "text/html", "UTF-8", null
+                )
+                //Call js code to invoke callback
+                webView.evaluateJavascript("${jsObjName}.postMessage(`hello`)", null)
+            }
+        }
+        assertTrue(callback.await())
+    }
+
+    /**
+     * Returns true if the current thread is the UI thread based on the
+     * Looper.
+     */
+    private fun isUiThread(): Boolean {
+        return Looper.myLooper() == Looper.getMainLooper()
+    }
+}

WebView/app/src/main/assets/index.html

@@ -22,12 +22,12 @@
   <body onload="getData()">
     <label for="location">Choose a location:</label>
     <select name="location" id="location" onchange="getData()">
-      <option value="newYork">New York</option>
-      <option value="sanFrancisco">San Francisco</option>
-      <option value="london">London</option>
+      <option id= "NYC" value="newYork">New York</option>
+      <option id= "SF" value="sanFrancisco">San Francisco</option>
+      <option id= "LDN" value="london">London</option>
     </select>
     <h1 id="title">Location</h1>
-    <img alt="weather" class="icon" id="icon" src="https://gcoleman799.github.io/res/drawable/sunny.png" />
+    <img alt="weather" class="icon" id="icon" src="https://raw.githubusercontent.com/res/drawable/sunny.png" />
     <h2 class="currentTemp" id="currentTemp">Current Temp</h2>
     <h2 class="shortDescription" id="shortDescription">Short Description</h2>
     <p class="longDescription" id="longDescription">Long Description</p>

WebView/app/src/main/assets/main.js

@@ -18,26 +18,40 @@ function sendAndroidMessage() {
      * in the WebViewCompat reference doc, the second parameter, MessagePorts, is optional.
      * Also note that onmessage, addEventListener and removeEventListener are not supported.
      */
-     // TODO: Change message to account for changes in data
 	jsObject.postMessage("The weather in " + `${document.getElementById("title").innerText}` + " today is " +
 	`${document.getElementById("shortDescription").innerText} `);
 }
 
+
 function getData() {
-    // TODO: Change the path to grab data from new location; Change longDescription and currentTemp to work with changes in data
-	fetch("https://gcoleman799.github.io/Asset-Loader/weather.json").then(function(resp) {
+    // This JSON files is hosted over the web
+   	fetch("https://raw.githubusercontent.com/android/views-widgets-samples/webview/WebView/sampleData/weather.json").then(function(resp) {
 		return resp.json();
 	}).then(function(data) {
 		var form = document.getElementById("location");
 		var currentLocation = form.options[form.selectedIndex].value;
+		console.log(data[currentLocation].description);
 		document.getElementById("title").innerText = form.options[form.selectedIndex].text;
-        document.getElementById("currentTemp").innerText = data[currentLocation].currentTemp;
+        document.getElementById("currentTemp").innerText = `${data[currentLocation].currentTemp}`+ "\xB0 F";
         document.getElementById("shortDescription").innerText = data[currentLocation].description;
         document.getElementById("longDescription").innerText = "Today in " + `${form.options[form.selectedIndex].text}`
-            + " there is a " + `${data[currentLocation].chancePrecip}` + " chance of precipitation and the humidity is "
-            + `${data[currentLocation].humidity}.`;
-        document.getElementById("icon").src = data[currentLocation].icon;
+            + " there is a " + `${data[currentLocation].chancePrecip}` + "% chance of precipitation and the humidity is "
+            + `${data[currentLocation].humidity}` + "%.";
+        document.getElementById("icon").src = getIcon(data[currentLocation].description);
 	})
 }
 
-// TODO: Create getIcon() function to decide which icon to render.
+/* These icons are hosted locally, in the res/drawable folder. However, we can call them using
+ * http(s):// URLs because we have configured AssetLoader in MainActivity. It is desirable to
+ * access the files in this way because it is compatible with the Same-Origin policy.
+ */
+function getIcon(description){
+    switch(description) {
+        case "Rainy":
+            return "https://raw.githubusercontent.com/views-widgets-samples/res/drawable/rain.png";
+        case "Clear Sky":
+            return "https://raw.githubusercontent.com/views-widgets-samples/res/drawable/sunny.png";
+        default:
+            return "https://raw.githubusercontent.com/views-widgets-samples/res/drawable/partly_cloudy.png";
+    }
+}