Fix for in-paradigm recordings

Author: fbanados

cypress/e2e/crkeng/recordings.spec.js

@@ -22,7 +22,7 @@ context("Recordings", function () {
   describe("On the definition page", () => {
     beforeEach(() => {
       // Intercept calls to our API
-      cy.intercept("https://speech-db.altlab.app/maskwacis/api/bulk_search?*", {
+      cy.intercept("https://speech-db.altlab.app/maskwacis/api/bulk_search?*q=w%C3%A2pam%C3%AAw*", {
         fixture: "recording/bulk_search/wâpamêw.json",
       }).as("recordingsResults");
     });
@@ -81,6 +81,21 @@ context("Recordings", function () {
         // clicking the link should open a new tab
         .should("have.attr", "target", "_blank");
     });
+
+    it("should display and play recordings inside the paradigm", function () {
+      // Get to the definition/paradigm page for "wâpamêw"
+      cy.setCookie("paradigm_audio", "yes");
+      cy.visitLemma("wâpamêw");
+      cy.wait("@recordingsResults");
+
+      // And we should be able to click it.
+      cy.get("div[data-cy=play-paradigm-recording][data-inflection=wâpamêw]").click();
+
+      // Note: figuring out if the audio actually played is... involved,
+      // and error-prone, so it is not tested.
+      // If you *want* to mock the Audio constructor... I mean, you can...
+      // https://github.com/cypress-io/cypress/issues/1750#issuecomment-390751415
+    });
   });
 
   describe("When there are no recordings available", () => {

src/morphodict/paradigm/templates/morphodict/components/paradigm.html

@@ -52,7 +52,7 @@
             chunks.forEach((chunk) => {
             url = new URL("https://speech-db.altlab.app/{{source}}/api/bulk_search")
             chunk.forEach(element => {
-                url.searchParams.append('q',search_key(element, source))
+                url.searchParams.append('q',search_key(element, "{{source}}"))
                 url.searchParams.append('exact', true)
             });
             promises.push(fetch(url).then(res => res.json()).then((json) =>{
@@ -91,7 +91,7 @@
             {% comment %}
                 now I can begin adding the elements as they belong
                 {% endcomment %}
-                for (var element of document.getElementsByClassName("paradigm-cell-recording")){
+                for (const element of document.getElementsByClassName("paradigm-cell-recording")){
                     let word = element.getAttribute("data-inflection")
                     var recording = best[word]
 
@@ -110,7 +110,7 @@
                         button.querySelector("button").addEventListener("click", () => {audio.play(); console.log(audio)}
                     );
                         element.appendChild(button)
-                        
+                        element.setAttribute("data-cy","play-paradigm-recording")
                     }
                 }
         })