fixes #76: wdio async api

e2e/wdio/specs/accessibility.js

@@ -6,59 +6,59 @@
 const { isRealMobileDevice } = require("../util");
 
 describe("accessibility", () => {
-  before(() => {
-    browser.url("/");
+  before(async () => {
+    await browser.url("/");
 
     // Wait for orders to be loaded and displayed
-    const ordersList = $("[data-testid='orders-list']");
+    const ordersList = await $("[data-testid='orders-list']");
     expect(ordersList).toBeDisplayed();
   });
 
   !isRealMobileDevice() &&
     describe("keyboard navigation", () => {
-      it("should focus on My Orders menu item when tabbing first time", () => {
+      it("should focus on My Orders menu item when tabbing first time", async () => {
         // Tabs to the first menu item
         //
         // This bit can be flaky and possibly writing a utility to "tabUntil"
         // the desired element is focused could work more reliably. I've noticed
         // when this fails, it seems like the tab index is off by one.
-        browser.keys("Tab");
+        await browser.keys("Tab");
         const focused = browser.focused();
 
         expect(focused).toHaveHref("/orders");
         expect(focused).toHaveText("My Orders");
       });
 
-      it("should focus on first order next", () => {
+      it("should focus on first order next", async () => {
         // This will focus on the first order in the list
-        browser.keys("Tab");
+        await browser.keys("Tab");
         const focused = browser.focused();
 
         expect(focused).toHaveTextContaining("Order #1001");
       });
 
-      it("should navigate to order when selected with Enter key", () => {
+      it("should navigate to order when selected with Enter key", async () => {
         // Hitting "enter" will activate the link
-        browser.keys("Enter");
+        await browser.keys("Enter");
 
         // Make sure we navigated to the right page
         expect(browser).toHaveUrl(
           new URL("orders/1001", browser.config.baseUrl).toString()
         );
 
         // Wait for any order data to load
-        const title = $("ion-title*=Order #1001");
+        const title = await $("ion-title*=Order #1001");
         expect(title).toBeDisplayed();
       });
 
-      it("should be able to focus on notification toggle", () => {
+      it("should be able to focus on notification toggle", async () => {
         // Wait for Ionic page transition
         // without this, the test will be quite flaky
-        browser.pause(500);
+        await browser.pause(500);
 
         // Tabbing twice, once on the back button,
         // the next onto the toggle button
-        browser.keys(["Tab", "Tab"]);
+        await browser.keys(["Tab", "Tab"]);
 
         // Ensure the toggle button is what has focus
         const focused = browser.focused();
@@ -69,14 +69,14 @@ describe("accessibility", () => {
         expect(focused).toHaveAttribute("aria-checked", "false");
       });
 
-      it("should be able to toggle notifications", () => {
-        browser.keys("Enter");
+      it("should be able to toggle notifications", async () => {
+        await browser.keys("Enter");
 
         // A headless browser cannot show notifications, so we cannot toggle it to "true"
         // and rather than mock the whole Permissions Request sequence, all we need
         // to check is if the warn toast is shown, because the Enter key worked.
         if (browser.isHeadless()) {
-          const toast = $("ion-toast[data-presented");
+          const toast = await $("ion-toast[data-presented");
           expect(toast).toBeDisplayed();
         } else {
           const focused = browser.focused();

e2e/wdio/specs/notifications.js

@@ -11,26 +11,28 @@ describe("notifications", () => {
   // Only execute this test on Android Chrome, since
   // we switch to the NATIVE_APP context
   isAndroidChrome() &&
-    it("should show notification on Android Chrome", () => {
+    it("should show notification on Android Chrome", async () => {
       // Browse directly to the order detail page
-      browser.url("/orders/1001");
+      await browser.url("/orders/1001");
 
       // Grab the notification toggle by its ARIA label and toggle it
-      const notificationToggle = $("[aria-label='Toggle Push Notifications']");
+      const notificationToggle = await $(
+        "[aria-label='Toggle Push Notifications']"
+      );
       expect(notificationToggle).toHaveAttr("aria-checked", "false");
-      notificationToggle.click();
+      await notificationToggle.click();
 
       // A native prompt is being shown, so we have to
       // switch contexts
-      const webCtx = browser.getContext();
-      browser.switchContext("NATIVE_APP");
+      const webCtx = await browser.getContext();
+      await browser.switchContext("NATIVE_APP");
 
       // Grab the Allow button by XPath syntax
-      const allowButton = $("//android.widget.Button[@text='Allow']");
-      allowButton.click();
+      const allowButton = await $("//android.widget.Button[@text='Allow']");
+      await allowButton.click();
 
       // Switch back to the original CHROMIUM web context
-      browser.switchContext(webCtx);
+      await browser.switchContext(webCtx);
 
       // The toggle should be enabled
       expect(notificationToggle).toHaveAttr("aria-checked", "true");
@@ -40,9 +42,9 @@ describe("notifications", () => {
       // as local notifications don't work. If the order status changes,
       // the notification was successful otherwise it throws an error
       // preventing the status from changing.
-      browser.waitUntil(
-        () => {
-          const orderStatus = $("ion-card-title[role='heading']");
+      await browser.waitUntil(
+        async () => {
+          const orderStatus = await $("ion-card-title[role='heading']");
 
           return orderStatus.getText() === "shipped";
         },

e2e/wdio/specs/responsive-design.js

@@ -7,9 +7,9 @@
 const { isDevice, isDeviceOrientation } = require("../util");
 
 describe("responsive design", () => {
-  it("should load the homepage with order data", () => {
-    browser.url("/");
-    const ordersList = $("[data-testid='orders-list']");
+  it("should load the homepage with order data", async () => {
+    await browser.url("/");
+    const ordersList = await $("[data-testid='orders-list']");
     expect(ordersList).toBeDisplayed();
   });
 
@@ -18,11 +18,11 @@ describe("responsive design", () => {
   // to return what devices might have the notch
   isDevice("iPhone 11") &&
     isDeviceOrientation("landscape") &&
-    it("should move content over to account for notch in landscape mode", () => {
+    it("should move content over to account for notch in landscape mode", async () => {
       // Ionic will have a safe area variable set to the value
       // of `env(safe-area-inset-left)` when running in iPhone 11 Safari
       // to adjust for the notch when viewport-fit=cover is applied
-      const ionSafeAreaLeft = browser.execute(() =>
+      const ionSafeAreaLeft = await browser.execute(() =>
         getComputedStyle(document.querySelector("html")).getPropertyValue(
           "--ion-safe-area-left"
         )