Skip to content

Commit df4625f

Browse files
AshrafmuhmedAshrafmuhmed
committed
Merge branch 'trial' of https://github.com/Ashrafmuhmed/musicblocks into trial
2 parents b2e34d8 + fa8ac29 commit df4625f

37 files changed

+12724
-6697
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎activity/activity-icon-maskable.png‎

51.9 KB
Loading

‎css/activities.css‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
}
1313
*/
1414

15+
@import url("play-only-mode.css");
16+
1517
*:focus {
1618
outline: none;
1719
}
@@ -1897,4 +1899,22 @@ table {
18971899
fill : #033CD2;
18981900
stroke : #78E600;
18991901
stroke-width: 3;
1900-
}
1902+
}
1903+
1904+
#persistentNotification {
1905+
position: fixed;
1906+
bottom: 20px;
1907+
left: 50%;
1908+
transform: translateX(-50%);
1909+
background-color: #1E88E5;
1910+
color: white;
1911+
padding: 15px 20px;
1912+
border-radius: 8px;
1913+
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
1914+
font-size: 14px;
1915+
font-weight: bold;
1916+
z-index: 1000;
1917+
text-align: center;
1918+
min-width: 250px;
1919+
max-width: 80%;
1920+
}

‎css/play-only-mode.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
.play-only #palette {
2+
display: none !important;
3+
visibility: hidden !important;
4+
height: 0 !important;
5+
width: 0 !important;
6+
pointer-events: none !important;
7+
overflow: hidden !important;
8+
}
9+
10+
.play-only #Grid {
11+
display: none !important;
12+
visibility: hidden !important;
13+
height: 0 !important;
14+
width: 0 !important;
15+
pointer-events: none !important;
16+
overflow: hidden !important;
17+
}
18+
19+
.play-only #Clear {
20+
display: none !important;
21+
visibility: hidden !important;
22+
height: 0 !important;
23+
width: 0 !important;
24+
pointer-events: none !important;
25+
overflow: hidden !important;
26+
}
27+
28+
.play-only #Collapse {
29+
display: none !important;
30+
visibility: hidden !important;
31+
height: 0 !important;
32+
width: 0 !important;
33+
pointer-events: none !important;
34+
overflow: hidden !important;
35+
}
36+
37+
.play-only [id="Show/hide blocks"] {
38+
display: none !important;
39+
visibility: hidden !important;
40+
height: 0 !important;
41+
width: 0 !important;
42+
pointer-events: none !important;
43+
overflow: hidden !important;
44+
}
45+
46+
.play-only [id="Expand/collapse blocks"] {
47+
display: none !important;
48+
visibility: hidden !important;
49+
height: 0 !important;
50+
width: 0 !important;
51+
pointer-events: none !important;
52+
overflow: hidden !important;
53+
}
54+
55+
.play-only [id="Decrease block size"]{
56+
display: none !important;
57+
visibility: hidden !important;
58+
height: 0 !important;
59+
width: 0 !important;
60+
pointer-events: none !important;
61+
overflow: hidden !important;
62+
}
63+
64+
.play-only [id="Increase block size"] {
65+
display: none !important;
66+
visibility: hidden !important;
67+
height: 0 !important;
68+
width: 0 !important;
69+
pointer-events: none !important;
70+
overflow: hidden !important;
71+
}
72+
73+
.play-only #buttoncontainerBOTTOM {
74+
display: flex !important;
75+
justify-content: flex-end !important;
76+
align-items: center !important;
77+
width: 100% !important;
78+
position: fixed !important;
79+
bottom: 10px !important;
80+
left: 0 !important;
81+
padding: 5px 10px !important;
82+
background: rgba(255, 255, 255, 0.85) !important;
83+
z-index: 9999 !important;
84+
}
85+
86+
.play-only #Home\ \[HOME\] {
87+
display: flex !important;
88+
justify-content: center !important;
89+
align-items: center !important;
90+
position: fixed !important;
91+
right: 15px !important;
92+
bottom: 15px !important;
93+
width: auto !important;
94+
height: auto !important;
95+
z-index: 10000 !important;
96+
background-color: rgba(255, 255, 255, 0.9) !important;
97+
padding: 5px !important;
98+
border-radius: 5px !important;
99+
}
100+
101+
@media only screen and (max-width: 400px) {
102+
.play-only ul.main.right {
103+
margin-top: 0px !important;
104+
position: relative !important;
105+
display: flex !important;
106+
flex-wrap: wrap !important;
107+
justify-content: center !important;
108+
align-items: center !important;
109+
gap: 10px !important;
110+
}
111+
112+
.play-only nav {
113+
min-height: 50px !important;
114+
display: flex !important;
115+
align-items: center !important;
116+
justify-content: center !important;
117+
}
118+
}
119+
120+
@media (max-width: 768px), (max-height: 600px) {
121+
/* Enable the auxiliary button */
122+
.play-only #toggleAuxBtn {
123+
pointer-events: auto !important;
124+
opacity: 1 !important;
125+
}
126+
127+
/* Hide the full auxiliary toolbar */
128+
.play-only #aux-toolbar {
129+
display: none !important;
130+
}
131+
}
132+
133+
/* Make the container background invisible without affecting child elements */
134+
.play-only #buttoncontainerBOTTOM {
135+
background: transparent !important;
136+
border: none !important;
137+
padding: 0 !important;
138+
margin: 0 !important;
139+
height: auto !important;
140+
box-shadow: none !important;
141+
}
142+
143+
/* Ensure the Home button remains visible */
144+
.play-only #Home\ \[HOME\] {
145+
display: flex !important;
146+
position: fixed !important;
147+
}
148+

