Skip to content

Commit bca8d53

Browse files
tszewcowtszewcow
authored
feat!: update to angular v13 (dalelotts#515)
* Angular version updated to 13.x.x, date-time-picker lib built with ivy compiler, min node version set to 14, protractor tests dropped, tslint dropped in favor of eslint * redundant deps removed / versions adjusted for successful installations in node 16+ * protractor e2e tests ported to cypress Thank you to @tszewcow for these changes.
1 parent c718386 commit bca8d53

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+19993
-21536
lines changed

‎.eslintrc.json

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"root": true,
3+
"ignorePatterns": [
4+
"projects/**/*"
5+
],
6+
"overrides": [
7+
{
8+
"files": [
9+
"*.ts"
10+
],
11+
"parserOptions": {
12+
"project": [
13+
"tsconfig.json"
14+
],
15+
"createDefaultProgram": true
16+
},
17+
"extends": [
18+
"plugin:@angular-eslint/recommended",
19+
"plugin:@angular-eslint/template/process-inline-templates"
20+
],
21+
"rules": {
22+
"@angular-eslint/directive-selector": [
23+
"error",
24+
{
25+
"type": "attribute",
26+
"prefix": "dl",
27+
"style": "camelCase"
28+
}
29+
],
30+
"@angular-eslint/component-selector": [
31+
"error",
32+
{
33+
"type": "element",
34+
"prefix": "dl",
35+
"style": "kebab-case"
36+
}
37+
],
38+
"@typescript-eslint/no-unused-vars": [
39+
"error",
40+
{
41+
"argsIgnorePattern": "^_"
42+
}
43+
]
44+
}
45+
},
46+
{
47+
"files": [
48+
"*.html"
49+
],
50+
"extends": [
51+
"plugin:@angular-eslint/template/recommended"
52+
],
53+
"rules": {}
54+
}
55+
]
56+
}

‎.gitignore

+1-4
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
!.vscode/extensions.json
2727

2828
# misc
29+
/.angular/cache
2930
/.sass-cache
3031
/connect.lock
3132
/coverage
@@ -39,8 +40,4 @@ testem.log
3940
.DS_Store
4041
Thumbs.db
4142

