JavaScript function testing can be found in the JavaScript Test Results Document As DRY functions are imported across the entire application - they are tested within the scope they are executed, ie. a noData() function is called when there is no data to display in events.js & reports.js. Testing of this function was carried out within these scopes and not where the function is declared
The following devices / browsers were used by me for testing. Friends & family used a variety of devices to view / test the site.
- Desktop
- Firefox 82
- Chrome 87
- Edge 87
- Android
- Chrome 87
- Chrome Dev 88
- Chrome Canary 89
- Firefox 84
- DDG 5.72
- iOS
- Safari 13
- Safari 14
- Safari 15
I also used LambdaTest to simulate cross browser Testing
Testing was seperated into 3 categories; user testing, functional testing & performance testing
Testing was carried out on the site using the following parameters: UX & Navigation, Responsiveness, Accessibility, Scope / Goals and Validation.
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| All links navigate to correct target | Manual checking of links | PASS | - | |
| External site links open in new tab | Manual checking of links | PASS | - | |
| Website is easy to navigate | Friends & family visited the website and reported any potential navigation issues | PASS |
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| Website content displays appropriately across multiple browsers. Images scale correctly, Containers wrap correctly, Fonts scale correctly | Manual testing on multiple devices and browsers. Friends & family visited the website and reported any potential responsiveness issues.Manual testing on multiple devices and browsers. Also used LambdaTest & Google Mobile Friendly Test | PASS |
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| Colour Contrast | Colours checked on Color a11y | PASS | Greeting drop down contained low contrast | Updated greeting CSS |
| Readability | Friends & family visited the website and reported any potential readability issues. Website content checked for spelling and grammar issues, MS Word | PASS | Justify text, although looked visually appealing made the text blocks difficult to read | Update text justification to accommodate testers recommendations |
| Overall accessibility tests | Tested on Wave Accessiblity testing | PASS | Issues reported with aria descriptions | Fixed by applying a11y solution found here |
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| Form controls: Required form controls in place | Manual Testing | PASS | - | - |
| Colour scheme matches client’s requirements | Client Testing | PASS | - | - |
| The website language and message matches what the client requested | Client proof read the content | PASS | - | - |
| User stories fulfilled | Family and friends visited the website and provided feedback. | PASS | - | - |
| Overall Client Satisfaction | Client Feedback | PASS | The client is happy with the initial deployment and is waiting on feedback from users | - |
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| HTML code validation | W3C HTML Validator | PASS | - | - |
| CSS code validation | W3C CSS Validator | PASS | Issues with vendor prefixes in 3rd party stylesheets (sliderJS) | removed during second test |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Navbar fixed to top of browser (desktop) & bottom of browser (mobile) across all sections | Scroll, navigate through website | PASS | Desktop & Mobile |
| Navbar links change colour size when hover | Mouse hovered over links | PASS | Desktop |
| Navbar links navigate to the relevant page section | Each link clicked | PASS | Desktop & Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Greeting is customised if returning user | Fill out contact form and revisit page | PASS | Desktop & Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| No events image when no data | delete JSON file | PASS | Desktop & Mobile |
| Event cards expand and collapse | Click event cards | PASS | Desktop & Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Report pop displays | cta button clicked | PASS | Desktop & Mobile |
| Browser requests location permission | cta button clicked | PASS | Desktop & Mobile |
| Users location displayed on map | Location permission granted to browser | PASS | Desktop & Mobile |
| Image button opens file browser on desktop & option of file browser or camera on mobile | image upload button clicked | PASS | Desktop & Mobile |
| Images display in slider | Tested uploading from file system on both desktop & mobile. Live captured images from camera | PASS | Desktop & Mobile |
| Report Sent to Admin | Check email account & api dashboard | PASS | Desktop & Mobile |
| Previous Reports should be displayed or no reports image if no reports posted previously | No reports image shows on initial navigation to the page. Post a report | PASS | Desktop & Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Feedback link opens pop up | Feedback link clicked | PASS | Desktop & Mobile |
| Phone link opens App | Phone link clicked | PASS | Desktop & Mobile |
| Email link opens App | Email link clicked | PASS | Desktop & Mobile |
| Social links open in new tab | Social links clicked | PASS | Desktop & Mobile |
| Contact Form Tests | - | - | - |
| Name field required; form should issue warning | Leave name field blank and click submit | PASS | Desktop & Mobile |
| Email field required; form should issue warning | Leave email field blank and click submit | PASS | Desktop & Mobile |
| Email must be in email format, ie. Contain @ symbol and domain address | Enter email without @ symbol, Enter email with @ symbol without domain | PASS | Desktop & Mobile |
| Feedback icons change when clicked | click all feedback radio inputs | PASS | Desktop & Mobile |
Performance testing was carried out using GTmetrix & Lighthouse. The initial results were very impressive but there were areas for improvement. Full test results are available to view in the Performance & Accessibility Test Result Document. The biggest performance inhibitor is related to a 3rd party library - Swiper JS. I am currently researching Vanilla Javascript solutions for providing the same functionality as this library.
Some minor issues in regards to ARIA and a11y are present throughout the site. I aim to have these issues fixed once my knowledge and skills improve. Results of a11y testing can be found in the Performance & Accessibility Test Result Document. I am waiting for feedback from users to identify further areas for improvement.