From af1d77f695652ec4fd4472eaf0f887445db79b4e Mon Sep 17 00:00:00 2001 From: "Uemit Seren @ Laptop" Date: Fri, 26 May 2017 00:23:53 +0200 Subject: [PATCH] First Polymer 2.x version Refactor Polymer 1.x version to class based element. --- .eslintrc.json | 3 +- bower.json | 12 +-- demo/index.html | 172 ++++++++++++++++++++++--------------------- index.html | 39 ++++------ polymer.json | 2 +- test/.eslintrc.json | 3 +- test/basic-test.html | 133 +++++++++++++++++---------------- timeu-wizard.html | 152 +++++++++++++++++++------------------- 8 files changed, 258 insertions(+), 258 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index cc13518..b2f1b7e 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,7 +4,8 @@ "no-console": 0 }, "env": { - "browser": true + "browser": true, + "es6": true }, "plugins": [ "html" diff --git a/bower.json b/bower.json index d6bc1f0..6f0fbf1 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "timeu-wizard", - "version": "1.1.0", + "version": "2.0.0", "authors": [ "Uemit Seren " ], @@ -19,12 +19,14 @@ "/test/" ], "dependencies": { - "polymer": "Polymer/polymer#^1.9.0" + "polymer": "Polymer/polymer#^2.0.0" }, "devDependencies": { - "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", - "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0", "web-component-tester": "Polymer/web-component-tester#^6.0.0", - "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0" + }, + "resolutions": { + "polymer": "^2.0.0" } } \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 1d352e7..704e53e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -21,93 +21,97 @@ - + + + - - + - - - - - - - - + + + + timeu-wizard + + + + diff --git a/polymer.json b/polymer.json index 1ae44d6..2bd10b6 100644 --- a/polymer.json +++ b/polymer.json @@ -1,7 +1,7 @@ { "lint": { "rules": [ - "polymer-1" + "polymer-2" ] } } diff --git a/test/.eslintrc.json b/test/.eslintrc.json index c94c159..964a3be 100644 --- a/test/.eslintrc.json +++ b/test/.eslintrc.json @@ -8,6 +8,7 @@ "fixture": true, "Polymer": true, "async": true, - "expect": true + "expect": true, + "flush": true } } \ No newline at end of file diff --git a/test/basic-test.html b/test/basic-test.html index 4824664..0f5c50b 100644 --- a/test/basic-test.html +++ b/test/basic-test.html @@ -34,33 +34,32 @@ function expectActive(li) { expect(li.classList.contains('done')).to.be.false; expect(li.classList.contains('active')).to.be.true; - expect(window.getComputedStyle(Polymer.dom(li).querySelector('.checkicon')).opacity).to.be.equal('0'); + expect(window.getComputedStyle(li.querySelector('.checkicon')).opacity).to.be.equal('0'); } function expectDone(li) { expect(li.classList.contains('done')).to.be.true; expect(li.classList.contains('active')).to.be.false; - expect(window.getComputedStyle(Polymer.dom(li).querySelector('.checkicon')).opacity).to.be.equal('1'); + expect(window.getComputedStyle(li.querySelector('.checkicon')).opacity).to.be.equal('1'); } function expectEmpty(li) { expect(li.classList.contains('done')).to.be.false; expect(li.classList.contains('active')).to.be.false; - expect(window.getComputedStyle(Polymer.dom(li).querySelector('.checkicon')).opacity).to.be.equal('0'); + expect(window.getComputedStyle(li.querySelector('.checkicon')).opacity).to.be.equal('0'); } function expectLabel(li,label) { - expect(Polymer.dom(li).querySelector('span').textContent).to.be.equal(label); + expect(li.querySelector('span').textContent).to.be.equal(label); } function expectContent(li,content) { expect(content).to.contain(window.getComputedStyle(li,':before').content); } - suite('', function() { + suite('', function() { var myEl; - setup(function() { myEl = fixture('timeu-wizard-fixture'); }); @@ -104,81 +103,91 @@ }); test('decrement step--', function() { - myEl.step =2; + myEl.step =2; myEl.decrement(); expect(myEl.step).to.be.equal(1); }); suite('dom structure', function() { - test('check basic dom structure', function() { + var myEl; + setup(function() { + myEl = fixture('timeu-wizard-fixture'); + }); + + test('check basic dom structure', function(done) { myEl.step =2; - Polymer.dom.flush(); - var lis = Polymer.dom(myEl.root).querySelectorAll("li"); - expect(myEl.hasAttribute('vertical')).to.be.false; - - // check if there are 3 items - expect(lis.length).to.be.equal(3); - - // check each circle - expectDone(lis[0]); - expectActive(lis[1]); - expectEmpty(lis[2]); - - // check labels - expectLabel(lis[0],myEl.steps[0]); - expectLabel(lis[1],myEl.steps[1]); - expectLabel(lis[2],myEl.steps[2]); - - // check content - expectContent(lis[0],['""',"\'\'"]); - expectContent(lis[1],['counter(step)']); - expectContent(lis[2],['counter(step)']); - - // check filling of line - var line = Polymer.dom(myEl.root).querySelector('#filling'); - expect(line.style.transform).to.be.equal('scale(0.5, 1)'); + flush(function() { + var lis = myEl.shadowRoot.querySelectorAll("li"); + expect(myEl.hasAttribute('vertical')).to.be.false; + + // check if there are 3 items + expect(lis.length).to.be.equal(3); + + // check each circle + expectDone(lis[0]); + expectActive(lis[1]); + expectEmpty(lis[2]); + + // check labels + expectLabel(lis[0],myEl.steps[0]); + expectLabel(lis[1],myEl.steps[1]); + expectLabel(lis[2],myEl.steps[2]); + + // check content + expectContent(lis[0],['""',"\'\'"]); + expectContent(lis[1],['counter(step)']); + expectContent(lis[2],['counter(step)']); + + // check filling of line + var line = myEl.shadowRoot.querySelector('#filling'); + expect(line.style.transform).to.be.equal('scale(0.5, 1)'); + done(); + }); + }); - test('check dom with custom content', function(){ + test('check dom with custom content', function(done){ myEl.steps = [{'label':'step1','content':'A'},{'label':'step2','content':'B'}] - Polymer.dom.flush(); - var lis = Polymer.dom(myEl.root).querySelectorAll("li"); - expect(myEl.hasAttribute('vertical')).to.be.false; + var shRoot = myEl.shadowRoot; + flush(function() { + var lis = shRoot.querySelectorAll("li"); + expect(myEl.hasAttribute('vertical')).to.be.false; - // check if there are 3 items - expect(lis.length).to.be.equal(2); + // check if there are 3 items + expect(lis.length).to.be.equal(2); - // check labels - expectLabel(lis[0],'step1'); - expectLabel(lis[1],'step2'); + // check labels + expectLabel(lis[0],'step1'); + expectLabel(lis[1],'step2'); - // NOTE: getComputedStyle Firefox will show attr(data-content) while Chrome will return actual value - expectContent(lis[0],['"A"','attr(data-content)','A']); - expectContent(lis[1],['"B"','attr(data-content)','B']); - + // NOTE: getComputedStyle Firefox will show attr(data-content) while Chrome will return actual value + expectContent(lis[0],['"A"','attr(data-content)','A']); + expectContent(lis[1],['"B"','attr(data-content)','B']); + done(); + }); }); - test('check vertical dom structure', function() { + test('check vertical dom structure', function(done) { myEl.vertical = true; myEl.step =2; - Polymer.dom.flush(); - var ulEl = Polymer.dom(myEl.root).querySelector("ul"); - expect(window.getComputedStyle(ulEl).flexDirection).to.be.equal('column'); - // check filling of line - var line = Polymer.dom(myEl.root).querySelector('#filling'); - expect(line.style.transform).to.be.equal('scale(1, 0.5)'); + var shRoot = myEl.shadowRoot; + flush(function() { + var ulEl = shRoot.querySelector("ul"); + expect(window.getComputedStyle(ulEl).flexDirection).to.be.equal('column'); + // check filling of line + var line = shRoot.querySelector('#filling'); + expect(line.style.transform).to.be.equal('scale(1, 0.5)'); + done(); + }); }); }); suite('custom events', function() { - - setup(function(done) { - myEl.steps = [{'label':'step1','content':'A'},{'label':'step2','content':'B'}] - async.nextTick(function() { - done(); - }); + var myEl; + setup(function() { + myEl = fixture('timeu-wizard-fixture'); }); test('check timeu-wizard-item-tap event', function(done) { @@ -186,11 +195,11 @@ expect(e).to.exist; done(); }); - myEl.$$('li').click(); + flush(function() { + myEl.shadowRoot.querySelector('li').click(); + }) }); - }); - }); diff --git a/timeu-wizard.html b/timeu-wizard.html index 3bf01d8..b7b07bc 100644 --- a/timeu-wizard.html +++ b/timeu-wizard.html @@ -1,13 +1,9 @@ - - + + + + + + -