Merge pull request #9031 from harshiltewari2004/fix-flaky-download-tests

Wait for the download click instead of a fixed timeout in saveCanvas …

Author: davepagurek

test/unit/image/downloading.js

@@ -10,6 +10,18 @@ const mockAnchorElement = vi.mockObject({
   download: null,
   click: () => {}
 });
+
+let onDownload = null;
+
+mockAnchorElement.click.mockImplementation(()=>{
+  if(onDownload) onDownload();
+});
+
+const downloadHappened = () =>
+  new Promise(resolve =>{
+    onDownload = resolve;
+  });
+
 const originalCreateElement = document.createElement;
 vi.spyOn(document, 'createElement').mockImplementation((...args) => {
   if (args[0] !== 'a') {
@@ -61,10 +73,6 @@ expect.extend({
   }
 });
 
-const wait = async time => {
-  return new Promise(resolve => setTimeout(resolve, time));
-};
-
 suite('Downloading', () => {
   beforeAll(async function () {
     image(mockP5, mockP5Prototype);
@@ -77,6 +85,10 @@ suite('Downloading', () => {
     vi.clearAllMocks();
   });
 
+  beforeEach(() => {
+    onDownload = null;
+  });
+
   suite('downloading animated gifs', function () {
     let myGif;
     const imagePath = '/test/unit/assets/nyan_cat.gif';
@@ -112,24 +124,30 @@ suite('Downloading', () => {
     });
 
     test('should download a png file', async () => {
+      const downloaded = downloadHappened();
       mockP5Prototype.saveCanvas();
-      await wait(100);
+      await downloaded;
+
       expect(document.createElement).toHaveBeenCalledTimes(1);
       expect(mockAnchorElement.click).toHaveBeenCalledTimes(1);
       assert.equal(mockAnchorElement.download, 'untitled.png');
     });
 
     test('should download a jpg file I', async () => {
+      const downloaded = downloadHappened();
       mockP5Prototype.saveCanvas('filename.jpg');
-      await wait(100);
+      await downloaded;
+
       expect(document.createElement).toHaveBeenCalledTimes(1);
       expect(mockAnchorElement.click).toHaveBeenCalledTimes(1);
       assert.equal(mockAnchorElement.download, 'filename.jpg');
     });
 
     test('should download a jpg file II', async () => {
+      const downloaded = downloadHappened();
       mockP5Prototype.saveCanvas('filename', 'jpg');
-      await wait(100);
+      await downloaded;
+
       expect(document.createElement).toHaveBeenCalledTimes(1);
       expect(mockAnchorElement.click).toHaveBeenCalledTimes(1);
       assert.equal(mockAnchorElement.download, 'filename.jpg');

test/unit/webgl/p5.Framebuffer.js

@@ -6,6 +6,17 @@ const mockAnchorElement = vi.mockObject({
   download: null,
   click: () => {}
 });
+
+let onDownload = null;
+mockAnchorElement.click.mockImplementation(() => {
+  if(onDownload) onDownload();
+});
+
+const downloadHappened = () =>
+  new Promise(resolve => {
+    onDownload = resolve;
+  });
+
 const originalCreateElement = document.createElement;
 vi.spyOn(document, 'createElement').mockImplementation((...args) => {
   if (args[0] !== 'a') {
@@ -53,6 +64,10 @@ suite('p5.Framebuffer', function () {
     vi.clearAllMocks();
   });
 
+  beforeEach(function () {
+    onDownload = null;
+  });
+
   suite('formats and channels', function () {
     function testWithConfiguration(
       version,
@@ -671,9 +686,10 @@ suite('p5.Framebuffer', function () {
       myp5.createCanvas(100, 100, myp5.WEBGL);
       const fbo = myp5.createFramebuffer();
       fbo.draw(() => myp5.background('red'));
-      myp5.saveCanvas(fbo);
 
-      await new Promise(res => setTimeout(res, 500));
+      const downloaded = downloadHappened();
+      myp5.saveCanvas(fbo);
+      await downloaded;
 
       expect(document.createElement).toHaveBeenCalledWith('a');
       expect(mockAnchorElement.click).toHaveBeenCalledTimes(1);