Skip to content

Commit

Permalink
docs: add tiny demo project showing a complete example
Browse files Browse the repository at this point in the history
fix #33
  • Loading branch information
jnizet committed Jun 17, 2018
1 parent 5f12b0e commit 5aa895e
Show file tree
Hide file tree
Showing 24 changed files with 470 additions and 10 deletions.
2 changes: 2 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ script:
- yarn build
- yarn test
- yarn doc
- yarn demobuild
- yarn demotest
after_success:
# upload js coverage to codecov.io
- npm run codecov
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,3 +117,7 @@ Using yarn: `yarn add --dev ngx-speculoos`
## Issues, questions

Please, provide feedback by filing issues, or by submitting pull requests, to the [Github Project](https://github.com/Ninja-Squad/ngx-speculoos).

# Complete example

You can look at a minimal complete example in the [demo](https://github.com/Ninja-Squad/ngx-speculoos/projects/demo/src/app) project.
92 changes: 92 additions & 0 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,98 @@
}
}
}
},
"demo": {
"root": "projects/demo/",
"sourceRoot": "projects/demo/src",
"projectType": "application",
"prefix": "demo",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demo",
"index": "projects/demo/src/index.html",
"main": "projects/demo/src/main.ts",
"polyfills": "projects/demo/src/polyfills.ts",
"tsConfig": "projects/demo/tsconfig.app.json",
"assets": [
"projects/demo/src/favicon.ico",
"projects/demo/src/assets"
],
"styles": [
"projects/demo/src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/demo/src/environments/environment.ts",
"with": "projects/demo/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demo:build"
},
"configurations": {
"production": {
"browserTarget": "demo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "demo:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/demo/src/test.ts",
"polyfills": "projects/demo/src/polyfills.ts",
"tsConfig": "projects/demo/tsconfig.spec.json",
"karmaConfig": "projects/demo/karma.conf.js",
"styles": [
"projects/demo/src/styles.css"
],
"scripts": [],
"assets": [
"projects/demo/src/favicon.ico",
"projects/demo/src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/demo/tsconfig.app.json",
"projects/demo/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ngx-speculoos"
Expand Down
25 changes: 15 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,32 @@
"scripts": {
"ng": "ng",
"build": "ng build --prod",
"test": "ng test --no-progress --no-watch --code-coverage",
"test": "ng test --no-progress --no-watch --code-coverage --project=ngx-speculoos",
"demobuild": "ng build --prod --no-progress --project=demo",
"demotest": "ng test --no-progress --no-watch --project=demo",
"lint": "ng lint",
"release": "cd projects/ngx-speculoos && standard-version --infile ../../CHANGELOG.md",
"doc": "node scripts/prepare-doc.js && cd projects/ngx-speculoos && compodoc",
"codecov": "codecov"
},
"private": true,
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.3",
"@angular-devkit/build-ng-packagr": "~0.6.3",
"@angular/cli": "~6.0.3",
"dependencies": {
"@angular/common": "^6.0.2",
"@angular/compiler": "^6.0.2",
"@angular/compiler-cli": "^6.0.2",
"@angular/core": "^6.0.2",
"@angular/language-service": "^6.0.2",
"@angular/forms": "^6.0.2",
"@angular/platform-browser": "^6.0.2",
"@angular/platform-browser-dynamic": "^6.0.2",
"@angular/router": "^6.0.2",
"rxjs": "6.1.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.3",
"@angular-devkit/build-ng-packagr": "~0.6.3",
"@angular/cli": "~6.0.3",
"@angular/compiler-cli": "^6.0.2",
"@angular/language-service": "^6.0.2",
"@compodoc/compodoc": "1.1.3",
"@types/jasmine": "2.8.8",
"@types/jasminewd2": "2.0.3",
Expand All @@ -38,13 +45,11 @@
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "0.2.2",
"ng-packagr": "3.0.1",
"rxjs": "6.1.0",
"standard-version": "4.3.0",
"ts-node": "5.0.1",
"tsickle": "0.28.0",
"tslib": "1.9.1",
"tslint": "5.9.1",
"typescript": "2.7.2",
"zone.js": "0.8.26"
"typescript": "2.7.2"
}
}
9 changes: 9 additions & 0 deletions projects/demo/browserslist
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
# IE 9-11
37 changes: 37 additions & 0 deletions projects/demo/karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
reporters: process.env.CI === 'true' ? ['dots'] : ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: process.env.CI === 'true' ? ['chrome_travis_ci'] : ['ChromeHeadless'],
customLaunchers: {
chrome_travis_ci: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: false
});
};
Empty file.
5 changes: 5 additions & 0 deletions projects/demo/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<form [formGroup]="form" (ngSubmit)="sayHello()">
<input placeholder="Enter your first name" formControlName="firstName" id="firstName"/>
<button [disabled]="form.invalid">Say Hello</button>
</form>
<div *ngIf="greeting" id="greeting">{{ greeting }}</div>
66 changes: 66 additions & 0 deletions projects/demo/src/app/app.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { ComponentTester } from 'ngx-speculoos';
import { speculoosMatchers } from 'ngx-speculoos';
import { ReactiveFormsModule } from '@angular/forms';

class AppComponentTester extends ComponentTester<AppComponent> {
constructor() {
super(AppComponent);
}

get firstName() {
return this.input('#firstName');
}

get submit() {
return this.button('button');
}

get greeting() {
return this.element('#greeting');
}
}

describe('AppComponent', () => {
let tester: AppComponentTester;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
],
imports: [
ReactiveFormsModule
]
}).compileComponents();
}));

beforeEach(() => {
tester = new AppComponentTester();

// a first call to detectChanges() is necessary. If the component had inputs, you would initialize them
// before calling detectChanges. For example:
// tester.someInput = 'someValue';
tester.detectChanges();

jasmine.addMatchers(speculoosMatchers);
});

it('should display an empty form, with a disabled submit button and no greeting', () => {
expect(tester.firstName).toHaveValue('');
expect(tester.submit.disabled).toBe(true);
expect(tester.greeting).toBeNull();
});

it('should enable the submit button when filling the first name', () => {
tester.firstName.fillWith('John');
expect(tester.submit.disabled).toBe(false);
});

it('should display the greeting when submitting the form', () => {
tester.firstName.fillWith('John');
tester.submit.click();
expect(tester.greeting).toContainText('Hello John');
});
});
24 changes: 24 additions & 0 deletions projects/demo/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
form: FormGroup;
greeting = '';

constructor(private fb: FormBuilder) { }

ngOnInit() {
this.form = this.fb.group({
firstName: ['', [Validators.required]]
});
}

sayHello() {
this.greeting = `Hello ${this.form.value.firstName}`;
}
}
17 changes: 17 additions & 0 deletions projects/demo/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Empty file.
3 changes: 3 additions & 0 deletions projects/demo/src/environments/environment.prod.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const environment = {
production: true
};
15 changes: 15 additions & 0 deletions projects/demo/src/environments/environment.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
production: false
};

/*
* In development mode, to ignore zone related error stack frames such as
* `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
* import the following file, but please comment it out in production mode
* because it will have performance impact when throw error
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
Binary file added projects/demo/src/favicon.ico
Binary file not shown.
14 changes: 14 additions & 0 deletions projects/demo/src/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
12 changes: 12 additions & 0 deletions projects/demo/src/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
Loading

0 comments on commit 5aa895e

Please sign in to comment.