Implement Cypress testing for Music Blocks

[BeNikk]

Overview

Introduces Cypress end-to-end testing framework to Music Blocks

Changes

• Added comprehensive Cypress test suite
• Covered key application functionalities:
  • Application loading
  • Audio controls
  • UI element interactions
  • File operations

Testing Coverage

• Added tests for:
  • Loading sequence
  • Play/stop buttons
  • Toolbar interactions
  • File management
  • User interface elements

Next Steps

• Expand test coverage

Screenshots and Recordings

Screencast from 07-02-25 06:36:11 PM IST.webm

[BeNikk]

@walterbender @apsinghdev I have created some basic end to end test for Mb home page, ensuring the tests handle the MB loading page well. Would love your feedback so we can cover more thoroughly
I have added a video for reference too about how the tests run

[apsinghdev]

@BeNikk seems some big changes. I'll surely take a look.

[BeNikk]

Sure. Thanks a lot

[walterbender]

There is a package-lock conflict. And I am not sure that cypress version is compatible with some of the configs we use for other tests. Can you please test.

[BeNikk]

I'll fix it for sure.

[BeNikk]

@walterbender I'hve resolved the merge conflicts and this cypress version seems to be compatible with jest, can you please check and lemme know if any further changes are required?

[walterbender]

what command are you using to run the test?

[BeNikk]

Npx cypress open for visually seeing the tests running, otherwise npx cypress run.
Should I add them as scripts in package.json?

[walterbender]

Yes. We'll need the proper packages installed.

[BeNikk]

Added the scripts in package.json and all test run well.

[walterbender]

I am seeing an error:

Your configFile is invalid: /home/walter/Documents/walter/musicblocks/cypress.config.js

Not sure why.

[walterbender]

Do I need to be running the MB server on my local host?
` 1 failing

1. MusicBlocks Application
   Loading and Initial Render
   "before all" hook for "should display the loading animation and then the main content":
   CypressError: cy.visit() failed trying to load:

http://localhost:3000/

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

AggregateError

Common situations why this would fail:

• you don't have internet access
• you forgot to run / boot your web server
• your web server isn't accessible
• you have weird network configuration settings on your computer
  `

[BeNikk]

Yes, Sorry I forgot to mention but we do need MB Server running locally before we run the cypress tests.
Also I will look at the config file being invalid error, will let you know

[BeNikk]

I just checked cypress config, to run all tests succesfully, we need to pass this property- testIsolation: false to the cypress.config file, because it let's the MB page load first and then run all tests, otherwise it justs run tests without loading and waiting for the page

[BeNikk]

@walterbender Please let me know if there’s anything I can do to assist in getting it reviewed, happy to do changes.

[walterbender]

Cool. It finally ran properly for me.

[BeNikk]

We passed a lot of tests this week :)