Tests for LearnIndex and PatternsIndex

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/header/header.component.spec.ts

@@ -63,12 +63,16 @@ describe('HeaderComponent', () => {
     let home: DebugElement;
     let learn: DebugElement;
     let about: DebugElement;
+    let contact: DebugElement;
+    let donate: DebugElement;
 
     beforeEach(() => {
       const links = fixture.debugElement.queryAll(selectors.links);
       home = links[0];
       learn = links[1];
       about = links[2];
+      contact = links[3];
+      donate = links[3];
     });
 
     it('Home should link to /', () => {
@@ -82,6 +86,10 @@ describe('HeaderComponent', () => {
     it('About should link to /about', () => {
       expect(about.properties.href).toBe('/about');
     });
+
+    it('Contact should link to /contact', () => {
+      expect(contact.properties.href).toBe('/contact');
+    });
   });
 
   describe('toggleMenu()', () => {

apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap

@@ -347,6 +347,7 @@ exports[`HomeIndexComponent should create 1`] = `
           </h5>
           <app-fretboard>
             
+            
             <div
               class="fretboard__toggle"
             >
@@ -1041,6 +1042,78 @@ exports[`HomeIndexComponent should create 1`] = `
                 />
                 
               </div>
+              <div
+                class="fretboard"
+              >
+                
+                
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="0"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="1"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="2"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="3"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="4"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="5"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="6"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="7"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="8"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="9"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="10"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="11"
+                />
+                
+                <span
+                  class="fretboard__help"
+                  data-fret="12"
+                />
+                
+              </div>
             </div>
             <h4
               class="fretonator__playCta"

apps/fretonator-web/src/app/pages/learn/learn-index/__snapshots__/learn-index.component.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LearnIndexComponent should create 1`] = `LearnIndexComponentSpec {}`;

apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.spec.ts

@@ -1,25 +1,41 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LearnIndexComponent } from './learn-index.component';
+import { Component } from '@angular/core';
+import { LearnModule } from '../learn.module';
+import { RouterTestingModule } from '@angular/router/testing';
 
-xdescribe('LearnIndexComponent', () => {
-  let component: LearnIndexComponent;
-  let fixture: ComponentFixture<LearnIndexComponent>;
+describe('LearnIndexComponent', () => {
+  @Component({
+    selector: 'app-learn-index-spec',
+    template: `
+      <app-learn-index></app-learn-index>
+    `
+  })
+  class LearnIndexComponentSpec {
+  }
+  let component: LearnIndexComponentSpec;
+  let fixture: ComponentFixture<LearnIndexComponentSpec>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LearnIndexComponent ]
+      declarations: [ LearnIndexComponentSpec ],
+      imports: [
+        LearnModule,
+        RouterTestingModule
+      ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LearnIndexComponent);
+    fixture = TestBed.createComponent(LearnIndexComponentSpec);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component).toMatchSnapshot();
   });
 });

apps/fretonator-web/src/app/pages/learn/patterns-index/__snapshots__/patterns-index.component.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PatternsIndexComponent should create 1`] = `PatternsIndexComponentSpec {}`;

apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.spec.ts

@@ -1,25 +1,62 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PatternsIndexComponent } from './patterns-index.component';
+import { Component, DebugElement } from '@angular/core';
+import { LearnModule } from '../learn.module';
+import { By } from '@angular/platform-browser';
 
-xdescribe('PatternsIndexComponent', () => {
-  let component: PatternsIndexComponent;
-  let fixture: ComponentFixture<PatternsIndexComponent>;
+describe('PatternsIndexComponent', () => {
+  const selectors = {
+    chip: By.css('.chip')
+  };
+  const classNames = {
+    activeChip: 'chip--active'
+  };
+
+  @Component({
+    selector: 'app-patterns-index-spec',
+    template: `
+      <app-patterns-index></app-patterns-index>
+    `
+  })
+  class PatternsIndexComponentSpec {
+  }
+
+  let component: PatternsIndexComponentSpec;
+  let fixture: ComponentFixture<PatternsIndexComponentSpec>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PatternsIndexComponent ]
+      declarations: [PatternsIndexComponentSpec],
+      imports: [
+        LearnModule
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PatternsIndexComponent);
+    fixture = TestBed.createComponent(PatternsIndexComponentSpec);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('setPattern,', () => {
+    let chip: DebugElement;
+
+    beforeEach(() => {
+      chip = fixture.debugElement.queryAll(selectors.chip)[1];
+      chip.nativeElement.click();
+      fixture.detectChanges();
+    });
+
+    it('should activate the clicked chip', () => {
+      expect(chip.classes[classNames.activeChip]).toBeTruthy();
+    });
   });
 });