Skip to content

Latest commit

 

History

History
394 lines (294 loc) · 18.4 KB

TESTING.md

File metadata and controls

394 lines (294 loc) · 18.4 KB

The Quiz Game 🎲 | Milestone 3️⃣ Project

View live project here

Main README.md file

Testing User Stories from User Experience (UX) Section

  • Anonymous user/ First time visitor Goals:

    1. Be able to easily navigate throughout the site to find content and contacts.

      1. Upon entering the site, users are automatically greeted with a clean and easily readable sticky navigation bar to go to the page of their choice.
        Evidence
      2. The main features are immediately shown with two cards in the middle of the page.
        Evidence
      3. At the bottom of the page there is a footer with the links to the social networks and contacts.
        Evidence

    2. Play the quiz game.

      1. One card (Play) allows the user to play immediately the quiz game.
        Evidence
      2. The other card (Login) allows the user to login.
        Evidence

    3. Get my feedback regarding the score.

      1. The anonymous user will get the score immediately after the game whilst the registered user will be able to see more data and details regarding the current score and previous ones.
        Evidence

    4. Locate their social media links to see their followings on social media in order to be updated about their latest releases.

      1. The social media links are located in the footer together with contact.
        Evidence

  • Registered user/ returning/ frequent visitor goals

    1. Be able to manage my own posts and upload the profile image.

      1. The registered user is able to see the history of the scores with exact dates.
        Evidence
      2. The registered user is able upload his/her profile image.
        Evidence

    2. Be able to play the game and navigate through the pages.

      1. The links/buttons are easy to spot and click.
        Evidence

    3. Not to be allowed to remove any score (functionality only for admin).

      1. The logged in user can only visualise his/her score.
        Evidence

    4. Check out my previous scores and therefore my progress.

      1. The registered user can visualise his/her previous scores.

    5. Find the best way to get in contact with the organisation with any question I may have.

      1. Link and contact in the footer.
        Evidence

    6. Find the social media links so that I can join and interact with others in the community.

      1. Link and contact in the footer.
        Evidence

  • Admin Goals

    1. be able to delete any users scores.

      1. The admin can delete any user | The admin will receive a warning message before deleting.
        Evidence

    2. be able to edit any question.

      1. The admin can edit any question.
        Evidence

    3. have unique access to all features.

      1. The admin is the only one who can access all features.
        Evidence

  • Site Owner Goals, Testing

    1. increase the number of people playing the games therefore the popularity of the website.

      1. Through the appealing design of the page.
      Evidence

    2. be in touch with the users.

      1. Through the links in the footer and contact.
      Evidence

    3. Make the website as accessible and responsive as possible.

      1. The website is responsive on any device and is designed according to the most important UX principles.
      Evidence

    4. Gain a better understanding of the audience by checking their feedback both via the website and social networks.

      1. Possible via the reviews from ther social medias connected to the page.
      Evidence

    5. Use reviews to increase customer satisfaction.

      1. Possible via regular updates (FB,Twitter,email) that connected to the social medias interactions give the owner a trend of its audience.
      Evidence

User testing

Friends and family members were asked to review the site and documentation to point out any feedback and possible way of improving it. Their helpful advice throughout the process led to many UX changes in order to create a better experience, especially regarding the styling.

It was through this testing that the following changes were made:

  • Assessing the combinations of colours and the related contrast.
  • Fonts choice looking smart and not invasive.
  • Overall balance in the positioning and sizing of elements in the pages.

Manual Testing 🔧

Common Elements Testing

Manual testing was conducted on the following pages in order to assess responsiveness,functionality and usability:

  • Hovering over the Navbar will trigger hover effect.

    Navbar hover

  • Hovering over Social links will trigger hover effect and clicking on them will open a new tab.

    Hover and open new tab

  • Clicking on the logo will take you back to the home page or refresh it.

    Click logo to return to home page

  • Hovering over the email in the footer will trigger hover effect and clicking on them will redirect you to the email (mailto).

    Mailto

Home Page

Manual testing was conducted on the following elements of the Home Page:

  • All the elements are responsive (header, footer, cards).
  • The buttons in the Navbar turns into smaller buttons ordered in the same way.
    Home Page

Login Page

Manual testing was conducted on the following elements of the Login Page:

  • All the elements are responsive (header, footer, central window).
  • The buttons in the Navbar turns into smaller buttons ordered in the same way.
    Login page

Registration Page

Manual testing was conducted on the following elements of the Registration Page:

  • All the elements are responsive (header, footer, central window).
  • The buttons in the Navbar turns into smaller buttons ordered in the same way.
    Registration page

404 Page

Manual testing was conducted on the following elements of the 404 Page:

  • All the elements are responsive (header, footer, text).
  • The buttons in the Navbar turns into smaller buttons ordered in the same way.
    404 Page

Automated Testing 🔧

