Add cypress and test login and recently played games

.github/workflows/tests.yml

@@ -0,0 +1,18 @@
+name: Tests
+
+on:
+  workflow_dispatch:
+  pull_request: 
+    types: [ opened, synchronize, reopened ]
+
+jobs:
+  cypress_run:
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm run dev:cypress

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:5173/retroleaderboards',
+    defaultCommandTimeout: 10000,
+  },
+});

cypress/e2e/login_page.cy.ts

@@ -0,0 +1,48 @@
+describe('login page', () => {
+  beforeEach(() => {
+    cy.clearAllLocalStorage()
+  })
+
+  it('unauthorized', () => {
+    cy.visit('/')
+
+    cy.url().should('include', '/login')
+    cy.contains('Authenticate')
+
+    cy.get('input[id="username"]').type('unauthorized')
+    cy.get('input[id="key"]').type('unauthorized-secret')
+
+    cy.intercept('GET', '**/API/API_GetUserRecentlyPlayedGames.php*', { statusCode: 401 }).as('getRecentlyPlayedGames')
+
+    cy.contains('Submit').click()
+
+    cy.wait('@getRecentlyPlayedGames').its('response.statusCode')
+      .should('equal', 401)
+
+    cy.on('window:alert', (txt) => {
+      expect(txt).to.contains('Bad credentials');
+    })
+
+    cy.url().should('include', '/login')
+    cy.contains('Authenticate')
+  })
+
+  it('success', () => {
+    cy.visit('/')
+
+    cy.url().should('include', '/login')
+    cy.contains('Authenticate')
+
+    cy.get('input[id="username"]').type('player')
+    cy.get('input[id="key"]').type('player-secret')
+
+    cy.intercept('GET', '**/API/API_GetUserRecentlyPlayedGames.php*', { fixture: 'no-played-games.json' }).as('getRecentlyPlayedGames')
+
+    cy.contains('Submit').click()
+
+    cy.wait('@getRecentlyPlayedGames').its('response.body')
+      .should('deep.equal', [])
+
+    cy.url().should('include', '/games')
+  })
+})

cypress/e2e/recently_played_games_page.cy.ts

@@ -0,0 +1,80 @@
+describe('recently played games page', () => {
+  beforeEach(() => {
+    cy.clearAllLocalStorage()
+  })
+
+  it('no games played', () => {
+    cy.visit('/')
+
+    cy.url().should('include', '/login')
+    cy.contains('Authenticate')
+
+    cy.get('input[id="username"]').type('player')
+    cy.get('input[id="key"]').type('player-secret')
+
+    cy.intercept('GET', '**/API/API_GetUserRecentlyPlayedGames.php*', { fixture: 'no-played-games.json' }).as('getRecentlyPlayedGames')
+
+    cy.contains('Submit').click()
+
+    cy.wait('@getRecentlyPlayedGames').its('response.body')
+      .should('deep.equal', [])
+
+    cy.url().should('include', '/games')
+    cy.contains('No games played yet')
+  })
+
+  it('recently played games list with refresh', () => {
+    cy.visit('/')
+
+    cy.url().should('include', '/login')
+    cy.contains('Authenticate')
+
+    cy.get('input[id="username"]').type('example')
+    cy.get('input[id="key"]').type('example-secret')
+
+    cy.intercept('GET', '**/API/API_GetUserRecentlyPlayedGames.php*', { fixture: 'recently-played-games-1.json' }).as('getRecentlyPlayedGames')
+
+    cy.contains('Submit').click()
+
+    cy.wait('@getRecentlyPlayedGames').its('response.body')
+      .should('have.length', 1)
+
+    cy.url().should('include', '/games')
+    cy.contains('Colin McRae Rally')
+
+    cy.intercept('GET', '**/API/API_GetUserRecentlyPlayedGames.php*', { fixture: 'recently-played-games-2.json' }).as('getRecentlyPlayedGames')
+
+    cy.get('.refresh-button').click()
+
+    cy.wait('@getRecentlyPlayedGames').its('response.body')
+      .should('have.length', 2)
+
+    cy.get('.game-list li').eq(0).contains('Colin McRae Rally')
+    cy.get('.game-list li').eq(1).contains('Kirby & The Amazing Mirror')
+  })
+
+  it('logout', () => {
+    cy.visit('/')
+
+    cy.url().should('include', '/login')
+    cy.contains('Authenticate')
+
+    cy.get('input[id="username"]').type('player')
+    cy.get('input[id="key"]').type('player-secret')
+
+    cy.intercept('GET', '**/API/API_GetUserRecentlyPlayedGames.php*', { fixture: 'no-played-games.json' }).as('getRecentlyPlayedGames')
+
+    cy.contains('Submit').click()
+
+    cy.wait('@getRecentlyPlayedGames').its('response.body')
+      .should('deep.equal', [])
+
+    cy.contains('Logout').click()
+
+    cy.get('.confirm-button').click()
+
+    cy.getAllLocalStorage().should('be.empty')
+
+    cy.url().should('include', '/login')
+  })
+})

cypress/fixtures/no-played-games.json

@@ -0,0 +1 @@
+[]

cypress/fixtures/recently-played-games-1.json

@@ -0,0 +1,20 @@
+[
+    {
+        "GameID": 16557,
+        "ConsoleID": 12,
+        "ConsoleName": "PlayStation",
+        "Title": "Colin McRae Rally",
+        "ImageIcon": "/Images/036840.png",
+        "ImageTitle": "/Images/036689.png",
+        "ImageIngame": "/Images/036690.png",
+        "ImageBoxArt": "/Images/065054.png",
+        "LastPlayed": "2024-12-16 22:22:54",
+        "AchievementsTotal": 104,
+        "NumPossibleAchievements": 104,
+        "PossibleScore": 436,
+        "NumAchieved": 53,
+        "ScoreAchieved": 173,
+        "NumAchievedHardcore": 53,
+        "ScoreAchievedHardcore": 173
+    }
+]

cypress/fixtures/recently-played-games-2.json

@@ -0,0 +1,38 @@
+[
+    {
+        "GameID": 16557,
+        "ConsoleID": 12,
+        "ConsoleName": "PlayStation",
+        "Title": "Colin McRae Rally",
+        "ImageIcon": "/Images/036840.png",
+        "ImageTitle": "/Images/036689.png",
+        "ImageIngame": "/Images/036690.png",
+        "ImageBoxArt": "/Images/065054.png",
+        "LastPlayed": "2024-12-16 22:22:54",
+        "AchievementsTotal": 104,
+        "NumPossibleAchievements": 104,
+        "PossibleScore": 436,
+        "NumAchieved": 53,
+        "ScoreAchieved": 173,
+        "NumAchievedHardcore": 53,
+        "ScoreAchievedHardcore": 173
+    },
+    {
+        "GameID": 769,
+        "ConsoleID": 5,
+        "ConsoleName": "Game Boy Advance",
+        "Title": "Kirby & The Amazing Mirror",
+        "ImageIcon": "/Images/042405.png",
+        "ImageTitle": "/Images/033746.png",
+        "ImageIngame": "/Images/002643.png",
+        "ImageBoxArt": "/Images/014483.png",
+        "LastPlayed": "2024-11-24 21:31:43",
+        "AchievementsTotal": 55,
+        "NumPossibleAchievements": 55,
+        "PossibleScore": 311,
+        "NumAchieved": 21,
+        "ScoreAchieved": 31,
+        "NumAchievedHardcore": 21,
+        "ScoreAchievedHardcore": 31
+    }
+]

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}