features-function-testing.md

Feature, Functional & Useability Testing

I will be testing all my functions and features within each section of my site and ensuring that it is useable across different browsers which are as follows: Chrome, Edge and Firefox. The devices I would be using to run the tests are as follows: 13inch Macbook Pro, 10.2 inch iPad and 6.5 inch iPhone Pro Max.

A pass would mean that the feature that I am testing has been run on the said browsers and devices, in a situation one of the browsers and/or devices has an issue, it would be considered as a fail.

Navigation Bar

Feature/Function	Description	Pass	Fail
'Home' hover	When hovering over 'Home', the font becomes bold and underlined	✔️
'Home' active	When on 'Home' page, the link would be on a fixed style which is bold and underlined	✔️
Nav bar-style return when not active	When you are on 'My Journey' page, the rest of the navigation bar links would return to normal styling	✔️
'Country' hover	When hovering over 'Country', the font becomes bold and underlined	✔️
'Country' active	When on 'Country' page, the link would be on a fixed style which is bold and underlined	✔️
Nav bar-style return when not active	When you are on 'My Portfolio' page, the rest of the navigation bar links would return to normal styling	✔️
'Contact Us' hover	When hovering over 'Contact Us', the font becomes bold	✔️
Nav bar-style return when not active	When you are on 'Connect' page, the rest of the navigation bar links would return to normal styling	✔️
The layout on mobile view	A hamburger menu option would be visible and when clicked, options to other pages woudl be available	✔️

Footer

Feature/Function	Description	Pass	Fail
'Home' quick link	When clicked, to be directed to the 'Home' page	✔️
'Country' quick link	When clicked, to be directed to the 'Country' page	✔️
'Contact Us' quick link	When clicked, a Modal would popup in the middle of the page	✔️
Social Media icons hover	A shadow effect would appear when hovering over the social media icons	✔️
Facebook link	Facebook would open in a new tab when clicked	✔️
Instagram link	Instagram would open in a new tab when clicked	✔️
Twitter link	Twitter would open in a new tab when clicked	✔️
LinkedIn link	LinkedIn would open in a new tab when clicked	✔️
Footer format on Mobile device	When the site is visited on a mobile device, to have the layout of the footer in a row by row case above each other rather than next to each other	✔️
Font	Displaying 'Kalam' as the font family	✔️

Home Page

Feature/Function	Description	Pass	Fail
Carousel header	Different images to rotate	✔️
Carousel controls	To be able to manually change the images by clicking on the left and right arrows	✔️
Introduction text	To be displayed under the carousel images	✔️
Card Images	Cards to be placed under the introduction displaying different images	✔️
Card Images hover	When the mouse is hovered over the cards, they would flip and show the back of them with information and a button	✔️
Card Images button	When the card has been flipped, when the button is clicked, to be redirected to a new tab with an external site to see more information	✔️
Font labels	Labels being displayed in 'Yatra One' as the font family	✔️
Font text	Text being displaying in 'Kalam' as the font family	✔️

Country Page

Feature/Function	Description	Pass	Fail
Carousel header	Different images to rotate	✔️
Carousel controls	To be able to manually change the images by clicking on the left and right arrows	✔️
Introduction text	To be displayed under the carousel images	✔️
'Select a country' button	A drop down to appear with a list of countries which would populate the web page	✔️
Auto-fill of information	Introduction of the country, top places and cusines with images and buttons, as well as a map to be visible	✔️
'Learn More!' button	When clicked, it would direct you to another tab and into another website which would tell you more about the place/cuisine you have clicked on	✔️
City search	Type in a city within that country as well selected a filter to show what you would like to see	✔️
Attraction results	Markers would be placed on the map and a results table would be displayed under the Map	✔️
Info popup	When a place is clicked within the results table, a popup would appear on the map with more details of the place	✔️
Font labels	Labels being displayed in 'Yatra One' as the font family	✔️
Font text	Text being displaying in 'Kalam' as the font family	✔️

Contact Us Modal

Feature/Function	Description	Pass	Fail
Visbile popup	When 'Contact Us' is clicked a popup would apper in the middle of the screen	✔️
Required fields	If one of the fields do not get filled, you would not be able to send a message	✔️
Sent confirmation	When the message has been successfully sent, another popup would appear, informing you that the message has been successfully sent	✔️
Font labels	Labels being displayed in 'Yatra One' as the font family	✔️

Return to main README.md