W3C Markup validation service was used to test site and ensure no errors were made. When the website was run through the website 5 errors were found;
- The element “button” must not appear as a descendant of the “a” element - This was present throughout the pages on the website which have now been fixed.
- The element “hr” not allowed as child of element “ul” in this context.
- This was present throughout the pages on the website which have now been fixed.
- Element “img” is missing required attribute “src” (line 264).
- An “img” element must have an “alt” attribute.
- This was present throughout the pages on the website which have now been fixed.
- The “aria-labelledby” attribute must point to an element in the same document (line 242).
JSHint was used to test the javascript code and ensure no errors or typos were returned . When the JS code was run through the website a total of 51 warnings was returned which mostly consisted of missing semi-colons and undefined variables.
Jasmine Testing was used to test javascript functions throughout the website. The jasmine testing can be found here.
Please see below to run the jasmine tests:
- Open the jasmineTesting.html.
- Run the html file and view it in your browser to see the test results.
- As a new visitor to the website, I want to easily be able to search for my next holiday destination preview.
- Once the user lands on the page they are able to see the title “Search for your next destination”
- Scrolling down the page slightly the user can then type into the search bar and search for their next holiday destination.
- Also by pressing the navigation bar they have a link to the search section of the page.
- Landing section > scroll down slightly > search for holiday destination.
- As a new visitor to the website, I want concise and easy to read information about the destination I have chosen such as tourist attraction and points of interests preview.
- On the landing page of the website there is a call to action button “Get Inspired” which jumps the user to the recommended destinations. The user can then select a city. A modal page pops up with information about the destination.
- On the landing page of the website they can scroll down to the search bar and type in their desired city. Once selected a modal page pops up with information about the destination.
- If the user clicks on a recommended city or searches the same city in the search bar the google map and place api returns the same information.
- As a new visitor to the website, I want inspiration/ideas on the best holiday destinations to visit preview.
- The recommended section of the website recommends to the user 6 ideas from the best destinations around the world.
- On the landing page of the website there is a call to action button “Get Inspired” which jumps the user to the recommended destinations. The user can then select a city. A modal page pops up with information about the destination.
- As a client who knows where they want to go on holiday, I want to be able to view information on things I can do once I’m there preview.
- On the landing page the user can scroll down to the search bar and type in the city they want to go on holiday. A modal page will then pop up with information on the city such as tourist attraction, restaurants and hotels.
- As a client who knows where they want to go on holiday, I want to be able to view information on hotels and book accommodation preview.
- On the landing page the user can scroll down to the search bar and type in the city they want to go on holiday. A modal page will then pop up with information on the city and hotels in the area. A call to action button is present “Book now” which then leads the user to the hotel website to book accommodation.
- As a returning visitor to the website, who has booked a hotel through the link, I want to be able to contact Time Travel if I have any issues preview.
- On the landing page the user can scroll down to the contact us section of the page and fill out contact form which is then sent to Travel Time team. The user needs to provide contact details such as name, phone number and email address.
- Also by pressing the navigation bar they have a link to the contact us section of the page.
- As a potential customer, I want to be able to contact Time Travel if I have any issues preview.
- On the landing page the user can scroll down to the contact us section of the page and fill out contact form which is then sent to Travel Time team. The user needs to provide contact details such as name, phone number and email address.
- Also by pressing the navigation bar they have a link to the contact us section of the page.
The manual logical testing consisted of opening each section of the page and modals on different devices to ensure the content was displayed correctly. Clicking on each link in the navigation bar was also tested to ensure they work and direct the user to the correct page. Any buttons on the page was tested to verify they work and direct to the correct section. Social media links in the footer was tested to confirm they direct the user to the correct platform. Please see below for breakdown on each individual section.
- Asked friends and family to test website on their own devices and report any errors.
- I viewed my website on several devices to check for any errors.
- I viewed website on Safari, Firefox and Chrome to check for any errors.
Navigation Icon;
- Open page on desktop to verify navigation bar is displaying correctly.
- Click on each navigation bar link to ensure they work and direct to the correct page.
- Change display from desktop to mobile to ensure navigation icon is positioned correctly.
Issues
- On tablet and medium screen sizes the search section did display correctly as the navigation bar pushed content over the search bar preview
Call to action button;
- Click on “get inspired” button and ensure it directs the user to the recommendation section.
Callout text;
- Ensure on smaller screen sizes the text is responsive and the paragraph length changes to suit smaller screen sizes.
Background Image;
- Ensure the background image for the callout section changes every 3 seconds.
Search bar;
- Ensure the google auto place feature activates and predicts the city name when the user begins to type.
- When you click on a city from the auto place feature a modal page pops up with information about the city.
- Change the screen size from desktop to tablet and smaller screen sizes to ensure the bar is displayed correctly.
Recommendations;
- Ensure that when you hover over each recommendations the “shrink” animation is activated.
- Ensure when you click on a recommendation a modal page pops up with information regarding the selected city.
- Change the screen size from desktop to tablet and smaller screen sizes to ensure the recommendations are responsive and displayed correctly on the grid.
Contact form;
- Open on desktop and ensure content is being displayed correctly.
- Change display from desktop to mobile and ensure content is being displayed correctly.
- Try to submit form without any details to confirm error message appears.
- Try to submit form with incorrect email format to confirm error message appears.
Footer;
- Open on desktop and ensure content is being displayed correctly.
- Change display from desktop to mobile and ensure content is being displayed correctly.
- Click on each social media icon to ensure the user is directed to the correct social media platform.
Header;
- Ensure the correct city appears as the header based on the user search.
- Ensure the correct country appears as the sub-header based on the user search.
- Change display from desktop to mobile and ensure content is being displayed correctly.
Google Map;
- Change display from desktop to mobile and ensure content is being displayed correctly.
- Click on markers to ensure an information window pops up.
Hotel Section;
- Ensure hotel cards are displayed correctly with the correct information.
- Change display from desktop to mobile and ensure content is being displayed correctly.
Tourist Attraction Section;
- Ensure attraction cards are displayed correctly with the correct information.
- Change display from desktop to mobile and ensure content is being displayed correctly.
Close buttons;
- Ensure when the “close” icon and “close” button is clicked the modal collapses.
- Change display from desktop to mobile and ensure content is being displayed correctly and the buttons again close the modal.
Quick Guide Section;
- Ensure the correct information appears in relation to the city selected.
- Change display from desktop to mobile and ensure content is being displayed correctly.
- Enter details into the form and click send to ensure the correct information is sent to the site owners email address.
Issues
- No success notification appeared to confirm to the user that their message was sent.
- The data remained in the contact form after submission preview
- Ensure the location on the map is correct in relation to the city searched.
- Ensure the markers displayed are within the radius specified.
- Ensure the markers displayed on the map are in relation to the desired points of interest.
- Click on markers to ensure an information window appears.
- Ensure the data in the information window is correct preview.
- Ensure the returned information from the google place API is in relation to the city selected.
- Ensure the data returned is displayed correctly in the hotel cards i.e image, name, address, user rating and website link.
Issues
- Some hotels did not return the correct data or was missing data such as an image of the facility preview.
- Ensure when you click the search bar and start to type data the google autocomplete predicts the city based on the data typed preview.
