Skip to content
This repository was archived by the owner on Mar 2, 2018. It is now read-only.

Commit fb4f067

Browse files
allenhwkimallenhwkim
authored
Merge pull request #124 from ng2-ui/webtest
Webtest
2 parents a455695 + 5a43f80 commit fb4f067

File tree

4 files changed

+96
-39
lines changed

4 files changed

+96
-39
lines changed

‎app/directive-test.component.ts‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,36 @@ var templateStr = `
1111
<div id="my-div">
1212
<h1>Ng2 DateTime Picker Test</h1>
1313
14-
<fieldset><legend><h2>Open from a button</h2></legend>
14+
<fieldset id="test1"><legend><h2>Open from a button</h2></legend>
1515
<ng2-utils-1>
16-
<input [(ngModel)]="myDate0" />
16+
<input [(ngModel)]="date1" />
1717
<i class="fa fa-calendar"
1818
ng2-datetime-picker
19-
[default-value]="defaultValue"
20-
(valueChanged)="myDate0=$event"></i>
19+
[default-value]="date1DefaultValue"
20+
(valueChanged)="date1=$event"></i>
2121
</ng2-utils-1>
22+
date1: {{date1}}
2223
<pre>{{templateStr | htmlCode:'ng2-utils-1'}}</pre>
2324
</fieldset>
2425
25-
<fieldset><legend><h2>min date, max date, disabled dates</h2></legend>
26+
<fieldset id="test2"><legend><h2>min date, max date, disabled dates</h2></legend>
2627
<ng2-utils-2>
2728
<input
28-
id="test1"
29-
[(ngModel)]="myDate"
29+
[(ngModel)]="date2"
3030
ng2-datetime-picker
31-
[disabled-dates]="disabledDates"
32-
[min-date]="minDate"
33-
[max-date]="maxDate"
31+
[disabled-dates]="date2DisabledDates"
32+
[min-date]="date2MinDate"
33+
[max-date]="date2MaxDate"
3434
date-only="true"/>
35-
myDate: {{myDate}}
35+
date2: {{date2}}
3636
</ng2-utils-2>
3737
<pre>{{templateStr | htmlCode:'ng2-utils-2'}}</pre>
3838
</fieldset>
3939
40-
<fieldset><legend><h2>time only</h2></legend>
40+
<fieldset id="test3"><legend><h2>time only</h2></legend>
4141
<ng2-utils-4>
42-
<input [(ngModel)]="date" ng2-datetime-picker
43-
id="test3"
42+
<input [(ngModel)]="date3"
43+
ng2-datetime-picker
4444
date-format="DD-MM-YYYY hh:mm"
4545
time-only="true"
4646
minute-step="5"
@@ -49,24 +49,22 @@ var templateStr = `
4949
<pre>{{templateStr | htmlCode:'ng2-utils-4'}}</pre>
5050
</fieldset>
5151
52-
<fieldset><legend><h2>with timezone</h2></legend>
52+
<fieldset id="test4"><legend><h2>with timezone</h2></legend>
5353
<ng2-utils-6>
5454
<input
55-
id="test6"
56-
[(ngModel)]="dateWithTimezone"
55+
[(ngModel)]="date4"
5756
ng2-datetime-picker
58-
[date-format]="timezoneFormat" />
57+
[date-format]="date4TimezoneFormat" />
5958
dateWithTimezone: {{dateWithTimezone}}
6059
<br/>
6160
</ng2-utils-6>
6261
<pre>{{templateStr | htmlCode:'ng2-utils-6'}}</pre>
6362
</fieldset>
6463
65-
<fieldset><legend><h2>Reactive form</h2></legend>
64+
<fieldset id="test5"><legend><h2>Reactive form</h2></legend>
6665
<ng2-utils-3>
6766
<form [formGroup]="myForm">
6867
<input
69-
id="test2"
7068
required
7169
formControlName="date"
7270
ng2-datetime-picker
@@ -112,13 +110,20 @@ export class DirectiveTestComponent {
112110
templateStr: string = templateStr;
113111

114112
myForm: FormGroup; // our form model
115-
date = new Date("Thu Jan 01 2015 00:00:00 GMT-0500 (EST)");
116-
defaultValue = new Date(2014, 11, 31, 21, 45, 59);
117-
minDate = new Date(2017, 0, 1);
118-
maxDate = new Date(2017, 11, 31);
119-
disabledDates = [new Date(2016, 11, 26), new Date(2016, 11, 27)];
120-
dateWithTimezone: string;
121-
timezoneFormat = 'DD/MM/YYYY HH:mm Z';
113+
date1 = null;
114+
date1DefaultValue = new Date(2014, 11, 31, 21, 45, 59);
115+
116+
date2 = new Date(2017, 0, 28);
117+
date2DisabledDates = [new Date(2017, 0, 10), new Date(2017, 0, 20)];
118+
date2MinDate = new Date(2017, 0, 1);
119+
date2MaxDate = new Date(2017, 11, 31);
120+
121+
date3 = new Date("Thu Jan 01 2015 00:00:00 GMT-0500 (EST)");
122+
123+
date4TimezoneFormat = 'DD/MM/YYYY HH:mm Z';
124+
date4: string = Ng2Datetime.formatDate(
125+
Ng2Datetime.parseDate('2017-01-15T14:22:00-06:00', this.date4TimezoneFormat), this.date4TimezoneFormat
126+
);
122127

123128
constructor(private fb: FormBuilder) { }
124129

@@ -127,11 +132,7 @@ export class DirectiveTestComponent {
127132
date: ['2016-02-15', [Validators.required]],
128133
});
129134

