Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/temilaj/github-browser

simple application that browses github user profiles.
https://github.com/temilaj/github-browser

angular angular2 e2e-tests github github-api karma travis-badge typescript-compiler

Last synced: 18 days ago
JSON representation

simple application that browses github user profiles.

Awesome Lists containing this project

README 

        
# Github Browser

[![Build Status][travis-badge]][travis-badge-url]



This repository is inspried by [brad traversy](https://github.com/bradtraversy) and holds the TypeScript source code of the [angular.io quickstart](https://angular.io/docs/ts/latest/quickstart.html),

the foundation for most of the documentation samples and potentially a good starting point for your application.



It's been extended with testing support so you can start writing tests immediately.



## Prerequisites



Node.js and npm are essential to Angular development. 

    



Get it now if it's not already installed on your machine.

 

**Verify that you are running at least node `v4.x.x` and npm `3.x.x`**

by running `node -v` and `npm -v` in a terminal/console window.

Older versions produce errors.



I recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.



## Install npm packages



> See npm and nvm version notes above



Install the npm packages described in the `package.json` and verify that it works:



```bash

npm install

npm start

```



The `npm start` command first compiles the application, 

then simultaneously re-compiles and runs the `lite-server`.

Both the compiler and the server watch for file changes.



Shut it down manually with `Ctrl-C`.



You're ready to write your application.



### npm scripts



We've captured many of the most useful commands in npm scripts defined in the `package.json`:



* `npm start` - runs the compiler and a server at the same time, both in "watch mode".

* `npm run tsc` - runs the TypeScript compiler once.

* `npm run tsc:w` - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them.

* `npm run lite` - runs the [lite-server](https://www.npmjs.com/package/lite-server), a light-weight, static file server, written and maintained by

[John Papa](https://github.com/johnpapa) and

[Christopher Martin](https://github.com/cgmartin)

with excellent support for Angular apps that use routing.



Here are the test related scripts:

* `npm test` - compiles, runs and watches the karma unit tests

* `npm run e2e` - run protractor e2e tests, written in JavaScript (*e2e-spec.js)



## Testing



This repo adds both karma/jasmine unit test and protractor end-to-end testing support.



These tools are configured for specific conventions described below.



*It is unwise and rarely possible to run the application, the unit tests, and the e2e tests at the same time.

We recommend that you shut down one before starting another.*



### Unit Tests

TypeScript unit-tests are usually in the `app` folder. Their filenames must end in `.spec`.



Look for the example `app/app.component.spec.ts`.

Add more `.spec.ts` files as you wish; we configured karma to find them.



Run it with `npm test`



That command first compiles the application, then simultaneously re-compiles and runs the karma test-runner.

Both the compiler and the karma watch for (different) file changes.



Shut it down manually with `Ctrl-C`.



Test-runner output appears in the terminal window.

We can update our app and our tests in real-time, keeping a weather eye on the console for broken tests.

Karma is occasionally confused and it is often necessary to shut down its browser or even shut the command down (`Ctrl-C`) and

restart it. No worries; it's pretty quick.



### End-to-end (E2E) Tests



E2E tests are in the `e2e` directory, side by side with the `app` folder.

Their filenames must end in `.e2e-spec.ts`.



Look for the example `e2e/app.e2e-spec.ts`.

Add more `.e2e-spec.js` files as you wish (although one usually suffices for small projects);

we configured protractor to find them.



Thereafter, run them with `npm run e2e`.



That command first compiles, then simultaneously starts the Http-Server at `localhost:8080`

and launches protractor.  



The pass/fail test results appear at the bottom of the terminal window.

A custom reporter (see `protractor.config.js`) generates a  `./_test-output/protractor-results.txt` file

which is easier to read; this file is excluded from source control.



[travis-badge]: https://travis-ci.org/angular/quickstart.svg?branch=master

[travis-badge-url]: https://travis-ci.org/angular/quickstart