Navigation: share logic between buildBreadcrumbs and usePageTitle (#58819)

* simplify usePageTitle logic a bit

* use buildBreadcrumbs logic in usePageTitle

* always add home item to navTree, fix some tests

* fix remaining unit tests

public/app/features/playlist/PlaylistEditPage.test.tsx

@@ -1,10 +1,13 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { locationService } from '@grafana/runtime';
 import { backendSrv } from 'app/core/services/backend_srv';
 
+import { configureStore } from '../../store/configureStore';
+
 import { PlaylistEditPage } from './PlaylistEditPage';
 import { Playlist } from './types';
 
@@ -21,6 +24,7 @@ jest.mock('app/core/components/TagFilter/TagFilter', () => ({
 
 async function getTestContext({ name, interval, items, uid }: Partial<Playlist> = {}) {
   jest.clearAllMocks();
+  const store = configureStore();
   const playlist = { name, items, interval, uid } as unknown as Playlist;
   const queryParams = {};
   const route: any = {};
@@ -36,7 +40,9 @@ async function getTestContext({ name, interval, items, uid }: Partial<Playlist>
     uid: 'foo',
   });
   const { rerender } = render(
-    <PlaylistEditPage queryParams={queryParams} route={route} match={match} location={location} history={history} />
+    <Provider store={store}>
+      <PlaylistEditPage queryParams={queryParams} route={route} match={match} location={location} history={history} />
+    </Provider>
   );
   await waitFor(() => expect(getMock).toHaveBeenCalledTimes(1));
 

public/app/features/playlist/PlaylistNewPage.test.tsx

@@ -1,10 +1,13 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { locationService } from '@grafana/runtime';
-import { backendSrv } from 'app/core/services/backend_srv';
+
+import { backendSrv } from '../../core/services/backend_srv';
+import { configureStore } from '../../store/configureStore';
 
 import { PlaylistNewPage } from './PlaylistNewPage';
 import { Playlist } from './types';
@@ -21,11 +24,16 @@ jest.mock('app/core/components/TagFilter/TagFilter', () => ({
 }));
 
 function getTestContext({ name, interval, items }: Partial<Playlist> = {}) {
+  const store = configureStore();
   jest.clearAllMocks();
   const playlist = { name, items, interval } as unknown as Playlist;
   const backendSrvMock = jest.spyOn(backendSrv, 'post');
 
-  const { rerender } = render(<PlaylistNewPage />);
+  const { rerender } = render(
+    <Provider store={store}>
+      <PlaylistNewPage />
+    </Provider>
+  );
 
   return { playlist, rerender, backendSrvMock };
 }

public/app/features/playlist/PlaylistPage.test.tsx

@@ -1,8 +1,11 @@
 import { render, waitFor } from '@testing-library/react';
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { contextSrv } from 'app/core/services/context_srv';
 
+import { configureStore } from '../../store/configureStore';
+
 import { PlaylistPage } from './PlaylistPage';
 
 const fnMock = jest.fn();
@@ -21,7 +24,12 @@ jest.mock('app/core/services/context_srv', () => ({
 }));
 
 function getTestContext() {
-  return render(<PlaylistPage />);
+  const store = configureStore();
+  return render(
+    <Provider store={store}>
+      <PlaylistPage />
+    </Provider>
+  );
 }
 
 describe('PlaylistPage', () => {