Fixes #39439 - replace AuditsPage tests with RTL testing

test/integration/hostgroup_js_test.rb

@@ -21,6 +21,7 @@ class HostgroupJSTest < IntegrationTestWithJavascript
     select2 os.media.first.name, :from => 'hostgroup_medium_id'
     wait_for_ajax
     select2 os.ptables.first.name, :from => 'hostgroup_ptable_id'
+    wait_for_ajax
     fill_in 'hostgroup_root_pass', :with => '12345678'
     click_button 'Submit'
     hostgroup = wait_for do

webpack/assets/javascripts/react_app/common/rtlTestHelpers.js

@@ -9,6 +9,8 @@ import reducers from '../redux/reducers';
 import { middlewares } from '../redux/middlewares';
 import { initMockStore } from './testInitialReduxStore';
 
+const I18nPassThrough = ({ children }) => children;
+
 export const createTestStore = (
   initialState = {},
   storeConfig = compose(applyMiddleware(...middlewares))
@@ -43,8 +45,12 @@ export const rtlHelpers = {
    * @returns {Object} RTL render result
    */
   renderWithI18n: (component, mockDate = new Date(), timezone = 'UTC') => {
-    const IntlWrapper = i18nProviderWrapperFactory(mockDate, timezone);
-    return render(React.createElement(IntlWrapper, {}, component));
+    const IntlWrapper = i18nProviderWrapperFactory(
+      mockDate,
+      timezone
+    )(I18nPassThrough);
+
+    return render(<IntlWrapper>{component}</IntlWrapper>);
   },
 
   /**
@@ -62,12 +68,15 @@ export const rtlHelpers = {
     timezone = 'UTC'
   ) => {
     const store = createTestStore(initialState);
-    const IntlWrapper = i18nProviderWrapperFactory(mockDate, timezone);
+    const IntlWrapper = i18nProviderWrapperFactory(
+      mockDate,
+      timezone
+    )(I18nPassThrough);
 
     return {
       ...render(
         <Provider store={store}>
-          {React.createElement(IntlWrapper, {}, component)}
+          <IntlWrapper>{component}</IntlWrapper>
         </Provider>
       ),
       store,

webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/AuditsPage.fixtures.js

@@ -49,4 +49,6 @@ export const auditsPageProps = {
   isLoading: false,
   hasData: true,
   searchQuery: 'search',
+  audits: AuditsProps.audits,
+  itemCount: AuditsProps.audits.length,
 };

webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/__tests__/AuditsPage.test.js

@@ -1,28 +1,104 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import AuditsPage from '../AuditsPage';
 import { auditsPageProps } from '../AuditsPage.fixtures';
+import { rtlHelpers } from '../../../../common/rtlTestHelpers';
+
+const { renderWithStoreAndI18n } = rtlHelpers;
 
-const auditsPageFixtures = {
-  'render audits page': auditsPageProps,
-  'render loading audits page': {
-    ...auditsPageProps,
-    hasError: false,
-    hasData: true,
-    audits: [],
-  },
-  'render audits page w/empty audits': {
-    ...auditsPageProps,
-    hasError: true,
-    message: 'no audits',
-  },
-  'render audits page w/error': {
-    ...auditsPageProps,
-    hasError: true,
-    message: 'some-error',
-  },
+const renderAuditsPage = (props = {}) => {
+  renderWithStoreAndI18n(
+    <Router>
+      <AuditsPage {...auditsPageProps} {...props} />
+    </Router>
+  );
 };
 
+const expectAuditsPageReady = () =>
+  screen.findByRole('heading', { name: 'Audits', level: 1 });
+
 describe('AuditsPage', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(AuditsPage, auditsPageFixtures));
+  it('renders audits page', async () => {
+    renderAuditsPage();
+    await expectAuditsPageReady();
+
+    expect(screen.getByRole('link', { name: /Documentation/i })).toHaveAttribute(
+      'href',
+      '/links/manual/4.1.4Auditing'
+    );
+    expect(screen.getByLabelText('Search input')).toBeInTheDocument();
+    expect(screen.getByText('host-foo.example.com')).toBeInTheDocument();
+  });
+
+  it('renders audits page with no audit rows', async () => {
+    renderAuditsPage({
+      hasError: false,
+      hasData: true,
+      audits: [],
+      itemCount: 0,
+    });
+    await expectAuditsPageReady();
+
+    expect(
+      screen.getByRole('list', { name: 'Audits data list' })
+    ).toBeInTheDocument();
+    expect(screen.queryByText('host-foo.example.com')).not.toBeInTheDocument();
+  });
+
+  it('renders loading audits page', async () => {
+    renderAuditsPage({
+      isLoading: true,
+      hasData: false,
+    });
+    await expectAuditsPageReady();
+
+    expect(
+      screen.queryByRole('list', { name: 'Audits data list' })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('heading', { name: 'Error', level: 5 })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders audits page with error when audit data is present', async () => {
+    renderAuditsPage({
+      hasError: true,
+      hasData: true,
+      audits: auditsPageProps.audits,
+      itemCount: auditsPageProps.itemCount,
+      message: { type: 'error', text: 'some-error' },
+    });
+    await expectAuditsPageReady();
+
+    expect(
+      screen.getByRole('heading', { name: 'Error', level: 5 })
+    ).toBeInTheDocument();
+    expect(screen.getByText('some-error')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('list', { name: 'Audits data list' })
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText('host-foo.example.com')).not.toBeInTheDocument();
+  });
+
+  it('renders audits page with error when no audit data is present', async () => {
+    renderAuditsPage({
+      hasError: true,
+      hasData: false,
+      audits: [],
+      itemCount: 0,
+      message: { type: 'error', text: 'no audits' },
+    });
+    await expectAuditsPageReady();
+
+    expect(
+      screen.getByRole('heading', { name: 'Error', level: 5 })
+    ).toBeInTheDocument();
+    expect(screen.getByText('no audits')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('list', { name: 'Audits data list' })
+    ).not.toBeInTheDocument();
+  });
 });