Skip to content

Frontend Test Cases

GERLITO CHAGAS edited this page Jun 13, 2023 · 11 revisions

Frontend Test Cases

Introduction

This document lists the test cases for each feature under a user story. All features included are frontend-related.

US #1: As a data scientist / data analyst / programme specialist, I want to see a list of all models / results in the catalogue

1. Landing page

Test 1: The correct elements are visible in the landing page.

Steps:
1. Visit the link
2. Check the elements in the landing page.
Expected output:
The user should see the ff elements in the landing page:
- header
- hero
- featured
- browse by tags
- browse by country/region

Test 2: Auto-populate filter

Steps:
1. Visit the link
2. Click on a tag
3. Verify if the tag is auto-populated in the filters
Expected output:
The tag should be auto-populate in the filters and the search results should be updated.

Test 3: Clicking on the tag in the landing page should reset the filters

Steps:
1. Visit the link
2. Go to the catalogue page
3. Select any filters
4. Go to the landing page
5. Click on the tag
Expected output:
Once redirected to the catalogue page, all the other filters should be reset and the only filter populated is the selected tag

Test 4: Auto-populate search term

Steps:
1. Visit the link
2. Type the search term "pov" on the search box
3. Click on the search icon
Expected output:
Once redirected to the catalogue page, the search bar should be auto-populated with the search term and search results should be updated.

Test 5: Searching from the landing page should reset the filters

Steps:
1. Visit the link
2. Go to the catalogue page
3. Select any filters
4. Go back to the landing page
5. Type the search term "pov" on the search box
6. Click on the search icon
Expected output:
Once redirected to the catalogue page, all the other filters should be reset and the search box should be auto-populated with the search term.

2. List of dataset and models

Test 1: Correct elements should be displayed.

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
Expected behavior:
In the catalogue page, the ff elements should be present:
- filters section
- search box
- number of results
- list of search results

Test 2: By default, all models and datasets should be displayed.

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
Expected behavior:
In the catalogue page, the # of results available should be equal to the total number of catalogue items (4).

Test 3: Clicking on a search result should redirect the user to the selected catalogue item page.

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
3. Click the first search result
Expected behavior:
The user should be navigated to the catalogue item page with the same id as the search result they selected

Test 4: Pagination

Steps:
1. Visit /catalogue page
2. Assert that the pagination component renders
3. Assert that the correct number of pages are displayed (currently: 2)
4. Assert that the `total page items` log is displayed (currently: 6)
5. Click on page 2
6. Assert that the correct number of items is displayed (currently: 1)
7. Click on page 1 and assert that the correct number of items are displayed
8. Repeat steps 5-7 but with the arrow buttons instead

3. Searchbox

Test 1: The search input should be at least 3 characters before it will do a search and return search suggestions

Steps:
1. Visit the link
2. In the searchbox, type "po"
Expected behavior:
The search bar should not give out any search results

Test 2: The search input should be present in the name of the dataset/model regardless of its case

Steps:
1. Visit the link
2. Go to the catalogue page
3. In the searchbox, type "pov"
Expected behavior:
The search suggestions should appear and all entries under it should have a "pov" in the name of the dataset/model

Test 3: Clicking on a search suggestion should auto-populate the search term to its name

Steps:
1. Visit the link
2. In the searchbox, type "thailand"
3. Click the first search suggestion
4. Once navigated to the catalogue item page, click on the Catalogue button in the header
Expected behavior:
The user should be navigated to the catalogue page and the search bar should be auto-populated with "Air Quality Model for Thailand"

Test 4: Clear searchbar

Steps:
1. Visit the link
2. Go to the catalogue page
3. In the searchbox, Type "philippines"
4. Press enter
3. Click on the "X" button in the search box
Expected behavior:
The search bar should be cleared out and the search results should show all catalogue items.

4. Filters

Test 1: Correct elements should be displayed.

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
Expected behavior:
In the catalogue page, the ff filters should be present in the filters box:
- country
- year/period
- organization
- tags

Test 2: Filter options in alphabetical order

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
3. Click on the country/region, organization, and tags
4. Check their options list if its in alphabetical order
Expected behavior:
The filter options should be in alphabetical order.

