Support snapshot testing (#24)
* Add angular-snapshot serializer * Add HTMLElementPlugin until Jest 20 release * Add jest as a peer dep * Update examples with snapshots
This commit is contained in:
Родитель
c40981b217
Коммит
8a8a25f565
|
@ -0,0 +1,102 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the BSD-style license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||||||
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function escapeHTML(str) {
|
||||||
|
return str.replace(/</g, '<').replace(/>/g, '>');
|
||||||
|
}
|
||||||
|
|
||||||
|
const HTML_ELEMENT_REGEXP = /(HTML\w*?Element)/;
|
||||||
|
const test = isHTMLElement;
|
||||||
|
|
||||||
|
function isHTMLElement(value) {
|
||||||
|
return (
|
||||||
|
value !== undefined &&
|
||||||
|
value !== null &&
|
||||||
|
value.nodeType === 1 &&
|
||||||
|
value.constructor !== undefined &&
|
||||||
|
HTML_ELEMENT_REGEXP.test(value.constructor.name)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function printChildren(flatChildren, print, indent, colors, opts) {
|
||||||
|
return flatChildren
|
||||||
|
.map(node => {
|
||||||
|
if (typeof node === 'object') {
|
||||||
|
return print(node, print, indent, colors, opts);
|
||||||
|
} else if (typeof node === 'string') {
|
||||||
|
return colors.content.open + escapeHTML(node) + colors.content.close;
|
||||||
|
} else {
|
||||||
|
return print(node);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.join(opts.edgeSpacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
function printAttributes(attributes, print, indent, colors, opts) {
|
||||||
|
return attributes
|
||||||
|
.sort()
|
||||||
|
.map(attribute => {
|
||||||
|
return (
|
||||||
|
opts.spacing +
|
||||||
|
indent(colors.prop.open + attribute.name + colors.prop.close + '=') +
|
||||||
|
colors.value.open +
|
||||||
|
`"${attribute.value}"` +
|
||||||
|
colors.value.close
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
const print = (
|
||||||
|
element,
|
||||||
|
print,
|
||||||
|
indent,
|
||||||
|
opts,
|
||||||
|
colors
|
||||||
|
) => {
|
||||||
|
let result = colors.tag.open + '<';
|
||||||
|
const elementName = element.tagName.toLowerCase();
|
||||||
|
result += elementName + colors.tag.close;
|
||||||
|
|
||||||
|
const hasAttributes = element.attributes && element.attributes.length;
|
||||||
|
if (hasAttributes) {
|
||||||
|
const attributes = Array.prototype.slice.call(element.attributes);
|
||||||
|
result += printAttributes(attributes, print, indent, colors, opts);
|
||||||
|
}
|
||||||
|
|
||||||
|
const flatChildren = Array.prototype.slice.call(element.children);
|
||||||
|
if (!flatChildren.length && element.textContent) {
|
||||||
|
flatChildren.push(element.textContent.trim());
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeInNewLine = hasAttributes && !opts.min;
|
||||||
|
if (flatChildren.length) {
|
||||||
|
const children = printChildren(flatChildren, print, indent, colors, opts);
|
||||||
|
result +=
|
||||||
|
colors.tag.open +
|
||||||
|
(closeInNewLine ? '\n' : '') +
|
||||||
|
'>' +
|
||||||
|
colors.tag.close +
|
||||||
|
(children && opts.edgeSpacing + indent(children) + opts.edgeSpacing) +
|
||||||
|
colors.tag.open +
|
||||||
|
'</' +
|
||||||
|
elementName +
|
||||||
|
'>' +
|
||||||
|
colors.tag.close;
|
||||||
|
} else {
|
||||||
|
result +=
|
||||||
|
colors.tag.open + (closeInNewLine ? '\n' : ' ') + '/>' + colors.tag.close;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = ({print, test});
|
|
@ -0,0 +1,64 @@
|
||||||
|
const printAttributes = (val, attributes, print, indent, colors, opts) => {
|
||||||
|
return attributes
|
||||||
|
.sort()
|
||||||
|
.map(attribute => {
|
||||||
|
return (
|
||||||
|
opts.spacing +
|
||||||
|
indent(colors.prop.open + attribute + colors.prop.close + '=') +
|
||||||
|
colors.value.open +
|
||||||
|
(val.componentInstance[attribute] &&
|
||||||
|
val.componentInstance[attribute].constructor
|
||||||
|
? '{[Function ' +
|
||||||
|
val.componentInstance[attribute].constructor.name +
|
||||||
|
']}'
|
||||||
|
: `"${val.componentInstance[attribute]}"`) +
|
||||||
|
colors.value.close
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const print = (val, print, indent, opts, colors) => {
|
||||||
|
let result = '';
|
||||||
|
let componentAttrs = '';
|
||||||
|
|
||||||
|
const componentName = val.componentRef._elDef.element.name;
|
||||||
|
const componentInstance = print(val.componentInstance);
|
||||||
|
const nodes = val.componentRef._view.nodes
|
||||||
|
.filter(node => node.hasOwnProperty('renderElement'))
|
||||||
|
.map(node => print(node.renderElement))
|
||||||
|
.join('\n');
|
||||||
|
|
||||||
|
const attributes = Object.keys(val.componentInstance);
|
||||||
|
|
||||||
|
if (attributes.length) {
|
||||||
|
componentAttrs += printAttributes(
|
||||||
|
val,
|
||||||
|
attributes,
|
||||||
|
print,
|
||||||
|
indent,
|
||||||
|
colors,
|
||||||
|
opts
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
'<' +
|
||||||
|
componentName +
|
||||||
|
componentAttrs +
|
||||||
|
(componentAttrs.length ? '\n' : '') +
|
||||||
|
'>\n' +
|
||||||
|
indent(nodes) +
|
||||||
|
'\n</' +
|
||||||
|
componentName +
|
||||||
|
'>'
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const test = val =>
|
||||||
|
val !== undefined &&
|
||||||
|
val !== null &&
|
||||||
|
typeof val === 'object' &&
|
||||||
|
Object.prototype.hasOwnProperty.call(val, 'componentRef');
|
||||||
|
|
||||||
|
module.exports = {print, test};
|
|
@ -1,6 +1,6 @@
|
||||||
machine:
|
machine:
|
||||||
environment:
|
environment:
|
||||||
YARN_VERSION: 0.20.3
|
YARN_VERSION: 0.22.0
|
||||||
PATH: "${PATH}:${HOME}/.yarn/bin:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
|
PATH: "${PATH}:${HOME}/.yarn/bin:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
|
||||||
node:
|
node:
|
||||||
version: 7
|
version: 7
|
||||||
|
@ -20,4 +20,4 @@ dependencies:
|
||||||
test:
|
test:
|
||||||
override:
|
override:
|
||||||
- yarn run test:ci
|
- yarn run test:ci
|
||||||
- yarn link && cd example && yarn run test:ci && yarn run test:coverage
|
- yarn link && cd example && yarn link jest-preset-angular && yarn run test:ci && yarn run test:coverage
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`AppComponent snaps 1`] = `
|
||||||
|
<app-root
|
||||||
|
hasClass={[Function Boolean]}
|
||||||
|
title={[Function String]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="root1"
|
||||||
|
ng-version="4.0.1"
|
||||||
|
>
|
||||||
|
<h1>
|
||||||
|
<app-calc />
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</app-root>
|
||||||
|
`;
|
|
@ -1,3 +1,6 @@
|
||||||
<h1>
|
<h1>
|
||||||
{{title}}
|
{{title}}
|
||||||
|
<app-calc
|
||||||
|
[hasAClass]="hasClass"
|
||||||
|
></app-calc>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { TestBed, async } from '@angular/core/testing';
|
import { TestBed, async } from '@angular/core/testing';
|
||||||
|
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
||||||
|
import { CalcComponent } from 'app/calc/calc.component';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
describe('AppComponent', () => {
|
describe('AppComponent', () => {
|
||||||
|
@ -8,6 +9,7 @@ describe('AppComponent', () => {
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent
|
AppComponent
|
||||||
],
|
],
|
||||||
|
schemas: [NO_ERRORS_SCHEMA]
|
||||||
}).compileComponents();
|
}).compileComponents();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
@ -17,6 +19,11 @@ describe('AppComponent', () => {
|
||||||
expect(app).toBeTruthy();
|
expect(app).toBeTruthy();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
it('snaps', () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
expect(fixture).toMatchSnapshot();
|
||||||
|
})
|
||||||
|
|
||||||
it(`should have as title 'app works!'`, async(() => {
|
it(`should have as title 'app works!'`, async(() => {
|
||||||
const fixture = TestBed.createComponent(AppComponent);
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
const app = fixture.debugElement.componentInstance;
|
const app = fixture.debugElement.componentInstance;
|
||||||
|
|
|
@ -7,4 +7,5 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
title = 'app works!';
|
title = 'app works!';
|
||||||
|
hasClass = true;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`CalcComponent should snap 1`] = `
|
||||||
|
<app-calc
|
||||||
|
prop1={[Function Number]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="root0"
|
||||||
|
ng-version="4.0.1"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
class="a-default-class"
|
||||||
|
ng-reflect-klass="a-default-class"
|
||||||
|
ng-reflect-ng-class="[object Object]"
|
||||||
|
>
|
||||||
|
calc works!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</app-calc>
|
||||||
|
`;
|
|
@ -1,3 +1,8 @@
|
||||||
<p>
|
<p
|
||||||
|
class="a-default-class"
|
||||||
|
[ngClass]="{
|
||||||
|
'a-class': hasAClass
|
||||||
|
}"
|
||||||
|
>
|
||||||
calc works!
|
calc works!
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -8,9 +8,9 @@ describe('CalcComponent', () => {
|
||||||
|
|
||||||
beforeEach(async(() => {
|
beforeEach(async(() => {
|
||||||
TestBed.configureTestingModule({
|
TestBed.configureTestingModule({
|
||||||
declarations: [ CalcComponent ]
|
declarations: [CalcComponent]
|
||||||
})
|
})
|
||||||
.compileComponents();
|
.compileComponents();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
@ -19,7 +19,7 @@ describe('CalcComponent', () => {
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should create', () => {
|
it('should snap', () => {
|
||||||
expect(component).toBeTruthy();
|
expect(fixture).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs/Observable';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-calc',
|
selector: 'app-calc',
|
||||||
|
@ -6,10 +7,19 @@ import { Component, OnInit } from '@angular/core';
|
||||||
styleUrls: ['./calc.component.css']
|
styleUrls: ['./calc.component.css']
|
||||||
})
|
})
|
||||||
export class CalcComponent implements OnInit {
|
export class CalcComponent implements OnInit {
|
||||||
|
@Input() hasAClass;
|
||||||
|
prop1: number;
|
||||||
|
observable$: Observable<string>;
|
||||||
|
|
||||||
constructor() { }
|
constructor() {
|
||||||
|
this.init();
|
||||||
|
this.prop1 = 1337;
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
return 'Imma method';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,6 +14,9 @@
|
||||||
"jest": "^19.0.2",
|
"jest": "^19.0.2",
|
||||||
"typescript": "^2.2.2"
|
"typescript": "^2.2.2"
|
||||||
},
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"jest": "^19.0.2"
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "jest",
|
"test": "jest",
|
||||||
"test:ci": "jest -i"
|
"test:ci": "jest -i"
|
||||||
|
|
|
@ -6,6 +6,8 @@ require('zone.js/dist/sync-test');
|
||||||
require('zone.js/dist/async-test');
|
require('zone.js/dist/async-test');
|
||||||
require('zone.js/dist/fake-async-test');
|
require('zone.js/dist/fake-async-test');
|
||||||
require('jest-zone-patch');
|
require('jest-zone-patch');
|
||||||
|
const angularSnapshot = require('./angular-snapshot');
|
||||||
|
const HTMLElementPlugin = require('./HTMLElementPlugin');
|
||||||
const { getTestBed } = require('@angular/core/testing');
|
const { getTestBed } = require('@angular/core/testing');
|
||||||
const {
|
const {
|
||||||
BrowserDynamicTestingModule,
|
BrowserDynamicTestingModule,
|
||||||
|
@ -16,3 +18,6 @@ getTestBed().initTestEnvironment(
|
||||||
BrowserDynamicTestingModule,
|
BrowserDynamicTestingModule,
|
||||||
platformBrowserDynamicTesting()
|
platformBrowserDynamicTesting()
|
||||||
);
|
);
|
||||||
|
|
||||||
|
expect.addSnapshotSerializer(HTMLElementPlugin);
|
||||||
|
expect.addSnapshotSerializer(angularSnapshot);
|
||||||
|
|
Загрузка…
Ссылка в новой задаче