chore: fix failing builds (#653)

* Update config.yml

* chore: bump deps that cause node-gyp errors

* fix: cypress, attempting to fix browserstack

* chore: swap to browserstack service

* chore: add missing deps

* chore: retry

* chore: stop caching cypress

* fix: tests

* chore: format names

* chore: swap out problematic android

Author: stipsan

.circleci/config.yml

@@ -1,17 +1,17 @@
 aliases:
   - &restore-cache
     keys:
-      - v5-dependencies-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v6-dependencies-{{ .Branch }}-{{ checksum "yarn.lock" }}
       # Fallback in case checksum fails
-      - v5-dependencies-{{ .Branch }}-
+      - v6-dependencies-{{ .Branch }}-
 
   - &install
     run: yarn --no-progress
 
   - &save-cache
     paths:
       - node_modules
-    key: v5-dependencies-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v6-dependencies-{{ .Branch }}-{{ checksum "yarn.lock" }}
 
   - &cypress-dependencies-install
     run:
@@ -22,7 +22,7 @@ version: 2
 jobs:
   Typecheck:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:12
     steps:
       - checkout
       - restore-cache: *restore-cache
@@ -32,7 +32,7 @@ jobs:
 
   Build:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:12
     steps:
       - checkout
       - restore-cache: *restore-cache
@@ -43,18 +43,13 @@ jobs:
 
   Web Platform Tests:
     docker:
-      - image: circleci/node:8-browsers
+      - image: circleci/node:12-browsers
     steps:
       - checkout
       - restore-cache: *restore-cache
       - *install
       - run: yarn build:umd
       - *cypress-dependencies-install
-      - restore-cache:
-          keys:
-            - v5-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
-            # Fallback in case checksum fails
-            - v5-tests-web-platform-dependencies-{{ .Branch }}-
       - run:
           command: yarn install --no-progress
           working_directory: tests/web-platform
@@ -70,24 +65,20 @@ jobs:
           path: tests/web-platform/junit
       - store_artifacts:
           path: tests/web-platform/cypress/screenshots
-      - save-cache:
-          paths:
-            - tests/web-platform/node_modules
-          key: v5-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
 
   Browserstack:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:12
     steps:
       - checkout
       - restore-cache: *restore-cache
       - *install
       - run: yarn build:umd
       - restore-cache:
           keys:
-            - v5-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
+            - v6-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
             # Fallback in case checksum fails
-            - v5-tests-web-platform-dependencies-{{ .Branch }}-
+            - v6-tests-web-platform-dependencies-{{ .Branch }}-
       - run:
           command: yarn install --no-progress
           working_directory: tests/web-platform
@@ -106,11 +97,11 @@ jobs:
       - save-cache:
           paths:
             - tests/web-platform/node_modules
-          key: v5-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
+          key: v6-tests-web-platform-dependencies-{{ .Branch }}-{{ checksum "tests/web-platform/yarn.lock" }}
 
   Semantic Release:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:12
     steps:
       - checkout
       - restore-cache: *restore-cache

.gitignore

@@ -19,4 +19,5 @@ dist
 es
 umd
 /index.js
-/types.js
+/types.js
+tests/web-platform/local.log

package.json

@@ -2,7 +2,7 @@
   "name": "scroll-into-view-if-needed",
   "description": "Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center",
   "license": "MIT",
-  "author": "Stian Didriksen",
+  "author": "Cody Olsen",
   "homepage": "https://scroll-into-view-if-needed.netlify.com",
   "repository": {
     "type": "git",
@@ -35,14 +35,14 @@
     "compute-scroll-into-view": "1.0.11"
   },
   "devDependencies": {
-    "@babel/cli": "7.2.3",
-    "@babel/core": "7.2.2",
-    "@babel/plugin-external-helpers": "7.2.0",
-    "@babel/preset-env": "7.3.1",
-    "@babel/preset-typescript": "7.1.0",
-    "babel-eslint": "10.0.1",
-    "babel-plugin-add-module-exports": "1.0.0",
-    "babel-plugin-dev-expression": "0.2.1",
+    "@babel/cli": "7.7.7",
+    "@babel/core": "7.7.7",
+    "@babel/plugin-external-helpers": "7.7.4",
+    "@babel/preset-env": "7.7.7",
+    "@babel/preset-typescript": "7.7.7",
+    "babel-eslint": "10.0.3",
+    "babel-plugin-add-module-exports": "1.0.2",
+    "babel-plugin-dev-expression": "0.2.2",
     "concurrently": "4.1.0",
     "eslint": "4.19.1",
     "eslint-config-prettier": "4.0.0",

tests/web-platform/browserstack.conf.js

@@ -1,25 +1,26 @@
-var browserstack = require('browserstack-local')
-
 exports.config = {
+  services: ['browserstack'],
   user: process.env.BROWSERSTACK_USERNAME,
   key: process.env.BROWSERSTACK_ACCESS_KEY,
+  browserstackLocal: true,
 
   specs: ['./tests/**'],
 
   maxInstances: 10,
   commonCapabilities: {
     name: `${process.env.CIRCLE_JOB}-${process.env.CIRCLE_BUILD_NUM}`,
     build: process.env.CIRCLE_BRANCH,
-    'browserstack.local': true,
     project: 'scroll-into-view-if-needed',
   },
 
   capabilities: [
     { browser: 'Safari', browser_version: '11.1' },
     { browser: 'IE', browser_version: '11.0' },
+    { browser: 'firefox' },
     // @TODO investigate how to make iPhone X able to run the tests
-    //{ os_version: '11.0', device: 'iPhone X', real_mobile: 'true' },
-    { os_version: '8.0', device: 'Google Pixel', real_mobile: 'true' },
+    //{ os_version: '11.0', device: 'iPhone X' },
+    // @TODO investigate why android fails on the getHTML step, even though the test itself is successful
+    //{ os_version: '10.0', device: 'Google Pixel 3' },
     // Disabling the devices below as we keep hitting a limit that causes tests to completely time out alltogether
     //{ browser: 'Edge' },
     // { browser: 'firefox' },
@@ -41,25 +42,6 @@ exports.config = {
     },
   },
   framework: 'mocha',
-
-  // Code to start browserstack local before start of test
-  onPrepare: function(config, capabilities) {
-    console.log('Connecting local')
-    return new Promise(function(resolve, reject) {
-      exports.bs_local = new browserstack.Local()
-      exports.bs_local.start({ key: exports.config.key }, function(error) {
-        if (error) return reject(error)
-        console.log('Connected. Now testing...')
-
-        resolve()
-      })
-    })
-  },
-
-  // Code to stop browserstack local after end of test
-  onComplete: function(capabilties, specs) {
-    exports.bs_local.stop(function() {})
-  },
 }
 
 // Code to support common capabilities

tests/web-platform/package.json

@@ -3,18 +3,20 @@
   "scripts": {
     "browserstack": "wdio ./browserstack.conf.js",
     "lint": "tslint -c tslint.json 'src/**/*.ts'",
-    "start": "serve -l 3000 cypress/",
+    "start": "serve -l 3000 .",
     "test": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=junit/test-results.xml'"
   },
   "dependencies": {
     "scroll-into-view-if-needed": "link:../..",
-    "serve": "7.1.3"
+    "serve": "11.3.0"
   },
   "devDependencies": {
-    "browserstack-local": "1.3.1",
-    "cypress": "2.1.0",
-    "wdio-junit-reporter": "0.4.3",
-    "wdio-mocha-framework": "0.5.13",
-    "webdriverio": "4.12.0"
+    "@wdio/browserstack-service": "^5.18.1",
+    "@wdio/cli": "^5.18.2",
+    "@wdio/dot-reporter": "^5.16.5",
+    "@wdio/junit-reporter": "5.18.3",
+    "@wdio/local-runner": "^5.18.2",
+    "@wdio/mocha-framework": "5.16.15",
+    "cypress": "3.8.1"
   }
 }

tests/web-platform/tests/cssom-view.js

@@ -1,29 +1,40 @@
+const assert = require('assert')
+
 const tests = [
-  'css/cssom-view/scrollintoview.html',
+  'css/cssom-view/scrollintoview',
   // ignore tests that require newer browser functionality
   //'css/cssom-view/scrollIntoView-smooth.html',
   //'css/cssom-view/scrollIntoView-shadow.html',
-  'custom/borders.html',
+  'custom/borders',
 ]
+console.log('MARK')
+console.log(browser.capabilities)
 const {
-  device,
-  os_version = 'latest',
-  browser: browserName = device,
-  browser_version = os_version,
-} = browser.desiredCapabilities
+  platform = '',
+  platformName = platform,
+  platformVersion = '',
+  deviceManufacturer = '',
+  deviceModel = '',
+  version = '',
+  browserName = '',
+} = browser.capabilities
+
+const funName = `${platformName} ${platformVersion} ${deviceManufacturer} ${deviceModel} ${browserName} ${version}`.replace(
+  '  ',
+  ' '
+)
 
-describe(`${browserName}: ${browser_version}`, function() {
+describe(funName, function() {
   tests.forEach(testName => {
-    it(testName, () => {
-      browser.url(`/${testName}`)
-      browser.waitForVisible('#results', 30000)
-      const testResults = JSON.parse(
-        browser.getHTML('#__testharness__results__', false)
-      )
+    it(testName, async () => {
+      await browser.url(`/${testName}`)
+      const wrapper = await $('#results')
+      await wrapper.waitForDisplayed(5000)
+      const results = await $('#__testharness__results__')
+      //await results.waitForExist(3000)
+      const testResults = JSON.parse(await results.getHTML(false))
       testResults.tests.forEach(testResult => {
-        if (testResult.message) {
-          throw new Error(testResult.message)
-        }
+        assert.strictEqual(testResult.message, null)
       })
     })
   })