Code Validation

Page Result Test Detail/Screenshot
home.html Passed, No errors found Results
login.html Passed, No errors found Results
registration.html Passed, No errors found Results
404.html Passed, No errors found Results

CSS Validation Service

Page Result Test Detail/Screenshot
style.css Passed, No errors found Results

JSHint

  • The JS Hint service was used to validate the JS code used.
Page Result Test Detail/Screenshot
script.js 0 errors Results
admin.js 0 errors Results

PYlint

  • PYlint was used to validate the PYTHON code used.
Page Result Test Detail/Screenshot
app.py 0 errors Results

PEP8 Online Check

Page Result Test Detail/Screenshot
app.py 0 errors Results

Browser Validation

  • I have used Lambda Test for cross-browser testing among the major browsers.

  • Click here to check browser testing

  • Microsoft Edge: Website and user stories work as expected.

  • Google Chrome: Website and user stories work as expected.

  • Safari: Website and user stories work as expected.

  • Firefox: Website and user stories work as expected.


Lighthouse Auditing

  • I have used Lighthouse to test the performance, seo, best practices and accessability of the site
Page Test Detail/Screenshot
home.html Results
login.html Results
registration.html Results
404.html Results

AWS Testing

  • The image uploaded by the logged in user in the app has been successfully added in the S3 bucket.
    Evidence

Bugs found during the testing phase

Bug no. Bug description Bug fix
1 The biggest trouble i had was trying to work out why the app (successfully deployed) on Heroku would not run After several days of consulting the specific documentation i was suggested to go and check the settings. I neglected to add: PORT 5000 and IP 0.0.0.0.
2 Semicolons left in the app.py by mistake They have been promptly removed as they were giving error warnings.
3 The buttons in the navbar would be all disorganized in the mobile view Problem solved withn CSS.
4 External links would not open in another tab Problem solved by adding target="_blank" attribute to the anchor tags.
5 Field required During the registration process even an empty form was accepted. I had to add "required" so that the user would not get a positive feedback for registration unless filling all of the necessary fields.
6 User Cancellation The Admin has the possibility to delete the registered user. Initially there was no warning when deleting a user. Now the admin will receive a warning message before proceeding.
7 Footer out of place in Ipad view At the end i have noticed that the footer of all the pages except the home page would not go down in the Tablet view. I have resolved that using the Flex property.
8 The registered user could see his scores (current and old) only after playing I have added a button in the header that connects to the scores part so that the user does not feel lost on the page.
9 The app would crash if the user, playing the game, would click twice on any button of the game window I have promptly corrected that error that i did not spot until the end.
10 app.py code issues A fair amount of time has been spent at the end of the project to make the PY code fully PEP8 compliant.

CRUD Features (Creation, Reading, Updating and Deleting) evidence

  • Creation - The "Creation" function is present in two parts. The admin can create new questions in the "Manage Questions" section as well as creating new users in the "Manage Users" section.
    Evidence
  • Reading - The admin can easily read any change that as been made as the application fives feedback after any action. The registered user can see his current scores, older scores and dates. The anonymous user can only see the feedback of the game.
    Evidence

  • Updating - The "Updating" function is present in three parts. The admin can update current questions/answers and as well update the status of the user. A user can become admin if necessary or vice versa. This is a positive thing in case the admin needs more help with the maintenance of the website. In addition to that the logged in user can update his/her profile picture.

    Evidence

  • User Updating - function: the logged in user can update his/her profile image. Once the new picture is uploaded, it will automatically replace the previous one.

    Evidence

  • Deleting - The "Deleting" function is present in three parts. The admin can delete any question in the "Manage Questions" section and delete users in the "Manage Users" section. Before deleting any user or question the Admin will receive a warning message advising him of the action. This way the admin will not cancel anything or anyone accidentally. As ad defensive action too, the delete button will change colour when the cursor is over it; it will activate the Hover function so that the admin knows exactly which button he/she is about to click.

    Evidence

  • User Deleting - function: the logged in user can delete his/her profile image.

    Evidence

Other Features

  • Already existing username - If the username already exists, the user is advised.
    Evidence
  • Welcome message - The registered user can see his name on the page.
    Evidence
  • Hover effect - Both the admin and any user always trigger a hover effect that helps with clicling onto the right button.
    Evidence
  • Adding profile image - The logged in user can add the profile image to his/her page. A the moment it is a simple page where the image gets uploaded, just to show the functionality for learning purposes. In the future could be developed into a proper profile page.
    Evidence

Security Features Considered

General

  • Use of .gitignore to hide all secret keys.
  • No Password pushed in the Repository.
  • Hypertext Transfer Protocol Secure (HTTPS) for the Heroku App.

App

  • Only the ADMIN has some privileges, such as:
    • Add/Edit/Remove Questions.
    • Delete users.
    • Change privileges to the registered users.