- Manual Testing
- Automated Testing
- User Stories Testing
- Validator Testing
- Performance Testing
- Browser Compatibility
- Responsivity
- Issues/ Bugs Found & Resolved
- Unresolved
Back to the README
The original Google sheet file for the test case report can be found here.
Python Automated Unit Testing was implemented using the Django Unit Testing framework.
Unit Tests have been written to cover all Forms, Models, Views, Admin, Context-Processors and Fields.
I implemented unit testing only at the end of the project, because it was not a mandatory requirement. However, during testing I realized the importance of implementing unit testing from the start of a project in order to ensure the functionality of the code permanently during the development process.
A total of 171 Unit Tests have been written. All 171 tests run successfully without errors or warnings.
Coverage Automated Testing
All functionalities have been tested and they work as expected. You can find more about Manual Testing.
-
#1 I want to know what this site is about immediately so that I can decide whether I will explore further.
This was achieved with a nice hero banner, asking the user to explore the blog about Africa.
-
#2 I want to navigate pages so that I can understand what types of information I can find.
This was achieved with a navbar which is fully responsive and functionality has been tested and works as expected.
-
#3 I can view a list of posts so that I can select one to read.
In the navbar the user can select, whether to see a list of all posts or posts from a certain region. Afterwards a list of posts will be displayed and the user can select a post to read.
-
#4 I can select a category so that I can only view relevant posts.
In the navbar the user can select, whether to see a list of all post or post of a certain region. Once a certain category is selected only posts of that category will be displayed. When creating a post, the author has to select a region in order for the categorization to work.
This was achieved with a navbar that is fully responsive and whose functionality has been tested and works as expected.
-
#5 I can view a list of highlighted posts so that I can select one to read.
On the Home Page the user has the option to select 1 of 6 featured posts. The admin can select posts to be featured posts either in the admin panel or on the post update page.
-
#6 I can create an account so that I can sign in and use of the sites full functionality.
From the navbar the user can select Register to create a a user account. Afterwards the user is able to use all features, create posts, like post, user the bucket list and comment on posts.
-
#13 I can search a post by a keyword so that I can try to find posts relative to the keyword.
From the navbar the user can use the search function and enter a keyword. If the keywords was found in one of the post titles or countries those related posts will be displayed as search results.
-
#15 I can view comments so that I can read other users feedback.
On a Post the comments are displayed for every user.
-
#7 I can view my own account so that I can manage my account easily.
From the navbar the user can click on the small profile picture and the Profile Page will open. From the Profile Page the user has the option to delete the account, edit the account and reset the password.
-
#8 I can Edit/Update my account so that my profile is up to date.
From the Profile Page the user can select the pen icon to edit or update their own profile or reset the password.
-
#9 I can delete my account so that I can remove my footprint from the website if I am no longer active.
From the Profile Page the user can select the bin icon to delete the profile. Afterwards a modal opens to confirm that the user is certain to delete the profile. Once the profile is delete all posts and comments of this user are deleted as well.
-
#10 I can create a post so that I can share my experiences with other users.
From the navbar the user can select the pen and paper icon and the profile create page will open. Before a post is published it needs to be approved be the admin first.
-
#11 I can edit my posts so that I can keep them current and amend mistake.
On the Post Page the user can select the pen icon to edit the post. Afterwards the form will open to update the current post information. Once the post is updated it goes into the admins approval again.
-
#12 I can delete my posts so that I can control the information that I share.
On the Post Page the user can select the bin icon to delete the post. Afterwards a modal will open to confirm that the user is certain to delete the post.
-
#14 I can leave a comment on a post so that I can exchange with the author an be involved in a conversation.
On the Post Page the user can leave a comment to the related post. Before a comment is publish it will go into admin approval first.
-
#16 I can like a post so that highlight useful content for other users.
On the Post Page the user can on the heart button to like a post. Once post is liked the user can click the button again to unlike the post.
-
#17 I can receive an email notification if another user commented on my post so that I can engage in a conversation with other users.
Once user wrote a comment and the comment was approved by the admin, the user will receive a email notification. Note: After I took the screenshot, I added the link to the related post to the comment confirmation mail.
-
#18 I can can add a Post to my bucket list so that I can save destinations I want to travel to.
On the Post Page the user can select the Bucket List button to add a post to the bucket list. From the navbar the user can click on the list icon to open their personal bucket list, where selected posts are stored. On the Bucket List Page the user can click on a certain post to revisit the post or select the bin icon to remove it. Once a post is saved to the bucket list, on the Post Page the button is disabled.
-
#19 I can delete my comments so that I can control the information that I share.
On the Post Page in the comment section the user can select the bin icon to delete a comment. This functionallity is available for the author of the post, and the commenter. After the user clicks on the bin icon a modal will open to confirm that the user wants to delete the comment.
-
#26 I can rely on the app to log me out automatically so that strangers cannot access my profile in case I am on a public computer.
A timeout for the user is setup in the settings, logging the user out after 30mins or once the user has closed the browser.
# Settings for Session Time Out SESSION_EXPIRE_SECONDS = 1800 SESSION_TIMEOUT_REDIRECT = "/" SESSION_EXPIRE_AT_BROWSER_CLOSE = True -
#27 I can be routed to a error page in case a page is not found so that I understand the error and click on a link to get back to the homepage.
A error page has been setup, in case user try to access a page without permission, the page does not exist or other errors occur.
-
#31 I want to reset my password so that I can regain access to my account if I forget my password.
On the Login Page the user can select Forgot Password* to reset the password. Afterwards an email will be send to the user with a link to confirm. This link will redirect the user to the change password page. On the change password page the user can enter a new password.
- As an Superuser,
-
#28 I want to create a category when needed so that I can manage the site effectively.
In the Admin Panel the Superuser can create new categories for the website. The new category will automatically be part of the regions and will be listed in the navbar dropdown.
-
#29 I want to delete content when inappropriate so that I can maintain the site and ensure that only useful or relevant content remains.
On the Post Page the Superuser has the same option as the post auther and can delete or edit a post. Further, the Superuser can delete posts from the Admin Panel
-
#30 I want to block user accounts so that I can ensure only trusted users can access the site.
In the Admin Panel under Permissions the Superuser can unselect the status Activ which makes the user inactive. An inactive User can not login.
-
All HTML code was validated using the W3C Markup Validation Service regularly during the development process. The HTML Source Code was regularly viewed for each page using Google Chrome and passed through the W3C Markup Validation Service. Various minor errors were encountered and corrected during the final HTML validation check.
A few errors occurred with summernote during the validation process. The summernot-div had attributes for cols and rows which resulted in an error during validation. I fixed that by copying the widget_iframe.html into my templates and styling the width with my custom CSS. Remaining issues with Summernote are the <textarea> element, which is set to hidden=true and CSS Parse Erros for blog posts that users created using Summernote. After consulting with Tutor Support about it, they advised me not to try and fix it since I did not develop the package myself and this could result in the package not functioning correctly. Besides Summernote, all HTML code now passes validation with no errors or warnings.
Home Page
Profile Page
Bucket List Page
Create Post Page
Post Page
Create Post Page
Post Page
Custom CSS Styling from style.css was validated using the W3C CSS Validation Service.
Some "Due to their dynamic nature, CSS variables are currently not statically checked" warnings were generated.
These warnings are related to the global variables declared at the top of style.css.
The warnings are generated because the W3C CSS Validation Service does not currently support CSS global variable declaration, and are not considered to be an issue.
Some additional "vendor extension" warnings were also generated. These warnings are not considered to be an issue since the vendor extensions are to enable the correct display of various elements in different browsers.
Imported style sheets are not checked in direct input and file upload modes warnings were generated. These warnings are related to the Google Fonts and are not considered to be an issue, but just information that imported style sheets cannot be validated.
One error was generated using clipath: circle() without any values. I corrected this error and afterwards no errors were generated.
Result
Warnings during validation check
Error during validation check
The custom script.js was validated using the JSHint static code analysis tool.
A wanring "One unused variable" was generated for the tooltipList which I resolved by refactoring the code. Afterwards the test passed without errors or warnings.
Due to the lack of complexity of JavaScript code implemented on the project, Automated Unit Testing
of the JavaScript code was considered unnecessary. All JavaScript functions and event handlers in the custom JavaScript Code Libraries have been thoroughly manually debugged and tested in the console.
Result
Warning during validation check
All Python Code was thoroughly de-bugged and tested at the command line during the development process, and has been validated
using Flake8. flake8-django was also installed to assist with validation.
Flake8 was configured by creating a setup.cfg file in the root of the project, which contains the following settings:
[flake8]
exclude = */migrations/*.py, *__init__.py, *_pychache_*, *settings.py*, .vscode, env.py
The settings exclude django migrations, __init__.py, .vscode and _pychache_ files, as these are system generated files and do not need to be checked.
settings.py (line too long) errors are ignored as it is not possible to shorten the affected lines of code without causing application errors.
env.py (line too long) errors are ignored as it is not possible to shorten the affected lines of code without causing application errors.
Result
Lighthouse was used (accessed through Developer Tools in Chrome) to analyzee for the following:
- Performance
- Accessibility
- Best practice
- SEO
On several pages for mobile the performance score raised issues related to Bootstrap, Cloudinary and Heroku: Eliminate render-blocking resources. As Bootstrap, Cloudinary and Heroku are not replaceable at this point, I have decided not to pursue any further. For the future it is to be considered creating an extra stylesheet for mobile to load less css.
On the About page the accessibility score raised an issue related to the contrast ratio. I tested this page with the Wave Tool which returned no errors. As the addressed elements and their contrast ratio are not critical for the UX and the Wave Report returned no errors, I decided not to pursue any further.
On the Profile page the performance score raised an issue related to the server response time. As this is related to the Heroku Dynos, I have decided not to pursue it any further.
Homepage
About Page
Post List
Post Detail
Post Create/Update
Bucketlist
Profile
Sign Up
Login
Homepage
About Page
Post List
Post Detail
Post Create/Update
Bucketlist
Profile
Sign Up
Login
This App was tested on Chrome, Microsoft Edge, and Firefox for desktop.
The App was tested on Safari for mobile and tablet.
Responsiveness was tested through Chrome Developer tools. The devices tested include:
- iPhone SE
- iPhone XR
- iPhone 12 Pro
- Pixel 5
- Samsung Galaxy S8+
- Samsung Galaxy S20 Ultra
- iPad Air
- iPad Mini
- Surface Pro 7
- Surface Duo
- Galaxy Fold
- Samsung Galaxy A51
I was able to directly test the website on an iPhone 13 mini and an iPad.
- Error during first Deploy:
During the first deploy I received an error:
Failed to build backports.zoneinfo
ERROR: Could not build wheels for backports.zoneinfo, which is required to install pyproject.toml-based projects
! Push rejected, failed to compile Python app.
! Push failed
which is was able to fix by adding backports.zoneinfo==0.2.1;python_version<3.9. Solution was found on Stackoverflow
- UnorderedObjectListWarning:
For pages with pagination an UnorderedObjectListWarning' was printed to the console, which I resolved by adding ordering`to the PostListViews
- Random failing in Heroku
After the project has been deployed for the first time, errors continue to occur during the push.
Error while running '$ python manage.py collectstatic --noinput'.
See traceback above for details.
You may need to update application code to resolve this error.
Or, you can disable collectstatic for this application:
$ heroku config:set DISABLE_COLLECTSTATIC=1
https://devcenter.heroku.com/articles/django-assets
! Push rejected, failed to compile Python app.
! Push failed
Tutor support also knew about this problem and could not identify the source of the problem. In most cases python3 manage.py collectstatic helps to deploy the changes successfully after all.
- Summernote Editor in Admin Panel:
As described in HTML, I had to copy the widget_iframe for Summernote into my project and style it with custom CSS. The consequence is that the width, which was set in the custom css file, does not take effect in the admin panel. The editor in the admin panel is therefore currently not as wide as desired. This can be solved by copying and loading the style sheet from the admin panel into the project and adding the desired width for the editor there. Since all features are currently working and no user story is compromised, this has not yet been implemented due to time limitations, but is planned for the future.