Port Survey tests to Playwright (#37008)

tests/browser/browser.js

@@ -145,44 +145,6 @@ describe('browser search', () => {
   })
 })
 
-describe('survey', () => {
-  jest.setTimeout(3 * 60 * 1000)
-
-  it('sends an event to /events when submitting form', async () => {
-    // Visit a page that displays the prompt
-    await page.goto(
-      'http://localhost:4000/en/actions/getting-started-with-github-actions/about-github-actions'
-    )
-
-    // Track network requests
-    await page.setRequestInterception(true)
-    page.on('request', (request) => {
-      // Ignore GET requests
-      if (!/\/events$/.test(request.url())) return request.continue()
-      expect(request.method()).toMatch(/POST|PUT/)
-      request.respond({
-        contentType: 'application/json',
-        body: JSON.stringify({ id: 'abcd1234' }),
-        status: 200,
-      })
-    })
-
-    // When I click the "Yes" button
-    await page.click('[data-testid=survey-form] [for=survey-yes]')
-    // (sent a POST request to /events)
-    // I see the request for my email
-    await page.waitForSelector('[data-testid=survey-form] [type="email"]')
-
-    // When I fill in my email and submit the form
-    await page.type('[data-testid=survey-form] [type="email"]', 'test@example.com')
-
-    await page.click('[data-testid=survey-form] [type="submit"]')
-    // (sent a PUT request to /events/{id})
-    // I see the feedback
-    await page.waitForSelector('[data-testid=survey-end]')
-  })
-})
-
 describe('iframe pages', () => {
   it('can open YouTube embed iframes', async () => {
     // Going to create a fresh page instance, so we can intercept the requests.

tests/rendering-fixtures/playwright-rendering.spec.ts

@@ -351,3 +351,52 @@ test('small viewports - 544-767', async ({ page }) => {
   await page.getByTestId('sidebar-hamburger').click()
   await expect(page.getByTestId('sidebar-product-dialog')).toBeVisible()
 })
+
+test.describe('survey', () => {
+  test('happy path, thumbs up and enter email', async ({ page }) => {
+    await page.goto('/get-started/foo/for-playwright')
+
+    let fulfilled = 0
+    await page.route('**/api/events', (route, request) => {
+      route.fulfill({})
+      expect(request.method()).toBe('POST')
+      fulfilled++
+      // At the time of writing you can't get the posted payload
+      // when you use `navigator.sendBeacon(url, data)`.
+      // So we can't make assertions about the payload.
+      // See https://github.com/microsoft/playwright/issues/12231
+    })
+
+    // The label is visually an SVG. Finding it by its `for` value feels easier.
+    await page.locator('[for=survey-yes]').click()
+    await page.getByPlaceholder('email@example.com').click()
+    await page.getByPlaceholder('email@example.com').fill('test@example.com')
+
+    await page.getByRole('button', { name: 'Send' }).click()
+    // Because it sent one about the thumbs and then another with the email.
+    expect(fulfilled).toBe(2)
+    await expect(page.getByTestId('survey-end')).toBeVisible()
+  })
+
+  test('thumbs down without filling in the form sends an API POST', async ({ page }) => {
+    await page.goto('/get-started/foo/for-playwright')
+
+    let fulfilled = 0
+    await page.route('**/api/events', (route, request) => {
+      route.fulfill({})
+      expect(request.method()).toBe('POST')
+      fulfilled++
+      // At the time of writing you can't get the posted payload
+      // when you use `navigator.sendBeacon(url, data)`.
+      // So we can't make assertions about the payload.
+      // See https://github.com/microsoft/playwright/issues/12231
+    })
+
+    await page.locator('[for=survey-yes]').click()
+    expect(fulfilled).toBe(1)
+
+    await expect(page.getByRole('button', { name: 'Send' })).toBeVisible()
+    await page.getByRole('button', { name: 'Cancel' }).click()
+    await expect(page.getByRole('button', { name: 'Send' })).not.toBeVisible()
+  })
+})