Skip to content

Latest commit

 

History

History
308 lines (237 loc) · 29.5 KB

TESTING.md

File metadata and controls

308 lines (237 loc) · 29.5 KB
Raw

Umbra Report Project Test File

Table of contents

Manual Testing

Manual testing was done for each completed user story and screenshots added to the comments on each issue page.

User Story Results Detail
As a Site User, I want to register an account on the blog website so that I can create and manage my own posts. Good. link
As a Site User, I want to log in to the website securely using my credentials so that I can participate in the blog’s features. Good. link
As a Site user, I want the option to reset my password in case I forget it, ensuring secure access to my account. Good. link
As a Site User, I want to create a new blog post with a title, content, and optional images, so that I can share my thoughts and experiences. Good. link
As a Site User, I want the ability to update my existing blog posts to update or improve the content over time. Good. link
As a Site User, I want to be able to delete my own blog posts if I decide to remove them from the website. Good. link
As a Site User or Admin, I can create draft posts so that I can finish writing the content later. Good. link
As a Site Admin I can manage all blog posts through the admin panel to maintain control over the site’s content. Good. link
As a Site User I can view a paginated list of posts so that I can select which post I’m interested in viewing. Good. link
As a Site User, I can click on a post so that I can view the complete content. Good. link
As a Site User or Admin, I can view the comments on each individual post so that I can read the conversation. Good. link
As a Site User, I want to be able to comment on blog posts to engage with the author and other readers. Good. link
As a Site Admin I can approve or disapprove comments so that I can filter out objectionable comments. Good. link
As a Site User, I want to be able to like blog posts to engage with the author and other readers. Good. link
As a Site User, I want a user-friendly navigation menu that helps me explore different sections of the blog easily. Good. link
As a Site User, I want the blog website to be responsive, ensuring a seamless experience on various devices, including desktops, tablets, and smartphones. Good. link
As a Site User with accessibility needs, I want the website to be accessible, with features like alt text for images and keyboard navigation, to ensure a positive experience for all users. Good. link
As a Site User, I can click on the About link so that I can read about the site. Good. link
As a Site Admin, I can create or update the about page content so that it is available on the site. Good. link
As a Site User, I can click on a username link so that I can read about the user and see their posts. Good. link

Compatibility and Responsive Testing

As a Site User, I want the blog website to be responsive, ensuring a seamless experience on various devices, including desktops, tablets, and smartphones.

Windows laptop

This project was developed using a Windows laptop running Windows 10 and the site was viewed on three browsers.

Browser Dimensions Screen
Chrome 1920x1080 laptop-screen-01
Firefox 1920x1080 laptop-screen-02
Edge 1920x1080 laptop-screen-03

Chrome Emulated Device Dimensions

Device Name Dimensions Screen
iPhoneSE 375x667 chrome-screen-01
iPhone XR 414x896 chrome-screen-02
iPhone 12 Pro 390x884 chrome-screen-03
iPhone 14 Pro Max 430x932 chrome-screen-04
Pixel 7 412x915 chrome-screen-05
Samsung Galaxy S8+ 360x740 chrome-screen-06
Samsung Galaxy S20 Ultra 412x915 chrome-screen-07
iPad Mini 768x1024 chrome-screen-08
iPad Air 820x1180 chrome-screen-09
iPad Pro 1024x1366 chrome-screen-10
Surface Pro 7 912x1368 chrome-screen-11
Surface Duo 540x720 chrome-screen-12
Galaxy Fold 280x653 chrome-screen-13
Asus Zenbook Fold 853x1280 chrome-screen-14
Samsung Galaxy A51/71 412x914 chrome-screen-15
Nest Hub 1024x600 chrome-screen-16
Nest Hub Max 1280x800 chrome-screen-17

Browserstack Devices

Browserstack.com

Device OS Browser Viewport Screen
iPhone 14 Pro IOS, v16.3 Chrome 390x664 Screen
iPhone 13 IOS, v15.4 Safari 390x664 Screen
Samsung Galaxy S23 Android, v13.0 Chrome 393x786 Screen
Samsung Galaxy S22 Android, v12.0 Chrome 360x649 Screen
Xiaomi Redmi Note 12 Android, v13.0 Chrome 393x736 Screen
iPad 9th IOS, v15.3 Safari 810x1010 Screen
Mac Ventura ? Safari 1920x927 Screen
iPhone XS IOS, v15.3 Safari 375x635 Screen

Market Share insights

I used statcounter.com to give me an idea of which devices, browsers and operating systems I should focus on due to their popularity.

