Refactored components' name and added missing tests

src/app/shared/log-in/log-in.component.spec.ts

@@ -1,35 +1,23 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-
 import { By } from '@angular/platform-browser';
-import { Store, StoreModule } from '@ngrx/store';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { of as observableOf } from 'rxjs';
+import { StoreModule } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { LogInComponent } from './log-in.component';
 import { authReducer } from '../../core/auth/auth.reducer';
-import { EPersonMock } from '../testing/eperson-mock';
-import { EPerson } from '../../core/eperson/models/eperson.model';
-import { TranslateModule } from '@ngx-translate/core';
 import { AuthService } from '../../core/auth/auth.service';
-import { AuthServiceStub } from '../testing/auth-service-stub';
-import { AppState } from '../../app.reducer';
+import { authMethodsMock, AuthServiceStub } from '../testing/auth-service-stub';
+import { createTestComponent } from '../testing/utils';
+import { SharedModule } from '../shared.module';
 
 describe('LogInComponent', () => {
 
   let component: LogInComponent;
   let fixture: ComponentFixture<LogInComponent>;
-  let page: Page;
-  let user: EPerson;
-
-  const authState = {
-    authenticated: false,
-    loaded: false,
-    loading: false,
-  };
-
-  beforeEach(() => {
-    user = EPersonMock;
-  });
 
   beforeEach(async(() => {
     // refine the test module by declaring the test component
@@ -38,13 +26,15 @@ describe('LogInComponent', () => {
         FormsModule,
         ReactiveFormsModule,
         StoreModule.forRoot(authReducer),
+        SharedModule,
         TranslateModule.forRoot()
       ],
       declarations: [
-        LogInComponent
+        TestComponent
       ],
       providers: [
-        {provide: AuthService, useClass: AuthServiceStub}
+        {provide: AuthService, useClass: AuthServiceStub},
+        LogInComponent
       ],
       schemas: [
         CUSTOM_ELEMENTS_SCHEMA
@@ -54,75 +44,64 @@ describe('LogInComponent', () => {
 
   }));
 
-  beforeEach(inject([Store], (store: Store<AppState>) => {
-    store
-      .subscribe((state) => {
-        (state as any).core = Object.create({});
-        (state as any).core.auth = authState;
-      });
+  describe('', () => {
+    let testComp: TestComponent;
+    let testFixture: ComponentFixture<TestComponent>;
 
-    // create component and test fixture
-    fixture = TestBed.createComponent(LogInComponent);
+    // synchronous beforeEach
+    beforeEach(() => {
+      const html = `<ds-log-in [isStandalonePage]="isStandalonePage"> </ds-log-in>`;
 
-    // get test component from the fixture
-    component = fixture.componentInstance;
-
-    // create page
-    page = new Page(component, fixture);
-
-    // verify the fixture is stable (no pending tasks)
-    fixture.whenStable().then(() => {
-      page.addPageElements();
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
     });
 
-  }));
+    afterEach(() => {
+      testFixture.destroy();
+    });
 
-/*  it('should create a FormGroup comprised of FormControls', () => {
-    fixture.detectChanges();
-    expect(component.form instanceof FormGroup).toBe(true);
-  });*/
+    it('should create LogInComponent', inject([LogInComponent], (app: LogInComponent) => {
 
-/*  it('should authenticate', () => {
-    fixture.detectChanges();
+      expect(app).toBeDefined();
 
-    // set FormControl values
-    component.form.controls.email.setValue('user');
-    component.form.controls.password.setValue('password');
+    }));
+  });
 
-    // submit form
-    component.submit();
+  describe('', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(LogInComponent);
+      component = fixture.componentInstance;
+      component.isAuthenticated = observableOf(false);
+      component.loading = observableOf(false);
 
-    // verify Store.dispatch() is invoked
-    expect(page.navigateSpy.calls.any()).toBe(true, 'Store.dispatch not invoked');
-  });*/
+      fixture.detectChanges();
+    });
+
+    afterEach(() => {
+      fixture.destroy();
+      component = null;
+    });
+
+    it('should render a log-in container component foe each auth method available', () => {
+      component.authMethods = observableOf(authMethodsMock);
+
+      fixture.detectChanges();
+
+      const loginContainers = fixture.debugElement.queryAll(By.css('ds-log-in-container'));
+      expect(loginContainers.length).toBe(2);
+
+    });
+  });
 
 });
 
-/**
- * I represent the DOM elements and attach spies.
- *
- * @class Page
- */
-class Page {
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
 
-  public emailInput: HTMLInputElement;
-  public navigateSpy: jasmine.Spy;
-  public passwordInput: HTMLInputElement;
+  isStandalonePage = true;
 
-  constructor(private component: LogInComponent, private fixture: ComponentFixture<LogInComponent>) {
-    // use injector to get services
-    const injector = fixture.debugElement.injector;
-    const store = injector.get(Store);
-
-    // add spies
-    this.navigateSpy = spyOn(store, 'dispatch');
-  }
-
-  public addPageElements() {
-    const emailInputSelector = 'input[formcontrolname=\'email\']';
-    this.emailInput = this.fixture.debugElement.query(By.css(emailInputSelector)).nativeElement;
-
-    const passwordInputSelector = 'input[formcontrolname=\'password\']';
-    this.passwordInput = this.fixture.debugElement.query(By.css(passwordInputSelector)).nativeElement;
-  }
 }