Skip to content

Latest commit

 

History

History
204 lines (166 loc) · 57.1 KB

TESTING.md

File metadata and controls

204 lines (166 loc) · 57.1 KB

moonshot : Frontend Testing

Note: to open links in a new tab, hold CTRL + Click
Note: this document only contains testing info for the moonshot frontend site

Table Of Contents

Manual Testing

The following sections list a number of manual tests undertaken to ensure the site operates according to details listed under Scope and Structure in the README file. Specific dev goals/user stories can viewed (where appropriate) by hovering over the numbers listed under 'Ref(s)' in the tables below; clicking these links will open the relevant section in the README file.

Navigation

These tests ensure that a user can successfully navigate the site using the provided navbar links, text links, images, and username tags. Many areas of the site require a username and password for full access; as such, the username testname and password test#123 have specifically been created for testing purposes; specifics around this access are tested below under Authentication. Note that the tests below require 'signed out' status unless otherwise specified.

Test Ref(s) Steps Expected Result
Home page displays when using URL 2.1
2.2
5.1
  1. Type https://moonshot-13d14b7a6fbd.herokuapp.com/ into the browser
  2. Hit 'Enter'
 Home page displays with navbar and page contents Pass
Home page displays when using navbar link 2.2
5.1
  1. Navigate to 'Sign Up' or 'Sign In' page
  2. Click 'Home' in the navbar
 Home page displays with navbar, and page contents Pass
Sign Up page displays when using navbar link 2.2
2.3
  1. Navigate to 'Home' or 'Sign In' page
  2. Click 'Sign Up' in the navbar
 Sign Up page displays with navbar and relevant form Pass
Sign In page displays when using navbar link 2.2
2.4
  1. Navigate to 'Home' or 'Sign Up' page
  2. Click 'Sign In' in the navbar
 Sign In page displays with navbar and relevant form Pass
Home page displays when clicking brand/logo 2.2
5.1
  1. Navigate to 'Sign In' or 'Sign Up' page
  2. Click the brand/logo at the top-left of navbar
 Home page displays with navbar and page contents Pass
Sign Up page displays when using 'sign up' link on signed-out home page 2.3
  1. Navigate to 'Home' page
  2. Click 'sign up' link under welcome message
 Sign Up page displays with navbar and relevant form Pass
Sign In page displays when using 'sign in' link on signed-out home page 2.4
  1. Navigate to 'Home' page
  2. Click 'sign in' link under welcome message
 Sign In page displays with navbar and relevant form Pass
Sign Up page displays when using 'Sign Up' link on Sign In page 2.3
  1. Navigate to 'Sign In' page
  2. Click 'sign up' link below form
 Sign Up page displays with navbar and relevant form Pass
Sign In page displays when using 'Sign In' link on Sign Up page 2.4
  1. Navigate to 'Sign Up' page
  2. Click 'Sign In' link below form
 Sign In page displays with navbar and relevant form Pass
Upload page displays when using navbar link 2.2
4.1
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Home' page
  3. Click 'Upload+' in the navbar
 Upload page displays with navbar and relevant form Pass
Profile page for signed-in user displays when using navbar link 2.2
5.5
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Home' or 'Upload' page
  3. Click 'Profile' in the navbar (under dropdown menu at top-right on larger screens)
 Profile page displays with navbar, signed-in user details and page contents Pass
Gear page for signed-in user displays when using navbar link 2.2
5.5
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Home' or 'Upload' page
  3. Click 'Gear' in the navbar (under dropdown menu at top-right on larger screens)
 Gear page displays with navbar and relevant form Pass
Account page for signed-in user displays when using navbar link 2.2
5.5
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Home' or 'Upload' page
  3. Click 'Account' in the navbar (under dropdown menu at top-right on larger screens)
 Account page displays with navbar, signed-in user avatar and relevant form Pass
Home page displays when clicking 'Sign Out' navbar link 2.2
3.1
3.4
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Click 'Sign Out' in the navbar
 Home page displays with navbar, welcome message and page contents Pass
Photo detail page displays when clicking an image 4.1
4.2
5.4
  1. Navigate to 'Home' page
  2. Click on an image (not the star or username)
 Photo detail page displays with relevant image Pass
Profile page for photo's owner displays when clicking username tag on image 5.5
  1. Navigate to 'Home' page
  2. Click on a username tag at the top-right of an image (not the star or image itself)
 Profile page displays with relevant user details and photos Pass
