Testing

WebView/app/build.gradle

@@ -63,6 +63,15 @@ 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,160 @@
+/*
+ * 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.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.filters.LargeTest
+import androidx.test.rule.ActivityTestRule
+import junit.framework.Assert.assertEquals
+import junit.framework.Assert.assertTrue
+import kotlinx.coroutines.CompletableDeferred
+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)
+@LargeTest
+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 onMessageReceived = CompletableDeferred<String>()
+        // 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 ->
+                    onMessageReceived.complete(message)
+                }
+                webView.loadDataWithBaseURL(
+                    "https://example.com",
+                    "<html><script>${jsObjName}.postMessage(`${expectedMessage}`)</script></html>",
+                    "text/html",
+                    null,
+                    null
+                )
+            }
+        }
+        // evaluate argument being passed into onMessageReceived
+        assertEquals(expectedMessage, onMessageReceived.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 expectedMessage = "hello"
+        val onMessageReceived = CompletableDeferred<Looper>()
+        // 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 -> onMessageReceived.complete(Looper.myLooper()!!) }
+                //Inject JsObject into Html
+                webView.loadDataWithBaseURL(
+                    "https://example.com",
+                    "<html><script>${jsObjName}.postMessage(`${expectedMessage}`)</script></html>",
+                    "text/html",
+                    "UTF-8",
+                    null
+                )
+            }
+        }
+        assertTrue(onMessageReceived.await() == Looper.getMainLooper())
+    }
+}

WebView/app/src/main/AndroidManifest.xml

@@ -25,7 +25,7 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/AppTheme">
+        android:theme="@style/Theme.MyApp">
         <activity android:name=".MainActivity">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

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

@@ -16,18 +16,19 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link href="app.css" rel="stylesheet">
     <script async src="main.js"></script>
+    <meta name="color-scheme" content="dark light">
+    <link rel="stylesheet" href="style.css">
   </head>
   <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/views-widgets-samples/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,39 @@ 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;
 		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";
+    }
+}

WebView/app/src/main/assets/app.css → WebView/app/src/main/assets/style.css

@@ -14,46 +14,40 @@
  * limitations under the License.
  */
 body {
-  background-color: light-blue;
+  background-color: white;
 }
-h1 {
-  color: white;
+h1, h2 {
   text-align: center;
-}
-h2 {
-  color: grey;
+  color: black;
   text-align: center;
 }
 p {
   font-family: verdana;
   font-size: 20px;
 }
 label {
-    font-family: verdana;
-    font-size: 20px;
+  font-family: verdana;
+  font-size: 20px;
 }
 img {
   border-radius: 4px;
   padding: 5px;
 }
 .button {
+  color: black;
+  background-color:#03DAC6;
   font-family: verdana;
-  background-color:#44c767;
   border-radius:8px;
-  border:1px solid #18ab29;
+  border:1px solid #03DAC6;
   display:inline-block;
   cursor:pointer;
-  color:#ffffff;
   font-size:18px;
   padding:16px 31px;
   text-decoration:none;
   text-shadow:0px 1px 0px #2f6627;
   margin-left: 27%;
   margin-top: 5%;
 }
-.button:hover {
-  background-color:#42b007;
-}
 .button:active {
   position:relative;
   top:1px;
@@ -91,4 +85,17 @@ img {
   padding-top: 20%;
   padding-left: 5%;
   padding-right: 5%;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #383838;
+  }
+  h1, h2 {
+    color: white;
+  }
+  select {
+    color: white;
+    background-color: #1f1f1f;
+    border-color: #121212;
+  }
 }