[ QA ] - Device/Browser Responsive Testing

[JayWebz]

Making sure the website looks good across all devices.

Device/Browser Testing Procedure:
https://github.com/CAIDA/ioda-ui/wiki/Device-&-Browser-Testing-Procedure

Mac Desktop

• Chrome
• Firefox
• Safari
• Opera

iOS Tablet

• Chrome
• Firefox
• Safari
• Opera
• UC Browser

iOS Mobile

• Chrome
• Firefox
• Safari
• Opera
• UC Browser

Windows Desktop

• Chrome
• Firefox
• Edge
• IE Redirect to Edge

Android Tablet

• Chrome
• Firefox
• Edge
• IE Redirect to Edge
• Opera
• UC Browser

Android Phone

• Chrome
• Firefox
• Edge
• Opera
• UC Browser

Most common Screen Resolutions with IODA v1 visitors

• 1920x1080 2.5k
• 1024x768 1.6k
• 1440x900 1k
• 1680x1050 1k
• 3840x2160 1k
• 800x600 1k

Issues discovered

firefox on macbook

• search drop down layers under map zoom on home page when on mobile
• remove searchbar placeholder on home page
• Map country label layers over the nav bar, should layer under
• Change label on dashboard view-changer button to "switch to [OTHER OPTION]" with a picture of that icon.
• alert feed time cell aligns to top of cell instead of center
• Regional Map does not appear on smaller screen sizes - https://dev.v2.ioda.caida.org/country/MR?from=1627776000&until=1630454400. breakpoint screen width at 80rem.

Chrome/Firefox on Android

• zoom on xy plot, the reset zoom/toggle controls are layered over the legend
• tooltip on modal goes off of page
• Time column in alert feed displays time broken up on two lines
• xy zoom functionality layers over legend
• zoom/pan toggle needs updated styles
• ASN dashboard tab loading bar enables some horizontal scrolling

Opera on macbook

• home page search bar has orange button when hovering over a search result.
• check max button should display max value available instead of defaulting to 150. - https://dev.v2.ioda.caida.org/country/BZ

UC Browser on Android

• entity page tooltips xy plot title, event feed title, regional outages title, and AS outages title should go down instead of to the right of the ? icon, like how the modal is.
• On entity page, modals have side scroll
• modal close icon is aligned too low, not center
• ASN modal check max button does not reflect max value possible, still says 150.
• time range selector doesn't seem to set time values, range loaded defaults to 12:00am - 11:59pm

Opera/Edge on Android

• preload chart, time range, header images (images are not sizing consistently with chrome/firefox)
• Add more gutter space on mobile, it can be tough to scroll around charts
• Move date range copy click message to left side of touchpoint instead of right

Chrome on Windows/Firefox

• time range modal layered over header
• entity page tooltips not vertically aligning correctly
• 2020 iran report images don't have consistent shadows
• help page outage severity scores Alert Area space needed between italic words
• When directly linking to the asn dashboard tab url, chart data does not initially display

Edge and IE on Windows

• Add polyfill so app can render in Microsoft Edge/ IE for windows

iOS tablet on Safari/Chrome

• Search bar placeholder/input text has too much top padding on control panel, pushes letters below visible space
• Modal tooltip not aligned correctly where it populates on landscape view
• Check max/check all button text breaks into two lines on landscape view
• Set explicit fonts for zoom/toggle button text, defaulting to times new roman it looks like
• date range copied text should swap to the right side on tablet landscape mode, causing horizontal scroll
• In Modal, if there are no raw signals to load, the loading bar doesn't go away (asn's with asn-related outages sees this often enough)
• zoom buttons toggle needs less spacing, reset zoom text overlapping