Photo detail page displays when clicking an image 4.1
4.2
5.4
  1. Navigate to 'Home' page
  2. Click on an image (not the star or username)
 Photo detail page displays with relevant image Pass
Sign Up page displays when using 'sign up' link below image on Photo detail page 2.3
6.2
  1. Navigate to 'Home' page
  2. Click on an image showing more than '0' comments (not the star or username)
  3. Click 'sign up' link below photo details
 Sign Up page displays with navbar and relevant form Pass
Sign In page displays when using 'sign in' link below image on Photo detail page 2.4
6.2
  1. Navigate to 'Home' page
  2. Click on an image showing more than '0' comments (not the star or username)
  3. Click 'sign in' link below photo details
 Sign In page displays with navbar and relevant form Pass
Sign Up page displays when using 'Sign up' link below Comments heading on Photo detail page 2.3
6.2
  1. Navigate to 'Home' page
  2. Click on an image showing '0' comments (not the star or username)
  3. Click 'Sign up' link below Comments heading
 Sign Up page displays with navbar and relevant form Pass
Sign In page displays when using 'sign in' link below Comments heading on Photo detail page 2.4
6.2
  1. Navigate to 'Home' page
  2. Click on an image showing '0' comments (not the star or username)
  3. Click 'sign in' link below Comments heading
 Sign In page displays with navbar and relevant form Pass

Responsiveness

These tests check that the site responds correctly at various sizes of screen, resizing, hiding, and reformatting elements where necessary. Many areas of the site require a username and password for full access; as such, the username testname and password test#123 have specifically been created for testing purposes; specifics around this access are tested below under Authentication. Note that the tests below require 'signed out' status unless otherwise specified.

Test Steps Expected Result
Navbar toggler, while signed out, appears on main pages at screen width of 767px or smaller
  1. Navigate to 'Home' page
  2. Reduce screen width to 767px or smaller
  • Navbar links no longer display in header
  • Toggler appears at right of navbar
  • 'Home', 'Sign Up' and 'Sign In' display when toggler is clicked
 Pass
Navbar toggler, while signed in, appears at screen width of 767px or smaller
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Home' page
  3. Reduce screen width to 767px or smaller
  • Navbar links no longer display in header
  • Toggler appears at right of navbar
  • 'Home', 'Upload', 'Profile', 'Gear' and 'Account' display when toggler is clicked
 Pass
Navbar, while signed in, adjusts avatar and username display at screen width of 767px and 315px or smaller
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Home' page
  3. Reduce screen width to 767px the 315px or smaller
  • Username dropdown is removed from navbar
  • Username appears beside 'Sign Out' link in toggled menu
  • Avatar is removed from navbar at 315px or smaller
 Pass
Home page, while signed-out, adjusts layout at screen width of 1200 px and 767px or smaller
  1. Navigate to 'Home' page
  2. Reduce screen width to 1200px, then 767px or smaller
  • Photo gallery adjusts from 3, to 2, to 1 column layout
  • Text and images resize to stay on screen
 Pass
Sign Up page adjusts layout across various sizes
  1. Navigate to 'Sign Up' page
  2. Reduce screen width to 1200px, then 767px or smaller
  • Form fields adjust width to remain on screen
 Pass
Sign In page adjusts layout across various sizes
  1. Navigate to 'Sign In' page
  2. Reduce screen width to 1200px, then 767px or smaller
  • Form fields adjust width to remain on screen
 Pass
Home page, while signed-in, adjusts layout at screen width of 1200 px and 767px or smaller
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Home' page
  3. Reduce screen width to 1200px, then 767px or smaller
  • Photo gallery adjusts from 3, to 2, to 1 column layout
  • Text, images, and filters resize/adjust layout to stay on screen
 Pass
Upload/Edit page adjusts layout at screen width of 767px and 575px or smaller
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Upload' page
  3. Reduce screen width to 767px, then 575px or smaller
  • Form adjusts from 2 to 1 column layout
  • Image placeholder and image preview resize to stay on screen
  • Date and Time fields adjust width to allow reading of values
 Pass
