Skip to content
This repository was archived by the owner on Oct 31, 2022. It is now read-only.

Commit a9eabec

Browse files
Merge pull request #106 from reyesoft/FE-240-agregar-cypress
FE-240-agregar-cypress auto-commit
2 parents 53bfbbc + c5c2ce2 commit a9eabec

21 files changed

+684
-97
lines changed

CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## 0.22.68
4+
5+
### Fixed
6+
7+
- Fix in pagination and style of list common base
8+
39
## 0.22.67
410

511
### Fixed

cypress.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"baseUrl": "http://localhost:4200/",
3+
"video": false,
4+
"pageLoadTimeout": 10000,
5+
"responseTimeout": 10000,
6+
"chromeWebSecurity": false
7+
}

cypress/fixtures/authors.json

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"meta": {
3+
"page": 1,
4+
"resources_per_page": 10,
5+
"total_resources": 11
6+
},
7+
"data": [
8+
{
9+
"type": "authors",
10+
"id": "14",
11+
"attributes": {
12+
"name": "Anais Carroll",
13+
"birthplace": "Taiwan",
14+
"date_of_birth": "1986-08-12",
15+
"date_of_death": "2000-10-05"
16+
},
17+
"relationships": {
18+
"photos": {
19+
"data": []
20+
},
21+
"books": {
22+
"data": [
23+
{
24+
"type": "books",
25+
"id": "23"
26+
},
27+
{
28+
"type": "books",
29+
"id": "49"
30+
}
31+
]
32+
}
33+
},
34+
"links": {
35+
"self": "/authors/14"
36+
}
37+
},
38+
{
39+
"type": "authors",
40+
"id": "38",
41+
"attributes": {
42+
"name": "Archibald Reinger",
43+
"birthplace": "Panama",
44+
"date_of_birth": "1986-05-06",
45+
"date_of_death": "2014-05-12"
46+
},
47+
"relationships": {
48+
"photos": {
49+
"data": []
50+
},
51+
"books": {
52+
"data": [
53+
{
54+
"type": "books",
55+
"id": "43"
56+
},
57+
{
58+
"type": "books",
59+
"id": "46"
60+
}
61+
]
62+
}
63+
},
64+
"links": {
65+
"self": "/authors/38"
66+
}
67+
}
68+
]
69+
}

cypress/integration/authors.spec.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
describe('ListBase', () => {
2+
before(() => {
3+
cy.disableScreenshot();
4+
});
5+
it('ListBase integrity test', () => {
6+
cy.spyAuthors();
7+
cy.visit('/#/authors?pageSize=10');
8+
9+
cy.get('jam-list-base-common').should('be.visible')
10+
.within(() => {
11+
cy.get('mat-header-cell').eq(0).should('have.text', ' ID ');
12+
cy.get('mat-header-cell').eq(1).should('have.text', ' Name ');
13+
cy.get('mat-header-cell').eq(2).should('have.text', ' Date of birth ');
14+
cy.get('mat-header-cell').eq(3).should('have.text', ' Date of death ');
15+
});
16+
cy.get('jam-list-base-common mat-row').first().should('be.visible')
17+
.within(() => {
18+
cy.get('mat-cell').eq(0).should('have.text', '14');
19+
cy.get('mat-cell').eq(1).should('have.text', ' Anais Carroll ');
20+
cy.get('mat-cell').eq(2).should('have.text', ' 12/08/1986 ');
21+
cy.get('mat-cell').eq(3).should('have.text', ' 05/10/2000 ');
22+
});
23+
})
24+
});

cypress/plugins/index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference types="cypress" />
2+
// ***********************************************************
3+
// This example plugins/index.js can be used to load plugins
4+
//
5+
// You can change the location of this file or turn off loading
6+
// the plugins file with the 'pluginsFile' configuration option.
7+
//
8+
// You can read more here:
9+
// https://on.cypress.io/plugins-guide
10+
// ***********************************************************
11+
12+
// This function is called when a project is opened or re-opened (e.g. due to
13+
// the project's config changing)
14+
15+
/**
16+
* @type {Cypress.PluginConfig}
17+
*/
18+
module.exports = (on, config) => {
19+
// `on` is used to hook into various events Cypress emits
20+
// `config` is the resolved Cypress config
21+
}

