diff --git a/test/integration/hostgroup_js_test.rb b/test/integration/hostgroup_js_test.rb
index 1ef4dca91a..fc18746197 100644
--- a/test/integration/hostgroup_js_test.rb
+++ b/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
diff --git a/webpack/assets/javascripts/react_app/common/rtlTestHelpers.js b/webpack/assets/javascripts/react_app/common/rtlTestHelpers.js
index 56296ba6a6..d8f6936d6a 100644
--- a/webpack/assets/javascripts/react_app/common/rtlTestHelpers.js
+++ b/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({component});
},
/**
@@ -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(
- {React.createElement(IntlWrapper, {}, component)}
+ {component}
),
store,
diff --git a/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/AuditsPage.fixtures.js b/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/AuditsPage.fixtures.js
index 9fff871a00..e6eb1e4996 100644
--- a/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/AuditsPage.fixtures.js
+++ b/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,
};
diff --git a/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/__tests__/AuditsPage.test.js b/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/__tests__/AuditsPage.test.js
index a9c7926cd7..efab3340d4 100644
--- a/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/__tests__/AuditsPage.test.js
+++ b/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(
+
+
+
+ );
};
+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();
+ });
});
diff --git a/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/__tests__/__snapshots__/AuditsPage.test.js.snap b/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/__tests__/__snapshots__/AuditsPage.test.js.snap
deleted file mode 100644
index a5432cbc40..0000000000
--- a/webpack/assets/javascripts/react_app/routes/Audits/AuditsPage/__tests__/__snapshots__/AuditsPage.test.js.snap
+++ /dev/null
@@ -1,311 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AuditsPage rendering render audits page 1`] = `
-
- Documentation
-
- }
->
-
-
-`;
-
-exports[`AuditsPage rendering render audits page w/empty audits 1`] = `
-
- Documentation
-
- }
->
-
-
-`;
-
-exports[`AuditsPage rendering render audits page w/error 1`] = `
-
- Documentation
-
- }
->
-
-
-`;
-
-exports[`AuditsPage rendering render loading audits page 1`] = `
-
- Documentation
-
- }
->
-
-
-`;