Fix test isolation and add flag transition coverage for dialog scroll optimization (#7396)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: mattcosta7 <[email protected]>

Author: Copilot

packages/react/src/Dialog/Dialog.test.tsx

@@ -1,14 +1,19 @@
 import React from 'react'
 import {render, fireEvent, waitFor} from '@testing-library/react'
-import {describe, expect, it, vi} from 'vitest'
+import {describe, expect, it, vi, beforeEach} from 'vitest'
 import userEvent from '@testing-library/user-event'
 import {Dialog} from './Dialog'
 import {Button} from '../Button'
 import {implementsClassName} from '../utils/testing'
 import classes from './Dialog.module.css'
 import {FeatureFlags} from '../FeatureFlags'
+import {__resetDialogScrollOptimizedCount} from '../FeatureFlags/FeatureFlags'
 
 describe('Dialog', () => {
+  beforeEach(() => {
+    __resetDialogScrollOptimizedCount()
+  })
+
   implementsClassName(Dialog, classes.Dialog)
   it('renders with role "dialog" by default', () => {
     const {getByRole} = render(<Dialog onClose={() => {}}>Pay attention to me</Dialog>)

packages/react/src/FeatureFlags/__tests__/FeatureFlags.test.tsx

@@ -189,5 +189,47 @@ describe('FeatureFlags', () => {
       unmount3()
       expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
     })
+
+    it('should handle flag value changing from false to true', () => {
+      const {rerender, unmount} = render(
+        <FeatureFlags flags={{primer_react_css_has_selector_perf: false}}>
+          <div>Content</div>
+        </FeatureFlags>,
+      )
+
+      expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
+
+      rerender(
+        <FeatureFlags flags={{primer_react_css_has_selector_perf: true}}>
+          <div>Content</div>
+        </FeatureFlags>,
+      )
+
+      expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
+
+      unmount()
+      expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
+    })
+
+    it('should handle flag value changing from true to false', () => {
+      const {rerender, unmount} = render(
+        <FeatureFlags flags={{primer_react_css_has_selector_perf: true}}>
+          <div>Content</div>
+        </FeatureFlags>,
+      )
+
+      expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
+
+      rerender(
+        <FeatureFlags flags={{primer_react_css_has_selector_perf: false}}>
+          <div>Content</div>
+        </FeatureFlags>,
+      )
+
+      expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
+
+      unmount()
+      expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
+    })
   })
 })