Do not allow survey comments to change after rating (#51111)

src/events/components/Survey.tsx

@@ -82,6 +82,13 @@ export const Survey = () => {
     }
   }, [email])
 
+  useEffect(() => {
+    if (state === ViewState.NEXT && data?.comment !== comment.trim()) {
+      setState(ViewState.START)
+      setIsEmailError(false)
+    }
+  }, [comment])
+
   const { data, error, isLoading } = useSWR(
     state === ViewState.NEXT && comment.trim() ? '/api/events/survey/preview/v1' : null,
     async (url: string) => {
@@ -107,7 +114,7 @@ export const Survey = () => {
     },
   )
 
-  const hasPreview = !!data && !error
+  const hasPreview = !!data && !error && ViewState.NEXT
 
   function submit(evt: React.FormEvent) {
     evt.preventDefault()

src/events/middleware.js

@@ -94,7 +94,7 @@ router.post(
 
     const { rating, signals } = await analyzeComment(comment, locale)
 
-    res.json({ rating })
+    res.json({ rating, comment })
 
     tags.push(...signals.map((signal) => `signal:${signal}`))
     statsd.increment('events.survey_preview.signals', 1, tags)

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

@@ -579,6 +579,53 @@ test.describe('survey', () => {
     await page.getByTestId('product-sidebar').getByLabel('Bar', { exact: true }).click()
     await expect(page.locator('[for=survey-comment]')).not.toBeVisible()
   })
+
+  test('add survey comment, then modify the survey comment', async ({ page }) => {
+    let fulfilled = 0
+    // Important to set this up *before* interacting with the page
+    // in case of possible race conditions.
+    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.goto('/get-started/foo/for-playwright')
+
+    // The label is visually an SVG. Finding it by its `for` value feels easier.
+    await page.locator('[for=survey-yes]').click()
+    await expect(page.getByRole('button', { name: 'Next' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Send' })).not.toBeVisible()
+
+    await page.locator('[for=survey-comment]').click()
+    await page.locator('[for=survey-comment]').fill('This is a comment')
+    await page.getByRole('button', { name: 'Next' }).click()
+    await expect(page.getByRole('button', { name: 'Cancel' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Next' })).not.toBeVisible()
+
+    await page.locator('[for=survey-comment]').click()
+    await page.locator('[for=survey-comment]').fill('This is a modified comment')
+    // The "Send" button should no longer be visible
+    // and the "Next" button should be visible
+    await expect(page.getByRole('button', { name: 'Cancel' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Send' })).not.toBeVisible()
+    await expect(page.getByRole('button', { name: 'Next' })).toBeVisible()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await expect(page.getByRole('button', { name: 'Cancel' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Next' })).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Send' }).click()
+    // One for the page view event, one for the thumbs up click, one for
+    // the submission.
+    expect(fulfilled).toBe(1 + 2)
+    await expect(page.getByTestId('survey-end')).toBeVisible()
+  })
 })
 
 test.describe('rest API reference pages', () => {