Merge pull request #264 from unexpectedjs/feature/browser-tests

Browser tests

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env"]
+  "presets": [["env", { "modules": false }]]
 }

.travis.yml

@@ -12,6 +12,7 @@ node_js:
   - 'node'
 
 addons:
+  chrome: stable
   apt:
     packages:
       - gcc-4.8
@@ -26,3 +27,10 @@ matrix:
   allow_failures:
     - node_js: '3'
     - node_js: '4'
+  include:
+  - name: BrowserStack IE11
+    node_js: '8'
+    env: BROWSER=ie11
+  - name: Chrome headless
+    node_js: "8"
+    env: BROWSER=ChromeHeadless

documentation/assertions/DOMElement/to-have-attributes.md

@@ -25,7 +25,7 @@ expect(element, 'to have attributes', 'id', 'class', 'data-test-id');
 
 ```output
 expected
-<div aria-label="Information box" class="callout info" id="stock-info-box" style="border: thin solid gray; padding: 12px">
+<div id="stock-info-box" class="callout info" aria-label="Information box" style="border: thin solid gray; padding: 12px">
   The JS stock it up 9.5%
 </div>
 to have attributes 'id', 'class', 'data-test-id'
@@ -67,7 +67,7 @@ expect(element, 'to have attributes', {
 
 ```output
 expected
-<div aria-label="Information box" class="callout info" id="stock-info-box" style="border: thin solid gray; padding: 12px">
+<div id="stock-info-box" class="callout info" aria-label="Information box" style="border: thin solid gray; padding: 12px">
   The JS stock it up 9.5%
 </div>
 to have attributes
@@ -116,7 +116,7 @@ expect(element, 'to only have attributes', 'id', 'aria-label');
 
 ```output
 expected
-<div aria-label="Information box" class="callout info" id="stock-info-box" style="border: thin solid gray; padding: 12px">
+<div id="stock-info-box" class="callout info" aria-label="Information box" style="border: thin solid gray; padding: 12px">
   The JS stock it up 9.5%
 </div>
 to only have attributes 'id', 'aria-label'

documentation/assertions/DOMElement/to-match.md

@@ -20,7 +20,7 @@ expect(element, 'to match', '[data-test-id=approve]');
 
 ```output
 expected
-<button class="primary" data-test-id="publish" disabled>
+<button data-test-id="publish" class="primary" disabled>
   Publish
 </button>
 to match '[data-test-id=approve]'

karma.conf.js

@@ -1,14 +1,9 @@
-var puppeteer = require('puppeteer');
-process.env.CHROME_BIN = puppeteer.executablePath();
-
 module.exports = function(config) {
   config.set({
     frameworks: ['mocha'],
 
     files: [
       './node_modules/unexpected/unexpected.js',
-      './node_modules/unexpected-sinon/lib/unexpected-sinon.js',
-      './node_modules/sinon/pkg/sinon.js',
       './unexpected-dom.js',
       './test/common/browser.js',
       './build/test/index.spec.js'
@@ -21,6 +16,27 @@ module.exports = function(config) {
       }
     },
 
-    browsers: ['ChromeHeadless']
+    browserStack: {
+      video: false,
+      project:
+        process.env.TRAVIS_BRANCH === 'master' &&
+        !process.env.TRAVIS_PULL_REQUEST_BRANCH // Catch Travis "PR" builds
+          ? 'unexpected-dom'
+          : 'unexpected-dom-dev'
+    },
+
+    browsers: ['ChromeHeadless', 'ie11'],
+
+    customLaunchers: {
+      ie11: {
+        base: 'BrowserStack',
+        browser: 'IE',
+        browser_version: '11',
+        os: 'Windows',
+        os_version: '7'
+      }
+    },
+
+    reporters: ['dots', 'BrowserStack']
   });
 };

package.json

@@ -17,10 +17,11 @@
     "changelog": "offline-github-changelog > CHANGELOG.md",
     "lint": "eslint .",
     "test": "npm run test-node && npm run test-docs",
+    "test-browser": "npm run build && npm run bundle && npm run build-tests && karma start --single-run --browsers ${BROWSER:-ChromeHeadless}",
     "test-docs": "mocha `find documentation -name '*.md'`",
     "test-node": "mocha ./test/*.js",
-    "test-headless": "npm run build-tests && karma start --single-run",
-    "ci": "npm run lint && npm run coverage && npm run build && npm run bundle && npm run test-headless",
+    "test-headless": "npm run test-browser",
+    "ci": "([ -z $BROWSER ] && npm run lint && npm run coverage); ([ -n $BROWSER ] && npm run test-browser)",
     "coverage": "nyc --reporter=lcov --reporter=text npm test",
     "preversion": "npm run build && npm run bundle && npm run lint && npm run test && git add unexpected-dom.*",
     "postversion": "npm run changelog && git add CHANGELOG.md && git commit --allow-empty -m 'Update changelog' && npm run generate-site && gh-pages -d site-build",
@@ -58,6 +59,7 @@
     "istanbul": "^0.4.5",
     "jsdom": "^14.0.0",
     "karma": "^3.1.4",
+    "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
     "magicpen": "^6.0.2",
@@ -66,13 +68,10 @@
     "nyc": "^14.0.0",
     "offline-github-changelog": "^1.2.0",
     "prettier": "~1.17.0",
