Angular Testing Example

[mediaguru]

I’m not happy to report I have Okta auth working in the app I’m working on. I’m not finding much in terms of examples of angular testing with Okta. Any links would be appreciated.

[mraible]

Are you interested in unit or e2e tests? I maintain an Angular repo called ng-demo that has a branch with Okta tests in it. For example:

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { OKTA_CONFIG, OktaAuthModule } from '@okta/okta-angular';

describe('AppComponent', () => {
  const oktaConfig = {
    issuer: 'https://not-real.okta.com',
    clientId: 'fake-client-id',
    redirectUri: 'http://localhost:4200'
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        OktaAuthModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [{provide: OKTA_CONFIG, useValue: oktaConfig}]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'ng-demo'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('ng-demo');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to ng-demo!');
  });
});

For e2e tests, see https://github.com/mraible/ng-demo/tree/okta/e2e/src.

[mediaguru]

Thanks for the response. This looks like it will be very helpful. The part I was missing I believe is

  providers: [{provide: OKTA_CONFIG, useValue: oktaConfig}]
}).compileComponents();

and

  const oktaConfig = {
    issuer: 'https://not-real.okta.com',
    clientId: 'fake-client-id',
    redirectUri: 'http://localhost:4200'
  };

I’ll report back either way.

[mediaguru]

Apparently you can’t edit a post here. My original post should have said “I’m happy to report…” not “I’m NOT happy to report…”

Anyway this example helped me to get my tests working. Thank you very much. Excellent support I must say by Okta!