cypress/support/commands.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Cypress.Commands.add('disableScreenshot', () => {
2+
Cypress.Screenshot.defaults({
3+
screenshotOnRunFailure: false
4+
});
5+
});
6+
7+
Cypress.Commands.add('spyAuthors', () => {
8+
cy.server();
9+
cy.route({
10+
method: 'GET',
11+
url: '/v2/authors?page[size]=10&sort=name',
12+
response: 'fixture:authors.json',
13+
status: 200
14+
}).as('authors');
15+
});

cypress/support/index.d.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// tslint:disable-next-line:no-namespace
2+
declare namespace Cypress {
3+
// tslint:disable-next-line:interface-name
4+
interface Chainable {
5+
disableScreenshot(): void;
6+
spyAuthors(): void
7+
}
8+
}

cypress/support/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

cypress/tsconfig.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"sourceMap": false,
5+
"baseUrl": "../node_modules",
6+
"target": "es5",
7+
"lib": ["es5", "dom"],
8+
"types": ["cypress"]
9+
},
10+
"include": [
11+
"**/*.ts"
12+
]
13+
}

package.json

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "ngx-jsonapi-material-app",
33
"scripts": {
44
"build_lib": "ng build --prod ngx-jsonapi-material",
5+
"cy:open": "cypress open",
56
"npm_pack": "cd dist/ngx-jsonapi-material && npm pack",
67
"copy-license": "copy .\\LICENSE .\\dist\\ngx-jsonapi-material",
78
"copy-readme": "copy .\\README.md .\\dist\\ngx-jsonapi-material",
@@ -148,6 +149,7 @@
148149
"conventional-changelog": "^1.1.4",
149150
"coveralls": "^3.0.5",
150151
"cpy-cli": "^1.0.1",
152+
"cypress": "^6.2.1",
151153
"deep-freeze": "^0.0.1",
152154
"fs-extra": "^2.1.2",
153155
"gh-pages": "^1.1.0",

projects/ngx-jsonapi-material/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-jsonapi-material",
3-
"version": "0.22.67",
3+
"version": "0.22.68",
44
"authors": [
55
"Reyesoft"
66
],

projects/ngx-jsonapi-material/src/lib/list-base/list-base-common/list-base-common.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@
168168
</mat-card>
169169

170170
<ng-template #contentTemplate let-element="element" let-column="column">
171-
<div *ngIf="!observableMedia.isActive('xs') || !column.hide_mobile_cell" [ngClass]="observableMedia.isActive('xs') && !column.hide_mobile_cell ? 'flex-row-spacebetween-center' : ''">
171+
<div *ngIf="!observableMedia.isActive('xs') || column.hide_mobile_cell" [ngClass]="observableMedia.isActive('xs') && column.hide_mobile_cell ? 'flex-row-spacebetween-center' : ''">
172172
<span class="row-name" *ngIf="observableMedia.isActive('xs') && column.show_mobile_title" style="padding-right: 8px">{{ column.mobile_title || column.title || (column.key | translate) | titlecase }}:</span>
173173

174174
<!-- NOTE: custom template -->
@@ -180,7 +180,7 @@
180180
</ng-container> -->
181181

182182
<!-- NOTE: editale tables -->
183-
<div
183+
<!-- <div
184184
*ngIf="column?.form_field && editElement === element"
185185
class="editable-cell"
186186
fxLayout="row"
@@ -193,7 +193,7 @@
193193
(cancel)="clearEditElement()"
194194
>
195195
</jam-editable-cell-content>
196-
</div>
196+
</div> -->
197197

198198
<ng-container
199199
*ngIf="column?.template"

projects/ngx-jsonapi-material/src/lib/list-base/list-base-common/list-base-common.component.scss

+7
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,11 @@ mat-row.custom-selected-row {
5656
}
5757
}
5858

59+
.flex-row-spacebetween-center {
60+
display: flex;
61+
flex-direction: row;
62+
justify-content: space-between;
63+
align-items: center;
64+
}
65+
5966
/* stylelint-enable selector-no-qualifying-type */

projects/ngx-jsonapi-material/src/lib/list-base/list-base.module.ts