Data Image
Desktop Browser Market Share: StatCounter-browser-ww-monthly-202302-202402-bar
Mobile Browser Market Share: StatCounter-browser-ww-monthly-202302-202402-bar(1)
Mobile Vendor Market Share: StatCounter-vendor-ww-monthly-202302-202402-bar
Tablet Vendor Market Share: StatCounter-vendor-ww-monthly-202302-202402-bar(1)
Operating System Market Share: StatCounter-os_combined-ww-monthly-202302-202402-bar

Accessibility Testing

As a Site User with accessibility needs, I want the website to be accessible, with features like alt text for images and keyboard navigation, to ensure a positive experience for all users.

Accessibility Audits

Performance, Accessibility, Best Practices and SEO

PageSpeed Insights was used to audit the site's features for performance, accessibility, best practices and SEO. This was recommended as a more accurate reading than Chrome's lighthouse tool. The site scored 100 throughout on accessibly, best practice and SEO, which is good. Performance wise, the site runs much better on desktop than it does mobile. For a better performance on mobile, time could be taken to look in to optimising Cumulative Layout Shift, First Contentful Paint and largest Contentful Paint.

Page Factor Performance Accessibility Best Practices SEO Screen Capture
Index Mobile 82 100 100 100 Screen
Index Desktop 92 100 100 100 Screen
About Mobile 59 100 100 100 Screen
About Desktop 92 100 100 100 Screen
User01 Mobile 75 100 100 100 Screen
User01 Desktop 93 100 100 100 Screen
Report01 Mobile 86 100 100 100 Screen
Report01 Desktop 93 100 100 100 Screen
Report02 Mobile 84 100 100 100 Screen
Report02 Desktop 98 100 100 100 Screen
CreateReport Mobile 86 100 100 100 Screen
CreateReport Desktop 98 100 100 100 Screen
EditReport Mobile 87 100 100 100 Screen
EditReport Desktop 95 100 100 100 Screen
SignUp Mobile 77 100 100 100 Screen
SignUp Desktop 93 100 100 100 Screen
Login Mobile 82 100 100 100 Screen
Login Desktop 99 100 100 100 Screen

WAVE Web Accessibility Evaluation Tool Was used to check for errors and contrast errors throughout the site.

Page Result Screen Capture
Index No errors. Screen
About No errors. Screen
User01 No errors. Screen
User02 No errors. Screen
Report01 No errors. Screen
Report02 No errors. Screen
CreateReport No errors. Screen
EditReport No errors. Screen
SignUp No errors. Screen
Login No errors. Screen
404 No errors. Screen

Keyboard Navigation

Using a reference from https://webaim.org I tested the keyboard navigation options that were relevant to the site (side scrolling or radio inputs couldn't be tested for example as they're not utilised on the site).

  • Tab key navigates forward to interactive elements.
  • Shift+Tab navigates backward to interactive elements.
  • Enter key activates links.
  • Enter or Spacebar activate buttons.
  • ↑/↓ - navigate between dropdown menu options.
  • Spacebar expands dropdown menu options.
  • Enter/Esc select dropdown menu option and collapse.
  • Typing letters jumps to a dropdown menu option.
  • Esc button closes modal dialogue box.
  • ↑/↓ buttons scroll vertically
  • Spacebar/Shift + Spacebar scroll by page (no button in focus).

Validation Testing

CSS Validation

W3C CSS Validation Service was used to validate the CSS code through direct input.

Result Screen Capture
No Error Found. Screen

HTML Validation

W3C Markup Validation Service was used to validate the html through direct code input. The html was acquired for each page by viewing the page source code on the deployed site.

Page Result Screen Capture
Index No errors or warnings to show. Screen
About No errors or warnings to show. Screen
User01 No errors or warnings to show. Screen
User02 No errors or warnings to show. Screen
Report01 No errors or warnings to show. Screen
Report02 No errors or warnings to show. Screen
CreateReport No errors or warnings to show. Screen
EditReport No errors or warnings to show. Screen
SignUp 4 errors. * Screen
Login No errors or warnings to show. Screen
Logout No errors or warnings to show. Screen
404 No errors or warnings to show. Screen
  • The 4 errors listed on the sign up page come from external html code that I don't have access to, so they are ignored for the time being.

JavaScript Validation

JSHint was used to validate the two javascript files through direct input of code.

/*jshint esversion: 6 */ Was added to the test to remove ES6 warnings.

import * as bootstrap from 'bootstrap'; Was also added to the test to remove an udefinded variable error (if included in app code this line breaks modal function).

File Result Screen Capture
comment.js No error found. Screen
delete_report.js No error found. Screen

Python Validation

CI Python Linter was used to validate the relevant python files through direct input of code.

File Result Screen Capture
umbra/urls.py No errors found. Screen
blog/admin.py No errors found. Screen
blog/forms.py No errors found. Screen
blog/models.py No errors found. Screen
blog/urls.py No errors found. Screen
blog/views.py No errors found. Screen
blog/test_views.py No errors found. Screen
blog/test_forms.py No errors found. Screen

