Platform pages using Next.js app router

[abkfenris]

Working on getting the pages that display the map of platforms working with Next.js app router.

• Routing and layout scaffolding
• Providers
  • Prefetching react-query data and hydration
  • Redux for units
  • Redux for map location?
  • Google analytics listener
• Navbar
• Map
• Index
  • Wagtail
  • Superlatives
• Platform sidebar
• Single chart
• Wind chart
• Current conditions
• Forecasts
• All observations table
• Region pages
• Update nav for new region pages
• [?] Zoom map to region on change
• Remove old routes and pages
• Remove superlatives error and return null instead
• Generate static params
  • Regions
  • Platforms
  • Platform/observation
  • Platform/forecast
• Tests
  • Cypress
  • Storyshots
  • React test renderer

[cypress]

28 failed tests on run #962 ↗︎

28

9

3

0

0

Details:

Fix build by disabling modeling related work for the moment
Project: neracoos-buoy-map-1	Commit: 170aaed079
Status: Failed	Duration: 01:16 💡
Started: Nov 3, 2023 4:07 PM	Ended: Nov 3, 2023 4:08 PM

  Platform/44007_spec.js • 8 failed tests

View Output Video

Test		Artifacts
Platfrom 44007 > Can get to from Home Page		Test Replay Output Screenshots
Platfrom 44007 > Shows platform status		Test Replay Output Screenshots
Platfrom 44007 > Shows current conditions		Test Replay Output Screenshots
Platfrom 44007 > Shows wind plot		Test Replay Output Screenshots
Platfrom 44007 > Shows wave forecast		Test Replay Output Screenshots
Platfrom 44007 > Has More info menu		Test Replay Output Screenshots
Platfrom 44007 > Updated recently		Test Replay Output Screenshots
Platfrom 44007 > Can view all observations		Test Replay Output Screenshots

  Platform/a01_spec.js • 9 failed tests

View Output Video

Test		Artifacts
Platform A01 > Will get redirected		Test Replay Output Screenshots
Platform A01 > Shows platform status		Test Replay Output Screenshots
Platform A01 > Shows current conditions		Test Replay Output Screenshots
Platform A01 > Shows air temp plot		Test Replay Output Screenshots
Platform A01 > Shows wind plot		Test Replay Output Screenshots
Platform A01 > Shows wave forecast		Test Replay Output Screenshots
Platform A01 > Has More info menu		Test Replay Output Screenshots
Platform A01 > Updated recently		Test Replay Output Screenshots
Platform A01 > Can view all observations		Test Replay Output Screenshots

  Platform/m01_spec.js • 7 failed tests

View Output Video

Test		Artifacts
Platfrom M01 > Will get redirected		Test Replay Output Screenshots
Platfrom M01 > Shows platform status		Test Replay Output Screenshots
Platfrom M01 > Shows air temp plot		Test Replay Output Screenshots
Platfrom M01 > Shows wave forecast		Test Replay Output Screenshots
Platfrom M01 > Has More info menu		Test Replay Output Screenshots
Platfrom M01 > Updated recently		Test Replay Output Screenshots
Platfrom M01 > Can view all observations		Test Replay Output Screenshots

  Platform/mooring_location_regression_spec.js • 2 failed tests

View Output Video

Test		Artifacts
Mooring location regressions > Finds the correct location for B01		Test Replay Output Screenshots
Mooring location regressions > Finds the correct location for I01		Test Replay Output Screenshots

  Region/long_island_spec.js • 1 failed test

View Output Video

Test		Artifacts
Region: Long Island > Shows only a subset of platforms		Test Replay Output Screenshots

The first 5 failed specs are shown, see all 6 specs in Cypress Cloud.

Review all test suite changes for PR #2627 ↗︎

[abkfenris]

Currently having issues with Cypress tests due to hydration, and we are not alone. It appears to be a bug deep within react. Some issues for reference:

• Hydration errors in Cypress when using React 18, Next, and server components cypress-io/cypress#27204
• Bug: Hydration mismatch error due to plugins generating script tag on top facebook/react#24430

[abkfenris]

Using <Suspense> for client only components: https://react.dev/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content

[abkfenris]

@Adelle-Pitsas and my plan for now is to disable the Cypress tests until the linked issues are solved, and use the Cypress test scripts as instructions for manual testing.

[sentry-io]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ ReferenceError: bbox is not defined bbox(app/(platformMap)/map.tsx) View Issue

_{Did you find this useful? React with a 👍 or 👎}