Test 3: Clear filter

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
3. Click on the country/region filter and choose "Philippines" and "Thailand"
4. Click on the "X" button in the rightmost part of the filter
Expected behavior:
The country/region filter should be cleared out and the search results should show all catalogue items.

Test 4: Filter for a custom tag that is not part of the tag options

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
3. Type "test" in the tag filter typeahead and press enter
Expected behavior:
There should be 0 search results returned.

Test 5: Filter for start year only

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
3. Select "2017" as the start year and leave the end year blank in the year/period filter
Expected behavior:
The search results should be updated to include entries with year/period from 2017 up to the most recent.

Test 6: Filter for end year only

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
3. Select "2020" as the end year and leave the start year blank in the year/period filter
Expected behavior:
The search results should be updated to include entries with year/period from 2020 down to the earliest year.

Test 7: Filter year/period for entries spanning multiple entries

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
3. Select "2017" as the start year and "2021" as the end year
Expected behavior:
The search results should be updated to include entries from 2017 up to 2021. The entry for "Air Quality Model for Thailand (2020-2023)" should be present.

Test 8: Filter for a single year

Steps: 
1. Visit the link
2. Click on the catalogue page button in the header
3. Select "2016" as the start year and "2016" as the end year
Expected behavior:
There should be 2 entries in the search results, both with the year 2016.

Test 9: Model/Dataset Filter

Steps: 
1. Visit /catalogue page
2. Assert that the of "All" radio filter is ticked by default
3. Assert that the correct number of all results are displayed (currently: 6)
4. Click on the "Models" radio filter
5. Assert that the number of results available changed (currently: 5)
6. Click on the "Datasets" radio filter
7. Assert that the number of results changed (currently: 1)

Test 10: Dropdown filter

Steps: 
1. Visit /catalogue page
2. Assert that the "None" option is ticked by default
3. Click on the filter and tick year ascending
4. Assert that the options are now displayed in ascending year order
5. Repeat for the remaining filter options (year descending, name ascending, name descending)

5. Featured Dataset

Test 1: At most 3 featured datasets only

Steps:
1. Visit the link
2. Check the number of featured datasets
Expected behavior:
There should be at most 3 featured datasets only

Test 2: Correct elements should be displayed.

Steps:
1. Visit the link
2. Check the information in each featured dataset card
Expected behavior: 
The ff information should be present in each featured dataset card:
- name of the dataset/model
- organization
- country/region
- year/period

Test 3: Clicking on a featured dataset should redirect the user to the selected catalogue item page.

Steps:
1. Visit the link
2. Click on one featured dataset
Expected behavior:
The user should be navigated to the catalogue item page with the same id as the featured dataset they selected

6. Contribution page

Test 1: Footer links should render in all pages and should lead to contribution page

Steps:
1. Visit homepage
2. Click on the catalogue button in the header
2. Click on the first result in the catalogue page
3. Click on the anchor link in the footer
Expected behavior:
- Assert that the footer renders on all the visited pages
- Assert that the anchor link in the footer redirects to the contribution page
- Assert that the contribution page renders
- Assert that the markdown file being imported by the contribution page is working

US #2: As a programme specialist / data scientist, I want to know that I can trust this data #2

1. Catalogue item page

Test 1: The correct elements are visible in the landing page.

Steps:
1. Visit the link
2. Click on the catalogue page button in the header
3. Click the first search result in the catalogue page
Expected behavior:
Once redirected to its catalogue item page, the user should see the ff elements:
- organization
- name of the dataset/model
- tabs for "Overview", "Data", and "Related Links"
- country/region, year/period, data created, date updated (all if applicable), and organization in the rightmost section
- list of tags
- description under the Overview tab
- evaluation metric under the Overview tab (if applicable)

2. Data schema

Test 1: Correct columns for data schema

Steps:
1. Visit the link
2. Type "thailand"
3. Click on the "Air Quality Model for Thailand" search suggestion
4. In the catalogue item page, click on the "Data" tab
5. Scroll down to data schema
Expected behavior:
The data schema table should have two columns: Column Name and Type
Clone this wiki locally