Update test coverage

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts

@@ -1353,6 +1353,49 @@ describe('FretMapService:convertFretMapConfigurationToDisplayString', () => {
   });
 });
 
+describe('FretMapService:getNoteExtenderStringFromNoteObject', () => {
+  let service: FretMapService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FretMapService);
+  });
+
+  it('returns NoteExtenderString.flat for a flat note', () => {
+    const result = service.getNoteExtenderStringFromNoteObject({
+      name: 'b',
+      flat: true,
+      sharp: false,
+      doubleSharp: false,
+      doubleFlat: false
+    });
+    expect(result).toBe('flat');
+  });
+
+
+  it('returns NoteExtenderString.sharp for a sharp note', () => {
+    const result = service.getNoteExtenderStringFromNoteObject({
+      name: 'd',
+      flat: false,
+      sharp: true,
+      doubleSharp: false,
+      doubleFlat: false
+    });
+    expect(result).toBe('sharp');
+  });
+
+  it('returns NoteExtenderString.natural for a natural note', () => {
+    const result = service.getNoteExtenderStringFromNoteObject({
+      name: 'd',
+      flat: false,
+      sharp: false,
+      doubleSharp: false,
+      doubleFlat: false
+    });
+    expect(result).toBe('natural');
+  });
+});
+
 describe('FretMapService:getSimilarModes', () => {
   let service: FretMapService;
 

apps/fretonator-web/src/app/common/fretonator/fretonator.component.html

@@ -16,11 +16,11 @@
 </ng-template>
 
 <div class="fretboard__toggle">
-  <button class="fretboard__toggleButton fretboard__toggleButton--left"
+  <button class="fretboard__toggleButton fretboard__toggleButton--twelve"
           [class.fretboard__toggleButton--active]="fretMode === fretModes.twelve"
           (click)="setFretMode(fretModes.twelve)">12 frets
   </button>
-  <button class="fretboard__toggleButton fretboard__toggleButton--right"
+  <button class="fretboard__toggleButton fretboard__toggleButton--twentyFour"
           [class.fretboard__toggleButton--active]="fretMode === fretModes.twentyFour"
           (click)="setFretMode(fretModes.twentyFour)">24 frets
   </button>

apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss

@@ -369,13 +369,13 @@
   color: var(--offwhite);
 }
 
-.fretboard__toggleButton--left {
+.fretboard__toggleButton--twelve {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right-width: calc(var(--border-width-button) / 2);
 }
 
-.fretboard__toggleButton--right {
+.fretboard__toggleButton--twentyFour {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: calc(var(--border-width-button) / 2);

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

@@ -2,9 +2,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FretonatorComponent } from './fretonator.component';
 import { FretonatorModule } from './fretonator.module';
-import { Component } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
 describe('FretonatorComponent', () => {
+
+  const selectors = {
+    twelveButton: By.css('.fretboard__toggleButton--twelve'),
+    twentyFourButton: By.css('.fretboard__toggleButton--twentyFour')
+  }
+
+  const classNames = {
+    toggleFretButtonSelected: 'fretboard__toggleButton--active'
+  }
+
   @Component({
     selector: 'app-fretonator-spec',
     template: `
@@ -44,4 +55,26 @@ describe('FretonatorComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('setFretMode()', () => {
+    let twelveButton: DebugElement;
+    let twentyFourButton: DebugElement;
+
+    beforeEach(() => {
+      twelveButton = fixture.debugElement.query(selectors.twelveButton);
+      twentyFourButton = fixture.debugElement.query(selectors.twentyFourButton);
+    });
+
+    it('changes the fret mode to twenty four when the button is clicked', () => {
+      twentyFourButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(twentyFourButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
+    });
+
+    it('changes the fret mode to twelve when the button is clicked', () => {
+      twelveButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(twelveButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
+    });
+  });
 });

apps/fretonator-web/src/app/common/fretonator/interval-map/convert-interval-integer-to-string.pipe.spec.ts

@@ -23,4 +23,16 @@ describe('ConvertIntervalIntegerToStringPipe', () => {
     const result = pipe.transform(3);
     expect(result).toBe('aug 2nd');
   });
+
+  it('returns "min 3rd" for 4', () => {
+    const pipe = new ConvertIntervalIntegerToStringPipe();
+    const result = pipe.transform(4);
+    expect(result).toBe('min 3rd');
+  });
+
+  it('returns "" for something else', () => {
+    const pipe = new ConvertIntervalIntegerToStringPipe();
+    const result = pipe.transform(5);
+    expect(result).toBe('');
+  });
 });

apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html

@@ -20,7 +20,7 @@ <h5 class="scaleDisplay__note">
         Play scale
       </button>
       <button *ngIf="isTheoretical"
-              class="button__infoToggle"
+              class="button__infoToggle button__infoToggle--theoretical"
               aria-label="Theoretical Scales Info Toggle"
               type="button"
               (click)="toggleTheoreticalScaleInfo()">{{theoreticalScalesToggleText}}
@@ -38,15 +38,15 @@ <h4 class="scaleMap__title">Degrees</h4>
       <span class="degreesDisplay__degree degreesDisplay__degree--dominant"
       >5</span>
     </div>
-    <button class="button__infoToggle"
+    <button class="button__infoToggle button__infoToggle--scaleDegrees"
             aria-label="Scale Degrees Info Toggle"
             type="button"
             (click)="toggleScaleMapInfo()">{{scaleDegreesToggleText}}
     </button>
   </div>
 </div>
 
-<div class="infoBlock"
+<div class="infoBlock infoBlock--theoreticalScales"
      [attr.aria-expanded]="showTheoreticalScalesInfo"
      *ngIf="showTheoreticalScalesInfo">
   <h2 class="infoBlock__title">About Theoretical Scales
@@ -69,7 +69,7 @@ <h2 class="infoBlock__title">About Theoretical Scales
   >Switch to {{scale[0] | getEnharmonicEquivalent }}</a>
 </div>
 
-<div class="infoBlock"
+<div class="infoBlock infoBlock--scaleDegrees"
      [attr.aria-expanded]="showScaleMapInfo"
      *ngIf="showScaleMapInfo">
   <h2 class="infoBlock__title">About Scale Degrees

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

@@ -1,16 +1,22 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ScaleMapComponent } from './scale-map.component';
-import { Component } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 import { ScaleMapModule } from './scale-map.module';
+import { By } from '@angular/platform-browser';
 
 describe('ScaleMapComponent', () => {
 
+  const selectors = {
+    toggleScaleInfo: By.css('.button__infoToggle--scaleDegrees'),
+    scaleMapDegreesInfo: By.css('.infoBlock--scaleDegrees'),
+  };
+
   @Component({
     selector: 'app-scale-map-spec',
     template: `
       <app-scale-map></app-scale-map>
-    `,
+    `
   })
   class ScaleMapComponentSpec {
   }
@@ -20,10 +26,10 @@ describe('ScaleMapComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ScaleMapComponentSpec ],
-      imports: [ ScaleMapModule ]
+      declarations: [ScaleMapComponentSpec],
+      imports: [ScaleMapModule]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -35,4 +41,23 @@ describe('ScaleMapComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('toggleScaleMapInfo()', () => {
+    let toggleScaleButton: DebugElement;
+
+    beforeEach(() => {
+      toggleScaleButton = fixture.debugElement.query(selectors.toggleScaleInfo);
+      toggleScaleButton.nativeElement.click();
+      fixture.detectChanges();
+    });
+
+    it('should show the scale map info', () => {
+      expect(fixture.debugElement.query(selectors.scaleMapDegreesInfo)).toBeTruthy();
+    });
+
+    it('should update the text on the toggle button', () => {
+      expect(toggleScaleButton.nativeElement.textContent.trim()).toBe('Hide info');
+    });
+  });
 });
+

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

@@ -15,7 +15,7 @@ describe('HeaderComponent', () => {
   };
 
   const classNames = {
-    menuHide: '.header__links--hide'
+    menuHide: 'header__links--hide'
   }
 
   @Component({
@@ -85,7 +85,8 @@ describe('HeaderComponent', () => {
     beforeEach(() => {
       hamburger = fixture.debugElement.query(selectors.hamburger);
       menu = fixture.debugElement.query(selectors.menu);
-      hamburger.triggerEventHandler('click', new Event('click'));
+      hamburger.nativeElement.click();
+      fixture.detectChanges();
     });
 
     it('removes the hidden links modifier', () => {

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

@@ -343,12 +343,12 @@ exports[`HomeIndexComponent should create 1`] = `
             class="fretboard__toggle"
           >
             <button
-              class="fretboard__toggleButton fretboard__toggleButton--left fretboard__toggleButton--active"
+              class="fretboard__toggleButton fretboard__toggleButton--twelve fretboard__toggleButton--active"
             >
               12 frets 
             </button>
             <button
-              class="fretboard__toggleButton fretboard__toggleButton--right"
+              class="fretboard__toggleButton fretboard__toggleButton--twentyFour"
             >
               24 frets 
             </button>
@@ -1180,7 +1180,7 @@ exports[`HomeIndexComponent should create 1`] = `
                   </div>
                   <button
                     aria-label="Scale Degrees Info Toggle"
-                    class="button__infoToggle"
+                    class="button__infoToggle button__infoToggle--scaleDegrees"
                     type="button"
                   >
                     What is this?