-    "puppeteer": "^1.11.0",
-    "sinon": "^7.1.0",
     "uglifyjs": "^2.4.11",
     "unexpected": "^11.0.0-4",
     "unexpected-documentation-site-generator": "^6.0.0",
-    "unexpected-markdown": "^3.0.0",
-    "unexpected-sinon": "^10.7.1"
+    "unexpected-markdown": "^3.0.0"
   },
   "dependencies": {
     "extend": "^3.0.1",

src/index.js

@@ -164,19 +164,6 @@ function getAttributes(element) {
   return result;
 }
 
-function getCanonicalAttributes(element) {
-  const attrs = getAttributes(element);
-  const result = {};
-
-  Object.keys(attrs)
-    .sort()
-    .forEach(key => {
-      result[key] = attrs[key];
-    });
-
-  return result;
-}
-
 function entitify(value) {
   return String(value)
     .replace(/&/g, '&')
@@ -226,12 +213,11 @@ function stringifyAttribute(attributeName, value) {
 }
 
 function stringifyStartTag(element) {
-  const elementName =
-    element.ownerDocument.contentType === 'text/html'
-      ? element.nodeName.toLowerCase()
-      : element.nodeName;
+  const elementName = isInsideHtmlDocument(element)
+    ? element.nodeName.toLowerCase()
+    : element.nodeName;
   let str = `<${elementName}`;
-  const attrs = getCanonicalAttributes(element);
+  const attrs = getAttributes(element);
 
   Object.keys(attrs).forEach(key => {
     str += ` ${stringifyAttribute(key, attrs[key])}`;
@@ -476,18 +462,15 @@ module.exports = {
       name: 'HTMLDocument',
       base: 'DOMDocument',
       identify(obj) {
-        return this.baseType.identify(obj) && obj.contentType === 'text/html';
+        return this.baseType.identify(obj) && isInsideHtmlDocument(obj);
       }
     });
 
     expect.exportType({
       name: 'XMLDocument',
       base: 'DOMDocument',
       identify(obj) {
-        return (
-          this.baseType.identify(obj) &&
-          /^(?:application|text)\/xml|\+xml\b/.test(obj.contentType)
-        );
+        return this.baseType.identify(obj) && !isInsideHtmlDocument(obj);
       },
       inspect(document, depth, output, inspect) {
         output.code('<?xml version="1.0"?>', 'xml');
@@ -818,7 +801,7 @@ module.exports = {
     expect.exportAssertion(
       '<DOMNodeList> to [exhaustively] satisfy <string>',
       (expect, subject, value) => {
-        const isHtml = subject.ownerDocument.contentType === 'text/html';
+        const isHtml = isInsideHtmlDocument(subject);
 
         expect.argsOutput = output =>
           output.code(value, isHtml ? 'html' : 'xml');
@@ -834,7 +817,7 @@ module.exports = {
     expect.exportAssertion(
       '<DOMNodeList> to [exhaustively] satisfy <DOMNodeList>',
       (expect, subject, value) => {
-        const isHtml = subject.ownerDocument.contentType === 'text/html';
+        const isHtml = isInsideHtmlDocument(subject);
         const satisfySpecs = [];
         for (let i = 0; i < value.length; i += 1) {
           satisfySpecs.push(convertDOMNodeToSatisfySpec(value[i], isHtml));
@@ -862,7 +845,7 @@ module.exports = {
     expect.exportAssertion(
       '<DOMDocumentFragment> to [exhaustively] satisfy <DOMDocumentFragment>',
       (expect, subject, { childNodes }) => {
-        const isHtml = subject.ownerDocument.contentType === 'text/html';
+        const isHtml = isInsideHtmlDocument(subject);
         return expect(
           subject,
           'to [exhaustively] satisfy',
@@ -978,12 +961,18 @@ module.exports = {
                   'The children and textContent properties are not supported together'
                 );
               }
+
+              let contentType = subject.ownerDocument.contentType;
+              if (!contentType) {
+                // provide a value in the absence of a contentType (IE11)
+                contentType = isInsideHtmlDocument(subject)
+                  ? 'text/html'
+                  : 'application/xml';
+              }
+
               return bubbleError(() =>
                 expect(
-                  makeAttachedDOMNodeList(
-                    subject.childNodes,
-                    subject.ownerDocument.contentType
-                  ),
+                  makeAttachedDOMNodeList(subject.childNodes, contentType),
                   'to satisfy',
                   value.children
                 )
@@ -1596,7 +1585,9 @@ module.exports = {
 
     function findMatchesWithGoodScore(data, spec) {
       const elements =
-        typeof data.length === 'number' ? Array.from(data) : [data];
+        typeof data.length === 'number'
+          ? Array.prototype.slice.call(data)
+          : [data];
 
       const result = [];
       let bestScore = 0;

test/common/browser.js

@@ -1,5 +1,4 @@
 /*global expect:true*/
 /* eslint no-unused-vars: "off" */
 expect = window.weknowhow.expect.clone();
-expect.use(window.weknowhow.unexpectedSinon);
 expect.use(window.unexpected.dom);

test/common/node.js

@@ -1,8 +1,6 @@
-/*global expect:true, jsdom:true, sinon:true*/
+/*global expect:true, jsdom:true*/
 /* eslint no-unused-vars: "off" */
 expect = require('unexpected')
   .clone()
-  .use(require('unexpected-sinon'))
   .use(require('../../src/index'));
 jsdom = require('jsdom');
-sinon = require('sinon');