Implement playwright acceptance tests for vertical full page map

.github/workflows/playwright.yml

@@ -0,0 +1,25 @@
+name: Playwright Tests
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -2,4 +2,12 @@ static/node_modules/
 static/dist/
 node_modules
 **/.DS_Store
-.idea/
+.idea/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/vertical-full-page-map.spec.ts

@@ -0,0 +1,103 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('full page map test suite', () => {
+  test.beforeEach(async ({page}) => {
+    await page.goto('http://localhost:5042/locations_full_page_map');
+    await page.getByPlaceholder('Search for locations').click();
+  });
+
+  test('can search and get results', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    await page.locator('#js-answersVerticalResults div').filter({ hasText: '1 Office Space 8.2 mi Close Card 7900 Westpark Drive Suite T200 McLean, VA 22102' }).nth(3).click();
+  });
+
+  test('clicking on a pin focuses on a result card', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    await page.getByRole('button', { name: 'Result number 5' }).click();
+    const locator = page.locator('#js-answersVerticalResults div').nth(134);
+    await expect(locator).toHaveClass(/pinFocused/);
+  });
+
+  // search when map moves works
+  test('search when map moves works', async ({ page }) => {
+    const searchLogo = '#js-yext-submit';
+    await page.mouse.move(600, 300);
+    await page.mouse.down();
+    await page.mouse.move(1200, 450, {steps: 5});
+    await page.mouse.up();
+    await page.waitForSelector(searchLogo, { state: 'detached' });
+    const detachedSearchLogo = await page.$(searchLogo);
+    expect(detachedSearchLogo).toBeFalsy();
+  });
+
+  test('search this area button works', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    // search bar yext logo remounts when search occurs
+    const searchLogo = '#js-yext-submit';
+    await page.getByLabel('Map controls').getByText('Search When Map Moves').click();
+    await page.locator('canvas').click();
+    await page.waitForSelector(searchLogo, { state: 'detached' });
+    const detachedSearchLogo = await page.$(searchLogo);
+    expect(detachedSearchLogo).toBeFalsy();
+  });
+
+  test('default initial search works and is enabled by default', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    const result = await page.locator('#js-answersVerticalResults div').nth(0);
+    await expect(result).toBeAttached();
+  });
+
+  test('pagination works', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    await page.getByLabel('Go to the next page of results').click();
+    const secondPage = page.locator('#js-answersVerticalResultsCount');
+    await expect(secondPage).toHaveText(/21/);
+  });
+
+  test('pagination scrolls the results to the top', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    await page.getByLabel('Go to the next page of results').click();
+    const isScrolledUp = await page.evaluate(() => {
+      return window.scrollY === 0;
+    });
+    expect(isScrolledUp).toBe(true);
+  });
+
+});
+
+test.describe('full page map with filters test suite', () => {
+  test.beforeEach(async ({page}) => {
+    await page.goto('http://localhost:5042/locations_full_page_map_with_filters');
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+  });
+
+  test('clicking on a pin closes the filter view', async ({ page }) => {
+    await page.getByRole('button', { name: 'filter results' }).click();
+    await page.getByText('Cats (1)').click();
+    const filterView = page.getByLabel('Main location search').locator('div').filter({ hasText: 'Filters Services reset Cats (1) Dogs (1) Sleep (1)' }).first();
+    await expect(filterView).toBeVisible();
+    await page.getByRole('button', { name: 'Result number 1' }).click();
+    await expect(filterView).not.toBeVisible();
+  });
+
+  test('clicking on a cluster causes the map to zoom in', async ({ page }) => {
+    const mapboxPinCount = await page.locator('#js-answersMap div').count();
+    await page.getByRole('button', { name: 'Cluster of 2 results' }).click();
+    const mapboxPinCountAfterSelectingCluster = await page.locator('#js-answersMap div').count();
+    expect(mapboxPinCount).not.toBe(mapboxPinCountAfterSelectingCluster);
+  });
+
+  test('clicking on a cluster causes a new search to be run', async ({ page }) => {
+    const numResults = page.locator('#js-answersVerticalResults').count();
+    await page.getByRole('button', { name: 'Cluster of 4 results' }).click();
+    const numResultsAfterSelectingCluster = await page.locator('#js-answersVerticalResults').count();
+    expect(numResults).not.toBe(numResultsAfterSelectingCluster);
+  });
+
+});

package.json

@@ -36,7 +36,9 @@
     "@babel/preset-env": "^7.9.6",
     "@percy/cli": "^1.0.0-beta.67",
     "@percy/puppeteer": "^2.0.0",
+    "@playwright/test": "^1.39.0",
     "@types/jest": "^26.0.19",
+    "@types/node": "^20.9.0",
     "@yext/cta-formatter": "^1.0.0",
     "babel-jest": "^25.5.1",
     "comment-json": "^4.1.1",