From b450e4093e38db84df51fc7d6292233a308c8a5d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 5 Jun 2022 11:16:11 +0200
Subject: [PATCH] Migrated Settings test to react testing library

---
 test/settings/Settings.test.tsx | 55 ++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/test/settings/Settings.test.tsx b/test/settings/Settings.test.tsx
index 3a94fb07..593dd943 100644
--- a/test/settings/Settings.test.tsx
+++ b/test/settings/Settings.test.tsx
@@ -1,29 +1,48 @@
-import { shallow } from 'enzyme';
-import { Route } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { Settings as createSettings } from '../../src/settings/Settings';
-import { NoMenuLayout } from '../../src/common/NoMenuLayout';
-import { NavPillItem } from '../../src/utils/NavPills';
 
 describe('<Settings />', () => {
-  const Component = () => null;
-  const Settings = createSettings(Component, Component, Component, Component, Component, Component);
+  const Settings = createSettings(
+    () => <span>RealTimeUpdates</span>,
+    () => <span>ShortUrlCreation</span>,
+    () => <span>ShortUrlsList</span>,
+    () => <span>UserInterface</span>,
+    () => <span>Visits</span>,
+    () => <span>Tags</span>,
+  );
+  const setUp = (activeRoute = '/') => {
+    const history = createMemoryHistory();
+    history.push(activeRoute);
+    return render(<Router location={history.location} navigator={history}><Settings /></Router>);
+  };
 
-  it('renders a no-menu layout with the expected settings sections', () => {
-    const wrapper = shallow(<Settings />);
-    const layout = wrapper.find(NoMenuLayout);
-    const sections = wrapper.find(Route);
+  it.each([
+    ['/general', {
+      visibleComps: ['UserInterface', 'RealTimeUpdates'],
+      hiddenComps: ['ShortUrlCreation', 'ShortUrlsList', 'Tags', 'Visits'],
+    }],
+    ['/short-urls', {
+      visibleComps: ['ShortUrlCreation', 'ShortUrlsList'],
+      hiddenComps: ['UserInterface', 'RealTimeUpdates', 'Tags', 'Visits'],
+    }],
+    ['/other-items', {
+      visibleComps: ['Tags', 'Visits'],
+      hiddenComps: ['UserInterface', 'RealTimeUpdates', 'ShortUrlCreation', 'ShortUrlsList'],
+    }],
+  ])('renders expected sections based on route', (activeRoute, { visibleComps, hiddenComps }) => {
+    setUp(activeRoute);
 
-    expect(layout).toHaveLength(1);
-    expect(sections).toHaveLength(4);
+    visibleComps.forEach((comp) => expect(screen.getByText(comp)).toBeInTheDocument());
+    hiddenComps.forEach((comp) => expect(screen.queryByText(comp)).not.toBeInTheDocument());
   });
 
   it('renders expected menu', () => {
-    const wrapper = shallow(<Settings />);
-    const items = wrapper.find(NavPillItem);
+    setUp();
 
-    expect(items).toHaveLength(3);
-    expect(items.first().prop('to')).toEqual('general');
-    expect(items.at(1).prop('to')).toEqual('short-urls');
-    expect(items.last().prop('to')).toEqual('other-items');
+    expect(screen.getByRole('link', { name: 'General' })).toHaveAttribute('href', '/general');
+    expect(screen.getByRole('link', { name: 'Short URLs' })).toHaveAttribute('href', '/short-urls');
+    expect(screen.getByRole('link', { name: 'Other items' })).toHaveAttribute('href', '/other-items');
   });
 });