Permalink
Browse files

Added jest and storyshots

  • Loading branch information...
alterx committed Jul 26, 2018
1 parent c438632 commit 1a1491999733316a3e18b66123f9c29d7379c473
@@ -9,13 +9,39 @@
"lint": "ng lint",
"e2e": "ng e2e",
"storybook": "start-storybook -p 6006 -s ./src",
"build-storybook": "build-storybook"
"build-storybook": "build-storybook",
"jest": "jest",
"jest:watch": "jest --watch"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},

"jest": {
"coveragePathIgnorePatterns": [
"/jest-config/",
"/node_modules/"
],
"preset": "jest-preset-angular",
"setupTestFrameworkScriptFile": "<rootDir>/src/jest-config/setup.ts",
"snapshotSerializers": [
"<rootDir>/node_modules/jest-preset-angular/AngularSnapshotSerializer.js",
"<rootDir>/node_modules/jest-preset-angular/HTMLCommentSerializer.js"
],
"testPathIgnorePatterns": [
"/node_modules/",
"/build/",
"/storybook-static/"
],
"transform": {
"^.+\\.(ts|js|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js"
},
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
}
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
@@ -39,6 +65,7 @@
"@storybook/addon-actions": "^3.4.8",
"@storybook/addon-links": "^3.4.8",
"@storybook/addon-notes": "^3.4.8",
"@storybook/addon-storyshots": "^3.4.8",
"@storybook/addons": "^3.4.8",
"@storybook/angular": "^3.4.8",
"@types/jasmine": "~2.8.6",
@@ -47,8 +74,11 @@
"codelyzer": "~4.2.1",
"css-loader": "^1.0.0",
"husky": "^0.14.3",
"identity-obj-proxy": "^3.0.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"jest": "^23.4.1",
"jest-preset-angular": "^5.2.3",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
@@ -0,0 +1,147 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Task archived 1`] = `
<storybook-dynamic-app-root
cfr={[Function CodegenComponentFactoryResolver]}
data={[Function Object]}
target={[Function ViewContainerRef_]}
>
<ng-component>
<task-item
ng-reflect-task="[object Object]"
>
<div
class="list-item TASK_ARCHIVED"
>
<label
class="checkbox"
>
<input
checked=""
disabled="true"
name="checked"
type="checkbox"
/>
<span
class="checkbox-custom"
/>
</label>
<div
class="title"
>
<input
placeholder="Input title"
readonly="true"
type="text"
/>
</div>
<div
class="actions"
>

</div>
</div>
</task-item>
</ng-component>
</storybook-dynamic-app-root>
`;

exports[`Storyshots Task default 1`] = `
<storybook-dynamic-app-root
cfr={[Function CodegenComponentFactoryResolver]}
data={[Function Object]}
target={[Function ViewContainerRef_]}
>
<ng-component>
<task-item
ng-reflect-task="[object Object]"
>
<div
class="list-item TASK_INBOX"
>
<label
class="checkbox"
>
<input
disabled="true"
name="checked"
type="checkbox"
/>
<span
class="checkbox-custom"
/>
</label>
<div
class="title"
>
<input
placeholder="Input title"
readonly="true"
type="text"
/>
</div>
<div
class="actions"
>

<a>
<span
class="icon-star"
/>
</a>
</div>
</div>
</task-item>
</ng-component>
</storybook-dynamic-app-root>
`;

exports[`Storyshots Task pinned 1`] = `
<storybook-dynamic-app-root
cfr={[Function CodegenComponentFactoryResolver]}
data={[Function Object]}
target={[Function ViewContainerRef_]}
>
<ng-component>
<task-item
ng-reflect-task="[object Object]"
>
<div
class="list-item TASK_PINNED"
>
<label
class="checkbox"
>
<input
disabled="true"
name="checked"
type="checkbox"
/>
<span
class="checkbox-custom"
/>
</label>
<div
class="title"
>
<input
placeholder="Input title"
readonly="true"
type="text"
/>
</div>
<div
class="actions"
>

<a>
<span
class="icon-star"
/>
</a>
</div>
</div>
</task-item>
</ng-component>
</storybook-dynamic-app-root>
`;
@@ -0,0 +1,10 @@
import * as path from 'path';
import initStoryshots, {
multiSnapshotWithOptions,
} from '@storybook/addon-storyshots';

initStoryshots({
framework: 'angular',
configPath: path.join(__dirname, '../.storybook'),
test: multiSnapshotWithOptions(),
});
@@ -1,38 +1,27 @@
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(
async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
}).compileComponents();
}),
);
it(
'should create the app',
async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}),
);
it(
`should have as title 'app'`,
async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}),
);
it(
'should render title in a h1 tag',
async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain(
'Welcome to learnstorybook!',
);
}),
);
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain(
'Welcome to app!',
);
}));
});
@@ -0,0 +1,15 @@
const mock = () => {
let storage = {};
return {
getItem: key => (key in storage ? storage[key] : null),
setItem: (key, value) => (storage[key] = value || ''),
removeItem: key => delete storage[key],
clear: () => (storage = {}),
};
};

Object.defineProperty(window, 'localStorage', { value: mock() });
Object.defineProperty(window, 'sessionStorage', { value: mock() });
Object.defineProperty(window, 'getComputedStyle', {
value: () => ['-webkit-appearance'],
});
@@ -0,0 +1,2 @@
import 'jest-preset-angular';
import './globalMocks';
@@ -8,6 +8,7 @@
"exclude": [
"src/test.ts",
"**/*.stories.ts",
"**/*.spec.ts"
"**/*.spec.ts",
"**/*.test.ts"
]
}
Oops, something went wrong.

0 comments on commit 1a14919

Please sign in to comment.