juristr / Angular Testing Recipes
Simple testing patterns for Angular version 2+
Stars: โญ 450
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Angular Testing Recipes
Typescript Webpack Starter
โก create-ts-lib: A Starter Kit and a CLI to create your TypeScript / ES6 module bundled by Webpack without thinking about build or unit tests configurations. ๐
Stars: โญ 358 (-20.44%)
Mutual labels: karma, jasmine
Spring Boot Angular2
spring boot backend, angular2 frontend with webpack, typescript, sass, bootstrap4, karma, jasmine
Stars: โญ 396 (-12%)
Mutual labels: karma, jasmine
Karma
Spectacular Test Runner for JavaScript
Stars: โญ 11,591 (+2475.78%)
Mutual labels: karma, jasmine
Karmatic
๐ฆ Easy automatic (headless) browser testing with Jest's API, but powered by Karma & Webpack.
Stars: โญ 1,178 (+161.78%)
Mutual labels: karma, jasmine
Angularjs Webpack Starter
๐ A modern frontend setup for AngularJS projects using NPM, TypeScript and Webpack.
Stars: โญ 173 (-61.56%)
Mutual labels: karma, jasmine
Jasmine Matchers
Write Beautiful Specs with Custom Matchers for Jest and Jasmine
Stars: โญ 552 (+22.67%)
Mutual labels: karma, jasmine
generator-speedseed
Oriented to components, allow create/choice template, multiple configuration with easy maintenance
Stars: โญ 13 (-97.11%)
Mutual labels: jasmine, karma
testing-angular-applications
Project for the Testing Angular Applications book
Stars: โญ 99 (-78%)
Mutual labels: jasmine, karma
Egeo
EGEO is the open-source UI library used to build Stratio's UI. It includes UI Components, Utilities, Services and much more to build user interfaces quickly and with ease. The library is distributed in AoT mode.
Stars: โญ 69 (-84.67%)
Mutual labels: karma, jasmine
angular-unit-testing-examples
Showroom for different Angular unit testing concepts
Stars: โญ 19 (-95.78%)
Mutual labels: jasmine, karma
Company Structure
A company structure with a list of projects and their users
Stars: โญ 48 (-89.33%)
Mutual labels: karma, jasmine
Springbootangularhtml5
โจ๏ธ Spring Boot 2 + Angular 11 + HTML5 router mode + HTTP interceptor + Lazy loaded modules
Stars: โญ 89 (-80.22%)
Mutual labels: karma, jasmine
Angularconcepts
Key Angular Concepts using Latest Angular version 5
Stars: โญ 31 (-93.11%)
Mutual labels: karma, jasmine
React Cordova Boilerplate
TodoMVC example for react with development tools to build a cordova application
Stars: โญ 206 (-54.22%)
Mutual labels: karma, jasmine
angular-material-boilerplate
A straightforward and well structured boilerplate based on Google's Angular Material project.
Stars: โญ 28 (-93.78%)
Mutual labels: jasmine, karma
metadatamanagement
Metadatamanagement (MDM) - Data Search for Higher Education Research and Science Studies
Stars: โญ 21 (-95.33%)
Mutual labels: jasmine, karma
karma-jasmine-diff-reporter
Diff and pretty print for failed tests
Stars: โญ 31 (-93.11%)
Mutual labels: jasmine
Angular Testing Recipes
This repo is for Angular version 2+. More ยป
The goal of this repository is to have a collection of recipes for common testing scenarios with Angular. I'm happy for every contribution/suggestion ๐.
Talk (Video + Slides)
I've been giving a talk on "Testing with Angular".
Contents
All the scenarios are listed here below and nicely linked to the source file.
-
Testing Components
-
testing @Input
Learn how to test a component's@Input()
. -
testing @Output
Learn how to test a component's@Output()
, more specifically theEventEmitter
type. -
testing timers inside components
Learn about how to handle timers inside components usingfakeAsync
anddiscardPeriodicTasks()
. -
testing DOM manipulations
Learn how to test the DOM manipulations which might be caused by like*ngIf
statements etc. -
testing content projection
Learn how to test<ng-content>
directives. -
testing dynamic CSS classes
Test CSS classes being added and removed dynamically from your component's template based on some conditional expressions. -
testing dynamic CSS styles
Test dynamic CSS styles using custom Jasmine matchers. -
mocking nested components
Learn how to mock out nested components which you don't want to necessarily test -
testing component with service deps
Simple test of component logic by manually instantiating the component
-
testing @Input
-
Testing Services
-
Simple stateless function
Learn about different ways of injecting a service into a test case as well as how to test service methods. -
Async operations
Learn how to test async operations using theasync()
as well asfakeAsync()
functions. -
Mocking and remote http calls
Learn how to mock external dependencies, such as use the
MockBackend
provided by Angular to respond to http calls. - Mocking remote calls with Jasmine spies Fake the call by using Jasmine spies.
-
Simple stateless function
-
Testing Pipes
- custom filter pipe
-
async pipes within templates
Shows how to correctly resolve async pipes and then verify they properly render in the HTML
- Custom Matchers and Utilities
Articles on Testing
- ๐ Angular 2 Testing Guide by Gerard Sans
- ๐ Testing Angular Directives with Custom Matchers by Thoughtram
- ๐ Essential Angular Testing by Nrwl
- ๐ Three Ways to Test Angular 2 Components by Victor Savkin
Run them yourself
If you want to run the example locally,
- clone this repository
- Run
npm install
- Run
npm test
to execute all the tests
By running npm run test.watch
you can run the tests in watch mode which is particularly useful during development.
Contribute
Wanna help? Of course! Just open an issue and/or send me a PR ๐.
Other Links & Resources
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].