gh-147: Add GamePage in e2e, use title to navigate

cypress/integration/pages/CreatePlayerPage.ts

@@ -1,22 +1,16 @@
-import { Page } from './Page'
-import { SelectGamePage } from './SelectGamePage'
+import { GamePage } from './GamePage'
 import { Player } from '../types/Player'
 
-export class CreatePlayerPage extends Page {
+export class CreatePlayerPage extends GamePage {
   constructor(gameName: string) {
-    super(`/${gameName}/add-player`)
+    super(gameName, '/add-player')
   }
 
   visit(): CreatePlayerPage {
     super.visit()
     return this
   }
 
-  goToSelectGamePage(): SelectGamePage {
-    this.getHeader().get('#logo').click()
-    return new SelectGamePage()
-  }
-
   addPlayer(player: Player, score: number): CreatePlayerPage {
     const content = this.getContent()
     content.get('#player-name-input').clear().type(player.name)

cypress/integration/pages/DashboardPage.ts

@@ -1,10 +1,9 @@
-import { Page } from './Page'
-import { SelectGamePage } from './SelectGamePage'
+import { GamePage } from './GamePage'
 import { LeaderboardPage } from './LeaderboardPage'
 
-export class DashboardPage extends Page {
-  constructor(private gameName: string) {
-    super(`/${gameName}`)
+export class DashboardPage extends GamePage {
+  constructor(gameName: string) {
+    super(gameName)
   }
 
   visit(): DashboardPage {
@@ -21,11 +20,6 @@ export class DashboardPage extends Page {
       .should('contain.text', 'Add Match')
   }
 
-  goToGameSelection(): SelectGamePage {
-    this.getHeader().get('#logo').click()
-    return new SelectGamePage()
-  }
-
   goToLeaderboard(): LeaderboardPage {
     this.getContent().get('#show-leaderboard').click()
     return new LeaderboardPage(this.gameName)

cypress/integration/pages/GamePage.ts

@@ -0,0 +1,18 @@
+import { Page } from './Page'
+import { SelectGamePage } from './SelectGamePage'
+import { DashboardPage } from './DashboardPage'
+
+export class GamePage extends Page {
+  constructor(protected readonly gameName: string, path?: string) {
+    super(`/${gameName}` + path ? `/${path}` : '')
+  }
+
+  goToGameSelection(): SelectGamePage {
+    this.getHeader().get('#logo').click()
+    return new SelectGamePage()
+  }
+  goToDashboard(): DashboardPage {
+    this.getHeader().get('#title').click()
+    return new DashboardPage(this.gameName)
+  }
+}

cypress/integration/pages/LeaderboardPage.ts

@@ -1,9 +1,9 @@
-import { Page } from './Page'
+import { GamePage } from './GamePage'
 import { Player } from '../types/Player'
 
-export class LeaderboardPage extends Page {
-  constructor(private gameName: string) {
-    super(`/${gameName}/leaderboard`)
+export class LeaderboardPage extends GamePage {
+  constructor(gameName: string) {
+    super(gameName, '/leaderboard')
   }
 
   locatePlayerWithScore(player: Player, score: number): void {

cypress/integration/tests/create-player.ts

@@ -20,8 +20,7 @@ describe('Create player page', () => {
     })
     it('is seen in the leaderboard without reload', () => {
       const leaderboard = addPlayerPage
-        .goToSelectGamePage()
-        .selectGame(FOOSBALL_GAME.name)
+        .goToDashboard()
         .goToLeaderboard()
       leaderboard.locatePlayerWithScore(player, score)
     })