Skip to content

Commit 9bf03c7

Browse files
F-X64F-X64
committedFeb 20, 2023
Enable testing
·
2.0.0
1 parent bafb89b commit 9bf03c7

File tree

14 files changed

+2772
-1533
lines changed

14 files changed

+2772
-1533
lines changed
 

‎.github/workflows/main.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@ jobs:
2828
- name: Install Packages
2929
run: npm ci
3030
- name: Perform Tests
31-
run: npm test
31+
run: npm run test:coverage
3232
- name: Perform Audit
3333
run: npm audit --production

‎__mocks__/fileMock.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = 'test-file-stub';

‎__mocks__/styleMock.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {};

‎jest.config.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
// For a detailed explanation regarding each configuration property, visit:
2-
// https://jestjs.io/docs/en/configuration.html
3-
1+
/** @type {import('ts-jest').JestConfigWithTsJest} */
42
module.exports = {
53
// Automatically clear mock calls and instances between every test
64
clearMocks: true,
@@ -19,7 +17,7 @@ module.exports = {
1917

2018
// A map from regular expressions to module names that allow to stub out resources with a single module
2119
moduleNameMapper: {
22-
'\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
20+
'\\.(scss|css|less)$': '<rootDir>/__mocks__/styleMock.js',
2321
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
2422
"@app/(.*)": '<rootDir>/src/app/$1'
2523
},
@@ -28,12 +26,15 @@ module.exports = {
2826
preset: "ts-jest/presets/js-with-ts",
2927

3028
// The path to a module that runs some code to configure or set up the testing framework before each test
31-
setupFilesAfterEnv: ['<rootDir>/test-setup.js'],
29+
// setupFilesAfterEnv: ['<rootDir>/test-setup.js'],
30+
31+
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
32+
3233

3334
// The test environment that will be used for testing.
3435
testEnvironment: "jsdom",
3536

3637
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
37-
snapshotSerializers: ['enzyme-to-json/serializer'],
38+
//snapshotSerializers: ['enzyme-to-json/serializer'],
3839

3940
};

‎package-lock.json

+2,660-1,475
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
"clean": "rimraf dist"
2525
},
2626
"devDependencies": {
27+
"@babel/preset-typescript": "^7.18.6",
28+
"@testing-library/jest-dom": "^5.16.5",
29+
"@testing-library/react": "^14.0.0",
30+
"@testing-library/user-event": "^14.4.3",
2731
"@types/enzyme": "^3.10.8",
2832
"@types/jest": "^26.0.23",
2933
"@types/react": "^18.0.26",
@@ -44,7 +48,8 @@
4448
"file-loader": "^6.2.0",
4549
"html-webpack-plugin": "^5.3.1",
4650
"imagemin": "^8.0.0",
47-
"jest": "^27.0.4",
51+
"jest": "^29.4.3",
52+
"jest-environment-jsdom": "^29.4.3",
4853
"mini-css-extract-plugin": "^1.6.0",
4954
"postcss": "^8.3.1",
5055
"prettier": "^2.3.1",
@@ -59,6 +64,7 @@
5964
"style-loader": "^2.0.0",
6065
"svg-url-loader": "^7.1.1",
6166
"terser-webpack-plugin": "^5.3.6",
67+
"ts-jest": "^29.0.5",
6268
"ts-loader": "^9.2.3",
6369
"tsconfig-paths-webpack-plugin": "^3.5.1",
6470
"tslib": "^2.2.0",

‎src/app/AppLayout/AppLayout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
9898
<Nav id="nav-primary-simple" theme="dark">
9999
<NavList id="nav-list-simple">
100100
{routes.map(
101-
(route, idx) => route.label && (!route.routes ? renderNavItem(route, idx) : renderNavGroup(route, idx))
101+
(route, idx) => route.label && renderNavItem(route, idx) //(!route.routes ? renderNavItem(route, idx) : renderNavGroup(route, idx))
102102
)}
103103
</NavList>
104104
</Nav>
@@ -107,7 +107,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
107107
const headerJumpLinks = (
108108
<JumpLinks isCentered>
109109
{routes.map(
110-
(route, idx) => route.label && (!route.routes ? renderJumpLinkItem(route, idx) : renderJumpLinkList(route, idx))
110+
(route, idx) => route.label && renderJumpLinkItem(route, idx) //(!route.routes ? renderJumpLinkItem(route, idx) : renderJumpLinkList(route, idx))
111111
)}
112112
</JumpLinks>
113113
)

‎src/app/Pages/Browser/Azure.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ const columns = [
5959
return (
6060
<AzureImageModal
6161
urn={imageId}
62-
majorRelease={version}
6362
architecture={arch}
6463
version={version} />
6564
)

‎src/app/Pages/Dashboard/Home.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
2-
import { PageSectionVariants, PageSection, Title, Grid, Flex, FlexItem, Bullseye, TitleSizes, Gallery, GalleryItem, TextContent,
3-
Text,
4-
TextVariants, } from '@patternfly/react-core';
2+
import {
3+
PageSectionVariants, PageSection, Title, Flex, FlexItem, Bullseye, TitleSizes, Text, TextVariants,
4+
} from '@patternfly/react-core';
55
import ProviderCard from '@app/components/ProviderCard'
66
import { useDocumentTitle } from '@app/utils/useDocumentTitle'
77

@@ -44,9 +44,9 @@ const Home: React.FunctionComponent<{title: string}> = ({title}) => {
4444
<PageSection variant={PageSectionVariants.darker}>
4545
<Bullseye>
4646
<Flex>
47-
{providerInfos.map(({name, image, text, url}) => (
48-
<FlexItem>
49-
<ProviderCard name={name} image={image} text={text} url={url} />
47+
{providerInfos.map(({name, text, url}, index) => (
48+
<FlexItem key={`provider_card_${index}`}>
49+
<ProviderCard name={name} text={text} url={url}/>
5050
</FlexItem>
5151
))}
5252
</Flex>

‎src/app/__snapshots__/app.test.tsx.snap

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`App tests should render default App component 1`] = `
4+
{
5+
"debug": [Function],
6+
"findAllByAltText": [Function],
7+
"findAllByDisplayValue": [Function],
8+
"findAllByLabelText": [Function],
9+
"findAllByPlaceholderText": [Function],
10+
"findAllByRole": [Function],
11+
"findAllByTestId": [Function],
12+
"findAllByText": [Function],
13+
"findAllByTitle": [Function],
14+
"findByAltText": [Function],
15+
"findByDisplayValue": [Function],
16+
"findByLabelText": [Function],
17+
"findByPlaceholderText": [Function],
18+
"findByRole": [Function],
19+
"findByTestId": [Function],
20+
"findByText": [Function],
21+
"findByTitle": [Function],
22+
"getAllByAltText": [Function],
23+
"getAllByDisplayValue": [Function],
24+
"getAllByLabelText": [Function],
25+
"getAllByPlaceholderText": [Function],
26+
"getAllByRole": [Function],
27+
"getAllByTestId": [Function],
28+
"getAllByText": [Function],
29+
"getAllByTitle": [Function],
30+
"getByAltText": [Function],
31+
"getByDisplayValue": [Function],
32+
"getByLabelText": [Function],
33+
"getByPlaceholderText": [Function],
34+
"getByRole": [Function],
35+
"getByTestId": [Function],
36+
"getByText": [Function],
37+
"getByTitle": [Function],
38+
"logTestingPlaygroundURL": [Function],
39+
"queryAllByAltText": [Function],
40+
"queryAllByDisplayValue": [Function],
41+
"queryAllByLabelText": [Function],
42+
"queryAllByPlaceholderText": [Function],
43+
"queryAllByRole": [Function],
44+
"queryAllByTestId": [Function],
45+
"queryAllByText": [Function],
46+
"queryAllByTitle": [Function],
47+
"queryByAltText": [Function],
48+
"queryByDisplayValue": [Function],
49+
"queryByLabelText": [Function],
50+
"queryByPlaceholderText": [Function],
51+
"queryByRole": [Function],
52+
"queryByTestId": [Function],
53+
"queryByText": [Function],
54+
"queryByTitle": [Function],
55+
}
56+
`;

‎src/app/app.test.tsx

+26-35
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,33 @@
1-
import * as React from 'react';
2-
import App from '@app/index';
3-
import { mount, shallow } from 'enzyme';
4-
import { Button } from '@patternfly/react-core';
1+
import * as React from 'react'
2+
import {render, screen, queryByAttribute, act, within} from '@testing-library/react'
3+
import '@testing-library/jest-dom'
4+
import App from '@app/index'
5+
import userEvent from '@testing-library/user-event'
6+
import { Button } from '@patternfly/react-core'
57

68
describe('App tests', () => {
79
test('should render default App component', () => {
8-
const view = shallow(<App />);
9-
expect(view).toMatchSnapshot();
10-
});
11-
12-
it('should render a nav-toggle button', () => {
13-
const wrapper = mount(<App />);
14-
const button = wrapper.find(Button);
15-
expect(button.exists()).toBe(true);
16-
});
10+
render(<App />)
11+
expect(screen).toMatchSnapshot()
12+
})
1713

1814
it('should hide the sidebar on smaller viewports', () => {
19-
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 });
20-
const wrapper = mount(<App />);
21-
window.dispatchEvent(new Event('resize'));
22-
expect(wrapper.find('#page-sidebar').hasClass('pf-m-collapsed')).toBeTruthy();
23-
});
15+
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
16+
const getById = queryByAttribute.bind(null, 'id')
17+
const dom = render(<App />)
18+
act(() => window.dispatchEvent(new Event('resize')))
19+
expect(getById(dom.container, 'page-sidebar')).toHaveClass('pf-m-collapsed')
20+
})
2421

25-
it('should expand the sidebar on larger viewports', () => {
26-
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1200 });
27-
const wrapper = mount(<App />);
28-
window.dispatchEvent(new Event('resize'));
29-
expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded')).toBeTruthy();
30-
});
22+
it('should show the sidebar when clicking the nav-toggle button', async () => {
23+
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
24+
const getById = queryByAttribute.bind(null, 'id')
25+
const dom = render(<App />)
26+
const navButton = screen.getByRole('button')
3127

32-
it('should hide the sidebar when clicking the nav-toggle button', () => {
33-
Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1200 });
34-
const wrapper = mount(<App />);
35-
window.dispatchEvent(new Event('resize'));
36-
const button = wrapper.find('#nav-toggle').hostNodes();
37-
expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded')).toBeTruthy();
38-
button.simulate('click');
39-
expect(wrapper.find('#page-sidebar').hasClass('pf-m-collapsed')).toBeTruthy();
40-
expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded')).toBeFalsy();
41-
});
42-
});
28+
act(() => window.dispatchEvent(new Event('resize')))
29+
expect(getById(dom.container,'page-sidebar')).toHaveClass('pf-m-collapsed')
30+
await userEvent.click(navButton)
31+
expect(getById(dom.container,'page-sidebar')).toHaveClass('pf-m-expanded')
32+
})
33+
})

‎src/app/components/ProviderCard.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import redhat_logo from '@app/bgimages/redhat_clear.png'
1414

1515

1616
interface IProviderCardProps {
17-
image: any
1817
name: string
1918
text: string
2019
url: string

‎src/app/routes.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ const routes: AppRouteConfig[] = [
6363
const AppRoutes = (): React.ReactElement => (
6464
<LastLocationProvider>
6565
<Routes>
66-
{routes.map(route => {
66+
{routes.map( (route, index) => {
6767
return (
68-
<Route path={route.path} element={route.component}/>
68+
<Route path={route.path} element={route.component} key={`app_route_${index}`}/>
6969
)
7070
})}
7171
<Route path='*' element={<NotFound title='404 Page Not Found'/>} />

‎test-setup.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { configure } from 'enzyme';
2-
import ReactSeventeenAdapter from '@wojtekmaj/enzyme-adapter-react-17';
1+
import { configure, Adapter } from 'enzyme';
2+
// import ReactSeventeenAdapter from '@wojtekmaj/enzyme-adapter-react-17';
33

4-
configure({ adapter: new ReactSeventeenAdapter() });
4+
configure({ adapter: new Adapter() });

0 commit comments

Comments
 (0)
Please sign in to comment.