+15-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
1414
import { MatSortModule } from '@angular/material/sort';
1515
import { AppCapitalizePipe } from './capitalize-pipe/capitalize.pipe';
1616
import { FormsModule } from '@angular/forms';
17-
import { TranslateModule } from '@ngx-translate/core';
17+
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
1818
import { DynamicPipe } from './dynamic-pipe/dynamic.pipe';
1919
import { AppDatePipe, AppDateTimePipe } from './date-pipe/app-date.pipe';
2020
import { AppCurrencyPipe } from './currency-pipe/app-currency.pipe';
@@ -29,6 +29,12 @@ import { UpdateFiltersService } from './base/update-filters/update-filters.compo
2929
import { JamRefreshService } from '../refresh/refresh.component';
3030
import { JamRefreshModule } from '../refresh/refresh.module';
3131
import { EditableCellContent } from './list-base-common/table-components/editable-cell-content/editable-cell-content.component';
32+
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
33+
import { HttpClient } from '@angular/common/http';
34+
35+
export function HttpLoaderFactory(http: HttpClient) {
36+
return new TranslateHttpLoader(http, location.origin + '/assets/i18n/', '.json');
37+
}
3238

3339
@NgModule({
3440
declarations: [
@@ -66,7 +72,14 @@ import { EditableCellContent } from './list-base-common/table-components/editabl
6672
MatPaginatorModule,
6773
MatDividerModule,
6874
TranslateModule,
69-
CommonModule
75+
CommonModule,
76+
TranslateModule.forRoot({
77+
loader: {
78+
provide: TranslateLoader,
79+
useFactory: HttpLoaderFactory,
80+
deps: [HttpClient]
81+
}
82+
})
7083
],
7184
providers: [
7285
ResourceSelectionBarService,

projects/ngx-jsonapi-material/src/lib/list-base/list-base.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export class ListBase implements OnInit, OnDestroy {
159159

160160
let queryParams = { pageSize: page.pageSize, pageIndex: page.pageIndex };
161161

162-
if (Object.keys(this.remoteFilter).length !== 0) {
162+
if (this.remoteFilter && Object.keys(this.remoteFilter).length !== 0) {
163163
Object.keys(this.remoteFilter).forEach((key): void => {
164164
queryParams[key] = this.remoteFilter[key];
165165
});

src/app/app.component.scss

+4
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,7 @@ mat-toolbar {
1313
:host ::ng-deep a.mat-button {
1414
text-decoration: none;
1515
}
16+
17+
:host ::ng-deep .paragraph-authors {
18+
margin: 0;
19+
}

src/app/authors/authors.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@ import {
1313
JamFloatingInputModule
1414
} from 'ngx-jsonapi-material';
1515
import { CreateAuthorComponent } from './components/create-author/create-author.component';
16+
import { ListBaseModule } from 'projects/ngx-jsonapi-material/src/public-api';
1617

1718
@NgModule({
1819
imports: [
1920
CommonModule,
2021
SharedModule,
2122
AuthorsRoutingModule,
2223
MaterialModule,
24+
ListBaseModule,
2325
JamDynamicFormsModule,
2426
JamSubmitModule,
2527
JamMenuModule,
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,13 @@
11
<h3>Authors</h3>
2-
<demo-collection-info [collection]="authors"></demo-collection-info>
3-
<div class="mat-elevation-z2">
4-
<table>
5-
<thead>
6-
<tr>
7-
<th>ID</th>
8-
<th>Name</th>
9-
<th>Date of birth</th>
10-
<th>Date of dead</th>
11-
</tr>
12-
</thead>
13-
<tr *ngFor="let author of authors.data; trackBy: authors.trackBy">
14-
<td>{{ author.id }}</td>
15-
<td>
16-
<a mat-button color="primary" [routerLink]="['/authors', author.id]">{{ author.attributes.name }}</a>
17-
</td>
18-
<td>{{ author.attributes.date_of_birth | date }}</td>
19-
<td>{{ author.attributes.date_of_death | date }}</td>
20-
<!-- <td><button (click)="delete(author)">Delete</button></td> -->
21-
</tr>
22-
</table>
23-
<demo-collection-paginator [collection]="authors"></demo-collection-paginator>
24-
</div>
2+
<jam-list-base-common
3+
*ngIf="authorsService"
4+
[tableColumns]="tableColumns"
5+
[service]="authorsService"
6+
[page]="page"
7+
[responsiveColumns]="responsiveColumns"
8+
[sort]="['name']">
9+
</jam-list-base-common>
2510

26-
<!-- <p>
27-
<button ng-click="update()">Update author</button>
28-
<button ng-click="removeRelationship()">Remove relationship</button>
29-
</p> -->
11+
<ng-template #default_id let-element="element">
12+
<p class="paragraph-authors">{{element.id}}</p>
13+
</ng-template>

0 commit comments

Comments
 (0)