add in new tests

Author: nsdeschenes

src/pages/RepoPage/BundlesTab/BundleContent/BundleSelection/BundleSelection.test.tsx

@@ -8,10 +8,19 @@ import { userEvent } from '@testing-library/user-event'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
+import { Toaster } from 'react-hot-toast'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import BundleSelection from './BundleSelection'
 
+const mocks = vi.hoisted(() => ({
+  useFlags: vi.fn().mockReturnValue({ displayBundleCachingModal: true }),
+}))
+
+vi.mock('shared/featureFlags', () => ({
+  useFlags: mocks.useFlags,
+}))
+
 const mockRepoOverview = {
   __typename: 'Repository',
   private: false,
@@ -61,6 +70,27 @@ const mockBranchBundles = {
   },
 }
 
+const mockCachedBundles = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      branch: {
+        head: {
+          bundleAnalysis: {
+            bundleAnalysisReport: {
+              __typename: 'BundleAnalysisReport',
+              bundles: [
+                { name: 'bundle1', isCached: true },
+                { name: 'bundle2', isCached: false },
+              ],
+            },
+          },
+        },
+      },
+    },
+  },
+}
+
 const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false, suspense: true } },
@@ -85,6 +115,7 @@ const wrapper =
             ]}
           >
             <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
+            <Toaster />
           </Route>
         </MemoryRouter>
       </QueryClientProvider>
@@ -136,6 +167,9 @@ describe('BundleSelection', () => {
       }),
       graphql.query('BranchBundlesNames', () => {
         return HttpResponse.json({ data: mockBranchBundles })
+      }),
+      graphql.query('CachedBundleList', () => {
+        return HttpResponse.json({ data: mockCachedBundles })
       })
     )
 
@@ -182,6 +216,16 @@ describe('BundleSelection', () => {
     expect(loadSelector).toBeInTheDocument()
   })
 
+  it('renders bundle caching button', async () => {
+    setup()
+    render(<BundleSelection />, { wrapper: wrapper() })
+
+    const bundleCachingButton = await screen.findByRole('button', {
+      name: 'Configure data caching',
+    })
+    expect(bundleCachingButton).toBeInTheDocument()
+  })
+
   describe('user interacts with branch and bundle selectors', () => {
     describe('user selects a branch', () => {
       it('resets the bundle selector to the first available bundle', async () => {
@@ -277,4 +321,21 @@ describe('BundleSelection', () => {
       })
     })
   })
+
+  describe('user clicks bundle caching button', () => {
+    it('renders bundle caching modal', async () => {
+      const { user } = setup()
+      render(<BundleSelection />, { wrapper: wrapper() })
+
+      const bundleCachingButton = await screen.findByRole('button', {
+        name: 'Configure data caching',
+      })
+      await user.click(bundleCachingButton)
+
+      const modalHeader = await screen.findByText(
+        'Configure bundle caching data'
+      )
+      expect(modalHeader).toBeInTheDocument()
+    })
+  })
 })