42-
/e2e/*.js
43-
!/e2e/protractor.conf.js
44-
/e2e/*.map
45-
4643
*.metadata.json

‎.travis.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ language: node_js
44
notifications:
55
email: false
66
node_js:
7-
- '12'
7+
- '14'
88
services:
99
- xvfb
1010
addons:

‎README.es_MX.md

-8
Original file line numberDiff line numberDiff line change
@@ -109,14 +109,6 @@ Utiliza las clases `row` y `col` de bootstrap flex para el acomodo del component
109109
Si el contenedor padre no es lo suficientemente ancho (mayor a 340px) el diseño de la fila y columna que contiene el componente puede que no se muestre de manera atractiva.
110110
Otros lenguajes/locales es probable que requieran un contenedor un poco mas ancho para poder mostrar apropiadamente el contenido.
111111

112-
## Prueba de Punto a Punto (e2e) con protractor
113-
114-
Las interacciones del usuario con el selector de fecha y hora dificultan la escritura de pruebas e2e que replican exactamente la interacción del usuario con el selector.
115-
116-
Afortunadamente, este repositorio contiene un archivo que puede usar pruebas e2e para hacer que el selector de fecha y hora seleccione cualquier fecha específica.
117-
118-
Ver [./e2e/src/dl-date-time-picker-protractor.ts](./e2e/src/dl-date-time-picker-protractor.ts) para más detalles.
119-
120112
## Configuración
121113
Utiliza el [generador de configuración automatizado](https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo) (¡por favor hazme saber si no funciona para tu caso!),
122114
o ve a [https://dalelotts.github.io/angular-bootstrap-datetimepicker/](https://dalelotts.github.io/angular-bootstrap-datetimepicker/)

‎README.md

-8
Original file line numberDiff line numberDiff line change
@@ -113,14 +113,6 @@ It uses bootstrap's flex `row` and `col` classes to layout the date/time picker
113113
If the parent container is too narrow (less than 340px in english), the row and column layout may wrap in ways that are not attractive.
114114
Other languages/locals may require a wider container to fit the contents.
115115

116-
## End-to-End (e2e) testing with protractor
117-
118-
The user interactions with a date-time picker make it difficult to write e2e tests that exactly replicate the users interaction with the picker.
119-
120-
Fortunately, this repository contains a file you can use in your e2e tests to cause the date/time picker to select any specified date.
121-
122-
See [./e2e/src/dl-date-time-picker-protractor.ts](./e2e/src/dl-date-time-picker-protractor.ts) for details.
123-
124116
## Configuration
125117

126118
Use the [automated configuration generator](https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo) (please let me know if it does not work for your use case!),

‎angular.json

+44-40
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"main": "src/main.ts",
2323
"polyfills": "src/polyfills.ts",
2424
"tsConfig": "src/tsconfig.app.json",
25+
"aot": true,
2526
"assets": [
2627
"src/favicon.ico",
2728
"src/assets"
@@ -39,35 +40,37 @@
3940
"with": "src/environments/environment.prod.ts"
4041
}
4142
],
42-
"optimization": true,
43-
"outputHashing": "all",
44-
"sourceMap": false,
45-
"extractCss": true,
46-
"namedChunks": false,
47-
"aot": true,
48-
"extractLicenses": true,
49-
"vendorChunk": false,
50-
"buildOptimizer": true,
5143
"budgets": [
5244
{
5345
"type": "initial",
5446
"maximumWarning": "2mb",
5547
"maximumError": "5mb"
5648
}
57-
]
49+
],
50+
"outputHashing": "all"
51+
},
52+
"development": {
53+
"buildOptimizer": false,
54+
"optimization": false,
55+
"vendorChunk": true,
56+
"extractLicenses": false,
57+
"sourceMap": true,
58+
"namedChunks": true
5859
}
59-
}
60+
},
61+
"defaultConfiguration": "production"
6062
},
6163
"serve": {
6264
"builder": "@angular-devkit/build-angular:dev-server",
63-
"options": {
64-
"browserTarget": "angular-bootstrap-datetimepicker:build"
65-
},
6665
"configurations": {
6766
"production": {
6867
"browserTarget": "angular-bootstrap-datetimepicker:build:production"
68+
},
69+
"development": {
70+
"browserTarget": "angular-bootstrap-datetimepicker:build:development"
6971
}
70-
}
72+
},
73+
"defaultConfiguration": "development"
7174
},
7275
"extract-i18n": {
7376
"builder": "@angular-devkit/build-angular:extract-i18n",
@@ -93,28 +96,17 @@
9396
}
9497
},
9598
"lint": {
96-
"builder": "@angular-devkit/build-angular:tslint",
99+
"builder": "@angular-eslint/builder:lint",
97100
"options": {
98-
"tsConfig": [
99-
"src/tsconfig.app.json",
100-
"src/tsconfig.spec.json"
101-
],
102-
"exclude": [
103-
"**/node_modules/**"
101+
"lintFilePatterns": [
102+
"src/**/*.ts",
103+
"src/**/*.html"
104104
]
105105
}
106-
}
107-
}
108-
},
109-
"angular-bootstrap-datetimepicker-e2e": {
110-
"root": "e2e/",
111-
"projectType": "application",
112-
"prefix": "",
113-
"architect": {
114-
"e2e": {
115-
"builder": "@angular-devkit/build-angular:protractor",
106+
},
107+
"cypress-run": {
108+
"builder": "@cypress/schematic:cypress",
116109
"options": {
117-
"protractorConfig": "e2e/protractor.conf.js",
118110
"devServerTarget": "angular-bootstrap-datetimepicker:serve"
119111
},
120112
"configurations": {
@@ -123,17 +115,29 @@
123115
}
124116
}
125117
},
126-
"lint": {
127-
"builder": "@angular-devkit/build-angular:tslint",
118+
"cypress-open": {
119+
"builder": "@cypress/schematic:cypress",
128120
"options": {
129-
"tsConfig": "e2e/tsconfig.e2e.json",
130-
"exclude": [
131-
"**/node_modules/**"
132-
]
121+
"devServerTarget": "angular-bootstrap-datetimepicker:serve",
122+
"watch": true,
123+
"headless": false
124+
}
125+
},
126+
"e2e": {
127+
"builder": "@cypress/schematic:cypress",
128+
"options": {
129+
"devServerTarget": "angular-bootstrap-datetimepicker:serve",
130+
"watch": true,
131+
"headless": false
132+
},
133+
"configurations": {
134+
"production": {
135+
"devServerTarget": "angular-bootstrap-datetimepicker:serve:production"
136+
}
133137
}
134138
}
135139
}
136140
}
137141
},
138142
"defaultProject": "angular-bootstrap-datetimepicker"
139-
}
143+
}

