feat(LocationSelectMenu): Alphabetize options (#2219)

- Add test for LocationSelectMenuComponent

Author: hirokiterashima

src/app/domain/projectFilterValues.ts

@@ -105,8 +105,7 @@ export class ProjectFilterValues {
       this.locationValue.length === 0 ||
       project.metadata.locations
         ?.map((location) => Object.assign(new Location(), location))
-        .map((location) => location.getLocationOptions())
-        .flat()
+        .flatMap((location) => location.getLocationOptions())
         .some((locationOption) => this.locationValue.includes(locationOption.name))
     );
   }

src/app/modules/shared/location-select-menu/location-select-menu.component.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatSelectHarness } from '@angular/material/select/testing';
+import { LocationSelectMenuComponent } from './location-select-menu.component';
+import { Location } from '../../library/Location';
+
+let component: LocationSelectMenuComponent;
+let fixture: ComponentFixture<LocationSelectMenuComponent>;
+describe('LocationSelectMenuComponent', () => {
+  let loader: HarnessLoader;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LocationSelectMenuComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LocationSelectMenuComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    component['viewValueProp'] = 'name';
+    component.options = [
+      Object.assign(new Location(), {
+        level1: 'USA',
+        level2: 'California'
+      }),
+      Object.assign(new Location(), {
+        level1: 'USA',
+        level2: 'New York'
+      }),
+      Object.assign(new Location(), {
+        level1: 'Canada',
+        level2: 'Ontario'
+      })
+    ];
+    fixture.detectChanges();
+  });
+
+  it('should show groups and options', async () => {
+    const select = await loader.getHarness(MatSelectHarness);
+    await select.open();
+    const optionGroups = await select.getOptionGroups();
+    expect(
+      await Promise.all(optionGroups.map(async (option) => await option.getLabelText()))
+    ).toEqual(['State', 'Country']);
+    const options = await select.getOptions();
+    expect(await Promise.all(options.map(async (option) => await option.getText()))).toEqual([
+      'California, USA',
+      'New York, USA',
+      'Ontario, Canada',
+      'Canada',
+      'USA'
+    ]);
+  });
+});

src/app/modules/shared/location-select-menu/location-select-menu.component.ts

@@ -21,13 +21,30 @@ export class LocationSelectMenuComponent extends SelectMenuComponent {
 
   ngOnInit(): void {
     super.ngOnInit();
+    this.populateLocationOptions();
+    this.alphabetizeOptions();
+    this.keepNonEmptyLabels();
+  }
+
+  private populateLocationOptions(): void {
     this.options
       .flatMap((option: Location) => option.getLocationOptions())
       .forEach((option: LocationOption) => {
         if (!this.locationOptions[option.type].some((opt) => opt.name === option.name)) {
           this.locationOptions[option.type].push(option);
         }
       });
+  }
+
+  private alphabetizeOptions(): void {
+    (Object.keys(this.locationOptions) as LocationType[]).forEach((key: LocationType) =>
+      this.locationOptions[key].sort((a: LocationOption, b: LocationOption) =>
+        a.name.localeCompare(b.name)
+      )
+    );
+  }
+
+  private keepNonEmptyLabels(): void {
     this.labels = Object.keys(this.locationOptions).filter(
       (key: LocationType) => this.locationOptions[key].length > 0
     ) as LocationType[];