130-
moment.tz.setDefault('US/Central'); // Set the default timezone that moment will use
131-
132-
this.dateWithTimezone = Ng2Datetime.formatDate(
133-
Ng2Datetime.parseDate('2017-01-15T14:22:00-06:00', this.timezoneFormat), this.timezoneFormat
134-
);
135+
//moment.tz.setDefault('US/Central'); // Set the default timezone that moment will use
135136
}
136137

137138
}

‎ng2-datetime-picker.webtest.txt‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,59 @@
11
DateTime Picker Test On Browser
22
To Run this, run $ `npm start`first to start the web server with port 9002
33

4-
open browser
5-
go to http://localhost:9002
4+
START
5+
open browser
6+
go to http://localhost:9002
67

78
TEST1
8-
click
9+
click "#test1 i.fa.fa-calendar"
10+
set element "#test1 input.hourInput" value 11
11+
verify element "#test1 input" value matches to "11:"
12+
click "#test1 i.fa.fa-calendar"
13+
set element "#test1 input.minutesInput" value as 19
14+
verify element "#test1 input" value matches to ":19"
15+
click "#test1 i.fa.fa-calendar"
16+
click "#test1 div.day.selectable[title='2014-12-17']"
17+
verify element "#test1 input" value matches to "2014-12-17"
18+
19+
TEST2
20+
click "#test2 input"
21+
click "#test2 div.month b.prev_next.prev"
22+
verify element "#test2 div.day[title='2016-1-20']" without class selectable
23+
click "#test2 div.month b.prev_next.next"
24+
verify element "#test2 div.day[title='2017-1-10']" without class selectable
25+
verify element "#test2 div.day[title='2017-1-20']" without class selectable
26+
click "#test2 div.month b.prev_next.next"
27+
verify element "#test2 div.day[title='2018-1-20']" without class selectable
28+
click "#test2 div.month b.prev_next.prev"
29+
click "#test2 div.day.selectable[title='2017-1-25']"
30+
verify element "#test2 input" value is "2017-01-25"
31+
32+
TEST3
33+
click "#test3 input"
34+
verify element "#test3 .month" is not present
35+
verify element "#test3 .days" is not present
36+
verify element "#test3 .time" is visible
37+
38+
TEST4
39+
verify element "#test4 input" value matches "15/01/2017 15:22 [+-]"
40+
click "#test4 input"
41+
click "#test4 div.day.selectable[title='2017-1-25']"
42+
verify element "#test4 input" value matches "25/01/2017"
43+
44+
TEST5
45+
verify element "#test5 input" value is "2016-02-15"
46+
see "2015-12-31"
47+
click
48+
verify element "#test5 input" value is "2015-12-31"
49+
click "#test5 input"
50+
click "#test5 div.day.selectable[title='2015-12-30']"
51+
set element "#test5 input.hourInput" value 11
52+
set element "#test5 input.minutesInput" value as 19
53+
click body
54+
verify element "#test5 input" value is "2015-12-30 11:19"
55+
56+
END
57+
close browser
58+
59+

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"test": "npm-run-all --serial test:start test:webtest test:stop",
1818
"test:start": "forever start --silent node_modules/.bin/webpack-dev-server --quiet --port 9002 --content-base app --config app/webpack.config",
1919
"test:stop": "forever stop node_modules/.bin/webpack-dev-server --quiet --port 9002 --content-base app --config app/webpack.config",
20-
"test:webtest": "webtest ng2-datetime-picker.webtest.txt"
20+
"test:webtest": "webtest ng2-datetime-picker.webtest.txt",
21+
"upgrade": "npm-check-updates -a/--upgradeAll && npm i"
2122
},
2223
"repository": {
2324
"type": "git",
@@ -47,6 +48,7 @@
4748
"core-js": "^2.4.1",
4849
"http-server": "^0.9.0",
4950
"ng2-utils": "^0.6.1",
51+
"npm-check-updates": "^2.8.9",
5052
"npm-run-all": "^3.1.0",
5153
"raw-loader": "^0.5.1",
5254
"reflect-metadata": "^0.1.3",
@@ -58,6 +60,7 @@
5860
"typescript": "2.0.10",
5961
"webpack": "^1.13.3",
6062
"webpack-dev-server": "^1.16.2",
63+
"webtest": "^0.2.13",
6164
"zone.js": "^0.6.21"
6265
}
6366
}

‎src/ng2-datetime-picker.component.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ declare var moment: any;
7878
</div>
7979
8080
<!-- Time -->
81-
<div class="days" id="time" *ngIf="!dateOnly">
81+
<div class="time" id="time" *ngIf="!dateOnly">
8282
<label class="timeLabel">Time:</label>
8383
<span class="timeValue">
8484
{{("0"+hour).slice(-2)}} : {{("0"+minute).slice(-2)}}
@@ -329,18 +329,20 @@ export class Ng2DatetimePickerComponent implements AfterViewInit {
329329
// so edit using moment if available
330330
let hour = parseInt( '' + this.hour || '0', 10);
331331
let minute = parseInt( '' + this.minute || '0', 10);
332+
332333
if (typeof moment !== 'undefined') {
333334
// here selected date has a time of 00:00 in local time,
334335
// so build moment by getting year/month/day separately
335336
// to avoid it saving as a day earlier
336337
let m = moment([this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()]);
337-
m.hours(this.hour);
338-
m.minutes(this.minute);
338+
m.hours(hour);
339+
m.minutes(minute);
339340
this.selectedDate = m.toDate();
340341
} else {
341342
this.selectedDate.setHours(hour);
342343
this.selectedDate.setMinutes(minute);
343344
}
345+
console.log('this.selectedDate', this.selectedDate)
344346

345347
this.selectedDate.toString = () => {
346348
return Ng2Datetime.formatDate(this.selectedDate, this.dateFormat, this.dateOnly);

0 commit comments

Comments
 (0)