‎cypress.config.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig } from 'cypress'
2+
3+
export default defineConfig({
4+
e2e: {
5+
baseUrl: 'http://localhost:4200',
6+
supportFile: false
7+
}
8+
})

‎cypress/e2e/date-time-picker.cy.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import moment from 'moment';
2+
import { appPage } from '../po/app.po';
3+
import { dateTimePickerPage } from '../po/date-time-picker.po';
4+
5+
const selectors = {
6+
minViewAttributeName: 'ng-reflect-min-view',
7+
maxViewAttributeName: 'ng-reflect-max-view'
8+
};
9+
10+
describe('date-time-picker tests', () => {
11+
12+
const app = appPage();
13+
const dateTimePicker = dateTimePickerPage();
14+
15+
beforeEach(() => {
16+
app.navigateTo();
17+
});
18+
19+
it('should configure date-time-picker with max view set to year and min view set to minute', () => {
20+
app.getDateTimePicker().should('be.visible').then(el => {
21+
22+
cy.wrap(el).invoke('attr', selectors.maxViewAttributeName).should('eq', 'year');
23+
cy.wrap(el).invoke('attr', selectors.minViewAttributeName).should('eq', 'minute');
24+
});
25+
});
26+
27+
it('should use date-time-picker to select the nearest date to the specified one', () => {
28+
const targetDate = moment('2003-11-07T21:32:17.800Z').valueOf();
29+
const expectedDate = new Date('2003-11-07T21:30:00.000Z').toString();
30+
31+
app.getDateTimePicker().should('be.visible').then(el => {
32+
const maxView = el.attr(selectors.maxViewAttributeName);
33+
const minView = el.attr(selectors.minViewAttributeName);
34+
35+
dateTimePicker.pickTime(maxView, minView, targetDate);
36+
37+
app.getSelectedDate().contains(`Selected Date: ${expectedDate}`);
38+
});
39+
})
40+
});

‎cypress/po/app.po.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const selectors = {
2+
dateTimePicker: 'dl-date-time-picker',
3+
selectedDate: '#selectedDate'
4+
};
5+
6+
export const appPage = () => {
7+
const appUrl = '/';
8+
9+
const navigateTo = (): void => {
10+
cy.visit(appUrl);
11+
};
12+
13+
const getDateTimePicker = (): Cypress.Chainable => {
14+
return cy.get(selectors.dateTimePicker);
15+
}
16+
17+
const getSelectedDate = (): Cypress.Chainable => {
18+
return cy.get(selectors.selectedDate);
19+
}
20+
21+
return {
22+
navigateTo,
23+
getDateTimePicker,
24+
getSelectedDate
25+
}
26+
}

0 commit comments

Comments
 (0)