puppeteer tests working, fixed redundant client socket listeners (wow

package-lock.json)

client/components/GameLobby.js

@@ -17,23 +17,16 @@ class GameLobby extends Component {
         this.onSlotTogglerClick = this.onSlotTogglerClick.bind(this);
         this.onLeaveClick       = this.onLeaveClick.bind(this);
 
-        socket.on('toggledslotopenclosed', gameData => {
-            console.log('toggledslotopenclosed', gameData);
-            this.props.toggledSlotOpenClosed(gameData);
-        });
-
-        socket.on('switchedplayerslot', gameData => {
-            this.props.switchedPlayerSlot(gameData);
-        });
-
-        socket.on('kickedfromgame', () => {
-            this.props.kickedFromGame();
-        });
-
-        socket.on('leftgame', () => {
-            console.log('leftgame');
-            this.props.leftGame();
-        });
+        this.turnSocketListeners('on');
+    }
+    componentWillUnmount() {
+        this.turnSocketListeners('off');
+    }
+    turnSocketListeners(which) {
+        socket[which]('toggledslotopenclosed', this.props.toggledSlotOpenClosed);
+        socket[which]('switchedplayerslot', this.props.switchedPlayerSlot);
+        socket[which]('kickedfromgame', this.props.kickedFromGame);
+        socket[which]('leftgame', this.props.leftGame);
     }
     onPlayerSlotClick(e) {
         const slotIdx = e.nativeEvent.target.parentNode.getAttribute('idx');

client/components/GamesBrowser.js

@@ -12,17 +12,15 @@ class GamesBrowser extends Component {
         this.onCreateGameClick = this.onCreateGameClick.bind(this);
         this.onJoinGameClick   = this.onJoinGameClick.bind(this);
 
-        socket.on('newgamesbrowserdata', games => {
-            this.props.newGamesBrowserData(games);
-        });
-
-        socket.on('createdgame', data => {
-            this.props.createdGame(data);
-        });
-
-        socket.on('joinedgame', data => {
-            this.props.joinedGame(data);
-        });
+        this.turnSocketListeners('on');
+    }
+    componentWillUnmount() {
+        this.turnSocketListeners('off');
+    }
+    turnSocketListeners(which) {
+        socket[which]('newgamesbrowserdata', this.props.newGamesBrowserData);
+        socket[which]('createdgame', this.props.createdGame);
+        socket[which]('joinedgame', this.props.joinedGame);
     }
     onCreateGameClick() {
         socket.emit('creategame');

client/components/Welcome.js

@@ -9,14 +9,17 @@ class Welcome extends Component {
 
         this.onNickNameSubmit = this.onNickNameSubmit.bind(this);
 
-        // Handle nickname submission responses from socket
-        socket.on('nicknamedenied', nickName => {
+        this.turnSocketListeners('on');
+    }
+    componentWillUnmount() {
+        this.turnSocketListeners('off');
+    }
+    turnSocketListeners(which) {
+        socket[which]('nicknameconfirmed', this.props.nickNameConfirmed);
+        socket[which]('nicknamedenied', nickName => {
             this.refs.nickName.focus();
             alert(`Nickname ${nickName} denied.`);
         });
-        socket.on('nicknameconfirmed', nickName => {
-            this.props.nickNameConfirmed(nickName);
-        });
     }
     onNickNameSubmit(e) {
         e.preventDefault();

client/components/Welcome.test.js

@@ -0,0 +1,37 @@
+
+let browser;
+beforeAll(async () => {
+    browser = await require('puppeteer').launch({
+        headless: false,
+        executablePath: '/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe'
+    });
+});
+
+const firstNickName  = 'Billy';
+const secondNickName = 'Jonana291';
+
+// === //
+// e2e //
+// === //
+test('Cannot submit a blank nickname.', async () => {
+    const inputSel  = '#welcome form input';
+
+    const page = await browser.newPage();
+    await page.goto('localhost:3000');
+
+    // Input is blank
+    expect(await page.$eval(inputSel, el => el.value)).toBe("");
+
+    // Submit
+    await page.keyboard.press('Enter');
+
+    // Welcome page is still showing
+    expect(await page.$('#games-browser')).toBeNull();
+    expect(await page.$('#welcome')).toBeTruthy();
+
+    // Input is focused
+    const focusedElHandle = await page.evaluateHandle(() => document.activeElement)
+    expect(await page.evaluate(el => el === document.activeElement, focusedElHandle)).toBe(true);
+
+    browser.close();
+});

client/index.js

@@ -5,4 +5,18 @@ import React from 'react';
 
 import App from './App';
 
+async () => {
+    const foo = new Promise((resolve, reject) => {
+        window.setTimeout(() => {
+            const msg = 'Two seconds have passed...';
+            resolve(msg);
+        }, 2000);
+    });
+
+    await foo.then((msg) => {
+        console.log('Promise resolved.');
+        console.log(msg);
+    })
+}
+
 ReactDOM.render(<App />, document.getElementById('root'));