Home Route UI Test Cases for Nxt Watch
Home Route UI Tests
Navigation and Video Lists
The page should consist of at least two HTML list items. The navItemsList and videosList received from the response should be rendered using a unique key as a prop for each nav item and video item respectively.
Unauthenticated User Navigation
When “/” is provided as the URL by an unauthenticated user, the page should be navigated to the Login Route.
Authenticated User Navigation
When “/” is provided as the URL by an authenticated user, the page should be navigated to the Home Route.
Header Logo
The Home Route should consist of an HTML image element in the Header with the alt attribute value as “website logo” and src as the given logo URL.
Header Logo Link
The Home Route should consist of an HTML image element in the Header with the alt attribute value as “website logo” and src as the given logo URL wrapped with Link from react-router-dom.
Theme Button
The Home Route should consist of an HTML button element with the data-testid attribute value as “theme” in the Header.
Profile Image
The Home Route should consist of an HTML image element in the header with the alt attribute value as “profile” and src as the value of the given profile image URL.
Logout Button
The Home Route should consist of an HTML button element with text content as “Logout” in the Header.
Navigation and Video Lists
The Home Route should consist of at least two HTML unordered list elements, navItemsList and videosList, received from the response to display nav items and video items.
Home Link
The Home Route should consist of “Home” text wrapped with Link from react-router-dom.
Trending Link
The Home Route should consist of “Trending” text wrapped with Link from react-router-dom.
Gaming Link
The Home Route should consist of “Gaming” text wrapped with Link from react-router-dom.
Saved Videos Link
The Home Route should consist of “Saved videos” text wrapped with Link from react-router-dom.
Contact Us
The Home Route should consist of an HTML paragraph element with text content starting with “CONTACT US” in the sidebar.
Facebook Logo
The Home Route should consist of an HTML image element with the alt attribute value as “facebook logo” and src as the value of the given facebook logo URL.
Twitter Logo
The Home Route should consist of an HTML image element with the alt attribute value as “twitter logo” and src as the value of the given twitter logo URL.
LinkedIn Logo
The Home Route should consist of an HTML image element with the alt attribute value as “linked in logo” and src as the value of the given linked in logo URL.
Enjoy Message
The Home Route should consist of an HTML paragraph element with text content starting with “Enjoy! Now to see your channels and recommendations!” in the sidebar.
Nxt Watch Logo in Banner
The Home Route should consist of an HTML image element with the alt attribute value as “nxt watch logo” and src as the value of the given nxt watch logo URL should be displayed in the banner.
Premium Banner Text
The Home Route should consist of an HTML paragraph element with text content starting with “Buy Nxt Watch Premium” in the banner.
Get It Now Button
The Home Route should consist of an HTML button element with text content as “GET IT NOW” in the banner.
Close Button
The Home Route should consist of an HTML button element with data-testid “close” should be displayed in the banner.
Banner Container
The Home Route should consist of a styled HTML container element with data-testid as “banner” and background image URL as the URL provided for the banner.
Banner Container
The Home Route should consist of a styled HTML container element with data-testid as “banner” and background image URL as the URL provided for the banner.
Search Input
The Home Route should consist of an HTML input element with the type attribute value as “search”.
Search Button
The Home Route should consist of an HTML button element with the data-testid attribute value as “searchButton”.
HTTP GET Request on Open
When the Home Route is opened, an HTTP GET request should be made to homeVideosApiUrl.
Loader Display
When the Home Route is opened, an HTML container element with the data-testid attribute value as “loader” should be displayed while the HTTP GET request is in progress.
Video Thumbnails
When the HTTP GET request in the Home Route is successful, the page should consist of HTML image elements with the alt attribute value as “video thumbnail” and src as the value of the key “thumbnail_url” of the video item from the videosResponse.
Channel Logos
When the HTTP GET request in the Home Route is successful, the page should consist of HTML image elements with the alt attribute value as “channel logo” and src as the value of the key “profile_image_url” in the channel inside the video item from the videosResponse.
Video Titles
When the HTTP GET request in the Home Route is successful, the page should consist of HTML paragraph elements with text content as the value of the key “title” in each item from the videosResponse.
Channel Names
When the HTTP GET request in the Home Route is successful, the page should consist of HTML paragraph elements with text content as the value of the key “name” in each item from the videosResponse.
View Counts
When the HTTP GET request in the Home Route is successful, the page should consist of HTML paragraph elements with text content as the value of the key “view_count” in each item from the videosResponse.
Published Dates
When the HTTP GET request in the Home Route is successful, the page should consist of HTML paragraph elements with text content as the value of the key “published_at” in each item from the videosResponse.
Search Input Display
When a non-empty value is provided in an HTML input element for search, that text should be displayed in the HTML input element.
Search Functionality
When a value is provided in the HTML input element for search and the “Search” button is clicked, an HTTP GET request should be made with the value provided in the HTML input element as the value to query parameter “search”.
Video Item Link
The Home Route should consist of a Video item wrapped with Link from react-router-dom.
Video Item Details Navigation
When a Video Item is clicked in the Home Route, the page should be navigated to the Video Item Details route with “/videos/:id” in the URL path.
Empty Videos List
When the HTTP GET request made to homeVideosApiUrl returns the videos list as empty, the page should consist of the HTML image element with the alt attribute value as “no videos” and src as the given “No Videos view image URL”.
No Search Results Message
When the HTTP GET request made to homeVideosApiUrl returns the videos list as empty, the page should consist of the HTML main heading element with text content as “No Search results found”.
Search Suggestion
When the HTTP GET request made to homeVideosApiUrl returns the videos list as empty, the page should consist of the HTML paragraph element with text content as “Try different key words or remove the search filter”.
Retry Button
When the HTTP GET request made to homeVideosApiUrl returns the videos list as empty, the page should consist of the HTML button element with text content as “Retry”.
Retry Functionality
When the HTTP GET request made to homeVideosApiUrl returns the videos list as empty and the “Retry” button is clicked, an HTTP GET request should be made to homeVideosApiUrl.