Photo detail page adjusts layout at screen width of 575px or smaller
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Home' page
  3. Click on an image with more than '0' comments (not the star or username)
  4. Reduce screen width to 575px or smaller
  • Details below photo adjust from 2 to 1 column layout
  • Comments below photo adjust layout to keep content on screen</li
 Pass
Profile page adjusts layout at various screen width of 1200 px and 767px or smaller
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Profile' page
  3. Reduce screen width to 1200px, then 767px or smaller
  • Photo gallery adjusts from 3, to 2, to 1 column layout
  • Profile info adjusts from 2, to 1 column layout
  • Text and images resize to stay on screen
 Pass
Gear page adjusts layout at various screen widths
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Gear' page
  3. Reduce screen width to 1200px, 991px, then 767px or smaller
  • Form fields adjust width to remain on screen
 Pass
Account page adjusts layout at various screen widths
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Navigate to 'Account' page
  3. Reduce screen width to 1200px, 991px, then 767px or smaller
  • Form fields adjust width to remain on screen
 Pass

Authentication

These tests check the sign up, sign in, and sign out functionality of the site. The username testname and password test#123 have specifically been registered to help determine the outcome of these tests.

Test Ref(s) Steps Expected Result
User can sign up to the site 2.3
3.3
  1. Click 'Sign Out' if already signed in
  2. Click 'Sign Up' in the navbar
  3. Complete all fields with previously unregistered details
  4. Click 'Sign Up' button
  • User directed to 'Sign In' page
  • Success toast informs user that sign up was successful
 Pass
User cannot sign up unless a username is entered 2.3
3.3
  1. Click 'Sign Out' if already signed in
  2. Click 'Sign Up' in the navbar
  3. Complete all fields except for 'Username'
  4. Click 'Sign Up' button
  • Sign-up form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot sign up with previously registered username 2.3
3.3
  1. Click 'Sign Out' if already signed in
  2. Click 'Sign Up' in the navbar
  3. Complete all fields ensuring 'Username' is filled with previously registered details e.g. testname
  4. Click 'Sign Up' button
  • Sign-up form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot sign up unless a password is entered 2.3
3.3
  1. Click 'Sign Out' if already signed in
  2. Click 'Sign Up' in the navbar
  3. Complete all fields except for 'Password' and/or 'Password (again)'
  4. Click 'Sign Up' button
  • Sign-up form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot sign up if passwords don't match 2.3
3.3
  1. Click 'Sign Out' if already signed in
  2. Click 'Sign Up' in the navbar
  3. Complete all fields ensuring 'Password' and 'Confirm Password' contain different data entry
  4. Click 'Sign Up' button
  • Sign-up form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User can sign in to the site 2.4
3.3
  1. Click 'Sign Out' if already signed in
  2. Click 'Sign In' in the navbar
  3. Complete all fields with previously registered details e.g. username: testname, password: test#123
  4. Click 'Sign In' button
  • User directed to 'Home' page
  • Success toast informs user that sign in was successful
 Pass
User cannot sign in unless a valid username is entered 2.4
3.3
  1. Click 'Sign Out' if already signed in
  2. Click 'Sign In' in the navbar
  3. Complete all fields ensuring Username is filled with previously unregistered details
  4. Click 'Sign In' button
  • Sign-in form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot sign in unless a valid password is entered 2.4
3.3
  1. Click 'Sign Out' if already signed in
  2. Click 'Sign In' in the navbar
  3. Complete all fields with Username as testname and ensure Password IS NOT test#123
  4. Click 'Sign In' button
  • Sign-in form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User can sign out from the site 3.2
3.3
3.4
  1. If required, sign in using preregistered details e.g. username: testname, password: test#123
  2. Click 'Sign Out'
  • User directed to 'Home' page
  • Success toast informs user that sign out was successful
 Pass

Get, Post, Put & Delete (CRUD) Functionality

