From a27892953bf20070fe3474adaf0a20a54fa7c323 Mon Sep 17 00:00:00 2001
From: Nikita Karpukhin <nikita.karpukhin@scout24.com>
Date: Mon, 31 Oct 2022 15:15:51 +0100
Subject: [PATCH] Added tests for both for UserSettingsTab and SettingsLayout
 setups

Signed-off-by: Nikita Karpukhin <nikita.karpukhin@scout24.com>
---
 .../DefaultSettingsPage.test.tsx              |  5 +-
 .../SettingsPage/SettingsPage.test.tsx        | 80 +++++++++++++++++++
 2 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx

diff --git a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx
index 24810a149e..d7bedbd5ca 100644
--- a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx
+++ b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.test.tsx
@@ -25,7 +25,7 @@ jest.mock('react-router', () => ({
   useOutlet: jest.fn().mockReturnValue(undefined),
 }));
 
-describe('<SettingsPage />', () => {
+describe('<DefaultSettingsPage />', () => {
   beforeEach(() => {
     (useOutlet as jest.Mock).mockReset();
   });
@@ -45,9 +45,8 @@ describe('<SettingsPage />', () => {
         <div>Advanced settings</div>
       </UserSettingsTab>
     );
-    (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute);
     const { container } = await renderWithEffects(
-      wrapInTestApp(<DefaultSettingsPage />),
+      wrapInTestApp(<DefaultSettingsPage tabs={[advancedTabRoute]} />),
     );
 
     const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
diff --git a/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx b/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx
new file mode 100644
index 0000000000..883358de5e
--- /dev/null
+++ b/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { SettingsPage } from './SettingsPage';
+import { UserSettingsTab } from '../UserSettingsTab';
+import { useOutlet } from 'react-router';
+import { SettingsLayout } from '../SettingsLayout';
+
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useOutlet: jest.fn().mockReturnValue(undefined),
+}));
+
+describe('<SettingsPage />', () => {
+  beforeEach(() => {
+    (useOutlet as jest.Mock).mockReset();
+  });
+
+  it('should render the default settings page with 3 tabs', async () => {
+    const { container } = await renderWithEffects(
+      wrapInTestApp(<SettingsPage />),
+    );
+
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    expect(tabs).toHaveLength(3);
+  });
+
+  it('should render the default settings page with 4 tabs when extra tabs are provided', async () => {
+    const advancedTabRoute = (
+      <UserSettingsTab path="/advanced" title="Advanced">
+        <div>Advanced settings</div>
+      </UserSettingsTab>
+    );
+    (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute);
+    const { container } = await renderWithEffects(
+      wrapInTestApp(<SettingsPage />),
+    );
+
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    expect(tabs).toHaveLength(4);
+    expect(tabs[3].textContent).toEqual('Advanced');
+  });
+
+  it('should render the custom settings page when custom layout is provided', async () => {
+    const customLayout = (
+      <SettingsLayout>
+        <SettingsLayout.Route path="general" title="General">
+          <div>User settings</div>
+        </SettingsLayout.Route>
+        <SettingsLayout.Route path="advanced" title="Advanced">
+          <div>Advanced settings</div>
+        </SettingsLayout.Route>
+      </SettingsLayout>
+    );
+    (useOutlet as jest.Mock).mockReturnValue(customLayout);
+    const { container } = await renderWithEffects(
+      wrapInTestApp(<SettingsPage />),
+    );
+
+    const tabs = container.querySelectorAll('[class*=MuiTabs-root] button');
+    expect(tabs).toHaveLength(2);
+    expect(tabs[0].textContent).toEqual('General');
+    expect(tabs[1].textContent).toEqual('Advanced');
+  });
+});