From d566e7285ae4661e36020e09bd6cda5257fbeac8 Mon Sep 17 00:00:00 2001 From: Morgan Ney Date: Fri, 19 Jan 2024 14:46:05 -0600 Subject: [PATCH] test: add favorites spec. (#182) --- .github/workflows/e2e.yml | 2 +- packages/ui/src/hooks/useInitMap.ts | 8 ++- .../favorites/components/favoriteStop.tsx | 2 +- .../favorites/components/favorites.tsx | 1 + playwright.config.ts | 2 - tests/favorites/addDelete.spec.ts | 53 +++++++++++++++++++ tests/tsconfig.json | 4 ++ 7 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 tests/favorites/addDelete.spec.ts create mode 100644 tests/tsconfig.json diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index f9b4a0c..0e046d2 100644 --- a/.github/workflows/e2e.yml +++ b/.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.' diff --git a/packages/ui/src/hooks/useInitMap.ts b/packages/ui/src/hooks/useInitMap.ts index a82e1ef..4dec67f 100644 --- a/packages/ui/src/hooks/useInitMap.ts +++ b/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 }) diff --git a/packages/ui/src/modules/favorites/components/favoriteStop.tsx b/packages/ui/src/modules/favorites/components/favoriteStop.tsx index 399fcf5..93cfbf4 100644 --- a/packages/ui/src/modules/favorites/components/favoriteStop.tsx +++ b/packages/ui/src/modules/favorites/components/favoriteStop.tsx @@ -108,7 +108,7 @@ const FavoriteStop: FC = ({ selection, size = 'medium' }) => if (isFavoritable) { return ( - diff --git a/packages/ui/src/modules/favorites/components/favorites.tsx b/packages/ui/src/modules/favorites/components/favorites.tsx index 852a48d..e11babc 100644 --- a/packages/ui/src/modules/favorites/components/favorites.tsx +++ b/packages/ui/src/modules/favorites/components/favorites.tsx @@ -254,6 +254,7 @@ const Favorites = memo(function Favorites() {
{fav.stop.title} diff --git a/playwright.config.ts b/playwright.config.ts index 0652320..1472244 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -45,8 +45,6 @@ export default defineConfig({ ignoreHTTPSErrors: Boolean(process.env.CI) } }, - - /* Test against mobile viewports. */ { name: 'Mobile Chrome', use: { diff --git a/tests/favorites/addDelete.spec.ts b/tests/favorites/addDelete.spec.ts new file mode 100644 index 0000000..326da31 --- /dev/null +++ b/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) +}) diff --git a/tests/tsconfig.json b/tests/tsconfig.json new file mode 100644 index 0000000..fa06954 --- /dev/null +++ b/tests/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../tsconfig.json", + "include": ["*/*.spec.ts"] +}