fix: Disable deprecated Flow Control & use async / await

appveyor.yml

@@ -19,7 +19,7 @@ test_script:
   - node --version
   - npm --version
   # run tests
-  - npm run test-win
+  - npm run test
 
 build:
   off

conf.js

@@ -8,6 +8,14 @@ exports.config = {
   // Spec files with our tests.
   specs: ['*_spec.js'],
 
+  // Required since we're using `async` / `await`:
+  // "Because async/await uses native promises, it will make the Control Flow
+  // unreliable"
+  // Control Flow is also deprecated
+  // see: https://www.protractortest.org/#/control-flow
+  // see: https://github.com/SeleniumHQ/selenium/issues/2969
+  SELENIUM_PROMISE_MANAGER: false,
+
   // Options for the webdriver instance to use in tests.
   capabilities: {
     browserName: 'chrome',

package.json

@@ -3,12 +3,10 @@
   "scripts": {
     "webdriver-update": "webdriver-manager update --gecko false --standalone false",
     "install": "npm run webdriver-update || npm run webdriver-update",
-    "test": "percy exec -- protractor conf.js",
-    "test-win": "percy exec -- protractor.cmd conf.js"
+    "test": "percy exec -- protractor conf.js"
   },
   "devDependencies": {
-    "@percy/agent": "^0.5.2",
-    "@percy/protractor": "^1.0.3",
+    "@percy/protractor": "^1.0.4",
     "http-server": "^0.11.1",
     "protractor": "^5.4.2"
   },

todomvc_spec.js

@@ -17,40 +17,39 @@ describe('TodoMVC', function() {
     server.close()
   })
 
-  afterEach(function() {
+  afterEach(async function() {
     // Clear local storage between tests so that we always start with a clean slate.
-    browser.executeScript('window.localStorage.clear()')
+    await browser.executeScript('window.localStorage.clear()')
   })
 
-  it('Loads the app', function() {
-    browser.get(TEST_URL)
-    expect(element(by.css('section.todoapp')).isPresent()).toBe(true)
-    percySnapshot("Home page")
+  it('Loads the app', async function() {
+    await browser.get(TEST_URL)
+    expect(await element(by.css('section.todoapp')).isPresent()).toBe(true)
+    await percySnapshot("Home page")
   })
 
-  it('Accepts a new todo', function() {
-    browser.get(TEST_URL)
-    element(by.css('.new-todo')).sendKeys('New fancy todo', protractor.Key.ENTER)
+  it('Accepts a new todo', async function() {
+    await browser.get(TEST_URL)
+    await element(by.css('.new-todo')).sendKeys('New fancy todo', protractor.Key.ENTER)
 
-    element.all(by.css('.todo-list li')).then(function(todos) {
-      expect(todos.length).toBe(1)
-    })
+    const todos = await element.all(by.css('.todo-list li'))
+    expect(todos.length).toBe(1)
 
-    percySnapshot("New todo", { widths: [768, 992, 1200] })
+    await percySnapshot("New todo", { widths: [768, 992, 1200] })
   })
 
-  it('Lets you check off a a todo', function() {
-    browser.get(TEST_URL)
-    element(by.css('.new-todo')).sendKeys('A thing to accomplish', protractor.Key.ENTER)
+  it('Lets you check off a a todo', async function() {
+    await browser.get(TEST_URL)
+    await element(by.css('.new-todo')).sendKeys('A thing to accomplish', protractor.Key.ENTER)
 
-    let itemsLeftText = element(by.css('.todo-count')).getText()
-    expect(itemsLeftText).toBe('1 item left')
+    let itemsLeftText = await element(by.css('.todo-count')).getText()
+    await expect(itemsLeftText).toBe('1 item left')
 
-    element(by.css('input.toggle')).click()
+    await element(by.css('input.toggle')).click()
 
-    itemsLeftText = element(by.css('.todo-count')).getText()
-    expect(itemsLeftText).toBe('0 items left')
+    itemsLeftText = await element(by.css('.todo-count')).getText()
+    await expect(itemsLeftText).toBe('0 items left')
 
-    percySnapshot("Checked-off todo", { widths: [300] })
+    await percySnapshot("Checked-off todo", { widths: [300] })
   })
 })