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/serviceaccounts/ServiceAccountCreatePage.test.tsx

@@ -1,6 +1,9 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { Provider } from 'react-redux';
+
+import { configureStore } from '../../store/configureStore';
 
 import { ServiceAccountCreatePage, Props } from './ServiceAccountCreatePage';
 
@@ -9,6 +12,7 @@ const patchMock = jest.fn().mockResolvedValue({});
 const putMock = jest.fn().mockResolvedValue({});
 
 jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
   getBackendSrv: () => ({
     post: postMock,
     patch: patchMock,
@@ -41,6 +45,7 @@ jest.mock('app/core/core', () => ({
 }));
 
 const setup = (propOverrides: Partial<Props>) => {
+  const store = configureStore();
   const props: Props = {
     navModel: {
       main: {
@@ -54,7 +59,11 @@ const setup = (propOverrides: Partial<Props>) => {
 
   Object.assign(props, propOverrides);
 
-  render(<ServiceAccountCreatePage {...props} />);
+  render(
+    <Provider store={store}>
+      <ServiceAccountCreatePage {...props} />
+    </Provider>
+  );
 };
 
 describe('ServiceAccountCreatePage tests', () => {

public/app/features/serviceaccounts/ServiceAccountPage.test.tsx

@@ -1,9 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { ApiKey, OrgRole, ServiceAccountDTO } from 'app/types';
 
+import { configureStore } from '../../store/configureStore';
+
 import { ServiceAccountPageUnconnected, Props } from './ServiceAccountPage';
 
 jest.mock('app/core/core', () => ({
@@ -16,6 +19,7 @@ jest.mock('app/core/core', () => ({
 }));
 
 const setup = (propOverrides: Partial<Props>) => {
+  const store = configureStore();
   const createServiceAccountTokenMock = jest.fn();
   const deleteServiceAccountMock = jest.fn();
   const deleteServiceAccountTokenMock = jest.fn();
@@ -49,7 +53,11 @@ const setup = (propOverrides: Partial<Props>) => {
 
   Object.assign(props, propOverrides);
 
-  const { rerender } = render(<ServiceAccountPageUnconnected {...props} />);
+  const { rerender } = render(
+    <Provider store={store}>
+      <ServiceAccountPageUnconnected {...props} />
+    </Provider>
+  );
   return {
     rerender,
     props,

public/app/features/serviceaccounts/ServiceAccountsListPage.test.tsx

@@ -1,9 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { OrgRole, ServiceAccountDTO, ServiceAccountStateFilter } from 'app/types';
 
+import { configureStore } from '../../store/configureStore';
+
 import { Props, ServiceAccountsListPageUnconnected } from './ServiceAccountsListPage';
 
 jest.mock('app/core/core', () => ({
@@ -15,6 +18,7 @@ jest.mock('app/core/core', () => ({
 }));
 
 const setup = (propOverrides: Partial<Props>) => {
+  const store = configureStore();
   const changeQueryMock = jest.fn();
   const fetchACOptionsMock = jest.fn();
   const fetchServiceAccountsMock = jest.fn();
@@ -51,9 +55,13 @@ const setup = (propOverrides: Partial<Props>) => {
 
   Object.assign(props, propOverrides);
 
-  const { rerender } = render(<ServiceAccountsListPageUnconnected {...props} />);
+  const { rerender } = render(
+    <Provider store={store}>
+      <ServiceAccountsListPageUnconnected {...props} />
+    </Provider>
+  );
   return {
-    rerender,
+    rerender: (element: JSX.Element) => rerender(<Provider store={store}>{element}</Provider>),
     props,
     changeQueryMock,
     fetchACOptionsMock,