Implement playwright acceptance tests for vertical full page map

.github/workflows/playwright.yml

@@ -0,0 +1,29 @@
+name: Playwright Tests
+
+on: [push]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 14
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Setup test site
+      run: npm run setup-test-site
+    - name: Build test site
+      run: npm run build-test-site
+    - 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,8 @@ static/node_modules/
 static/dist/
 node_modules
 **/.DS_Store
-.idea/
+.idea/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

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

@@ -0,0 +1,107 @@
+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');
+  });
+
+  test('can search and get results', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    const count = await page.locator('#js-answersVerticalResults').count();
+    expect(count).toBeGreaterThan(0);
+  });
+
+  test('clicking on a pin focuses on a result card', async ({ page }) => {
+    await expect(page.locator('.yxt-Card--pinFocused')).not.toBeAttached();
+    await page.getByRole('button', { name: 'Result number 13' }).click();
+    await expect(page.locator('.yxt-Card--pinFocused')).toBeAttached();
+  });
+
+  test('search when map moves works', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    const result = page.locator('#js-answersVerticalResults div').nth(0);
+    await expect(result).toBeAttached();
+    const map = page.locator('.mapboxgl-canvas');
+    await map.dragTo(map, {
+      sourcePosition: { x: 788, y: 345},
+      targetPosition: { x: 1011, y: 225},
+    })
+    const response = await page.waitForResponse(resp =>
+      resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query')
+      && resp.url().includes('radius'));
+    expect(response.status()).toBe(200);
+  });
+
+  test('search this area button works', async ({ page }) => {
+    await page.getByLabel('Map controls').getByText('Search When Map Moves').click();
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    await page.waitForResponse(resp =>
+      resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query')
+      && !resp.url().includes('radius'));
+    await page.locator('div').filter({ hasText: /^Search This Area$/ }).nth(1).click();
+    const response = await page.waitForResponse(resp =>
+      resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query')
+      && resp.url().includes('radius'));
+    expect(response.status()).toBe(200);
+  });
+
+  test('default initial search works and is enabled by default', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    const result = page.locator('#js-answersVerticalResults div').nth(0);
+    await expect(result).toBeAttached();
+  });
+
+  test('pagination works', async ({ page }) => {
+    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.getByLabel('Go to the next page of results').click();
+    const topOfResults = page.locator('#js-answersVerticalResults div').nth(0);
+    await expect(topOfResults).toBeVisible();
+  });
+
+});
+
+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');
+  });
+
+  test('clicking on a pin closes the filter view', async ({ page }) => {
+    await page.getByRole('button', { name: 'filter results' }).click();
+    const filters = page.locator('#js-answersFacets');
+    await expect(filters).toBeVisible();
+    await page.getByRole('button', { name: 'Result number 7' }).click();
+    await expect(filters).not.toBeVisible();
+  });
+
+  test('clicking on a cluster causes the map to zoom in and new search is ran', async ({ page }) => {
+    await page.getByPlaceholder('Search for locations').fill('virginia');
+    await page.getByPlaceholder('Search for locations').press('Enter');
+    await page.waitForResponse(resp => resp.url().includes('https://prod-cdn.us.yextapis.com/v2/accounts/me/search/vertical/query')
+      && resp.url().includes('input=virginia') 
+      && !resp.url().includes('filters'));
+
+    const result = page.locator('#js-answersVerticalResults div').nth(0);
+    await expect(result).toBeAttached();
+
+    const originalCount = await page.locator('.yxt-Card').count();
+
+    await page.getByRole('button', { name: 'Cluster of 2 results' }).click();
+    await page.waitForResponse(resp => resp.url().includes('https://prod-cdn.us.yextapis.com/v2/accounts/me/search/vertical/query')
+      && resp.url().includes('input=virginia') 
+      && resp.url().includes('filters'));
+
+    const newResult = page.locator('#js-answersVerticalResults div').nth(0);
+    await expect(newResult).toBeAttached();
+
+    const countAfterSelectingCluster = await page.locator('.yxt-Card').count();
+    expect(originalCount).toBeGreaterThan(countAfterSelectingCluster);
+  });
+});