Added functionality for downloading spectrum image

[waridrox]

The current Download button at http://spectralworkbench.org doesn't work. A blank page is open instead. The added function could be utilised wherever possible for example in the new interface to download the spectrum images with the timestamp. Here's a demo for the same:

download-test.mov

• tests pass -- see README.md for how to run them
• code is in uniquely-named feature branch, and has been rebased on top of latest master (especially if you've been asked to make additional changes)
• pull request are descriptively named
• if possible, multiple commits squashed if they're smaller changes
• reviewed/confirmed/tested by another contributor or maintainer

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/wiki/contributing-to-public-lab-software

Please alert developers on [email protected] when your request is ready or if you need assistance.

Thanks!

[welcome]

Thanks for opening this pull request! Dangerbot will test out your code and reply in a bit with some pointers and requests.
There may be some errors, but don't worry! We're here to help! 👍🎉😄

[gitpod-io]

[jywarren]

This looks awesome. Is this something we ought to write a test for? It seems like it could be a pretty easy test?

[waridrox]

Sure, in which file would it make more sense tho 😅

[jywarren]

So the test assertion would be to confirm what a.href equals.

[jywarren]

https://github.com/waridrox/spectral-workbench.js/blob/downloadSpectrum/cypress/integration/spectral-workbench-demo.spec.js

[jywarren]

Could we try using Cypress to press the download button and then assert if a.href is not empty? If that doesn't work, then we can try inserting an image to the

[waridrox]

So I think the a.href attribute is actually generated during the click of the download button.

[jywarren]

So I think the a.href attribute is actually generated during the click of the download button.

Yes that should be fine, we can simulate a click and then check the href attribute to see if it correctly generated?

[jywarren]

Another way you could insert the image is to just overwrite $W.data, I think, before clicking download, but that might test a narrower set of steps. Still useful!

[waridrox]

So the anchor tag is generated and destroyed really fast according to the implementation. Even after checking for its presence, the tests prove to be really slow to detect it.

let a = document.createElement('a');
  a.href = base64_imgdata;
  a.download = ('spectrum_img.png');
  a.click();
  }

Same's the case for $W.data. If we try to get the current data after clicking the Download button, then that wouldn't work since by that time, the base64 of the spectrum would be changed to a new one 😕

[jywarren]

wait, but why would it be changed to a new one - can't we just pass in a static image? Then if it returns anything at all, that's not blank, we should be OK -- or maybe I'm missing something? Thanks!

…

On Sat, Aug 21, 2021 at 3:45 PM Mohammad Warid ***@***.***> wrote: So the anchor tag is generated and destroyed really fast according to the implementation. Even after checking for its presence, the tests prove to be really slow to detect it. let a = document.createElement('a'); a.href = base64_imgdata; a.download = ('spectrum_img.png'); a.click(); } Same's the case for $W.data. If we try to get the current data after clicking the Download button, then that wouldn't work since by that time, the base64 of the spectrum would be changed to a new one 😕 — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#245 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J6GJ3IMFWOKRY32XK3T5764NANCNFSM5BVMDPAQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[waridrox]

The data keeps changing due to the default nature of cypress which provides --use-fake-device-for-media-stream flag that enables a sample video feed running in the background.

This means we can't assert the base64 data as it is since that will change really fast - cypress-io/cypress#2704

The other thing is that the cypress tests stop since there is a prompt for downloading the spectrum_img.

cypress-download-prompt.mp4

[jywarren]

However, we can set a test video with --use-fake-device-for-media-stream manually and make it one which does not change -- then we can predict the displayed values. What do you think? Some very simple video with all same frames?

[jywarren]

The other thing is that the cypress tests stop since there is a prompt for downloading the spectrum_img.

I think there ought to be a cypress tool for accepting the prompt... https://testersdock.com/cypress-javascript-alert-confirm-prompt/

[waridrox]

I think there ought to be a cypress tool for accepting the prompt... https://testersdock.com/cypress-javascript-alert-confirm-prompt/

Sure, this prompt however I think is not a JS generated so there are means to get passed this like - https://www.npmjs.com/package/cypress-downloadfile / Cypress v6.xx

[jywarren]

Ahhh this prompt -- it's an HTML feature, so there should be a cypress way around it, OR maybe we could just click and then compare the a.download attribute...

[jywarren]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/download

https://stackoverflow.com/a/66811222

Cypress can easily test downloadable files since version 6.3.0

Also possibly -- cypress-io/cypress#949

[jywarren]

Hi @waridrox would you like me to give this one a try? Happy to if you'd like!

[waridrox]

Hi @jywarren!, I’m currently busy with my exams right now for the upcoming week or two 😅. If you would like to experiment, please by all means go ahead 🙌

[jywarren]

OK, will give it a try if I have a moment - good luck in your exams!!!

[jywarren]

here's the button

[jywarren]

https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__download

[jywarren]

https://github.com/cypress-io/cypress-example-recipes/blob/2e5fb3da420f544637ff77d81ff7261f5d2164e8/examples/testing-dom__download/cypress/integration/local-download-spec.js#L19-L28

[jywarren]

Let's start by testing that it's /some/ minimum length. Then we can also try presetting the video output using publiclab/spectral-workbench#710 for a more specific test.

[jywarren]

  Actions
    ✓ It reach the default landing page (1421ms)
    ✓ The header navigation stepper is present and it is in the correct order (422ms)
    ✓ The default Home page step should be highlighted but not the rest (327ms)
    1) can be clicked through to begin capturing


  3 passing (4s)
  1 failing

  1) Actions
       can be clicked through to begin capturing:
     ReferenceError: path is not defined
      at Context.eval (http://127.0.0.1:8080/__cypress/tests?p=cypress/integration/spectral-workbench-demo.spec.js:128:22)

[jywarren]

This failed. Great!

[jywarren]

Nice!!! Woohoo!!