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 <[email protected]>

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

Co-authored-by: Josh Bocarsly <[email protected]>

Fix data-testid lookup

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: {

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");
+  });
 });

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);

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>