Automated Testing

As time was short, the automated testing done on this project was small and very basic. The Code Institute walkthought project 'I Think, Therfore I Blog" informed the initial tests while the TestHomePage unit test was inspired by django documentation on automated tests (here).

test_forms.py Contains two TestCase classes: TestReportForm and TestCommentForm.

The TestReportForm class features two methods.

  • test_report_form_is_valid() Method: This method tests whether the form is valid when all required fields are properly filled. It creates an instance of ReportForm with sample data (a title, a category, some content, and a status), and then checks if the form is valid using assertTrue() assertion. If the form is valid, the test passes; otherwise, it fails.
  • test_empty_report_form_is_invalid() Method: This method tests whether the form is invalid when all required fields are empty. It creates another instance of ReportForm with empty values for all fields and checks if the form is valid using assertFalse() assertion. If the form is invalid (as it should be when all required fields are empty), the test passes; otherwise, it fails.

The TestCommentForm class features two methods.

  • test_comment_form_is_valid() Method: This method tests whether the form is valid when the required field (content) is filled with some text. It creates an instance of CommentForm with a sample comment content and then checks if the form is valid using the assertTrue() assertion. If the form is valid, the test passes.
  • test_empty_comment_form_is_valid() Method: Similarly, this method tests whether the form is valid when the required field (content) is left empty. It creates another instance of CommentForm with an empty value for the content field and then checks if the form is valid using the assertFalse() assertion. If the form is invalid (as it should be when the required field is empty), the test passes.

test_views Contains two TestCase classes: TestFullReportView and TestHomePage.

The TestFullReportView class features three methods:

  • setUp() Method: This method is part of the TestCase class and is used for test setup. In this case, it creates a superuser using create_superuser() method from Django's User model, and it also creates a report (Report model instance) associated with this user. The report contains various fields like title, author, slug, description, content, status, and category. This setup ensures that there's data available for testing the view.
  • test_render_full_report_page_with_comment_form() Method: This method tests whether the full report page is rendered correctly along with the comment form. It sends a GET request to the view responsible for displaying a full report page (full_report view) using self.client.get(). Then it asserts that the response status code is 200 (indicating success), and it checks whether the response contains the title and content of the report. Additionally, it verifies that the context of the response contains an instance of the CommentForm.
  • test_comment_submission() Method: This method tests the functionality of submitting a comment on a report. First, it logs in as the superuser created in the setUp() method using self.client.login(). Then it creates a POST request with comment data and sends it to the view associated with the full report page (full_report view). Afterward, it asserts that the response status code is 200 and checks whether the response contains a specific message indicating that the comment has been submitted and is awaiting approval.

The TestHomePage class features three methods:

  • setUp() Method: This method is used for test setup. In this case, it creates a request factory instance (RequestFactory) and creates a superuser using create_superuser() method from Django's User model. This setup ensures that there's a user available for testing authentication-related behavior.
  • test_index_page_view() Method: This method tests various aspects of the home page view. It does the following:
    • Creates a GET request to the root URL ('/') using the request factory.
    • Verifies that the default template used by the view is 'base.html'.
    • Calls the home page view (ReportList.as_view()) with the created request.
    • Checks if certain text and navigation links are present in the response content, both for an unauthenticated user and for an authenticated user (superuser in this case).
    • Verifies that certain admin links are absent for unauthenticated users and present for authenticated users.
  • test_404_view() Method: This method tests whether the 404 error page is displayed when a nonexistent URL is requested. It creates a GET request to a nonexistent URL ('/thispageisnowhere/') and checks whether the '404.html' template is used in the response.

Defects

  • Once I had decided to keep the image widths uniform to assist with page performance, I had caused an issue in which images smaller than 500px in width were distorted. This was an easy fix and just required object-fit: contain; to be placed in the CSS.
  • A contrast issue was detected in the red colour (#800000) used for headings and links. This was missed as it did not appear in the WAVE or PageSpeed audits detailed in this document. The issue however could be seen when inspecting an element in Chrome's dev tools and viewing the contrast score. Chrome's suggested colour instead was (#BA0000) so I switched to this shade. With this in mind, I checked the grey colour used (#808080) and followed Chrome's suggestion to switch to a slightly lighter shade of grey (#969696).

Defects of Note

Comment edits were failing to update.

This was due to the url expecting a trailing slash:

path(
    '<slug:slug>/delete_comment/<int:comment_id>/',
    views.comment_delete,
    name='comment_delete'
    ),

but the JS was missing one:

commentForm.setAttribute("action", `edit_comment/${commentId}`);

So a trailing slash was added to fix:

commentForm.setAttribute("action", `edit_comment/${commentId}`);

Outstanding Defects

No known defects outstanding.