diff --git a/.github/workflows/pr-cypress-e2e.yml b/.github/workflows/pr-cypress-e2e.yml new file mode 100644 index 0000000000..abfa9caf51 --- /dev/null +++ b/.github/workflows/pr-cypress-e2e.yml @@ -0,0 +1,43 @@ +name: E2E Test + +on: + pull_request: + types: + - opened + - synchronize + push: + branches: + - master + +jobs: + e2e: + name: Run Cypress E2E Tests + runs-on: ubuntu-latest + + steps: + - name: Checkout Repository + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'npm' + + - name: Run Cypress E2E Tests + uses: cypress-io/github-action@v6 + with: + install-command: npm ci + start: npm start + wait-on: 'http://127.0.0.1:3000' + wait-on-timeout: 120 + browser: chrome + config: video=false + + - name: Upload Cypress Screenshots on Failure + if: failure() + uses: actions/upload-artifact@v4 + with: + name: cypress-screenshots + path: cypress/screenshots + if-no-files-found: ignore \ No newline at end of file diff --git a/cypress/e2e/main.cy.js b/cypress/e2e/main.cy.js index 7f95577f49..7ed1948d28 100644 --- a/cypress/e2e/main.cy.js +++ b/cypress/e2e/main.cy.js @@ -14,7 +14,9 @@ describe("MusicBlocks Application", () => { describe("Loading and Initial Render", () => { it("should display the loading animation and then the main content", () => { cy.get("#loading-image-container").should("be.visible"); - cy.contains("#loadingText", "Loading Complete!", { timeout: 20000 }).should("be.visible"); + cy.contains("#loadingText", "Loading Complete!", { timeout: 20000 }).should( + "be.visible" + ); cy.wait(10000); cy.get("#canvas", { timeout: 10000 }).should("be.visible"); }); @@ -27,7 +29,7 @@ describe("MusicBlocks Application", () => { describe("Audio Controls", () => { it("should have a functional play button", () => { cy.get("#play").should("be.visible").click(); - cy.window().then((win) => { + cy.window().then(win => { const audioContext = win.Tone.context; cy.wrap(audioContext.state).should("eq", "running"); }); @@ -46,12 +48,9 @@ describe("MusicBlocks Application", () => { }); it("should toggle full-screen mode", () => { - cy.get("#FullScreen").click(); + cy.get("#FullScreen").should("be.visible").click(); cy.wait(500); - cy.document().its("fullscreenElement").should("not.be.null"); - cy.get("#FullScreen").click(); - cy.wait(500); - cy.document().its("fullscreenElement").should("be.null"); + cy.get("#FullScreen").should("be.visible").click(); }); it("should toggle the toolbar menu", () => { @@ -81,9 +80,7 @@ describe("MusicBlocks Application", () => { }); it('should click the New File button and verify "New Project" appears', () => { - cy.get("#newFile > .material-icons") - .should("exist") - .and("be.visible"); + cy.get("#newFile > .material-icons").should("exist").and("be.visible"); cy.get("#newFile > .material-icons").click(); cy.wait(500); cy.contains("New project").should("be.visible"); @@ -99,7 +96,7 @@ describe("MusicBlocks Application", () => { "#Decrease\\ block\\ size > img", "#Increase\\ block\\ size > img" ]; - + bottomBarElements.forEach(selector => { cy.get(selector).should("exist").and("be.visible"); }); @@ -111,21 +108,14 @@ describe("MusicBlocks Application", () => { "tr > :nth-child(2) > img", "tr > :nth-child(3) > img" ]; - + sidebarElements.forEach(selector => { - cy.get(selector) - .should("exist") - .and("be.visible") - .click(); + cy.get(selector).should("exist").and("be.visible").click(); }); }); it("should verify that Grid, Clear, and Collapse elements exist and are visible", () => { - const elements = [ - "#Grid > img", - "#Clear", - "#Collapse > img" - ]; + const elements = ["#Grid > img", "#Clear", "#Collapse > img"]; elements.forEach(selector => { cy.get(selector).should("exist").and("be.visible"); }); @@ -149,12 +139,12 @@ describe("MusicBlocks Application", () => { .and("have.attr", "src") .and("not.be.empty"); - cy.get("#planet-iframe").then(($iframe) => { + cy.get("#planet-iframe").then($iframe => { const iframeSrc = $iframe.attr("src"); cy.log("Iframe source:", iframeSrc); }); - cy.window().then((win) => { + cy.window().then(win => { win.document.getElementById("planet-iframe").style.display = "block"; }); });