From 509f04f3d194eb7838060905df07974b1914ea7b Mon Sep 17 00:00:00 2001
From: Matthew Evans <git@ml-evs.science>
Date: Fri, 1 Nov 2024 15:29:39 +0000
Subject: [PATCH] Add test for creating a media block with a fake png

Avoid using promises inside cypress command

Get rid of cleanup task

Just check for img block existence

Try to look more directly for mediablock img in test

Revert number of test snapshots to default (50)

use data-testid in tests

Co-authored-by: Josh Bocarsly <32345545+jdbocarsly@users.noreply.github.com>

Update webapp/src/components/datablocks/MediaBlock.vue

Co-authored-by: Josh Bocarsly <32345545+jdbocarsly@users.noreply.github.com>

Fix data-testid lookup
---
 webapp/cypress.config.ts                        |  2 --
 webapp/cypress/e2e/editPage.cy.js               | 17 +++++++++++++++++
 webapp/cypress/fixtures/example.json            |  5 -----
 webapp/cypress/support/commands.js              | 15 +++++++++++++++
 webapp/src/components/datablocks/MediaBlock.vue |  2 +-
 5 files changed, 33 insertions(+), 8 deletions(-)
 delete mode 100644 webapp/cypress/fixtures/example.json

diff --git a/webapp/cypress.config.ts b/webapp/cypress.config.ts
index f79ca653b..df6c1c395 100644
--- a/webapp/cypress.config.ts
+++ b/webapp/cypress.config.ts
@@ -5,8 +5,6 @@ export default defineConfig({
   e2e: {
     baseUrl: "http://localhost:8080",
     apiUrl: "http://localhost:5001",
-    experimentalMemoryManagement: true,
-    numTestsKeptInMemory: 0,
     defaultCommandTimeout: 10000,
   },
   component: {
diff --git a/webapp/cypress/e2e/editPage.cy.js b/webapp/cypress/e2e/editPage.cy.js
index a30efa7c4..39f77e44b 100644
--- a/webapp/cypress/e2e/editPage.cy.js
+++ b/webapp/cypress/e2e/editPage.cy.js
@@ -275,4 +275,21 @@ describe("Edit Page", () => {
     cy.contains("label", "X axis").should("exist");
     cy.contains("label", "Y axis").should("exist");
   });
+
+  it("Uploads a fake PNG image, make a Media block and checks that the image is shown", () => {
+    let test_fname = "test_image.png";
+    cy.createTestPNG(test_fname);
+    cy.uploadFileViaAPI("editable_sample", test_fname);
+
+    cy.get('[data-testid="search-input"]').type("editable_sample");
+    cy.findByText("editable_sample").click();
+
+    cy.findByText("Add a block").click();
+    cy.get(".dropdown-menu").findByText("Media").click();
+    cy.findAllByText("Select a file:").eq(1).should("exist");
+    cy.get("select.file-select-dropdown").eq(1).select(test_fname);
+
+    // Check that the img with id "media-block-img" is present
+    cy.get('img[data-testid="media-block-img"]').should("exist");
+  });
 });
diff --git a/webapp/cypress/fixtures/example.json b/webapp/cypress/fixtures/example.json
deleted file mode 100644
index 02e425437..000000000
--- a/webapp/cypress/fixtures/example.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js
index b2e85f974..a955473a1 100644
--- a/webapp/cypress/support/commands.js
+++ b/webapp/cypress/support/commands.js
@@ -255,6 +255,21 @@ Cypress.Commands.add("removeAllTestSamples", (item_ids, check_sample_table) => {
   }
 });
 
+Cypress.Commands.add("createTestPNG", (fname) => {
+  const canvas = document.createElement("canvas");
+  canvas.width = 100;
+  canvas.height = 100;
+
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#ff0000";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  const base64 = canvas.toDataURL("image/png").split(",")[1];
+  const filePath = `cypress/fixtures/${fname}`;
+
+  return cy.writeFile(filePath, base64, "base64").then(() => {});
+});
+
 Cypress.Commands.add("removeAllTestCollections", (collection_ids, check_collection_table) => {
   collection_ids.forEach((collection_id) => {
     cy.deleteCollectionViaAPI(collection_id);
diff --git a/webapp/src/components/datablocks/MediaBlock.vue b/webapp/src/components/datablocks/MediaBlock.vue
index 2c3ccb2bf..23d4fe9fd 100644
--- a/webapp/src/components/datablocks/MediaBlock.vue
+++ b/webapp/src/components/datablocks/MediaBlock.vue
@@ -8,7 +8,7 @@
       class="mb-3"
       update-block-on-change
     />
-    <img v-if="isPhoto" :src="media_url" class="img-fluid mx-auto" />
+    <img v-if="isPhoto" data-testid="media-block-img" :src="media_url" class="img-fluid mx-auto" />
     <video v-if="isVideo" :src="media_url" controls class="mx-auto" />
   </DataBlockBase>
 </template>