Fix game adding acceptance test

.gitignore

@@ -3,4 +3,7 @@ node_modules/
 coverage/
 *.db
 screenshots/*
-docs/
+docs/
+
+# ignore uploaded user images
+public/images/upload_*

app.js

@@ -38,7 +38,6 @@ app.use(serve({
 	base: '/public/'
 }))
 app.use(bodyParser())
-// app.use(serve(path.join(__dirname, 'public')))
 app.use(session({key: 'session_id', renew: true}, app))
 
 // db stuff

controllers/adding.js

@@ -1,11 +1,17 @@
 'use strict'
 
+const fs = require('fs')
+const path = require('path')
+
 const Router = require('koa-router')
+const koaBody = require('koa-body')
 
 const adding = new Router({prefix: '/adding'})
 
 const { authenticateUser } = require('../controllers/middleware/auth')
 
+const UPLOAD_FOLDER = path.join(__dirname, '../public/images')
+
 adding.get('/game', authenticateUser, async ctx => {
 
 	const a = ctx.session.userID
@@ -21,23 +27,76 @@ adding.get('/game', authenticateUser, async ctx => {
 
 })
 
+adding.post(
+	'/game',
+	authenticateUser,
+	koaBody({ multipart: true }),
+	async ctx => {
+		const body = ctx.request.body
+
+		const { poster, splash } = ctx.request.files
+
+		const platforms = await getPlatformsFromBody(ctx.db, body)
+		const posterSrc = uploadImageFile(poster)
+		const splashSrc = uploadImageFile(splash)
+
+		body.submittedBy = ctx.session.userID
+		body.approved = 'no'
+		body.platforms = platforms
+		body.categories = []
+		body.poster = path.basename(posterSrc)
+		body.splash = path.basename(splashSrc)
+
+		await ctx.db.createGame(body)
+		return ctx.redirect('/adding/game')
+	})
 
-adding.post('/game', authenticateUser, async ctx => {
-	const body = ctx.request.body
-	body.submittedBy = ctx.session.userID
-	body.approved = 'no'
-	//createGame expects a list of objects for body.categories and body.platforms
-	for(let i=0; i<body.categories.length; i++) {
-		const categoryId = parseInt(body.categories[i])
-		const category = await ctx.db.getCategory(categoryId)
-		body.categories[i] = category
+/**
+ * Gets a list of Platforms from the request body
+ * @param {*} db - DbContext for the database
+ * @param {*} body - Request body object
+ * @returns {Promise<Platform[]>}
+ */
+async function getPlatformsFromBody(db, body) {
+	const platforms = []
+	const keys = Object.keys(body).filter(k => k.startsWith('platforms-'))
+
+	for (const key of keys) {
+		const id = Number(body[key])
+		platforms.push(await db.getPlatform(id))
 	}
-	for(let i=0; i<body.platforms.length; i++) {
-		const platformId = parseInt(body.platforms[i])
-		const platform = await ctx.db.getPlatform(platformId)
-		body.platforms[i] = platform
+
+	return platforms
+}
+
+/**
+ * Gets the upload name from from a filepath and a type
+ * @param {string} filepath - Path of the file
+ * @param {string} type - Mimetype of the file
+ * @returns {string}
+ */
+function getUploadName(filepath, type) {
+	let name = path.basename(filepath)
+	if (type === 'image/jpeg') {
+		name += '.jpg'
+	} else if (type === 'image/png') {
+		name += '.png'
 	}
-	await ctx.db.createGame(body)
-	return ctx.redirect('/adding/game')
-})
+	return name
+}
+
+/**
+ * Uploads a single file.
+ * @param {File} file - File being uploaded
+ * @returns {string} Path of uploaded file
+ */
+function uploadImageFile(file) {
+	const filename = path.join(
+		UPLOAD_FOLDER,
+		getUploadName(file.path, file.type)
+	)
+	fs.copyFileSync(file.path, filename)
+	return filename
+}
+
 module.exports = adding

controllers/approval.js

