As a system user I want to compare the forecast and in situ data for a single city (Part 1)

[amehta-scottlogic]

Description

This page will be used to compare forecast/in situ for a single city.

This ticket has scope only for the displaying the forecast in the UI for a single city

We have decided to use echarts for the charting library for now.

For now let's not use redux, something like this might be simpler: https://tanstack.com/query/latest/docs/framework/react/guides/queries

Acceptance Criteria

• Under route /city/{city_name}, the UI will show the a line chart showing forecast data for a city
  • X axis = time, every 3 hours, Y axis = AQI level
  • Use API /air-pollutant/forecast to fetch forecast data for city
  • Data should be for 5 day range, forecast_base to forecast_base + 5
  • A loading indicator should be shown whilst fetching the data (check if echarts has something like this for the chart itself, otherwise overall spinner could be used)

Test Checklist:

• [x] Test Analysis & discussion with developer
• [x] Write Test Cases / Charters
• [ ] Test Cases & Charters Reviewed
• [ ] Test Cases Executed
• [ ] Test Charters Executed
• [x] Regression tests executed
• [ ] Automation Tests added to project

[mnyamunda-scottlogic]

Test Analysis

• Verify that mocked API data is displayed appropriately on the graph (manual) -> Can then be automated as a screenshot assertion in playwright -> It seems only graphs with both forecast and in-situ are displayed.

• Verify that data shown only spans 5 days

• Verify that users have visual feedback whilst the data is being loaded. (Loading animation)

• Verify that if a user enters an invalid location (in the address bar for example) then they should be met with a "Location does not exist" page or similar (Exploratory)

• Users should be able to zoom into the graph to just see one day. Assert a 1 day view via screenshot

• Compare datapoints to recent database entries (Exploratory)

Echart functionality

• Verify that a user can remove a sensor location. (Remove a sensor then assert a screenshot of how new graph should look)
• Users should be able to zoom into the graph to just see one day. Assert a 1 day view via screenshot

Additionally mock these time/dates to prevent oddities in graphs. Exploratory verify data points match the database values Exploratory

[mnyamunda-scottlogic]

FIndings

• On mocked data if user is zoomed in and deletes a line they are zoomed out.
• Currently there is no fallback page/error message for invalid city URL this is addressed here Can create automation for this when available.

[mwalker-scottlogic]

Analysis review - worth checking the scope of this ticket. The ticket title and description don't align. Is it just the forecast AQI plot? If so is it just the overall AQI or pollutant level AQIs too?

[mnyamunda-scottlogic]

Loading Icon is to be covered as a manual check as opposed to automation. Due to different browser behaviours.