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,
},