diff --git a/extension/src/test/suite/setup/index.test.ts b/extension/src/test/suite/setup/index.test.ts index a779ad7344..2dd09bf6fb 100644 --- a/extension/src/test/suite/setup/index.test.ts +++ b/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 }) + }) }) }) diff --git a/webview/src/setup/components/App.test.tsx b/webview/src/setup/components/App.test.tsx index 63df4257ce..652192c283 100644 --- a/webview/src/setup/components/App.test.tsx +++ b/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() @@ -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() + }) + }) })