Implement playwright acceptance tests for vertical full page map

.gitignore

@@ -7,4 +7,3 @@ node_modules
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-/test-results/

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

@@ -3,54 +3,41 @@ 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');
-    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 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 results = page.locator('#js-answersVerticalResults div');
-    const count = await results.count();
-    let hasPinFocused = false;
-
-    for (var i = 0; i < count; i++) {
-      const currResult = await results.nth(i);
-      const classes = await currResult.evaluate(node => Array.from(node.classList));
-
-      if (classes.includes('yxt-Card--pinFocused')) {
-        hasPinFocused = true;
-        break;
-      }
-    }
-
-    expect(hasPinFocused).toBe(true);
+    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');
-    await page.mouse.wheel(600, 300);
+    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('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query')
+      && resp.url().includes('radius'));
     await 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.getByLabel('Map controls').getByText('Search When Map Moves').click();
+    await page.waitForResponse(resp =>
+      resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query'));
     await page.locator('div').filter({ hasText: /^Search This Area$/ }).nth(1).click();
-    await page.mouse.move(1200, 450, {steps: 5});
     const response = await page.waitForResponse(resp =>
-      resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query'));
+      resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query')
+      && resp.url().includes('radius'));
     await expect(response.status()).toBe(200);
   });
 
@@ -72,8 +59,8 @@ test.describe('full page map test suite', () => {
     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 locator = page.locator('#js-answersVerticalResults div').nth(0);
-    await expect(locator).toBeVisible();
+    const topOfResults = page.locator('#js-answersVerticalResults div').nth(0);
+    await expect(topOfResults).toBeVisible();
   });
 
 });
@@ -91,28 +78,25 @@ test.describe('full page map with filters test suite', () => {
 
   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();
+    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', async ({ page }) => {
+  test('clicking on a cluster causes the map to zoom in and new search is ran', async ({ page }) => {
+    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();
-     const response = await page.waitForResponse(resp => resp.url().includes('https://prod-cdn.us.yextapis.com/v2/accounts/me/search/vertical/query')
+    const response = 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'));
-     await expect(response.status()).toBe(200);
+    await expect(response.status()).toBe(200);
+    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);
   });
 
-  test('clicking on a cluster causes a new search to be run', async ({ page }) => {
-    await page.getByRole('button', { name: 'Cluster of 4 results' }).click();
-    const response = await page.waitForResponse(resp =>
-      resp.url().includes('https:\/\/prod-cdn\.us\.yextapis\.com\/v2\/accounts\/me\/search\/vertical\/query'));
-    await expect(response.status()).toBe(200);
-  });
 });