@@ -35,16 +35,17 @@ approval.get('/games', authenticateUser, async ctx => {
 
 approval.post('/games', authenticateUser, async ctx => {
 	try {
-		const body = ctx.request.body
-		//console.log(body)
-		const id = parseInt(Object.keys(body)[0]) //getting the key (gameID) and converting it into an integer
-		const game = await ctx.db.getGame(id)
-		if(body[id] === 'Approve') {
+		console.log(ctx.request.body)
+		const { id, action } = ctx.request.body
+		const game = await ctx.db.getGame(Number(id))
+
+		if(action === 'Approve') {
 			game.approved = 'yes'
 			await ctx.db.updateGame(game)
-		} else if(body[id] === 'Reject') {
-			await ctx.db.deleteGame(id)
+		} else if(action === 'Reject') {
+			await ctx.db.deleteGame(game.id)
 		}
+
 		ctx.redirect('/approval/games')
 	} catch(err) {
 		await ctx.render('error', {message: err.message})

controllers/listrouter.js

@@ -1,7 +1,6 @@
 'use strict'
 
 const Router = require('koa-router')
-const koaBody = require('koa-body')({multipart: true, uploadDir: '.'})
 const listrouter = new Router({prefix: '/games'})
 
 const game = {

controllers/login.js

@@ -8,7 +8,10 @@ const login = new Router({ prefix: '/login' })
 const { EntityNotFound } = require('../utils/errors')
 
 
-login.get('/', async ctx => ctx.render('login.hbs'))
+login.get('/', async ctx => {
+	const { errorMsg } = ctx.query
+	return ctx.render('login.hbs', { errorMsg })
+})
 
 login.post('/', async ctx => {
 	const { username, password } = ctx.request.body

controllers/middleware/auth.js

@@ -3,7 +3,7 @@
 function authenticateUser(ctx, next) {
 	// if not authorised, redirect to login
 	if (!ctx.session.authorised)
-		return ctx.redirect('/login')
+		return ctx.redirect('/login?errorMsg=Please%20login%20to%20continue')
 
 	return next()
 }

tests/features/adding.feature.disable → tests/features/adding.feature

@@ -2,12 +2,16 @@ Feature: Adding games
 	The user should be able to add a new game to the webpage
 
 	Scenario: Add a game via webpage
-		Given The browser is open on the adding game page 
+		Given I am logged in as user "admin" with password "hello"
+		Given The browser is open on the adding game page
 		When I enter "game1" on the "title" field
 		When I enter "On the way to a magic world" on the "slugline" field
 		When I enter "A game fool of excitting wolds to discover" on the "summary" field
 		When I enter "21/08/2015" on the "releaseDate" field
 		When I enter "Marco Dievo" on the "developer" field
 		When I enter "Devi Corner" on the "publisher" field
+		When I upload "../examples/serve/example.jpg" in the "splash" field
+		When I upload "../examples/serve/example.jpg" in the "poster" field
+		When I submit the form
 		When game is approved by admin
 		Then the game should be added to the webpage

tests/features/steps.js

@@ -10,6 +10,7 @@ const {
 	When,
 	Then,
 	Before,
+	After,
 	BeforeAll,
 	AfterAll
 } = require('cucumber')
@@ -64,23 +65,35 @@ BeforeAll(async function() {
 })
 
 // close browser and server
-AfterAll(function() {
-	server.close()
-	browser.close()
+AfterAll(async function() {
+	await server.close()
+	await browser.close()
 })
 
 // create a fresh page each scenario
 Before(async function() {
 	currentPage = await browser.newPage()
 })
 
+After(async function() {
+	await currentPage.close()
+})
+
 Given('username is {string} and password is {string}', async function(user, pass) {
 	await currentPage.goto(`http://${hostname}/login`)
 
 	await currentPage.type('input[name=username]', user)
 	await currentPage.type('input[name=password]', pass)
 })
 
+Given('I am logged in as user {string} with password {string}', async function(user, pass) {
+	// enter and submit login details
+	await currentPage.goto(`http://${hostname}/login`)
+	await currentPage.type('input[name=username]', user)
+	await currentPage.type('input[name=password]', pass)
+	await currentPage.click('button[type=submit]')
+})
+
 When('I try to log in', async function() {
 	await currentPage.click('button[type=submit]')
 })
@@ -143,20 +156,33 @@ When('I enter {string} on the {string} field', async function(value, field) {
 	await currentPage.type(`input[name=${field}]`, value)
 })
 
+When('I upload {string} in the {string} field', async function(file, field) {
+	const fileInput = await currentPage.$(`input[name=${field}]`)
+	await fileInput.uploadFile(path.join(__dirname, file))
+})
+
+When('I submit the form', async function() {
+	try {
+		await currentPage.click('button[type=submit]')
+	} catch (err) {
+		await currentPage.click('input[type=submit]')
+	}
+})
+
 When('game is approved by admin', async function() {
 	const games = await app.context.db.getGames()
-	assert( games.length === 1 )
-	const g = games[0]
+	const g = games[games.length - 1]
 	g.approved = 'yes'
+
 	await app.context.db.updateGame(g)
 })
 
 Then('the game should be added to the webpage', async function() {
 	await currentPage.goto(`http://${hostname}/list`)
-	const gameOnPage = await currentPage.evaluate(() => {
-		const firstEntry = document.getElementsByClassName('game-row')[0]
-		return firstEntry.textContent
-	})
+	const title = await currentPage.evaluate(
+		() => document.querySelector('.game-row:last-child > .title').textContent
+	)
+	assert(title === 'game1', `got ${title}`)
 })
 
 Given('The browser is open on the approval\/games page', function() {

views/addingGames.hbs

@@ -12,26 +12,30 @@
 			{{errorMsg}}
 		</div>
 		{{/if}}
-
-		<form method= "post">
+	
+		<form method="post" enctype="multipart/form-data">
 			<input type="text" placeholder="Title:" name="title" required/>
 			<h1>Platforms:</h1>
 			{{#each platforms}}
-				<input type="checkbox" name="platforms" value="{{this.id}}" />{{this.name}}
+			<label for="platforms-{{this.id}}">{{this.name}}</label>
+			<input type="checkbox" name="platforms-{{this.id}}" value="{{this.id}}"/>
 			{{/each}}
 			<h1>Categories:</h1>
 			{{#each categories}}
-				<input type="checkbox" name="categories" value="{{this.id}}" />{{this.name}}
+			<label for="categories-{{this.id}}">{{this.name}}</label>
+			<input type="checkbox" name="categories-{{this.id}}" value="{{this.id}}"/>
 			{{/each}}
 			<input type="text" placeholder="Slugline" name="slugline" required/>
-			<input type= "text" placeholder="Summary" name="summary" required/>
+			<input type="text" placeholder="Summary" name="summary" required/>
 
 			<input type="date" placeholder="Release Date" name="releaseDate" required/>
 			<input type="text" placeholder="Developer" name="developer" required/>
 			<input type="text" placeholder="Publisher" name="publisher" required/>
-			<input type="text" placeholder="Poster" name="poster" required/>
-			<input type="text" placeholder="splash" name="splash" required/>
-			<button class="Submit_button" type="submit" > Submit </button>
+
+			<input type="file" accept="image/png,image/jpeg" name="poster" required/>
+			<input type="file" accept="image/png,image/jpeg" name="splash" required/>
+
+			<button class="Submit_button" type="submit">Submit</button>
 	</form>
 	</body>
 

views/approvalGames.hbs

@@ -30,16 +30,19 @@
         {{else}}
         <td class='image'><img src='/public/images/{{this.poster}}' class='image'></td>
         {{/if}}
-				<td class='title'><a class='list' href="/game{{this.gameID}}">{{this.title}}</a></td>
+				<td class='title'><a class='list' href="/game{{this.id}}">{{this.title}}</a></td>
 				<td class='summary'>{{this.summary}}</td>
 				<td class='releaseDate'>{{this.releaseDate}}</td>
 				<td class='rating'>{{this.submittedBy}}</td>
 
 				<form action="/approval/games" method="post">
-					<td class='statusChange'> <input type="submit" name="{{this.gameID}}" value="Approve"/> </td>
-				</form>
-				<form action="/approval/games" method="post">
-					<td><input type="submit" name="{{this.gameID}}" value="Reject"/></td>
+					<input type="hidden" name="id" value="{{this.id}}" />
+					<td class="statusChange">
+						<input type="submit" name="action" value="Approve" />
+					</td>
+					<td>
+						<input type="submit" name="action" value="Reject" />
+					</td>
 				</form>
 			</tr>
 			{{/each}}

views/listpage.hbs

@@ -11,30 +11,30 @@
   {{!-- <div  id="gamesdata"></div> --}}
   {{>navbar}}
   <h1>Browse</h1>
-  <table class='content-table'>
+  <table class="content-table">
     <thead>
       <tr>
         <th></th>
-        <th class='left'>Title</th>
-        <th class='left'>Summary</th>
+        <th class="left">Title</th>
+        <th class="left">Summary</th>
         <th>Release Date</th>
         <th>Avg. Rating</th>
         <th>Submitted By</th>
       </tr>
     </thead>
       <tbody>
       {{#each games}}
-      <tr>
+      <tr class="game-row">
         {{#if this.url}}
-        <td class='imageUrl'><img src='{{this.poster}}' class='imageUrl'></td>
+        <td class="imageUrl"><img src="{{this.poster}}" class="imageUrl"></td>
         {{else}}
-        <td class='image'><img src='/public/images/{{this.poster}}' class='image'></td>
+        <td class="image"><img src="/public/images/{{this.poster}}" ></td>
         {{/if}}
-        <td class='title'><a class='list' href="/game{{this.id}}">{{this.title}}</a></td>
-        <td class='summary'><section>{{this.summary}}</section></td>
-        <td class='releasedate'>{{this.releaseDate}}</td>
-        <td class='rating'>{{this.rating}}</td>
-        <td class='rating'>{{this.submittedBy}}</td>
+        <td class="title"><a class="list" href="/game{{this.id}}">{{this.title}}</a></td>
+        <td class="summary"><section>{{this.summary}}</section></td>
+        <td class="releasedate">{{this.releaseDate}}</td>
+        <td class="rating">{{this.rating}}</td>
+        <td class="rating">{{this.submittedBy}}</td>
       </tr>
       {{/each}}
       </tbody>