fix(): Adjust component source to align to new API of SkateJS

define() => customElements.define(), static render(elem) => renderCallback(elem), and adjust tests accordingly. Also update all dependencies. 9, 10
jonathanweiss · Jan 27, 2017 · f7bca5d · f7bca5d
1 parent fea1564
commit f7bca5d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -33,54 +33,31 @@
     "url": "https://github.com/jonathanweiss/sk-progress-circle/issues"
   },
   "homepage": "https://github.com/jonathanweiss/sk-progress-circle#readme",
-  "dependencies": {
-    "babel-polyfill": "^6.16.0",
-    "skatejs": "^4.0.6",
-    "skatejs-web-components": "^5.0.0"
-  },
-  "devDependencies": {
-    "babel-core": "^6.18.2",
-    "babel-loader": "^6.2.7",
-    "babel-plugin-incremental-dom": "^3.4.0",
-    "babel-plugin-istanbul": "^3.0.0",
-    "babel-plugin-transform-react-jsx": "^6.8.0",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-stage-0": "^6.16.0",
-    "babel-runtime": "^6.18.0",
-    "chai": "^3.5.0",
-    "copy-webpack-plugin": "^4.0.0",
-    "coveralls": "^2.11.15",
-    "css-loader": "^0.26.0",
-    "cz-conventional-changelog": "^1.2.0",
-    "eslint": "^3.10.0",
-    "eslint-config-ak-base": "^5.1.0",
-    "istanbul-instrumenter-loader": "^1.0.0",
-    "karma": "^1.3.0",
-    "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage": "^1.1.1",
-    "karma-edge-launcher": "^0.1.2",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-istanbuljs-reporter": "^0.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.0",
-    "karma-safari-launcher": "^1.0.0",
-    "karma-sauce-launcher": "^1.0.0",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^1.8.0",
-    "less": "^2.7.1",
-    "less-loader": "^2.2.3",
-    "mocha": "^3.1.2",
-    "pre-commit": "^1.1.3",
-    "safari-launcher": "^2.0.5",
-    "semantic-release": "6.3.2",
-    "style-loader": "^0.13.1",
-    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.16.2"
-  },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.22.0",
+    "skatejs": "^4.6.5",
+    "skatejs-web-components": "^5.1.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-istanbul": "^3.1.2",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-0": "^6.22.0",
+    "babel-runtime": "^6.22.0",
+    "eslint": "^3.14.1",
+    "eslint-config-ak-base": "^5.3.0",
+    "istanbul-instrumenter-loader": "^1.2.0",
+    "karma": "^1.4.0",
+    "karma-edge-launcher": "^0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-webpack": "^2.0.2",
+    "less": "^2.7.2",
+    "pre-commit": "^1.2.2"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -110,11 +110,10 @@ class Progress extends Component {
 
   /**
    * Displays the progress circle
-   * @static
    * @param {Object} elem The DOM node
    * @return {Object} The resulting JSX tree
    */
-  static render(elem) {
+  renderCallback(elem) { // eslint-disable-line
     // Read relevant properties from the element
     const { status, color, backgroundColor, label, size, labelColor, labelSize } = elem;
 
@@ -137,4 +136,4 @@ class Progress extends Component {
   }
 }
 
-export default define('sk-progress', Progress);
+export default customElements.define('sk-progress', Progress);
diff --git a/test/progress.spec.js b/test/progress.spec.js
@@ -19,22 +19,18 @@ describe('sk-progress', () => {
     $target.parentNode.removeChild($target);
   });
 
-  it('is defined', () => {
-    expect(Progress).not.to.equal(undefined);
+  it('can create an HTML element', () => {
+    const createElement = () => (document.createElement('sk-progress'));
+    expect(createElement).to.not.throw(Error);
   });
 
-  it('renders an empty element', (done) => {
+  it('renders an empty element', () => {
     const emptyProgress = document.createElement('sk-progress');
     emptyProgress.id = 'empty';
     $target.appendChild(emptyProgress);
 
-    window.setTimeout(() => {
-      const $emptyProgress = $target.querySelector('#empty');
-
-      expect($emptyProgress.offsetWidth).to.be.above(0);
-      expect($emptyProgress.offsetHeight).to.be.above(0);
-      done();
-    }, ELEMENT_CONSTRUCTION_DELAY);
+    const $emptyProgress = $target.querySelector('#empty');
+    expect($emptyProgress.tagName).to.equal('SK-PROGRESS');
   });
 
   it('renders an big, filled element', (done) => {
@@ -44,6 +40,9 @@ describe('sk-progress', () => {
     bigProgress.size = 400;
     bigProgress.color = 'blue';
     bigProgress.backgroundColor = 'lightgrey';
+
+    // In Safari the component itself doesn't have dimensions (but the <div> of the shadow DOM has) unless we render it as "block"
+    bigProgress.style.display = 'block';
     $target.appendChild(bigProgress);
 
     window.setTimeout(() => {