These tests determine if a user is able to successfully - or otherwise - create (post), view (get), update (put) and/or delete photos, stars, comments, or gear/account info through the front-end capabilities of the site. In all test cases, one must first sign in to the site before completing any of the other steps listed (the username testname and password test#123 have specifically been registered for this purpose), while the descriptor 'valid details' indicates that the following is expected:

  • Required fields (*) are not left blank
  • Invalid values/formats have not been added to a field

Photo Tests

Test Ref(s) Steps Expected Result
User can upload photo 4.1
4.2
  1. Navigate to 'Upload' page
  2. Add image and complete all fields with valid details
  3. Click 'Submit' button
  • User directed to Photo detail page
  • Submitted details reflected on Photo detail page
  • Uploading and Success toasts inform user that photo upload was successful
 Pass
User cannot submit if photo is not selected 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but DO NOT add image
  3. Click 'Submit' button
  • Upload form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot submit if non-image file is selected 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but ensure the uploaded file IS NOT an image file
  3. Click 'Submit' button
  • Upload form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot submit if Title field is blank 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but leave 'Title' blank
  3. Click 'Submit' button
  • Upload form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot submit if Main Feature field is left as "(Select an option)" 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but leave 'Main Feature' as "(Select an option)"
  3. Click 'Submit' button
  • Upload form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot submit if Location field is blank 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but leave 'Location' blank
  3. Click 'Submit' button
  • Upload form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
User cannot submit if Location field is blank 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but leave 'Location' blank
  3. Click 'Submit' button
  • Upload form will not submit
  • Error toast and alert messages inform user of the problem
 Pass
Date and Time field add today's date and 00:00 if left blank 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but leave 'Date' and 'Time' blank
  3. Click 'Submit' button
  • Submitted details reflected on Photo detail page
  • Date shows as today's date and Time as 00:00
  • Uploading and Success toasts inform user that photo upload was successful
 Pass
User can submit if Photo Description field is left blank 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but leave 'Photo Description' blank
  3. Click 'Submit' button
  • Submitted details reflected on Photo detail page
  • Description field under title remains blank
  • Uploading and Success toasts inform user that photo upload was successful
 Pass
User can submit if Telescope/Lens, Camera, or Other Equipment fields are left blank 4.1
4.2
  1. Navigate to 'Upload' page
  2. Complete all fields with valid details but leave 'Telescope/Lens', 'Camera', and 'Other Equipment' fields blank
  3. Click 'Submit' button
  • Submitted details reflected on Photo detail page
  • Equipment fields remain blank
  • Uploading and Success toasts inform user that photo upload was successful
 Pass
User can access form to edit their own photo 4.3
  1. Navigate to 'Home' page
  2. Click on an image belonging to signed-in user to open its individual page
  3. Click 'Edit' button
  • User directed to Photo Edit form
 Pass
User cannot access form to edit another user's photo 4.5
  1. Navigate to 'Home' page
  2. Click on an image not belonging to signed-in user to open its individual page
  3. Add "/edit" to the url and hit enter
  • User directed to Home page instead of photo edit form
 Pass
User can update photo with valid details 4.3
  1. Navigate to 'Home' page
  2. Click on an image belonging to signed-in user to open its individual page
  3. Click 'Edit' button
  4. Update any field with valid details
  5. Click 'Save' button
  • Submitted details updated on Photo detail page
  • Uploading and Success toasts inform user that photo upload was successful
 Pass
User cannot update photo with invalid details 4.3
  1. Navigate to 'Home' page
  2. Click on an image belonging to signed-in user to open its individual page
  3. Click 'Edit' button
  4. Update any field with invalid details e.g. make required field blank
  5. Click 'Save' button
  6. Click 'Cancel' button
  • Upload form will not submit
  • Error toast and alert messages inform user of the problem
  • Clicking 'Cancel' returns user to photo detail showing same details as before
 Pass
User can access modal to delete their own photo 4.4
  1. Navigate to 'Home' page
  2. Click on an image belonging to signed-in user to open its individual page
  3. Click 'Delete' button
  • Deletion confirmation modal appears
 Pass
User can cancel deletion to keep photo 4.4
  1. Navigate to 'Home' page
  2. Click on an image belonging to signed-in user to open its individual page
  3. Click 'Delete' button
  4. Click 'Cancel' button
  • Modal closes with any deletion made
 Pass
User can delete their own photo 4.4
  1. Navigate to 'Home' page
  2. Click on an image belonging to signed-in user to open its individual page
  3. Click 'Delete' button
  4. Click 'Delete' button again
  • User is redirected to home page
  • Photo no longer displaying in on feed
  • User's profile no longer displays photo
 Pass

Comment Tests

Test Ref(s) Steps Expected Result
User can add comment to photo 5.4
6.2
  1. Navigate to 'Home' page
  2. Click on an image to open its individual page
  3. Add text to comment box and click '+' button
  • Comment text appears immediately under 'Comments' heading
  • Comment is accompanied by relevant username and avatar
  • Date and time of addition shown above comment text
  • 'Edit' and 'Delete' links appear below comment text
 Pass
User cannot add 'blank comment' to photo 5.4
6.2
  1. Navigate to 'Home' page
  2. Click on an image to open its individual page
  3. Ensure there is NO TEXT in comment box and click '+' button
  • '+' button remains greyed-out
  • No new entry appears under 'Comments' heading
 Pass
User can edit their own comment 5.4
6.2
  1. Navigate to 'Home' page
  2. Click on an image to open its individual page
  3. Add text to comment box and click '+' button
  4. Click on 'Edit' link
  5. Update comment (do not leave blank) and click 'Save'
  • Edit form closes to display comment
  • Comment is updated according to edited text
  • Last updated displays "just now"
 Pass
User cannot edit comment to be blank 5.4
6.2
  1. Navigate to 'Home' page
  2. Click on an image to open its individual page
  3. Add text to comment box and click '+' button
  4. Click on 'Edit' link
  5. Update comment to be completely blank and click 'Save'
  • Edit remains open an update is not applied
 Pass
User can cancel comment edit 5.4
6.2
  1. Navigate to 'Home' page
  2. Click on an image to open its individual page
  3. Add text to comment box and click '+' button
  4. Click on 'Edit' link
  5. Update comment (do not leave blank) and click 'Cancel'
  • Edit form closes to display comment
  • Comment displays as before
  • Last updated remains unchanged
 Pass
User can delete their own comment 5.4
6.2
  1. Navigate to 'Home' page
  2. Click on an image to open its individual page
  3. Add text to comment box and click '+' button
  4. Click on 'Delete' link
  • Comment is immediately removed from comment list
 Pass

Star Tests

Test Ref(s) Steps Expected Result
User can add star to photo which is not their own 6.2
  1. Navigate to 'Home' page
  2. Click on the star icon of a photo not uploaded by the user
  • Star icon changes from white outline to filled gold
  • Star count increases by one
 Pass
User can remove star from photo which is not their own 6.2
  1. Navigate to 'Home' page
  2. Click on the star icon of a photo previously clicked by the user (star with golden fill)
  • Star icon changes from filled gold to white outline
  • Star count decreases by one
 Pass
User cannot add star to own photo 6.2
  1. Navigate to 'Home' page
  2. Click on the star icon of a photo uploaded by the user
  • Star icon remains unchanged in style (filled white)
  • Tooltip appears explaining users cannot upvote own photos
  • Star count remains unchanged
 Pass
User cannot add stars while signed-out 6.2
  1. Click 'Sign Out' in the navbar
  2. Navigate to 'Home' page if not already there
  3. Click on the star icon of a photo not uploaded by the user
  • Star icon remains unchanged in style (white outline)
  • Tooltip appears explaining that sign in is required
  • Star count remains unchanged
 Pass

Gear & Account Detail Tests

Test Ref(s) Steps Expected Result
User can edit their gear profile 5.5
  1. Navigate to 'Gear' page
  2. Update form fields with any valid data
  3. Click 'Save' button
  • Success toast informs user that update was successful
  • User redirected to their Profile page
  • Items under 'Main Gear' updated with new values
 Pass
User can cancel gear edit 5.5
  1. Navigate to 'Gear' page
  2. Update form fields with any valid data
  3. Click 'Cancel' button
  • User redirected to their Profile page
  • Details under 'Main Gear' remain unchanged
 Pass
User can update their avatar 5.5
  1. Navigate to 'Account' page
  2. Click 'Choose File' button
  3. Select a valid image file
  4. Click 'Save' button
  • User redirected to their Profile page
  • Avatar displayed with updated image
 Pass
User cannot save if avatar is not image file 5.5
  1. Navigate to 'Account' page
  2. Click 'Choose File' button
  3. Select a non-image file
  4. Click 'Save' button
  • Error toast informs user of the problem
 Pass
User can edit Name and Personal Details 5.5
  1. Navigate to 'Account' page
  2. Update 'Name' and 'Personal Detail' fields with any valid data
  3. Click 'Save' button
  • Success toast informs user that update was successful
  • User redirected to their Profile page
  • Updated details displayed beside avatar
 Pass
User can cancel account edit 5.5
  1. Navigate to 'Account' page
  2. Update avatar/form fields with any valid data
  3. Click 'Cancel' button
  • User redirected to their Profile page
  • Details under Profile remain unchanged
 Pass

Filter Tests

These tests ensure that a user can successfully filter photos on the signed-in Home page using either the provided buttons or the search bar facility. As such, one must first sign in to the site before completing any of the other steps listed below (the username testname and password test#123 have specifically been registered for this purpose).

Test Ref(s) Steps Expected Result
User can view all photos 5.1
5.3
  1. Navigate to 'Home' page
  2. Select 'Your photos', 'Stars given' or 'Comments given' filter button
  3. Click 'All photos' filter button
  • Photo feed updates to show photos by all site users
 Pass
User can view only their own photos 4.1
5.1
  1. Navigate to 'Home' page
  2. Click 'Your photos' filter button
  • Photo feed updates to only show photos by uploaded by signed-in user
  • 'No results' message/image shows if user has not made any uploads
 Pass
User can view only photos they have given a star to 5.1
6.3
  1. Navigate to 'Home' page
  2. Click 'Stars given' filter button
  • Photo feed updates to only show photos given a star by signed-in user
  • 'No results' message/image shows if user has not given any stars
 Pass
User can view only photos they have commented on 5.1
6.4
  1. Navigate to 'Home' page
  2. Click 'Stars given' filter button
  • Photo feed updates to only show photos commented on by signed-in user
  • 'No results' message/image shows if user has not made any comments
 Pass
User can filter photo results using search bar 5.1
5.3
  1. Navigate to 'Home' page
  2. Enter a valid word/phrase/username etc. into the search bar
  • Photo feed updates to show photos whose title, description, owner etc. contains search term(s)
  • 'No results' message/image shows if no matching results are found
 Pass

Validator Testing

W3C

HTML copied from the page source of the deployed frontend has been passed through W3C HTML Validator and shows 8 info comments regarding trailing slashes but no errors.

All CSS files have been passed through Jigsaw, the W3C CSS Validator and have also been found to be without any errors

Quick Lint JS

JSX code and JavaScript files have been checked throughout this workspace with Quick Lint JS and no issues have been found.

Accessibility & Performance

Lighthouse was used to used to produce reports on performance and accessibility for both desktop and mobile versions of the site; results are provided in the table. In all cases the SEO score was 100 which was achieved after adding meta 'keyword' and 'description' tags to the index.html head section.

Desktop Mobile
Page Performance Accessibility Best Practices Performance Accessibility Best Practices
Home (signed-out) 56 85 95 43 86 95
Sign Up 99 93 95 90 93 95
Sign In 99 94 95 91 94 95
Home (signed-in) 25 85 95 49 91 91
Upload 96 82 95 76 81 91
Photo Detail 59 88 95 48 94 95
Profile 82 83 95 67 89 95
Gear 97 93 95 91 100 95
Account 96 91 95 91 100 95
Averages 79 88 95 71 92 94

The performance on both desktop and mobile produced the lowest scores as longer loading times come from images loading on to the screen. In future development it would be advisable to look at quicker ways of retrieving image data in order to improve these scores.

Bugs

There are no known bugs in the current deployment of the site. A number of bugs were found, added to the Kanban workflow, and corrected during development. A brief summary of the frontend bugs are provided below:

Type Issue Detail Solution Result
Data Photo Edit Form not applying updates When the 'Save' button is clicked the page appears to be unresponsive. Accessing the console displays a number of errors regarding null vales and uncontrolled elements
  • Remove line const photoInput = useRef(null); from code
  • Remove all code related to this line
 Fixed
Data Photo Card details in wrong format On the Photo Detail page, the text under the image is displaying in the incorrect format for the Main Feature, Date, and Time labels
  • Main Feature: convert value to string and apply toUpperCase() and slice() as follows: String(main_feature)[0].toUpperCase() + String(main_feature).slice(1)
  • Date: install react-moment to apply dd-mm-yyyy format using package
  • Time: use react-moment to parse and apply HH;mm format
 Fixed
Structure Nested link error The PhotoCard component is producing a nested link error in the console because the link for user profile link has been placed inside the link for the Photo Detail page
  • Move owner link outside of image link and delete Image Overlay
  • Style component with negative margin to overlay on photo and prevent style errors
 Fixed