juristr/angular-testing-recipes

Simple testing patterns for Angular version 2+

Hi there 👋

I'm Juri! A passionate software developer & content creator. I love to talk to people, share ideas and learn in public. If that sounds interesting, here are some places where you can find me 😃

• 🌍 Website: https://juri.dev
• 🐦 Twitter: https://twitter.com/juristr
• 📹 Youtube: https://www.youtube.com/juristrumpflohner
• 📺 Twitch: https://twitch.tv/juridev
• 🥚 Egghead: https://egghead.io/q/resources-by-juri-strumpflohner
• 👉 Google Developers Expert

Currently I'm working as the Sr. Director of Developer Experience for Nx helping teach people about Nx and monorepos. Hence a lot of my content can also be found on our Nx Twitter account and on the Nx Youtube Channel.

Wanna chat or have me on your show? I'd love to!! Ping me on my Twitter. My DMs are open 😃

angular-testing-recipes's Issues

not able to run the application

test is running fine.. but when running application using ng-serve getting below error

ERROR in src/app/utils/custom-matchers.ts(22,37): error TS2503: Cannot find namespace 'jasmine'.
src/app/utils/custom-matchers.ts(80,30): error TS2503: Cannot find namespace 'jasmine'.
src/app/utils/helpers.ts(71,10): error TS2304: Cannot find name 'expect'.
src/app/utils/helpers.ts(92,35): error TS2304: Cannot find name 'expect'.

Update to Angular 4

New Angular is much improved. Consider updating guide. Recommend using angular-cli as this saves hastle during installation process and Rails-style generate commands can aid work-flow, particularly in rapid-deploy critical scenarios.

~Emile Rousseau xx

Testing component which has parent injected in it's constructor

Something like this

Domtesting Component Issue

Hello,

I have question about one test.

If I change in this line: https://github.com/juristr/angular-testing-recipes/blob/master/src/app/components/domtesting.component.spec.ts#L12

ngIf="isVisible" to *ngIf="!isVisible"

Than karma throw ERROR: Disconnected, because no message in 10000 ms..

Do you know why this happens ?
I tested this also on PhantomJS browser and there this error also happens.

I think there is some issue in connection between browser and karma ?

In my opnion tests should alwasys give passed or failed result on finish. This ERROR should never occure.

how to test components that use import (dinamic import) inside component ?

you can provide to make the test for components using import inside a component? (no router module)

example:

async loadImportXlsx(){

    // avoid user throttling
    if (this.isLoadingImportXlsx) return;

    this.isLoadingImportXlsx = true;

    const config: MatDialogConfig = {
      width: '85%',
      height: '95%',
      disableClose: true,
      data: {
        currentDomain: this.selectedDomain
      } 
    };
    
    // how test this line?
    const lazyComponent = await import('@pages/import/import.component');

    const dialogRef = this.dialog.open(lazyComponent.ImportComponent, config);
    dialogRef
    .beforeClosed()
    .subscribe(data => this.title.setTitle(this.dashboardTitle));

    setTimeout(() => {
      this.isLoadingImportXlsx = false;
    }, 1300);
  }

this code gets a ngModule using lazy load (with import) and then open it inside a new Material Dialog