diff --git a/packages/grafana-test-utils/src/handlers/all-handlers.ts b/packages/grafana-test-utils/src/handlers/all-handlers.ts index b3b70fbd4cc..3b1c7eb7017 100644 --- a/packages/grafana-test-utils/src/handlers/all-handlers.ts +++ b/packages/grafana-test-utils/src/handlers/all-handlers.ts @@ -1,6 +1,7 @@ import { HttpHandler } from 'msw'; import folderHandlers from './api/folders/handlers'; +import pluginsHandlers from './api/plugins/handlers'; import searchHandlers from './api/search/handlers'; import teamsHandlers from './api/teams/handlers'; import userHandlers from './api/user/handlers'; @@ -13,6 +14,7 @@ const allHandlers: HttpHandler[] = [ ...teamsHandlers, ...folderHandlers, ...searchHandlers, + ...pluginsHandlers, ...userHandlers, // App platform handlers diff --git a/packages/grafana-test-utils/src/handlers/api/plugins/handlers.ts b/packages/grafana-test-utils/src/handlers/api/plugins/handlers.ts new file mode 100644 index 00000000000..0acf25b8bf1 --- /dev/null +++ b/packages/grafana-test-utils/src/handlers/api/plugins/handlers.ts @@ -0,0 +1,6 @@ +import { HttpResponse, http } from 'msw'; + +// TODO: Add more realistic mock plugins data +const getPluginsHandler = () => http.get('/api/plugins', () => HttpResponse.json([])); + +export default [getPluginsHandler()]; diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.test.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.test.tsx new file mode 100644 index 00000000000..08c3eb8edce --- /dev/null +++ b/public/app/plugins/panel/gettingstarted/GettingStarted.test.tsx @@ -0,0 +1,58 @@ +import { render, screen } from 'test/test-utils'; + +import { setBackendSrv } from '@grafana/runtime'; +import { setupMockServer } from '@grafana/test-utils/server'; +import { backendSrv } from 'app/core/services/backend_srv'; +import { mockDataSource } from 'app/features/alerting/unified/mocks'; +import { testWithFeatureToggles } from 'app/features/alerting/unified/test/test-utils'; +import { setupDataSources } from 'app/features/alerting/unified/testSetup/datasources'; + +import { getPanelProps } from '../test-utils'; + +import { GettingStarted } from './GettingStarted'; + +const mockMetricsDataSource = mockDataSource(undefined, { metrics: true }); + +setBackendSrv(backendSrv); +setupDataSources(mockMetricsDataSource); +setupMockServer(); + +describe.each([ + // App platform APIs + true, + // Legacy APIs + false, +])('GettingStarted - app platform APIs: %s', (featureTogglesEnabled) => { + testWithFeatureToggles(featureTogglesEnabled ? ['unifiedStorageSearchUI'] : []); + + it('renders getting started steps', async () => { + const props = getPanelProps({}); + render(); + + const headings = (await screen.findAllByRole('heading')).map((heading) => heading.textContent); + expect(headings).toEqual([ + 'Basic', + 'Grafana fundamentals', + 'Add your first data source', + 'Create your first dashboard', + ]); + const dataSourceStepLink = await screen.findByRole('link', { name: /add your first data source/i }); + expect(dataSourceStepLink).toHaveTextContent(/complete/i); + + const dashboardStepLink = await screen.findByRole('link', { name: /create your first dashboard/i }); + expect(dashboardStepLink).toHaveTextContent(/complete/i); + }); + + it('allows navigating between steps', async () => { + const props = getPanelProps({}); + const { user } = render(); + + await user.click(await screen.findByRole('button', { name: /to advanced tutorials/i })); + const [firstAdvHeading] = await screen.findAllByRole('heading'); + expect(firstAdvHeading).toHaveTextContent(/advanced/i); + + await user.click(await screen.findByRole('button', { name: /to basic tutorials/i })); + const [firstBasicHeading] = await screen.findAllByRole('heading'); + expect(firstBasicHeading).toHaveTextContent(/basic/i); + }); +}); diff --git a/public/app/plugins/panel/gettingstarted/steps.ts b/public/app/plugins/panel/gettingstarted/steps.ts index 2d00cdc2699..abf0f642ee9 100644 --- a/public/app/plugins/panel/gettingstarted/steps.ts +++ b/public/app/plugins/panel/gettingstarted/steps.ts @@ -1,6 +1,7 @@ import { getBackendSrv } from 'app/core/services/backend_srv'; import store from 'app/core/store'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; +import { getGrafanaSearcher } from 'app/features/search/service/searcher'; import { SetupStep } from './types'; @@ -57,8 +58,8 @@ export const getSteps = (): SetupStep[] => [ href: 'dashboard/new', learnHref: 'https://grafana.com/docs/grafana/latest/guides/getting_started/#create-a-dashboard', check: async () => { - const result = await getBackendSrv().search({ limit: 1 }); - return result.length > 0; + const result = await getGrafanaSearcher().search({ limit: 1, kind: ['dashboard'] }); + return result.totalRows > 0; }, done: false, },