test: add favorites spec. (#182)

.github/workflows/e2e.yml

@@ -8,7 +8,7 @@ on:
     inputs:
       branchName:
         description: 'Branch name.'
-        default: 'main'
+        default: 'develop'
         type: string
       testPath:
         description: 'Files to test.'

packages/ui/src/hooks/useInitMap.ts

@@ -33,7 +33,13 @@ const useInitMap = () => {
     mapRef.current = lMap(mapNode.current, {
       zoomControl: false
     })
-    mapRef.current.createPane(VEHICLE_PANE).style.zIndex = '650'
+    const pane = mapRef.current.createPane(VEHICLE_PANE)
+
+    // Ensure vehicle markers overlay stop markers, etc.
+    pane.style.zIndex = '650'
+    // Ensure e2e tests pass on Linux ('subtree intercepts pointer events' error message playwright)
+    pane.style.pointerEvents = 'none'
+
     popupRef.current.setContent(selectionRef.current)
     popupRef.current.on('remove', () => {
       dispatch({ type: 'selected', value: undefined })

packages/ui/src/modules/favorites/components/favoriteStop.tsx

@@ -108,7 +108,7 @@ const FavoriteStop: FC<FavoriteStopProps> = ({ selection, size = 'medium' }) =>
   if (isFavoritable) {
     return (
       <Tip title={favorite ? 'Remove favorite.' : 'Add favorite.'}>
-        <Button>
+        <Button data-testid="favoriteStop">
           <Star size={size} color={SY30T} outlined={!favorite} onClick={onClick} />
         </Button>
       </Tip>

packages/ui/src/modules/favorites/components/favorites.tsx

@@ -254,6 +254,7 @@ const Favorites = memo(function Favorites() {
                               <ReactColorA11y colorPaletteKey={mode}>
                                 <h5>
                                   <Link
+                                    data-testid="favoriteLink"
                                     to={`/stop/${fav.agency.id}/${fav.route.id}/${fav.direction.id}/${fav.stop.id}`}>
                                     {fav.stop.title}
                                   </Link>

playwright.config.ts

@@ -45,8 +45,6 @@ export default defineConfig({
         ignoreHTTPSErrors: Boolean(process.env.CI)
       }
     },
-
-    /* Test against mobile viewports. */
     {
       name: 'Mobile Chrome',
       use: {

tests/favorites/addDelete.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test'
+
+test('Add and then delete a favorite stop.', async ({ page, context }) => {
+  // Navigate to favorites tab
+  await page.goto('/')
+  await page.getByRole('listitem', { name: 'Favorites' }).getByRole('button').click()
+
+  // Expect empty state
+  await expect(page.getByRole('heading', { name: 'Favorite Stops' })).toBeVisible()
+  await expect(page.getByText('You can select up to 3')).toBeVisible()
+
+  // Change to bus selector tab
+  await page.getByRole('listitem', { name: 'Selector' }).getByRole('button').click()
+  await expect(page.getByRole('heading', { name: 'Bus Selector' })).toBeVisible()
+
+  // Select first agency, click first stop
+  await page.getByText('Agency').click()
+  await page.getByRole('option').first().click()
+  await page.getByText('Stop', { exact: true }).click()
+
+  // Save stop option text, click favorite icon, change to favorites tab
+  const stopOption = page.getByRole('option').first()
+  const stopOptionText = await stopOption.innerText()
+  await stopOption.click()
+  await page.getByTestId('favoriteStop').click()
+  await page.getByRole('listitem', { name: 'Favorites' }).getByRole('button').click()
+
+  // Expect empty state to be replaced with a corresponding favorite
+  await expect(page.getByText('You can select up to 3')).not.toBeVisible()
+  const favLink = page.getByTestId('favoriteLink')
+  const favLinkText = await favLink.innerText()
+  expect(stopOptionText).toEqual(favLinkText)
+
+  // Expect localStorage to contain the favorite
+  let storage = await context.storageState()
+  let favoritesEntry = storage.origins[0].localStorage.find(
+    entry => entry.name === 'busmap-favorites'
+  )
+  expect(favoritesEntry).toBeTruthy()
+  let favorites = JSON.parse(favoritesEntry?.value ?? 'null')
+  expect(favorites.length).toEqual(1)
+  expect(favorites[0].stop.title).toEqual(stopOptionText)
+
+  // Delete the favorite and restore the empty state
+  await page.getByLabel('Delete').getByRole('button').click()
+  await expect(page.getByText('You can select up to 3')).toBeVisible()
+  storage = await context.storageState()
+  favoritesEntry = storage.origins[0].localStorage.find(
+    entry => entry.name === 'busmap-favorites'
+  )
+  favorites = JSON.parse(favoritesEntry?.value ?? 'null')
+  expect(favorites.length).toEqual(0)
+})

tests/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["*/*.spec.ts"]
+}