add tests for focusing sections

extension/src/test/suite/setup/index.test.ts

@@ -46,6 +46,7 @@ import * as Python from '../../../extensions/python'
 import { STUDIO_ACCESS_TOKEN_KEY } from '../../../setup/token'
 import { ContextKey } from '../../../vscode/context'
 import { Setup } from '../../../setup'
+import { Section } from '../../../setup/webview/contract'
 
 suite('Setup Test Suite', () => {
   const disposable = Disposable.fn()
@@ -789,5 +790,68 @@ suite('Setup Test Suite', () => {
 
       expect(mockDelete).to.be.calledWithExactly(STUDIO_ACCESS_TOKEN_KEY)
     })
+
+    it('should send the appropriate messages to the webview to focus different sections', async () => {
+      const { setup, messageSpy } = buildSetup(disposable)
+      messageSpy.restore()
+
+      const webview = await setup.showSetup()
+      await webview.isReady()
+
+      const mockShow = stub(webview, 'show')
+
+      const getNewMessageReceived = () => {
+        mockShow.resetHistory()
+        mockShow.resetBehavior()
+        return new Promise(resolve =>
+          mockShow.callsFake(() => {
+            resolve(undefined)
+            return Promise.resolve(true)
+          })
+        )
+      }
+
+      const initialMessage = getNewMessageReceived()
+
+      void setup.showSetup()
+
+      await initialMessage
+
+      expect(mockShow).to.be.calledWithMatch({ sectionCollapsed: undefined })
+
+      const focusExperiments = getNewMessageReceived()
+
+      void setup.showSetup(Section.EXPERIMENTS)
+
+      await focusExperiments
+
+      expect(mockShow).to.be.calledWithMatch({
+        sectionCollapsed: {
+          [Section.EXPERIMENTS]: false,
+          [Section.STUDIO]: true
+        }
+      })
+
+      const focusStudio = getNewMessageReceived()
+
+      void setup.showSetup(Section.STUDIO)
+
+      await focusStudio
+
+      expect(mockShow).to.be.calledWithMatch({
+        sectionCollapsed: {
+          [Section.EXPERIMENTS]: true,
+          [Section.STUDIO]: false
+        }
+      })
+
+      const openUnchanged = getNewMessageReceived()
+
+      void setup.showSetup()
+
+      await openUnchanged
+
+      expect(mockShow).to.be.calledWithMatch({ sectionCollapsed: undefined })
+    })
   })
 })

webview/src/setup/components/App.test.tsx

@@ -5,7 +5,7 @@ import {
 } from 'dvc/src/webview/contract'
 import '@testing-library/jest-dom/extend-expect'
 import React from 'react'
-import { SetupData } from 'dvc/src/setup/webview/contract'
+import { Section, SetupData } from 'dvc/src/setup/webview/contract'
 import { App } from './App'
 import { vsCodeApi } from '../../shared/api'
 
@@ -24,6 +24,7 @@ const renderApp = ({
   needsGitInitialized,
   projectInitialized,
   pythonBinPath,
+  sectionCollapsed,
   shareLiveToStudio
 }: SetupData) => {
   render(<App />)
@@ -40,6 +41,7 @@ const renderApp = ({
           needsGitInitialized,
           projectInitialized,
           pythonBinPath,
+          sectionCollapsed,
           shareLiveToStudio
         },
         type: MessageToWebviewType.SET_DATA
@@ -539,4 +541,55 @@ describe('App', () => {
       })
     })
   })
+
+  describe('focused section', () => {
+    const testData = {
+      canGitInitialize: false,
+      cliCompatible: true,
+      hasData: false,
+      isPythonExtensionInstalled: true,
+      isStudioConnected: true,
+      needsGitCommit: false,
+      needsGitInitialized: false,
+      projectInitialized: true,
+      pythonBinPath: 'python',
+      shareLiveToStudio: false
+    }
+    const experimentsText = 'Your project contains no data'
+    const studioButtonText = 'Update Token'
+
+    it('should render the app with the Studio section collapsed if the Experiments section is focused', () => {
+      renderApp({
+        ...testData,
+        sectionCollapsed: {
+          [Section.EXPERIMENTS]: false,
+          [Section.STUDIO]: true
+        }
+      })
+      mockPostMessage.mockClear()
+      const studio = screen.getByText('Studio')
+      expect(studio).toBeVisible()
+      expect(screen.queryByText(studioButtonText)).not.toBeVisible()
+      const experiments = screen.getByText('Experiments')
+      expect(experiments).toBeVisible()
+      expect(screen.getByText(experimentsText)).toBeVisible()
+    })
+
+    it('should render the app with the Experiments section collapsed if the Studio section is focused', () => {
+      renderApp({
+        ...testData,
+        sectionCollapsed: {
+          [Section.EXPERIMENTS]: true,
+          [Section.STUDIO]: false
+        }
+      })
+      mockPostMessage.mockClear()
+      const studio = screen.getByText('Studio')
+      expect(studio).toBeVisible()
+      expect(screen.queryByText(studioButtonText)).toBeVisible()
+      const experiments = screen.getByText('Experiments')
+      expect(experiments).toBeVisible()
+      expect(screen.getByText(experimentsText)).not.toBeVisible()
+    })
+  })
 })