Move similarModes functionality to a pipe to make the component rerender automatically with home-index

Author: Salma Alam-Naylor

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

@@ -12,6 +12,7 @@ import {
   cIonianChordMap,
   cIonianFretMappings,
   cIonianMode,
+  cIonianSimilarModes,
   cMajorPentatonicChordMap,
   cMinorPentatonicChordMap,
   cPhrygianMode,
@@ -1363,43 +1364,6 @@ describe('FretMapService:getSimilarModes', () => {
   it('returns correctly for an input of c natural ionian', () => {
     const result = service.getSimilarModes(cIonianMode, Mode.ionian);
 
-    expect(result).toBe([
-      {
-        noteDisplayName: 'D',
-        note: 'd',
-        mode: 'dorian',
-        noteExtender: 'natural'
-      },
-      {
-        noteDisplayName: 'E',
-        note: 'e',
-        mode: 'phrygian',
-        noteExtender: 'natural'
-      },
-      {
-        noteDisplayName: 'F',
-        note: 'f',
-        mode: 'lydian',
-        noteExtender: 'natural'
-      },
-      {
-        noteDisplayName: 'G',
-        note: 'g',
-        mode: 'mixolydian',
-        noteExtender: 'natural'
-      },
-      {
-        noteDisplayName: 'A',
-        note: 'a',
-        mode: 'aolian',
-        noteExtender: 'natural'
-      },
-      {
-        noteDisplayName: 'B',
-        note: 'b',
-        mode: 'locrian',
-        noteExtender: 'natural'
-      }
-    ]);
+    expect(result).toEqual(cIonianSimilarModes);
   });
 });

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

@@ -1209,3 +1209,42 @@ export const cIonianChordMap = [
     type: ChordType.diminished,
   },
 ]
+
+export const cIonianSimilarModes = [
+  {
+    noteDisplayName: 'D',
+    note: 'd',
+    mode: 'dorian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'E',
+    note: 'e',
+    mode: 'phrygian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'F',
+    note: 'f',
+    mode: 'lydian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'G',
+    note: 'g',
+    mode: 'mixolydian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'A',
+    note: 'a',
+    mode: 'aolian',
+    noteExtender: 'natural'
+  },
+  {
+    noteDisplayName: 'B',
+    note: 'b',
+    mode: 'locrian',
+    noteExtender: 'natural'
+  }
+]

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

@@ -87,7 +87,8 @@ <h4 class="fretonator__playCta">
   <app-chord-map [chordMap]="chordMap"></app-chord-map>
 
   <app-similar-modes [modeDisplayString]="modeDisplayString"
-                     [modeMap]="modeMap"
-                     [mode]="mode"></app-similar-modes>
+                     [similarModes]="modeMap | getSimilarModes : mode">
+
+  </app-similar-modes>
 
 </div>

apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts

@@ -8,12 +8,14 @@ import { ScaleMapModule } from './scale-map/scale-map.module';
 import { IsTheoreticalScalePipe } from './is-theoretical-scale.pipe';
 import { SpeakerModule } from '../svgs/speaker/speaker.module';
 import { SimilarModesModule } from './similar-modes/similar-modes.module';
