# Angular Testing Example

**URL:** <https://devforum.okta.com/t/angular-testing-example/13906>\
**Category:** Questions\
**Tags:** angular\
**Created:** [April 21, 2021, 6:10pm UTC](https://devforum.okta.com/t/angular-testing-example/13906 "2021-04-21T18:10:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mediaguru](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mediaguru/32/2833_2.png) [@mediaguru](https://devforum.okta.com/u/mediaguru)\
**Post date:** [April 21, 2021, 6:10pm UTC](https://devforum.okta.com/t/angular-testing-example/13906/1 "2021-04-21T18:10:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\
**Post date:** [April 21, 2021, 6:15pm UTC](https://devforum.okta.com/t/angular-testing-example/13906/2 "2021-04-21T18:15:33Z")

</div>

Are you interested in unit or e2e tests? I maintain an Angular repo called [ng-demo](https://github.com/mraible/ng-demo/tree/okta) that has a branch with Okta tests in it. For example:

```auto
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](https://github.com/mraible/ng-demo/tree/okta/e2e/src).

---

<div class="post-metadata">

**Author:** ![mediaguru](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mediaguru/32/2833_2.png) [@mediaguru](https://devforum.okta.com/u/mediaguru)\
**Post date:** [April 22, 2021, 7:10pm UTC](https://devforum.okta.com/t/angular-testing-example/13906/3 "2021-04-22T19:10:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mediaguru](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mediaguru/32/2833_2.png) [@mediaguru](https://devforum.okta.com/u/mediaguru)\
**Post date:** [April 23, 2021, 1:17am UTC](https://devforum.okta.com/t/angular-testing-example/13906/4 "2021-04-23T01:17:52Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [April 26, 2021, 5:54pm UTC](https://devforum.okta.com/t/angular-testing-example/13906/5 "2021-04-26T17:54:37Z")

</div>

Closed on April 26, 2021, 5:54pm UTC

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.