Merge pull request #8 from aliaks-ei/add-e2e-tests

feat: provided e2e tests

.github/workflows/e2e-tests.yml

@@ -0,0 +1,22 @@
+name: E2E tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ['20']
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run build
+      - run: npm run test:e2e

cypress/e2e/game.cy.ts

@@ -0,0 +1,33 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+const moveTilesAndWait = (key: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight") => {
+  cy.get("html").trigger("keyup", { key });
+  cy.wait(500);
+};
+
+describe("Game", () => {
+  it("should move tiles around the board and add new ones", () => {
+    cy.visit("/");
+
+    // Trigger several arrow clicks
+    moveTilesAndWait("ArrowUp");
+    moveTilesAndWait("ArrowDown");
+    moveTilesAndWait("ArrowLeft");
+    moveTilesAndWait("ArrowRight");
+
+    // At least one tile should appear after movements
+    cy.get(".tile").should("have.length.at.least", 2);
+  });
+
+  it("start a new game", () => {
+    cy.visit("/");
+
+    // Trigger several arrow clicks
+    moveTilesAndWait("ArrowUp");
+    moveTilesAndWait("ArrowLeft");
+
+    // Restart game
+    cy.get("[data-testid='new-game']").click();
+
+    cy.get(".tile").should("have.length", 1);
+  });
+});

cypress/e2e/settings.cy.ts

@@ -0,0 +1,25 @@
+const newGridSize = 4;
+const newNumOnbstacles = 2;
+
+describe("Settings", () => {
+  it("should update board settings", () => {
+    cy.visit("/");
+
+    // Open settings dialog
+    cy.get("[data-testid='open-settings']").click();
+    cy.get("[data-testid='app-dialog']").should("be.visible");
+
+    // Update grid size
+    cy.get("[data-testid='grid-size-setting']").select(newGridSize.toString());
+
+    // Update obstacles
+    cy.get("[data-testid='obstacles-setting']").select(newNumOnbstacles.toString());
+
+    // Save settings
+    cy.get("[data-testid='save-settings']").click();
+
+    // Vefiry game changed
+    cy.get(".tile.tile--obstacle").should('have.length', newNumOnbstacles);
+    cy.get("[data-testid='grid-item']").should('have.length', Math.pow(newGridSize, 2));
+  });
+});

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
-    "test:unit": "vitest",
+    "test:unit:dev": "vitest",
+    "test:unit": "vitest run",
     "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
     "build-only": "vite build",

src/components/App/Dialog/AppDialog.vue

@@ -1,9 +1,14 @@
 <template>
   <Transition :duration="transitionDuration">
     <Teleport to="#dialogs">
-      <div v-if="showDialog" class="app-dialog" data-testid="app-dialog" :aria-hidden="!showDialog">
+      <div v-if="showDialog" class="app-dialog" :aria-hidden="!showDialog">
         <div class="app-dialog__overlay" tabindex="-1" @click.self="closeDialog">
-          <div class="app-dialog__container" role="dialog" :aria-labelledby="dialogTitleId">
+          <div
+            class="app-dialog__container"
+            role="dialog"
+            data-testid="app-dialog"
+            :aria-labelledby="dialogTitleId"
+          >
             <header class="app-dialog__header">
               <h2 :id="dialogTitleId" class="app-dialog__title">{{ title }}</h2>
               <button

src/components/GameBoard/Controls/GameBoardControls.vue

@@ -26,17 +26,25 @@
       <form>
         <label class="board-controls__settings-item">
           <span>Grid size</span>
-          <app-select v-model="selectedGridSize" :options="availableGridSizes"></app-select>
+          <app-select
+            v-model="selectedGridSize"
+            data-testid="grid-size-setting"
+            :options="availableGridSizes"
+          ></app-select>
         </label>
         <label class="board-controls__settings-item">
           <span>Obstacles (max: grid size - 1)</span>
-          <app-select v-model="selectedNumObstacles" :options="availableNumObstacles"></app-select>
+          <app-select
+            v-model="selectedNumObstacles"
+            data-testid="obstacles-setting"
+            :options="availableNumObstacles"
+          ></app-select>
         </label>
       </form>
       <template #actions>
-        <app-button @click="showSettingsDialog = false" data-testid="close-settings" outline
-          >Cancel</app-button
-        >
+        <app-button @click="showSettingsDialog = false" data-testid="close-settings" outline>
+          Cancel
+        </app-button>
         <app-button data-testid="save-settings" @click="handleSaveClick">Save & Restart</app-button>
       </template>
     </app-dialog>

tsconfig.app.json

@@ -1,7 +1,7 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "exclude": ["src/**/*.test.ts"],
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",