Skip to content

Commit

Permalink
Merge pull request #29 from vaadin/master-dev
Browse files Browse the repository at this point in the history 
vaadin-date-picker MVP
  • Loading branch information
@Saulis
Saulis committed Feb 10, 2016
2 parents ce2055b + 658bdf3 commit 1ac9e3f
Show file tree
Hide file tree
Showing 10 changed files with 849 additions and 2 deletions.
9 changes: 8 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,14 @@
},
"license": "Apache-2.0",
"dependencies": {
"polymer": "Polymer/polymer#^1.2.0"
"iron-dropdown": "polymerelements/iron-dropdown#~1.1.0",
"iron-icon": "polymerelements/iron-icon#~1.0.7",
"iron-icons": "polymerelements/iron-icons#~1.1.2",
"iron-input": "polymerelements/iron-input#~1.0.8",
"iron-list": "polymerelements/iron-list#~1.0.0",
"paper-input": "polymerelements/paper-input#~1.1.5",
"polymer": "Polymer/polymer#^1.2.0",
"paper-styles": "polymerelements/paper-styles#^1.1.3"
},
"devDependencies": {
"web-component-tester": "^4.1.0",
Expand Down
27 changes: 27 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!doctype html>
<html>

<head>
<title>vaadin-date-picker Code Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../vaadin-date-picker.html">

<style is="custom-style">
body {
background: #f9f9f9;
}

:root {
--primary-color: #2899f2;
}
</style>
</head>

<body>
<vaadin-date-picker label="Pick a date"></vaadin-date-picker>
<vaadin-date-picker label="Birthday" value="2000-01-01"></vaadin-date-picker>
</body>

</html>
16 changes: 16 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vaadin-date-picker</title>

<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>

<body>
<iron-component-page></iron-component-page>
</body>
</html>
145 changes: 145 additions & 0 deletions test/basic.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>

<link rel="import" href="../vaadin-date-picker.html">
</head>

<body>

<test-fixture id="datepicker">
<template>
<vaadin-date-picker></vaadin-date-picker>
</template>
</test-fixture>

<script>
describe('Basic features', function() {
var datepicker;

function monthsEqual(date1, date2) {
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
}

function tap(element) {
Polymer.Base.fire('tap', {}, {
bubbles: true,
node: element
});
}

beforeEach(function() {
datepicker = fixture('datepicker');
});

it('should have default value', function() {
expect(datepicker.value).to.equal('');
});

it('should notify value change', function() {
var spy = sinon.spy();
datepicker.addEventListener('value-changed', spy);
datepicker.value = new Date(2000, 1, 1);
expect(spy.calledOnce).to.be.true;
});

it('should open on input tap', function(done) {
datepicker.addEventListener('iron-overlay-opened', function() {
done();
});
tap(datepicker.$.input);
});

it('should open on label tap', function(done) {
datepicker.addEventListener('iron-overlay-opened', function() {
done();
});
tap(datepicker.$.label);
});

it('should scroll to today by default', function(done) {
var spy = sinon.spy(datepicker.$.overlay, 'scrollToDate');
datepicker.addEventListener('iron-overlay-opened', function() {
expect(monthsEqual(spy.firstCall.args[0], new Date())).to.be.true;
done();
});
datepicker._open();
});

it('should scroll to selected value by default', function(done) {
var spy = sinon.spy(datepicker.$.overlay, 'scrollToDate');
datepicker.value = new Date(2000, 1, 1);
datepicker.addEventListener('iron-overlay-opened', function() {
expect(monthsEqual(spy.firstCall.args[0], datepicker.value)).to.be.true;
done();
});
datepicker._open();
});

it('should close on overlay date tap', function(done) {
datepicker.addEventListener('iron-overlay-closed', function() {
done();
});
datepicker.addEventListener('iron-overlay-opened', function() {
Polymer.Base.fire('date-tap', {}, {
bubbles: true,
node: datepicker.$.overlay
});
});
datepicker._open();
});

it('should not have label defined by default', function() {
expect(datepicker.label).to.be.undefined;
});

it('label should be bound to label element', function() {
datepicker.label = 'This is LABEL';
expect(datepicker.$.label.innerHTML).to.eql('This is LABEL');
});

it('should clear the value', function() {
datepicker.value = new Date(2000, 1, 1);
tap(datepicker.$.clear);
expect(datepicker.value).to.equal('');
});

it('should format value correctly', function() {
datepicker.value = new Date(2000, 1, 1);
expect(datepicker.$.input.bindValue).to.equal('2000-02-01');
datepicker.value = new Date(1999, 11, 31);
expect(datepicker.$.input.bindValue).to.equal('1999-12-31');
});

it('should not show clear icon', function(done) {
expect(datepicker.$.clear.clientHeight).to.equal(0);
datepicker.value = new Date(2000, 1, 1);
expect(datepicker.$.clear.clientHeight).to.equal(0);
datepicker.value = '';
datepicker.addEventListener('iron-overlay-opened', function() {
expect(datepicker.$.clear.clientHeight).to.equal(0);
done();
});
datepicker._open();
});

it('should show clear icon', function(done) {
datepicker.value = new Date(2000, 1, 1);
datepicker.addEventListener('iron-overlay-opened', function() {
expect(datepicker.$.clear.clientHeight).not.to.equal(0);
done();
});
datepicker._open();
});

});
</script>

</body>

</html>
21 changes: 21 additions & 0 deletions test/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>vaadin-date-picker tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>

<body>
<script>
WCT.loadSuites([
'basic.html',
'overlay.html',
'month-calendar.html'
]);
</script>
</body>

</html>
132 changes: 132 additions & 0 deletions test/month-calendar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>vaadin-month-calendar basic tests</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>

<link rel="import" href="../vaadin-month-calendar.html">
</head>

<body>
<test-fixture id="vaadin-month-calendar">
<template>
<vaadin-month-calendar></vaadin-month-calendar>
</template>
</test-fixture>

<script>
function tap(element) {
Polymer.Base.fire('tap', {}, {
bubbles: true,
node: element
});
}

describe('vaadin-month-calendar', function() {
var monthCalendar;

beforeEach(function(done) {
monthCalendar = fixture('vaadin-month-calendar');
monthCalendar.month = new Date(2016, 1, 1); // Feb 2016

valueChangedSpy = sinon.spy();
monthCalendar.addEventListener('selected-date-changed', valueChangedSpy);

// Need to wait for the templates to be rendered.
Polymer.Base.async(done);
});

// A helper for creating async test functions for 2016 month rendering.
function createMonthTest(monthNumber) {
var expectedDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

return function(done) {
monthCalendar.month = new Date(2016, monthNumber, 1);
Polymer.Base.async(function() {
var numberOfDays = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)').length;
expect(numberOfDays).to.equal(expectedDays[monthNumber]);
done();
});
};
}

// Create 12 tests for each month of 2016.
for (var i = 0; i < 12; i++) {
it('should render correct number of days for 2016/' + (i + 1), createMonthTest(i));
}

it('should render days in correct order by default', function() {
var weekdays = monthCalendar.$.monthGrid.querySelectorAll('div.weekday');
var weekdayTitles = Array.prototype.map.call(weekdays, function(weekday) {
return weekday.textContent;
});
expect(weekdayTitles).to.eql(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
});

it('should render days in correct order by first day of week', function(done) {
monthCalendar._firstDayOfWeek = 1; // Start from Monday.

Polymer.Base.async(function() {
var weekdays = monthCalendar.$.monthGrid.querySelectorAll('div.weekday');
var weekdayTitles = Array.prototype.map.call(weekdays, function(weekday) {
return weekday.textContent;
});
expect(weekdayTitles).to.eql(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
done();
});
});

it('should re-render after changing the month', function(done) {
monthCalendar.month = new Date(2000, 0, 1); // Feb 2016 -> Jan 2000
Polymer.Base.async(function() {
var days = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)').length;
expect(days).to.equal(31);
expect(monthCalendar.$.title.textContent).to.equal('January');
done();
});
});

it('should fire value change on tap', function() {
var dateElements = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)');
tap(dateElements[10]);
expect(valueChangedSpy.calledOnce).to.be.true;
});

it('should fire date-tap on tap', function() {
tapSpy = sinon.spy();
monthCalendar.addEventListener('date-tap', tapSpy);
var dateElements = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)');
tap(dateElements[10]);
expect(tapSpy.calledOnce).to.be.true;
tap(dateElements[10]);
expect(tapSpy.calledTwice).to.be.true;
});

it('should not fire value change on tapping an empty cell', function() {
var emptyDateElement = monthCalendar.$.monthGrid.querySelector('div:not(.weekday):empty');
tap(emptyDateElement);
expect(valueChangedSpy.called).to.be.false;
});

it('should update value on tap', function() {
var dateElements = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)');
for (var i = 0; i < dateElements.length; i++) {
if (dateElements[i].date.getDate() === 10) {
// Tenth of February.
tap(dateElements[i]);
}
}
expect(monthCalendar.selectedDate.getFullYear()).to.equal(2016);
expect(monthCalendar.selectedDate.getMonth()).to.equal(1);
expect(monthCalendar.selectedDate.getDate()).to.equal(10);
});
});
</script>

</body>

</html>
Loading

0 comments on commit 1ac9e3f

Please sign in to comment.