|
1 | | -describe("Game App E2E", () => { |
| 1 | +describe("PixiJS Game E2E", () => { |
2 | 2 | beforeEach(() => { |
3 | 3 | cy.visit("/"); |
4 | 4 | }); |
5 | 5 |
|
6 | 6 | describe("Initial Page Load", () => { |
7 | | - it("should display the main page correctly", () => { |
| 7 | + it("should display the game page correctly", () => { |
8 | 8 | // Check page title |
9 | 9 | cy.title().should("eq", "Vite + React + TS"); |
10 | 10 |
|
11 | 11 | // Check main heading |
12 | | - cy.get("h1").should("contain.text", "Vite + React"); |
| 12 | + cy.get("h1").should("contain.text", "PixiJS React Game"); |
13 | 13 |
|
14 | | - // Check logos are present and visible |
15 | | - cy.get('img[alt="Vite logo"]').should("be.visible"); |
16 | | - cy.get('img[alt="React logo"]').should("be.visible"); |
| 14 | + // Check instructions are present |
| 15 | + cy.get("p.instructions").should( |
| 16 | + "contain.text", |
| 17 | + "A minimal PixiJS game built with @pixi/react" |
| 18 | + ); |
17 | 19 |
|
18 | | - // Check initial counter state |
19 | | - cy.get("button").should("contain.text", "count is 0"); |
| 20 | + // Check that the game container exists |
| 21 | + cy.get(".app-container").should("be.visible"); |
20 | 22 | }); |
21 | | - }); |
22 | 23 |
|
23 | | - describe("Counter Functionality", () => { |
24 | | - it("should increment counter when clicked", () => { |
25 | | - // Get initial counter button |
26 | | - cy.get("button").contains("count is 0").as("counterButton"); |
| 24 | + it("should have proper page structure", () => { |
| 25 | + // Check main container |
| 26 | + cy.get(".app-container").should("exist").and("be.visible"); |
27 | 27 |
|
28 | | - // Click the counter button |
29 | | - cy.get("@counterButton").click(); |
| 28 | + // Check heading structure |
| 29 | + cy.get("h1").should("have.length", 1); |
30 | 30 |
|
31 | | - // Verify counter incremented |
32 | | - cy.get("button").should("contain.text", "count is 1"); |
| 31 | + // Check instructions |
| 32 | + cy.get("p.instructions").should("be.visible"); |
33 | 33 | }); |
| 34 | + }); |
34 | 35 |
|
35 | | - it("should increment counter multiple times", () => { |
36 | | - const clickCount = 3; |
| 36 | + describe("Game Canvas", () => { |
| 37 | + it("should render the PixiJS canvas", () => { |
| 38 | + // PixiJS creates a canvas element |
| 39 | + cy.get("canvas").should("exist"); |
| 40 | + }); |
| 41 | + |
| 42 | + it("should have the correct canvas dimensions", () => { |
| 43 | + // Check that canvas has the expected dimensions (800x600) |
| 44 | + cy.get("canvas").should(($canvas) => { |
| 45 | + expect($canvas[0]).to.have.property("width", 800); |
| 46 | + expect($canvas[0]).to.have.property("height", 600); |
| 47 | + }); |
| 48 | + }); |
| 49 | + }); |
37 | 50 |
|
38 | | - // Click multiple times |
39 | | - for (let i = 0; i < clickCount; i++) { |
40 | | - cy.get("button").click(); |
41 | | - } |
| 51 | + describe("Game Interaction", () => { |
| 52 | + it("should be interactive", () => { |
| 53 | + // Wait for canvas to be ready |
| 54 | + cy.get("canvas").should("be.visible"); |
42 | 55 |
|
43 | | - // Verify final count |
44 | | - cy.get("button").should("contain.text", `count is ${clickCount}`); |
| 56 | + // The game canvas should be present and ready for interaction |
| 57 | + cy.get("canvas").should("have.attr", "style"); |
45 | 58 | }); |
46 | 59 | }); |
47 | 60 |
|
48 | 61 | describe("Accessibility", () => { |
49 | 62 | it("should have proper heading structure", () => { |
50 | | - cy.get("h1").should("have.length.at.least", 1); |
| 63 | + cy.get("h1").should("have.length", 1); |
| 64 | + }); |
| 65 | + |
| 66 | + it("should have readable content", () => { |
| 67 | + cy.get("h1") |
| 68 | + .should("be.visible") |
| 69 | + .and("contain.text", "PixiJS React Game"); |
| 70 | + cy.get("p.instructions").should("be.visible"); |
51 | 71 | }); |
| 72 | + }); |
| 73 | + |
| 74 | + describe("Responsive Design", () => { |
| 75 | + it("should be visible on different screen sizes", () => { |
| 76 | + // Test on tablet size |
| 77 | + cy.viewport(768, 1024); |
| 78 | + cy.get(".app-container").should("be.visible"); |
| 79 | + cy.get("canvas").should("be.visible"); |
52 | 80 |
|
53 | | - it("should have interactive elements accessible", () => { |
54 | | - cy.get("button").should("be.visible").and("not.be.disabled"); |
| 81 | + // Test on mobile size |
| 82 | + cy.viewport(375, 667); |
| 83 | + cy.get(".app-container").should("be.visible"); |
55 | 84 | }); |
56 | 85 | }); |
57 | 86 | }); |
0 commit comments