/angular-flickr-search

Flickr search example application. Fully tested, for learning Angular.

Primary LanguageTypeScriptThe UnlicenseUnlicense

Flickr Search – Angular example application

📖 This example is part of the free online book: Testing Angular – A Guide to Robust Angular Applications . 📖

This is an Angular example application implementing a Flickr photo search. There is one version with plain Angular and one version with NgRx.

The application is fully tested with unit and end-to-end tests.

Unit tests are written in plain Angular using TestBed and additionally using Spectator.

End-to-end tests are written with Cypress and also with Protractor.

App structure plan (React version)

Other versions:

Terms of Use

This non-commercial example application uses the Flickr API but is not endorsed or certified by Flickr Inc. or SmugMug, Inc. See the Flickr API Terms of Use.

The code contains a Flickr API key that is bound to the example application. If you wish to use the Flickr API in your application, you need to Request an API Key yourself.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit & integration tests

Run ng test to execute the unit & integration tests with Karma and Jasmine.

Running end-to-end tests

Cypress

Run ng run flickr-search:cypress-run to execute the Cypress end-to-end tests. (This starts the development server automatically.)

Run ng run flickr-search:cypress-open to start the interactive Cypress test runner.

Protractor

Run ng e2e to execute the Protractor end-to-end tests. (This starts the development server automatically.)