+import { GetSimilarModesPipe } from './get-similar-modes.pipe';
 
 @NgModule({
   declarations: [
     FretonatorComponent,
     GetFretFromFretMapPipe,
     IsTheoreticalScalePipe,
+    GetSimilarModesPipe,
   ],
   imports: [
     CommonModule,

apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.spec.ts

@@ -0,0 +1,27 @@
+import { GetSimilarModesPipe } from './get-similar-modes.pipe';
+import { TestBed } from '@angular/core/testing';
+import { FretMapService } from '../fret-map/fret-map.service';
+import { Mode } from '../../util/types';
+import { cIonianMode } from '../fret-map/fret-map.service.testConstants';
+
+describe('GetSimilarModesPipe', () => {
+
+  let pipe: GetSimilarModesPipe;
+
+  beforeEach(() => {
+    const service = TestBed.inject(FretMapService);
+    pipe = new GetSimilarModesPipe(service);
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+
+  it('calls GenerateFretMapService.getSimilarModes', () => {
+    const spy = spyOn(pipe.generateFretMapService, 'getSimilarModes');
+
+    pipe.transform(cIonianMode, 'ionian' as Mode);
+    expect(spy).toHaveBeenCalledWith(cIonianMode, 'ionian');
+  });
+});

apps/fretonator-web/src/app/common/fretonator/get-similar-modes.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FretMapService } from '../fret-map/fret-map.service';
+import { Mode, ModeMap, SimilarModes } from '../../util/types';
+
+@Pipe({
+  name: 'getSimilarModes'
+})
+export class GetSimilarModesPipe implements PipeTransform {
+
+  constructor(public generateFretMapService: FretMapService) {}
+
+  transform(modeMap: ModeMap, mode: Mode): SimilarModes {
+    return this.generateFretMapService.getSimilarModes(modeMap, mode);
+  }
+
+}

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

@@ -8,6 +8,6 @@ <h4 class="similarModes__title">Did you know?</h4>
               [note]="mode.note"
               [noteExtender]="mode.noteExtender"
               [mode]="mode.mode"
-              selectedColor="default">{{mode.displayName}} {{mode.mode | titlecase}}</app-chip>
+              selectedColor="default">{{mode.noteDisplayName}} {{mode.mode | titlecase}}</app-chip>
   </app-chips>
 </div>

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

@@ -1,20 +1,34 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SimilarModesComponent } from './similar-modes.component';
+import { Component } from '@angular/core';
+import { SimilarModesModule } from './similar-modes.module';
 
 describe('SimilarModesComponent', () => {
-  let component: SimilarModesComponent;
-  let fixture: ComponentFixture<SimilarModesComponent>;
+
+  @Component({
+    selector: 'app-similar-modes-spec',
+    template: `
+      <app-similar-modes>
+      </app-similar-modes>
+    `
+  })
+  class SimilarModesComponentSpec {
+  }
+
+  let component: SimilarModesComponentSpec;
+  let fixture: ComponentFixture<SimilarModesComponentSpec>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SimilarModesComponent ]
+      declarations: [SimilarModesComponentSpec],
+      imports: [ SimilarModesModule ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SimilarModesComponent);
+    fixture = TestBed.createComponent(SimilarModesComponentSpec);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.ts

@@ -1,33 +1,12 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Mode, ModeMap, SimilarModes } from '../../../util/types';
-import { FretMapService } from '../../fret-map/fret-map.service';
-import { ActivatedRoute } from '@angular/router';
+import { Component, Input } from '@angular/core';
+import { SimilarModes } from '../../../util/types';
 
 @Component({
   selector: 'app-similar-modes',
   templateUrl: './similar-modes.component.html',
   styleUrls: ['./similar-modes.component.scss']
 })
-export class SimilarModesComponent implements OnInit {
-  @Input() modeMap: ModeMap;
-  @Input() mode: Mode;
+export class SimilarModesComponent {
+  @Input() similarModes: SimilarModes;
   @Input() modeDisplayString: string;
-  similarModes: SimilarModes = [];
-
-  constructor(private activatedRoute: ActivatedRoute,
-              public fretMapService: FretMapService) {
-  }
-
-  ngOnInit(): void {
-    this.activatedRoute.params.subscribe(() => this.onRouteChange());
-    this.getSimilarModes();
-  }
-
-  onRouteChange() {
-    this.getSimilarModes();
-  }
-
-  getSimilarModes() {
-    this.similarModes = this.fretMapService.getSimilarModes(this.modeMap, this.mode);
-  }
 }

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

@@ -1394,6 +1394,95 @@ exports[`HomeIndexComponent should create 1`] = `
                 </div>
               </div>
             </app-chord-map>
+            <app-similar-modes>
+              <div
+                class="similarModes"
+              >
+                <h4
+                  class="similarModes__title"
+                >
+                  Did you know?
+                </h4>
+                <p
+                  class="similarModes__copy"
+                >
+                  If you know the patterns of C Ionian (Major), you'll know the modes below. Just shift your fingers along the fret board.
+                </p>
+                <app-chips>
+                  <div
+                    class="chips"
+                  >
+                    
+                    <app-chip
+                      selectedcolor="default"
+                    >
+                      <a
+                        aria-label="D Dorian"
+                        class="chip"
+                        href="/d/natural/dorian"
+                      >
+                        D Dorian
+                      </a>
+                    </app-chip>
+                    <app-chip
+                      selectedcolor="default"
+                    >
+                      <a
+                        aria-label="E Phrygian"
+                        class="chip"
+                        href="/e/natural/phrygian"
+                      >
+                        E Phrygian
+                      </a>
+                    </app-chip>
+                    <app-chip
+                      selectedcolor="default"
+                    >
+                      <a
+                        aria-label="F Lydian"
+                        class="chip"
+                        href="/f/natural/lydian"
+                      >
+                        F Lydian
+                      </a>
+                    </app-chip>
+                    <app-chip
+                      selectedcolor="default"
+                    >
+                      <a
+                        aria-label="G Mixolydian"
+                        class="chip"
+                        href="/g/natural/mixolydian"
+                      >
+                        G Mixolydian
+                      </a>
+                    </app-chip>
+                    <app-chip
+                      selectedcolor="default"
+                    >
+                      <a
+                        aria-label="A Aolian (Minor)"
+                        class="chip"
+                        href="/a/natural/aolian"
+                      >
+                        A Aolian
+                      </a>
+                    </app-chip>
+                    <app-chip
+                      selectedcolor="default"
+                    >
+                      <a
+                        aria-label="B Locrian"
+                        class="chip"
+                        href="/b/natural/locrian"
+                      >
+                        B Locrian
+                      </a>
+                    </app-chip>
+                  </div>
+                </app-chips>
+              </div>
+            </app-similar-modes>
           </div>
         </app-fretonator>