Update web-components version

QutEcoacoustics · Oct 1, 2024 · 9742500 · 9742500
1 parent 8daf3b6
commit 9742500
Show file tree

Hide file tree

Showing 9 changed files with 362 additions and 191 deletions.
diff --git a/karma.conf.js b/karma.conf.js
@@ -42,11 +42,7 @@ module.exports = function (config) {
     // we add some headers to the Karma test server to ensure that we can use SharedArrayBuffer
     customHeaders: [
       { match: ".*", name: "Cross-Origin-Opener-Policy", value: "same-origin" },
-      {
-        match: ".*",
-        name: "Cross-Origin-Embedder-Policy",
-        value: "require-corp",
-      },
+      { match: ".*", name: "Cross-Origin-Embedder-Policy", value: "require-corp" },
       {
         match: ".*",
         name: "Cross-Origin-Resource-Policy",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "@angular/platform-server": "17.1.2",
     "@angular/router": "17.1.2",
     "@angular/ssr": "^17.1.2",
-    "@ecoacoustics/web-components": "^0.1.1-alpha.4",
+    "@ecoacoustics/web-components": "^1.1.0",
     "@fortawesome/angular-fontawesome": "^0.14.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",

diff --git a/src/app/components/annotations/pages/verification/verification.component.html b/src/app/components/annotations/pages/verification/verification.component.html
@@ -131,8 +131,10 @@ <h1 class="mb-2">Annotation Verification</h1>
 </div>
 
 <div>
-  @if (!areParametersCollapsed) {
+  @if (hasShownPreview) {
+  <div [ngClass]="{ hidden: areParametersCollapsed }">
     <ng-container [ngTemplateOutlet]="searchPreviewTemplate"></ng-container>
+  </div>
   }
 
   <!--
@@ -142,22 +144,24 @@ <h1 class="mb-2">Annotation Verification</h1>
     We also do this so that state is preserved when the user toggles the
     parameters dropdown card.
    -->
+  @if (hasShownVerificationGrid) {
   <div [ngClass]="{ hidden: !areParametersCollapsed }">
     <ng-container [ngTemplateOutlet]="verificationGridTemplate"></ng-container>
   </div>
+  }
 </div>
 
 <ng-template #searchPreviewTemplate>
   <div class="preview-container">
     <h3>Audio Events Preview</h3>
 
-    @if (previewAudioEvents.length > -1) {
+    @if (previewAudioEvents.length > 0) {
     <div class="spectrogram-grid">
       @for (audioEvent of previewAudioEvents; track $index) {
       <div class="preview-item border">
         <oe-spectrogram
           [id]="'spectrogram-' + audioEvent.id"
-          [src]="buildAudioUrl(audioEvent)"
+          [src]="audioEvent.audioLink"
           scaling="stretch"
           color-map="audacity"
         ></oe-spectrogram>

diff --git a/src/app/components/annotations/pages/verification/verification.component.spec.ts b/src/app/components/annotations/pages/verification/verification.component.spec.ts
@@ -40,13 +40,13 @@ import {
 } from "@angular/core/testing";
 import { defaultDebounceTime } from "src/app/app.helper";
 import { TypeaheadInputComponent } from "@shared/typeahead-input/typeahead-input.component";
-import { mockFetchResponse } from "@test/helpers/fetch";
+import { generateTag } from "@test/fakes/Tag";
+import { RouterTestingModule } from "@angular/router/testing";
+import { Filters } from "@baw-api/baw-api.service";
 import { VerificationComponent } from "./verification.component";
 import "node_modules/@ecoacoustics/web-components";
 
 describe("VerificationComponent", () => {
-  const mockAudioFileLocation = "test/assets/example.flac" as const;
-
   let spectator: SpectatorRouting<VerificationComponent>;
   let defaultProject: Project;
   let defaultRegion: Region;
@@ -63,7 +63,7 @@ describe("VerificationComponent", () => {
 
   const createComponent = createRoutingFactory({
     component: VerificationComponent,
-    imports: [MockBawApiModule, SharedModule],
+    imports: [MockBawApiModule, SharedModule, RouterTestingModule],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
   });
 
@@ -75,6 +75,7 @@ describe("VerificationComponent", () => {
         regionId: defaultRegion.id,
         siteId: defaultSite.id,
       },
+      queryParams: queryParameters,
       providers: [
         {
           provide: ActivatedRoute,
@@ -84,66 +85,42 @@ describe("VerificationComponent", () => {
               regionId: defaultRegion.id,
               siteId: defaultSite.id,
             }),
+            queryParams: of(queryParameters),
           },
         },
       ],
     });
 
-    mockFetchResponse(mockAudioFileLocation, mockAudioFile);
-
     injector = spectator.inject(Injector);
 
-    defaultFakeRegions = modelData.randomArray(
-      3,
-      10,
-      () => new Region(generateRegion({ projectId: defaultProject.id }))
-    );
-
-    defaultFakeSites = modelData.randomArray(
-      3,
-      10,
-      () => new Site(generateSite())
-    );
-
-    defaultFakeTags = modelData.randomArray(
-      3,
-      10,
-      () => new Tag(generateSite())
-    );
-
     mockVerificationsResponse = modelData.randomArray(
       3,
       3,
-      () => new Verification(generateVerification({
-        audioLink: mockAudioFileLocation,
-      }), injector)
+      () =>
+        new Verification(
+          generateVerification({
+            audioLink:
+              "https://api.staging.ecosounds.org/audio_recordings/461823/media.flac?end_offset=8170&start_offset=8159",
+          }),
+          injector
+        )
     );
 
     spectator.component.project = defaultProject;
     spectator.component.region = defaultRegion;
     spectator.component.site = defaultSite;
 
     mockVerificationsApi = spectator.inject(VERIFICATION.token);
-    mockVerificationsApi.create.and.stub();
-    mockVerificationsApi.update.and.stub();
-    mockVerificationsApi.filter.and.callFake(() =>
-      of(mockVerificationsResponse)
-    );
-
     mockRegionsApi = spectator.inject(SHALLOW_REGION.token);
     mockSitesApi = spectator.inject(SHALLOW_SITE.token);
     mockTagsApi = spectator.inject(TAG.token);
 
     mockRegionsApi.filter.and.callFake(() => of(defaultFakeRegions));
     mockSitesApi.filter.and.callFake(() => of(defaultFakeSites));
     mockTagsApi.filter.and.callFake(() => of(defaultFakeTags));
-
-    const queryParametersArray = Object.entries(queryParameters);
-    for (const parameter of queryParametersArray) {
-      const key = parameter[0];
-      const value = parameter[1];
-      spectator.setRouteQueryParam(key, value);
-    }
+    mockVerificationsApi.filter.and.callFake(() =>
+      of(mockVerificationsResponse)
+    );
 
     spectator.detectChanges();
   }
@@ -155,7 +132,23 @@ describe("VerificationComponent", () => {
     );
     defaultSite = new Site(generateSite({ regionId: defaultRegion.id }));
 
-    setup();
+    defaultFakeRegions = modelData.randomArray(
+      3,
+      10,
+      () => new Region(generateRegion({ projectId: defaultProject.id }))
+    );
+
+    defaultFakeSites = modelData.randomArray(
+      3,
+      10,
+      () => new Site(generateSite())
+    );
+
+    defaultFakeTags = modelData.randomArray(
+      3,
+      10,
+      () => new Tag(generateTag())
+    );
   });
 
   const parametersToggleButton = () =>
@@ -218,13 +211,25 @@ describe("VerificationComponent", () => {
 
   assertPageInfo(VerificationComponent, "Verify Annotations");
 
-  fit("should create", () => {
-    spectator.detectChanges();
+  // if this test fails, the test runners server might not be running with the
+  // correct headers
+  // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements
+  it("should have sharedArrayBuffer defined", () => {
+    // note that this test does not use the setup() function
+    expect(SharedArrayBuffer).toBeDefined();
+  });
+
+  it("should create", () => {
+    setup();
     expect(spectator.component).toBeInstanceOf(VerificationComponent);
   });
 
   describe("search parameters", () => {
     describe("no initial search parameters", () => {
+      beforeEach(() => {
+        setup();
+      });
+
       it("should automatically open the search parameters box if there are no initial search parameters", () => {
         expect(parametersCollapsable()).toHaveClass("show");
       });
@@ -237,12 +242,6 @@ describe("VerificationComponent", () => {
         expect(parametersCollapsable()).toHaveClass("show");
       });
 
-      xit("should not have a getPage callback set on the verification grid", () => {
-        expect(verificationGrid().getPage).not.toBeDefined();
-      });
-
-      it("should update the verification grids getPage callback correctly when filter conditions added", () => {});
-
       it("should update the search parameters when filter conditions are added", fakeAsync(() => {
         const targetTag = defaultFakeTags[0];
         const tagText = targetTag.text;
@@ -276,16 +275,25 @@ describe("VerificationComponent", () => {
         }));
 
         it("should make the correct api call", () => {
-          const expectedBody = {};
+          const expectedBody: Filters<Verification> = {
+            filter: {
+              "tags.id": {
+                in: [defaultFakeTags[0].id],
+              },
+            },
+            paging: {
+              page: 1,
+              items: 3,
+            },
+          } as any;
+
           expect(mockVerificationsApi.filter).toHaveBeenCalledWith(
             expectedBody
           );
         });
 
         it("should display an error if there are no search results", () => {
           const expectedText = "No annotations found";
-          spectator.detectChanges();
-
           const element = getElementByInnerText(expectedText);
           expect(element).toExist();
         });
@@ -369,9 +377,6 @@ describe("VerificationComponent", () => {
 
     describe("with initial search parameters", () => {
       beforeEach(() => {
-        // destroy the current component and create a new one with query string parameters
-        spectator.fixture.destroy();
-
         const testedQueryParameters: Params = {
           tags: defaultFakeTags.map((tag) => tag.id).toString(),
           sites: defaultFakeSites.map((site) => site.id).toString(),
@@ -385,7 +390,7 @@ describe("VerificationComponent", () => {
       });
 
       it("should have a collapsed search parameters box", () => {
-        expect(parametersCollapsable()).toHaveClass("hide");
+        expect(parametersCollapsable()).not.toHaveClass("show");
       });
 
       it("should create the correct search parameter model from query string parameters", () => {
@@ -409,14 +414,7 @@ describe("VerificationComponent", () => {
         expect(realizedTagModels).toEqual(defaultFakeTags);
       });
 
-      it("should make the correct api calls when first loaded", () => {
-        const expectedFilterBody = {};
-        expect(mockVerificationsApi.filter).toHaveBeenCalledWith(
-          expectedFilterBody
-        );
-      });
-
-      it("should cache client side with GET requests", () => {
+      fit("should cache client side with GET requests", () => {
         const expectedRequestCount = 10;
         expect(mockVerificationsApi.filter).toHaveBeenCalledTimes(
           expectedRequestCount