‎cypress.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const { defineConfig } = require("cypress");
2+
3+
module.exports = defineConfig({
4+
e2e: {
5+
setupNodeEvents(on, config) {
6+
// implement node event listeners here
7+
},
8+
viewportWidth: 1400,
9+
viewportHeight: 1000,
10+
testIsolation: false
11+
},
12+
});

‎cypress/e2e/main.cy.js‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
Cypress.on("uncaught:exception", (err, runnable) => {
2+
return false;
3+
});
4+
5+
describe("MusicBlocks Application", () => {
6+
before(() => {
7+
cy.visit("http://localhost:3000");
8+
});
9+
10+
afterEach(() => {
11+
console.log("Next test running, no reload should happen");
12+
});
13+
14+
describe("Loading and Initial Render", () => {
15+
it("should display the loading animation and then the main content", () => {
16+
cy.get("#loading-image-container").should("be.visible");
17+
cy.contains("#loadingText", "Loading Complete!", { timeout: 20000 }).should("be.visible");
18+
cy.wait(10000);
19+
cy.get("#canvas", { timeout: 10000 }).should("be.visible");
20+
});
21+
22+
it("should display the Musicblocks guide page", () => {
23+
cy.get(".heading").contains("Welcome to Music Blocks");
24+
});
25+
});
26+
27+
describe("Audio Controls", () => {
28+
it("should have a functional play button", () => {
29+
cy.get("#play").should("be.visible").click();
30+
cy.window().then((win) => {
31+
const audioContext = win.Tone.context;
32+
cy.wrap(audioContext.state).should("eq", "running");
33+
});
34+
});
35+
36+
it("should have a functional stop button", () => {
37+
cy.get("#stop").should("be.visible").click();
38+
});
39+
});
40+
41+
describe("Toolbar and Navigation", () => {
42+
it("should open the language selection dropdown", () => {
43+
cy.get("#aux-toolbar").invoke("show");
44+
cy.get("#languageSelectIcon").click({ force: true });
45+
cy.get("#languagedropdown").should("be.visible");
46+
});
47+
48+
it("should toggle full-screen mode", () => {
49+
cy.get("#FullScreen").click();
50+
cy.document().its("fullscreenElement").should("exist");
51+
cy.get("#FullScreen").click();
52+
cy.document().its("fullscreenElement").should("not.exist");
53+
});
54+
55+
it("should toggle the toolbar menu", () => {
56+
cy.get("#toggleAuxBtn").click();
57+
cy.get("#aux-toolbar").should("be.visible");
58+
cy.get("#toggleAuxBtn").click();
59+
cy.get("#aux-toolbar").should("not.be.visible");
60+
});
61+
});
62+
63+
describe("File Operations", () => {
64+
it("should open the file load modal", () => {
65+
cy.get("#load").click();
66+
cy.get("#myOpenFile").should("exist");
67+
});
68+
69+
it("should open the save dropdown", () => {
70+
cy.get("#saveButton").click();
71+
cy.get("#saveddropdownbeg").should("be.visible");
72+
});
73+
74+
it("should display file save options", () => {
75+
cy.get("#saveButton").click();
76+
cy.get("#saveddropdownbeg").should("be.visible");
77+
cy.get("#save-html-beg").should("exist");
78+
cy.get("#save-png-beg").should("exist");
79+
});
80+
81+
it('should click the New File button and verify "New Project" appears', () => {
82+
cy.get('#newFile > .material-icons')
83+
.should('exist')
84+
.and('be.visible');
85+
cy.get('#newFile > .material-icons').click();
86+
cy.wait(500);
87+
cy.contains('New project').should('be.visible');
88+
});
89+
});
90+
91+
describe("UI Elements", () => {
92+
it('should verify that bottom bar elements exist and are visible', () => {
93+
const bottomBarElements = [
94+
'#Home\\ \\[HOME\\] > img',
95+
'#Show\\/hide\\ blocks > img',
96+
'#Expand\\/collapse\\ blocks > img',
97+
'#Decrease\\ block\\ size > img',
98+
'#Increase\\ block\\ size > img'
99+
];
100+
101+
bottomBarElements.forEach(selector => {
102+
cy.get(selector).should('exist').and('be.visible');
103+
});
104+
});
105+
106+
it('should verify sidebar elements exist, are visible, and clickable', () => {
107+
const sidebarElements = [
108+
'thead > tr > :nth-child(1) > img',
109+
'tr > :nth-child(2) > img',
110+
'tr > :nth-child(3) > img'
111+
];
112+
113+
sidebarElements.forEach(selector => {
114+
cy.get(selector)
115+
.should('exist')
116+
.and('be.visible')
117+
.click();
118+
});
119+
});
120+
121+
it('should verify that Grid, Clear, and Collapse elements exist and are visible', () => {
122+
const elements = [
123+
'#Grid > img',
124+
'#Clear',
125+
'#Collapse > img'
126+
];
127+
elements.forEach(selector => {
128+
cy.get(selector).should('exist').and('be.visible');
129+
});
130+
});
131+
132+
it('should verify that all nth-child elements from 1 to 6 exist', () => {
133+
for (let i = 1; i <= 6; i++) {
134+
cy.get(`[width="126"] > tbody > :nth-child(${i})`)
135+
.should('exist')
136+
.and('be.visible');
137+
}
138+
});
139+
});
140+
141+
describe("Planet Page Interaction", () => {
142+
it('should load the Planet page and return to the main page when clicking the close button', () => {
143+
cy.get('#planetIcon > .material-icons')
144+
.should('exist')
145+
.and('be.visible')
146+
.click();
147+
cy.get('#planet-iframe')
148+
.should('be.visible');
149+
});
150+
});
151+
152+
});

‎cypress/fixtures/example.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎cypress/support/commands.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add('login', (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This will overwrite an existing command --
25+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

0 commit comments

Comments
 (0)