From 3cbb1520c1eaa066cb1f8fef98b5c340e2d9d4cb Mon Sep 17 00:00:00 2001
From: Haven <haven@posthog.com>
Date: Tue, 12 Nov 2024 15:46:28 -0800
Subject: [PATCH] chore(flags): add cypress regression test to ensure flags
 rendering as expected in FlagSelector component (#26103)

---
 cypress/e2e/featureFlags.cy.ts                | 23 +++++++++++++++++++
 .../lemon-ui/LemonCollapse/LemonCollapse.tsx  |  1 +
 frontend/src/scenes/surveys/SurveyEdit.tsx    | 13 +++++++++--
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/featureFlags.cy.ts b/cypress/e2e/featureFlags.cy.ts
index 9fbf64bda22dd..5e4e2204d5757 100644
--- a/cypress/e2e/featureFlags.cy.ts
+++ b/cypress/e2e/featureFlags.cy.ts
@@ -299,4 +299,27 @@ describe('Feature Flags', () => {
         cy.get('[data-attr=taxonomic-operator]').contains('= equals').click({ force: true })
         cy.get('.operator-value-option').contains('> after').should('not.exist')
     })
+
+    it('Renders flags in FlagSelector', () => {
+        // Create flag name
+        cy.get('[data-attr=top-bar-name]').should('contain', 'Feature flags')
+        cy.get('[data-attr=new-feature-flag]').click()
+        cy.get('[data-attr=feature-flag-key]').click().type(`{moveToEnd}${name}`).should('have.value', name)
+        cy.get('[data-attr=rollout-percentage]').clear().type('50').should('have.value', '50')
+
+        // save the feature flag
+        cy.get('[data-attr=save-feature-flag]').first().click()
+
+        // go to surveys page to check if the flag is rendered in the FlagSelector
+        cy.reload()
+        cy.clickNavMenu('surveys')
+        cy.get('[data-attr="new-survey"]').click()
+        cy.get('[data-attr="new-blank-survey"]').click()
+
+        cy.get('[data-attr="survey-display-conditions"]').click()
+        cy.get('[data-attr="survey-display-conditions-select"]').click()
+        cy.get('[data-attr="survey-display-conditions-select-users"]').click()
+        cy.get('[data-attr="survey-display-conditions-linked-flag"]').contains('Select flag').click()
+        cy.get('.Popover__box').should('contain', name)
+    })
 })
diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
index 47d5a45192be2..640bac2ab6da3 100644
--- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
@@ -13,6 +13,7 @@ export interface LemonCollapsePanel<K extends React.Key> {
     key: K
     header: ReactNode
     content: ReactNode
+    dataAttr?: string
     className?: string
 }
 
diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
index 32d1636e492d9..89f6eef2c22a6 100644
--- a/frontend/src/scenes/surveys/SurveyEdit.tsx
+++ b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -512,6 +512,7 @@ export default function SurveyEdit(): JSX.Element {
                         {
                             key: SurveyEditSection.DisplayConditions,
                             header: 'Display conditions',
+                            dataAttr: 'survey-display-conditions',
                             content: (
                                 <LemonField.Pure>
                                     <LemonSelect
@@ -528,8 +529,13 @@ export default function SurveyEdit(): JSX.Element {
                                         value={!hasTargetingSet}
                                         options={[
                                             { label: 'All users', value: true },
-                                            { label: 'Users who match all of the following...', value: false },
+                                            {
+                                                label: 'Users who match all of the following...',
+                                                value: false,
+                                                'data-attr': 'survey-display-conditions-select-users',
+                                            },
                                         ]}
+                                        data-attr="survey-display-conditions-select"
                                     />
                                     {!hasTargetingSet ? (
                                         <span className="text-muted">
@@ -548,7 +554,10 @@ export default function SurveyEdit(): JSX.Element {
                                                 }
                                             >
                                                 {({ value, onChange }) => (
-                                                    <div className="flex">
+                                                    <div
+                                                        className="flex"
+                                                        data-attr="survey-display-conditions-linked-flag"
+                                                    >
                                                         <FlagSelector value={value} onChange={onChange} />
                                                         {value && (
                                                             <LemonButton