Fixes #39492: Replace enzyme test in SettingsTable, SettingsCell, SettingsName with RTL

Author: Konstantinos Familonidis

webpack/assets/javascripts/react_app/components/SettingsTable/__tests__/SettingsTable.test.js

@@ -1,4 +1,3 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 import React from "react";
 import {render, screen, within} from '@testing-library/react'
 import userEvent from '@testing-library/user-event';
@@ -12,23 +11,13 @@ import { groupedSettings } from '../../SettingRecords/__tests__/SettingRecords.f
 import SettingsTable from '../SettingsTable';
 import {APIActions} from "../../../redux/API";
 
-const fixtures = {
-  'should render': {
-    settings: groupedSettings['General'],
-    onEditClick: () => {},
-  },
-};
 const mockStore = configureMockStore([thunk]);
 const store = mockStore({
 
 })
 
 jest.spyOn(APIActions, 'put').mockReturnValue({ type: 'DUMMY' });
 
-describe('SettingsTableSnapshot', () =>
-    testComponentSnapshotsWithFixtures(SettingsTable, fixtures)
-)
-
 async function extracted(text = '') {
   const editButton = document.querySelector('button#http_proxy_except_list');
 

webpack/assets/javascripts/react_app/components/SettingsTable/__tests__/__snapshots__/SettingsTable.test.js.snap

@@ -1,4 +1,6 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import {
   rootPass,
@@ -8,17 +10,53 @@ import {
 
 import SettingValue from '../SettingValue';
 
-const fixtures = {
-  'render ordinary': {
-    setting: stringSetting,
-  },
-  'render encrypted with fullName': {
-    setting: rootPass,
-  },
-  'render without fullName': {
-    setting: withoutFullName,
-  },
-};
-
-describe('SettingCell', () =>
-  testComponentSnapshotsWithFixtures(SettingValue, fixtures));
+// Render the tooltip content inline instead of through the Popper, so the
+// computed tooltipText can be asserted without hover/async teardown issues.
+jest.mock('@patternfly/react-core', () => ({
+  ...jest.requireActual('@patternfly/react-core'),
+  Tooltip: ({ content, children }) => (
+    <div>
+      <div data-testid="tooltip-content">{content}</div>
+      {children}
+    </div>
+  ),
+}));
+
+const tooltip = () => screen.getByTestId('tooltip-content');
+
+describe('SettingCell', () => {
+  it('render ordinary', () => {
+    render(<SettingValue setting={stringSetting} />);
+
+    const value = screen.getByText('root@example.com');
+    expect(value).toBeInTheDocument();
+    // value equals default, so it is not emphasized
+    expect(value.closest('strong')).not.toBeInTheDocument();
+    expect(
+      within(tooltip()).getByText('Default: root@example.com')
+    ).toBeInTheDocument();
+  });
+
+  it('render encrypted with fullName', () => {
+    render(<SettingValue setting={rootPass} />);
+
+    // encrypted value is masked, and emphasized because it differs from default
+    const value = screen.getByText('*****');
+    expect(value).toBeInTheDocument();
+    expect(value.closest('strong')).toBeInTheDocument();
+    // encrypted default is masked with bullet operators, one per character
+    expect(
+      within(tooltip()).getByText(`Default: ${'∙'.repeat(6)}`)
+    ).toBeInTheDocument();
+  });
+
+  it('render without fullName', () => {
+    render(<SettingValue setting={withoutFullName} />);
+
+    // boolean false renders as "No"
+    const value = screen.getByText('No');
+    expect(value).toBeInTheDocument();
+    expect(value.closest('strong')).not.toBeInTheDocument();
+    expect(within(tooltip()).getByText('Default: No')).toBeInTheDocument();
+  });
+});

webpack/assets/javascripts/react_app/components/SettingsTable/components/__tests__/SettingCell.test.js

@@ -1,4 +1,6 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import {
   rootPass,
@@ -7,14 +9,38 @@ import {
 
 import SettingName from '../SettingName';
 
-const fixtures = {
-  'render with fullName': {
-    setting: rootPass,
-  },
-  'render without fullName': {
-    setting: withoutFullName,
-  },
-};
-
-describe('SettingName', () =>
-  testComponentSnapshotsWithFixtures(SettingName, fixtures));
+// Render the tooltip content inline instead of through the Popper, so the
+// tooltipText can be asserted without hover/async teardown issues.
+jest.mock('@patternfly/react-core', () => ({
+  ...jest.requireActual('@patternfly/react-core'),
+  Tooltip: ({ content, children }) => (
+    <div>
+      <div data-testid="tooltip-content">{content}</div>
+      {children}
+    </div>
+  ),
+}));
+
+const tooltip = () => screen.getByTestId('tooltip-content');
+
+describe('SettingName', () => {
+  it('render with fullName', () => {
+    render(<SettingName setting={rootPass} />);
+
+    // fullName is shown as the name, the technical name is the tooltip
+    expect(screen.getByText('Root password')).toBeInTheDocument();
+    expect(within(tooltip()).getByText('root_pass')).toBeInTheDocument();
+  });
+
+  it('render without fullName', () => {
+    render(<SettingName setting={withoutFullName} />);
+
+    // with no fullName, the technical name is used for both name and tooltip
+    expect(
+      within(tooltip()).getByText('always_show_configuration_status')
+    ).toBeInTheDocument();
+    expect(
+      screen.getAllByText('always_show_configuration_status')
+    ).toHaveLength(2);
+  });
+});