feat(surveys): Add cypress e2e tests (#17920)

cypress/e2e/surveys.cy.ts

@@ -0,0 +1,192 @@
+describe('Surveys', () => {
+    let name
+
+    beforeEach(() => {
+        name = 'survey-' + Math.floor(Math.random() * 10000000)
+        cy.clickNavMenu('surveys')
+    })
+
+    it('shows get started state on first load', () => {
+        // load an empty page
+        cy.get('h1').should('contain', 'Surveys')
+        cy.title().should('equal', 'Surveys • PostHog')
+
+        cy.get('h2').should('contain', 'Create your first survey')
+
+        // go to create a new survey
+        cy.get('[data-attr="create-survey"]').click()
+
+        cy.get('[data-attr="survey-name"]').type(name)
+
+        // save
+        cy.get('[data-attr="save-survey"]').click()
+        cy.get('[data-attr=success-toast]').contains('created').should('exist')
+
+        // back to surveys
+        cy.clickNavMenu('surveys')
+        cy.get('[data-attr=surveys-table]').should('contain', name)
+        cy.get('h2').should('not.have.text', 'Create your first survey')
+
+        // back into survey
+        cy.get(`[data-row-key="${name}"]`).contains(name).click()
+
+        // delete survey
+        cy.get('[data-attr="more-button"]').click()
+        cy.get('.Popover__content').contains('Delete').click()
+        cy.clickNavMenu('surveys')
+
+        cy.get('tbody').should('not.exist')
+    })
+
+    it('shows survey disabled banner when surveys disabled', () => {
+        cy.get('div.LemonBanner.LemonBanner--warning.mb-2').should(
+            'contain',
+            'Survey popups are currently disabled for this project'
+        )
+        cy.get('div.LemonBanner.LemonBanner--warning.mb-2').contains('Configure').click()
+
+        cy.contains('Surveys settings').should('exist').should('be.visible')
+
+        cy.get('[data-attr="opt-in-surveys-switch"]').click()
+
+        cy.get('[data-attr=success-toast]').contains('Surveys opt in').should('exist')
+
+        cy.contains('Done').click()
+
+        // now lemon banner should be gone
+        cy.get('div.LemonBanner.LemonBanner--warning.mb-2').should('not.exist')
+
+        // get it back
+        cy.contains('Configure').click()
+        cy.get('[data-attr="opt-in-surveys-switch"]').click()
+        cy.get('[data-attr=success-toast]').contains('Surveys opt in').should('exist')
+        cy.contains('Done').click()
+
+        // now lemon banner should be back
+        cy.get('div.LemonBanner.LemonBanner--warning.mb-2').should(
+            'contain',
+            'Survey popups are currently disabled for this project'
+        )
+    })
+
+    it('creates a new survey', () => {
+        // load an empty page
+        cy.get('h1').should('contain', 'Surveys')
+        cy.title().should('equal', 'Surveys • PostHog')
+
+        // click via top right button
+        cy.get('[data-attr="new-survey"]').click()
+
+        // select "add filter" and "property"
+        cy.get('[data-attr="survey-name"]').type(name)
+        cy.get('[data-attr="survey-question-type-0"]').click()
+        cy.contains('Rating').click()
+
+        // should pre-fill the question based on template
+        cy.get('[id="scenes.surveys.surveyLogic.new.survey.questions.0.question"]').should(
+            'include.value',
+            'How likely are you to recommend'
+        )
+
+        cy.get('[id="scenes.surveys.surveyLogic.new.survey.questions.0.scale"]')
+            .invoke('html')
+            .should('include', '1 - 10')
+
+        cy.get('[id="scenes.surveys.surveyLogic.new.survey.questions.0.upperBoundLabel"]').should(
+            'have.value',
+            'Very likely'
+        )
+
+        // change the scale
+        cy.get('[id="scenes.surveys.surveyLogic.new.survey.questions.0.scale"]').click()
+        cy.contains('1 - 5').click()
+
+        cy.get('[id="scenes.surveys.surveyLogic.new.survey.questions.0.scale"]')
+            .invoke('html')
+            .should('include', '1 - 5')
+
+        // make sure the preview is updated
+        cy.get('[data-attr="survey-preview"]')
+            .find('form')
+            .should('contain', 'How likely are you to recommend us to a friend?')
+            .should('contain', 'Unlikely')
+            .should('contain', 'Very likely')
+        cy.get('[data-attr="survey-preview"]').find('form').find('.ratings-number').should('have.length', 5)
+
+        // add targeting filters
+        cy.contains('Add user targeting').click()
+
+        // select the first property
+        cy.get('[data-attr="property-select-toggle-0"]').click()
+        cy.get('[data-attr="prop-filter-person_properties-0"]').click()
+        cy.get('[data-attr=prop-val] .ant-select-selector').click({ force: true })
+        cy.get('[data-attr=prop-val-0]').click({ force: true })
+
+        cy.get('.ant-input-number-input-wrap>input').type('{backspace}')
+
+        // save
+        cy.get('[data-attr="save-survey"]').click()
+        cy.get('[data-attr=success-toast]').contains('created').should('exist')
+
+        // check preview release conditions
+        cy.contains('Release conditions summary').should('exist')
+        cy.get('.FeatureConditionCard').should('exist').should('contain.text', 'is_demo equals true')
+        cy.get('.FeatureConditionCard').should('contain.text', 'Rolled out to 100% of users in this set.')
+
+        // launch survey
+        cy.get('[data-attr="launch-survey"]').click()
+
+        // refresh, see survey show up on page
+        cy.reload()
+
+        cy.contains('Unique users viewed').should('exist')
+
+        // stop survey
+        cy.contains('Stop').click()
+
+        // back to surveys
+        cy.clickNavMenu('surveys')
+        cy.get('[data-attr=surveys-table]').should('contain', name)
+
+        // back into survey
+        cy.get(`[data-row-key="${name}"]`).contains(name).click()
+
+        // edit
+        cy.get('[data-attr="more-button"]').click()
+        cy.get('.Popover__content').contains('Edit').click()
+
+        // remove user targeting properties
+        cy.contains('Remove all user properties').click()
+
+        // save
+        cy.get('[data-attr="save-survey"]').click()
+
+        // check preview release conditions
+        cy.get('.LemonTabs').contains('Overview').click()
+        cy.contains('Release conditions summary').should('exist')
+        cy.get('.FeatureConditionCard').should('not.exist')
+
+        // delete survey
+        cy.get('[data-attr="more-button"]').click()
+        cy.get('.Popover__content').contains('Delete').click()
+        cy.clickNavMenu('surveys')
+        cy.get('tbody').should('not.exist')
+    })
+
+    it('Delete survey', () => {
+        cy.get('h1').should('contain', 'Surveys')
+        cy.get('[data-attr=new-survey]').click()
+        cy.get('[data-attr=survey-name]').focus().type(name).should('have.value', name)
+        cy.get('[data-attr=save-survey]').first().click()
+
+        // after save there should be a launch button
+        cy.get('button[data-attr="launch-survey"]').should('have.text', 'Launch')
+
+        cy.clickNavMenu('surveys')
+        cy.get('[data-attr=surveys-table]').should('contain', name)
+        cy.get(`[data-row-key=${name}]`).contains(name).click()
+        cy.get('[data-attr=more-button]').click()
+        cy.get('[data-attr=delete-survey]').click()
+        cy.get('.Toastify__toast-body').contains('Survey deleted').should('be.visible')
+    })
+})

cypress/support/e2e.ts

@@ -30,6 +30,7 @@ beforeEach(() => {
             decideResponse({
                 // set feature flags here e.g.
                 // 'toolbar-launch-side-action': true,
+                'surveys-results-visualizations': true,
                 'auto-redirect': true,
                 notebooks: true,
             })

frontend/src/scenes/surveys/Survey.tsx

@@ -166,6 +166,7 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
                                                 <div className="space-y-2">
                                                     <Field name="type" label="Question type" className="max-w-60">
                                                         <LemonSelect
+                                                            data-attr={`survey-question-type-${index}`}
                                                             onSelect={(newType) => {
                                                                 const isEditingQuestion =
                                                                     defaultSurveyFieldValues[question.type].questions[0]

frontend/src/scenes/surveys/SurveyAppearance.tsx

@@ -100,7 +100,7 @@ export function SurveyAppearance({
     }, [showThankYou])
 
     return (
-        <>
+        <div data-attr="survey-preview">
             <h3 className="mb-4 text-center">Preview</h3>
             {!hideSubmittedSurvey && (
                 <>
@@ -220,7 +220,7 @@ export function SurveyAppearance({
                     </div>
                 </div>
             )}
-        </>
+        </div>
     )
 }
 

frontend/src/scenes/surveys/SurveyView.tsx

@@ -71,7 +71,12 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                                     Archive
                                                 </LemonButton>
                                             )}
-                                            <LemonButton status="danger" fullWidth onClick={() => deleteSurvey(id)}>
+                                            <LemonButton
+                                                status="danger"
+                                                data-attr="delete-survey"
+                                                fullWidth
+                                                onClick={() => deleteSurvey(id)}
+                                            >
                                                 Delete survey
                                             </LemonButton>
                                         </>
@@ -81,6 +86,7 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                 {!survey.start_date ? (
                                     <LemonButton
                                         type="primary"
+                                        data-attr="launch-survey"
                                         onClick={() => {
                                             launchSurvey()
                                         }}

frontend/src/scenes/surveys/Surveys.tsx

@@ -196,6 +196,7 @@ export function Surveys(): JSX.Element {
                                 columnKey: 'created_at',
                                 order: -1,
                             }}
+                            rowKey="name"
                             nouns={['survey', 'surveys']}
                             data-attr="surveys-table"
                             emptyState={