gh-157: Add more e2e tests (#158)

* Rename create-player test to add-player
* Add space-infix-ops eslint rule

.eslintrc.json

@@ -58,6 +58,9 @@
       "as-needed"
     ],
     "consistent-return": "error",
-    "import/no-default-export": "error"
+    "import/no-default-export": "error",
+    "space-infix-ops": [
+      "error"
+    ]
   }
 }

backend/db_test/test_data.sql

@@ -260,3 +260,8 @@ INSERT INTO "Matches"("Id","Team1Player1Id","Team1Player1Rating","Team1Player2Id
 INSERT INTO "Matches"("Id","Team1Player1Id","Team1Player1Rating","Team1Player2Id","Team1Player2Rating","Team2Player1Id","Team2Player1Rating","Team2Player2Id","Team2Player2Rating","Date","WinningTeamRatingChange","Team1Won","LosingTeamRatingChange", "GameId") VALUES ('4510','150','823','230','1068','70','1385','210','819','2019-11-06 13:57:41.732','9','false','-9', '3');
 INSERT INTO "Matches"("Id","Team1Player1Id","Team1Player1Rating","Team1Player2Id","Team1Player2Rating","Team2Player1Id","Team2Player1Rating","Team2Player2Id","Team2Player2Rating","Date","WinningTeamRatingChange","Team1Won","LosingTeamRatingChange", "GameId") VALUES ('4520','150','814','90','1063','50','950','220','906','2019-11-07 16:15:51.246','16','true','-16', '3');
 INSERT INTO "Matches"("Id","Team1Player1Id","Team1Player1Rating","Team1Player2Id","Team1Player2Rating","Team2Player1Id","Team2Player1Rating","Team2Player2Id","Team2Player2Rating","Date","WinningTeamRatingChange","Team1Won","LosingTeamRatingChange", "GameId") VALUES ('4530','90','1079','150','830','240','960','220','890','2019-11-08 12:16:44.265','15','true','-15', '3');
+
+-- Shift Ids' Serials to avoid errors when inserting new rows
+ALTER SEQUENCE "Users_Id_seq1" RESTART WITH 300;
+ALTER SEQUENCE "Users_Id_seq" RESTART WITH 300;
+ALTER SEQUENCE "Matches_Id_seq" RESTART WITH 5000;

cypress/integration/pages/AddMatchPage.ts

@@ -0,0 +1,36 @@
+import { Page } from './Page'
+import { Player } from '../types/Player'
+import { DashboardPage } from './DashboardPage'
+
+export class AddMatchPage extends Page {
+  constructor(private gameName: string) {
+    super(`/${gameName}/create-match`)
+  }
+
+  visit(): AddMatchPage {
+    super.visit()
+    return this
+  }
+
+  locate(): void {
+    super.locate()
+    this.getContent()
+      .should('contain.text', 'Team 1')
+      .should('contain.text', 'Team 2')
+  }
+
+  selectTeam1Player1(player: Player): AddMatchPage {
+    cy.get('#team1-player-input-0').select(player.name)
+    return this
+  }
+
+  selectTeam2Player1(player: Player): AddMatchPage {
+    cy.get('#team2-player-input-0').select(player.name)
+    return this
+  }
+
+  team1Wins(): DashboardPage {
+    cy.get('#team1-win-button').click()
+    return new DashboardPage(this.gameName)
+  }
+}

cypress/integration/pages/CreatePlayerPage.ts → cypress/integration/pages/AddPlayerPage.ts

@@ -3,12 +3,12 @@ import { SelectGamePage } from './SelectGamePage'
 import { Player } from '../types/Player'
 import { DashboardPage } from './DashboardPage'
 
-export class CreatePlayerPage extends Page {
+export class AddPlayerPage extends Page {
   constructor(private gameName: string) {
     super(`/${gameName}/add-player`)
   }
 
-  visit(): CreatePlayerPage {
+  visit(): AddPlayerPage {
     super.visit()
     return this
   }
@@ -23,7 +23,7 @@ export class CreatePlayerPage extends Page {
     return new DashboardPage(this.gameName)
   }
 
-  addPlayer(player: Player, score: number): CreatePlayerPage {
+  addPlayer(player: Player, score: number): AddPlayerPage {
     const content = this.getContent()
     content.get('#player-name-input').clear().type(player.name)
     content

cypress/integration/pages/DashboardPage.ts

@@ -1,5 +1,7 @@
 import { Page } from './Page'
 import { SelectGamePage } from './SelectGamePage'
+import { AddMatchPage } from './AddMatchPage'
+import { MatchListPage } from './MatchListPage'
 import { LeaderboardPage } from './LeaderboardPage'
 
 export class DashboardPage extends Page {
@@ -21,11 +23,21 @@ export class DashboardPage extends Page {
       .should('contain.text', 'Add Match')
   }
 
+  goToAddMatch(): AddMatchPage {
+    cy.get('#add-match-button').click()
+    return new AddMatchPage(this.gameName)
+  }
+
   goToGameSelection(): SelectGamePage {
     this.getHeader().get('#logo').click()
     return new SelectGamePage()
   }
 
+  goToMatchesList(): MatchListPage {
+    this.getContent().get('#show-all-matches').click()
+    return new MatchListPage(this.gameName)
+  }
+
   goToLeaderboard(): LeaderboardPage {
     this.getContent().get('#show-leaderboard').click()
     return new LeaderboardPage(this.gameName)

cypress/integration/pages/MatchListPage.ts

@@ -0,0 +1,7 @@
+import { Page } from './Page'
+
+export class MatchListPage extends Page {
+  constructor(private gameName: string) {
+    super(`/${gameName}/match-list`)
+  }
+}

cypress/integration/tests/add-match.ts

@@ -0,0 +1,44 @@
+import { AddMatchPage } from '../pages/AddMatchPage'
+import { FOOSBALL_GAME } from '../utils/data'
+import { AddPlayerPage } from '../pages/AddPlayerPage'
+import { generateRandomPlayer } from '../utils/gen'
+import { LeaderboardPage } from '../pages/LeaderboardPage'
+
+describe('Create match page', () => {
+  const addMatchPage = new AddMatchPage(FOOSBALL_GAME.name)
+  before(() => {
+    addMatchPage.visit()
+  })
+  it('renders', () => {
+    addMatchPage.locate()
+  })
+})
+
+describe('Leaderboard', () => {
+  const player1 = generateRandomPlayer()
+  const player1score = 1010
+  const player1newscore = 1026
+  const player2 = generateRandomPlayer()
+  const player2score = 1020
+  const player2newscore = 1004
+  describe('when player 1 and player 2 exist in foosball and first wins once over second', () => {
+    let leaderboard: LeaderboardPage
+    beforeEach(() => {
+      leaderboard = new AddPlayerPage(FOOSBALL_GAME.name)
+        .visit()
+        .addPlayer(player1, player1score)
+        .addPlayer(player2, player2score)
+        .goToSelectGamePage()
+        .selectGame(FOOSBALL_GAME.name)
+        .goToAddMatch()
+        .selectTeam1Player1(player1)
+        .selectTeam2Player1(player2)
+        .team1Wins()
+        .goToLeaderboard()
+    })
+    it('contains players with resulting scores', () => {
+      leaderboard.locatePlayerWithScore(player1, player1newscore)
+      leaderboard.locatePlayerWithScore(player2, player2newscore)
+    })
+  })
+})

cypress/integration/tests/add-player.ts

@@ -0,0 +1,71 @@
+import { AddPlayerPage } from '../pages/AddPlayerPage'
+import { FOOSBALL_GAME, TENNIS_GAME } from '../utils/data'
+import { Player } from '../types/Player'
+import { generateRandomPlayer } from '../utils/gen'
+
+describe('Add player page', () => {
+  const addPlayerPage = new AddPlayerPage(FOOSBALL_GAME.name)
+  before(() => {
+    addPlayerPage.visit()
+  })
+  it('renders', () => {
+    addPlayerPage.locate()
+  })
+  describe('when a random player is added to foosball', () => {
+    let player: Player
+    const score = 1001
+    beforeEach(() => {
+      player = generateRandomPlayer()
+      addPlayerPage.addPlayer(player, score)
+    })
+    it('is seen in the leaderboard without reload', () => {
+      const leaderboard = addPlayerPage
+        .goToDashboard()
+        .goToLeaderboard()
+      leaderboard.locatePlayerWithScore(player, score)
+    })
+  })
+})
+
+describe('A player added to foosball is not added to tennis', () => {
+  const addPlayerPage = new AddPlayerPage(FOOSBALL_GAME.name)
+  describe('when a player is added to foosball', () => {
+    let player: Player
+    const score = 1001
+    beforeEach(() => {
+      player = generateRandomPlayer()
+      addPlayerPage
+        .visit()
+        .addPlayer(player, score)
+    })
+    it('is not added to tennis', () => {
+      addPlayerPage
+        .goToSelectGamePage()
+        .selectGame(TENNIS_GAME.name)
+        .goToLeaderboard()
+        .missPlayerWithScore(player, score)
+    })
+  })
+})
+
+describe('Same player can be added to foosball and to tennis', () => {
+  describe('when a player is added to foosball', () => {
+    let player: Player
+    const score = 1001
+    beforeEach(() => {
+      player = generateRandomPlayer()
+      new AddPlayerPage(FOOSBALL_GAME.name)
+        .visit()
+        .addPlayer(player, score)
+    })
+    it('can be added to tennis', () => {
+      new AddPlayerPage(TENNIS_GAME.name)
+        .visit()
+        .addPlayer(player, score)
+        .goToSelectGamePage()
+        .selectGame(TENNIS_GAME.name)
+        .goToLeaderboard()
+        .locatePlayerWithScore(player, score)
+    })
+  })
+})

cypress/integration/tests/dashboard.ts

@@ -2,12 +2,10 @@ import { DashboardPage } from '../pages/DashboardPage'
 
 describe('Dashboard', () => {
   const dashboardPage = new DashboardPage('foosball')
-  beforeEach(() => {
+  before(() => {
     dashboardPage.visit()
   })
-  it('contains Last Battles and Top Rating titles', () => {
-    dashboardPage.getContent()
-      .should('contain.text', 'Last Battles')
-      .should('contain.text', 'Top Rating')
+  it('renders', () => {
+    dashboardPage.locate()
   })
 })

cypress/integration/tests/game-select.ts

@@ -0,0 +1,11 @@
+import { SelectGamePage } from '../pages/SelectGamePage'
+
+describe('Select Game Page', () => {
+  const selectGamePage = new SelectGamePage()
+  before(() => {
+    selectGamePage.visit()
+  })
+  it('renders', () => {
+    selectGamePage.locate()
+  })
+})

cypress/integration/tests/navigation.ts

@@ -0,0 +1,53 @@
+import { SelectGamePage } from '../pages/SelectGamePage'
+import { FOOSBALL_GAME, TENNIS_GAME } from '../utils/data'
+
+describe('Navigation', () => {
+  describe('foosball dashboard', () => {
+    it('is reachable', () => {
+      new SelectGamePage()
+        .visit()
+        .selectGame(FOOSBALL_GAME.name)
+        .locate()
+    })
+  })
+
+  describe('foosball add match page', () => {
+    it('is reachable', () => {
+      new SelectGamePage()
+        .visit()
+        .selectGame(FOOSBALL_GAME.name)
+        .goToAddMatch()
+        .locate()
+    })
+  })
+
+  describe('tennis dashboard after foosball dashboard', () => {
+    it('is reachable', () => {
+      new SelectGamePage()
+        .visit()
+        .selectGame(FOOSBALL_GAME.name)
+        .goToGameSelection()
+        .selectGame(TENNIS_GAME.name)
+        .locate()
+    })
+  })
+
+  describe('match list page', () => {
+    it('is reachable', () => {
+      new SelectGamePage()
+        .visit()
+        .selectGame(FOOSBALL_GAME.name)
+        .goToMatchesList()
+        .locate()
+    })
+  })
+  describe('leaderboard page', () => {
+    it('is reachable', () => {
+      new SelectGamePage()
+        .visit()
+        .selectGame(FOOSBALL_GAME.name)
+        .goToLeaderboard()
+        .locate()
+    })
+  })
+})

cypress/integration/types/Team.ts

@@ -0,0 +1,6 @@
+import { Player } from './Player'
+
+export interface Team {
+  player1: Player;
+  player2: Player;
+}

cypress/integration/utils/data.ts

@@ -1,3 +1,23 @@
+import { Player } from '../types/Player'
+import { Team } from '../types/Team'
+
 export const FOOSBALL_GAME = {
   name: 'foosball',
 }
+
+export const TENNIS_GAME = {
+  name: 'tennis',
+}
+
+export const XRadek: Player = {
+  name: 'XRadek',
+}
+
+export const XTonda: Player = {
+  name: 'XTonda',
+}
+
+export const Team1: Team = {
+  player1: XRadek,
+  player2: XTonda,
+}

frontend/src/app/Game.js

@@ -32,7 +32,7 @@ export class GameComponent extends Component {
               <span id='title'>
                 <SimpleLink id='title-link' to={url}>{capitalize(selection.value.name)}</SimpleLink>
               </span>
-              <SimpleButton onClick={createMatch}>Add Match</SimpleButton>
+              <SimpleButton id="add-match-button" onClick={createMatch}>Add Match</SimpleButton>
             </>
             : null }
         </Header>

frontend/src/app/__snapshots__/Game.test.js.snap

@@ -42,6 +42,7 @@ exports[`GameComponent when foosball is selected renders button "Add Match" and
       </Styled(Link)>
     </span>
     <styled.button
+      id="add-match-button"
       onClick={[Function]}
     >
       Add Match