Skip to content

Commit 41eb204

Browse files
garrettlchowgarrettlchow
committed
completed web metrics tests
1 parent a77bd53 commit 41eb204

File tree

2 files changed

+109
-132
lines changed

2 files changed

+109
-132
lines changed

‎src/app/__tests__/StateContainer.test.tsx‎

Whitespace-only changes.

‎src/app/__tests__/WebMetrics.test.tsx‎

Lines changed: 109 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,123 @@
11
import React from 'react';
2-
import { render as rtlRender } from '@testing-library/react';
2+
import { render, screen } from '@testing-library/react';
33
import '@testing-library/jest-dom';
44
import WebMetrics from '../components/StateRoute/WebMetrics/WebMetrics';
5-
import { useDispatch, Provider } from 'react-redux';
5+
import { Provider } from 'react-redux';
66
import { configureStore } from '@reduxjs/toolkit';
77
import { mainSlice } from '../slices/mainSlice';
88

9+
// Mock react-redux hooks
10+
const mockDispatch = jest.fn();
911
jest.mock('react-redux', () => ({
10-
...jest.requireActual('react-redux'), // Use the actual react-redux module except for the functions you want to mock
11-
useDispatch: jest.fn(), // set up a mock function for useDispatch
12+
...jest.requireActual('react-redux'),
13+
useDispatch: () => mockDispatch,
1214
}));
13-
const useDispatchMock = (useDispatch as unknown) as jest.Mock; // make the test run
14-
// const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
15-
const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
16-
useDispatchMock.mockReturnValue(dummyDispatch); //exactly useDispatchMock returns (which is a jest.fn())
17-
const customTabs = {
18-
87: {
19-
snapshots: [1, 2, 3, 4],
20-
hierarchy: {
21-
index: 0,
22-
name: 1,
23-
branch: 0,
24-
stateSnapshot: {
25-
state: {},
26-
children: [
27-
{
28-
state: { test: 'test' },
29-
name: 'App',
30-
componentData: { actualDuration: 3.5 },
31-
},
32-
],
33-
route: {
34-
id: 1,
35-
url: 'http://localhost:8080/',
36-
},
15+
16+
// Mock ApexCharts
17+
jest.mock('react-apexcharts', () => ({
18+
__esModule: true,
19+
default: () => <div data-testid='apex-chart' />,
20+
}));
21+
22+
// Mock react-hover
23+
jest.mock('react-hover', () => ({
24+
__esModule: true,
25+
default: ({ children }) => <div>{children}</div>,
26+
Trigger: ({ children }) => <div>{children}</div>,
27+
Hover: ({ children }) => <div className='hover-box'>{children}</div>,
28+
}));
29+
30+
describe('WebMetrics Component', () => {
31+
// Clear all mocks before each test
32+
beforeEach(() => {
33+
mockDispatch.mockClear();
34+
});
35+
36+
// Setup function to create consistent test environment
37+
const setupTest = (customProps = {}) => {
38+
const defaultProps = {
39+
color: '#0bce6b',
40+
series: [75],
41+
formatted: (value) => `${value} ms`,
42+
score: ['100 ms', '300 ms'],
43+
overLimit: false,
44+
label: 'Test Metric',
45+
name: 'Test Metric Name',
46+
description: 'Test metric description',
47+
};
48+
49+
const props = { ...defaultProps, ...customProps };
50+
51+
const store = configureStore({
52+
reducer: {
53+
main: mainSlice.reducer,
3754
},
38-
children: [
39-
{
40-
index: 1,
41-
name: 2,
42-
branch: 0,
43-
stateSnapshot: {
44-
state: {},
45-
children: [
46-
{
47-
state: { test: 'test' },
48-
name: 'App',
49-
componentData: { actualDuration: 3.5 },
50-
},
51-
],
52-
route: {
53-
id: 2,
54-
url: 'http://localhost:8080/',
55-
},
56-
},
57-
children: [
58-
{
59-
index: 2,
60-
name: 3,
61-
branch: 0,
62-
stateSnapshot: {
63-
state: {},
64-
children: [
65-
{
66-
state: { test: 'test' },
67-
name: 'App',
68-
componentData: { actualDuration: 3.5 },
69-
},
70-
],
71-
route: {
72-
id: 3,
73-
url: 'http://localhost:8080/',
74-
},
75-
},
76-
children: [
77-
{
78-
index: 3,
79-
name: 4,
80-
branch: 0,
81-
stateSnapshot: {
82-
state: {},
83-
children: [
84-
{
85-
state: { test: 'test' },
86-
name: 'App',
87-
componentData: { actualDuration: 3.5 },
88-
},
89-
],
90-
route: {
91-
id: 4,
92-
url: 'http://localhost:8080/test/',
93-
},
94-
},
95-
children: [],
96-
},
97-
],
98-
},
99-
],
100-
},
101-
],
102-
},
103-
currLocation: {
104-
index: 0,
105-
name: 1,
106-
branch: 0,
107-
},
108-
sliderIndex: 0,
109-
viewIndex: -1,
110-
},
111-
};
112-
113-
const customInitialState = {
114-
main: {
115-
port: null,
116-
currentTab: 87, // Update with your desired value
117-
currentTitle: 'test string',
118-
tabs: customTabs, // Replace with the actual (testing) tab data
119-
currentTabInApp: null,
120-
connectionStatus: false,
121-
connectRequested: true,
122-
},
123-
};
124-
125-
const props = {
126-
score: [5],
127-
};
128-
129-
const customStore = configureStore({
130-
reducer: {
131-
main: mainSlice.reducer,
132-
},
133-
preloadedState: customInitialState, // Provide custom initial state
134-
middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
135-
});
55+
middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
56+
});
13657

137-
const render = (component) => rtlRender(<Provider store={customStore}>{component}</Provider>);
58+
return render(
59+
<Provider store={store}>
60+
<WebMetrics {...props} />
61+
</Provider>,
62+
);
63+
};
13864

139-
jest.mock('react-apexcharts', () => ({ __esModule: true, default: () => <div /> }));
65+
test('renders chart container', () => {
66+
const { container } = setupTest();
67+
expect(container.getElementsByClassName('chart-container').length).toBe(1);
68+
});
69+
70+
test('renders ApexCharts component', () => {
71+
setupTest();
72+
expect(screen.getByTestId('apex-chart')).toBeInTheDocument();
73+
});
74+
75+
test('applies correct color prop to chart options', () => {
76+
const testColor = '#ff0000';
77+
const { container } = setupTest({ color: testColor });
78+
const chartContainer = container.querySelector('.chart-container');
79+
expect(chartContainer).toBeInTheDocument();
80+
});
81+
82+
test('handles overLimit prop correctly', () => {
83+
const { container } = setupTest({ overLimit: true });
84+
const chartContainer = container.querySelector('.chart-container');
85+
expect(chartContainer).toBeInTheDocument();
86+
});
87+
88+
test('renders hover content with correct information', () => {
89+
const testProps = {
90+
name: 'Custom Test Metric',
91+
description: 'Custom Test Description',
92+
score: ['100 ms', '300 ms'],
93+
};
94+
const { container } = setupTest(testProps);
95+
const hoverBox = container.querySelector('.hover-box');
96+
expect(hoverBox).toBeInTheDocument();
97+
expect(hoverBox).toHaveTextContent('Custom Test Metric');
98+
expect(hoverBox).toHaveTextContent('Custom Test Description');
99+
});
100+
101+
test('displays correct threshold colors in hover box', () => {
102+
const { container } = setupTest();
103+
const hoverBox = container.querySelector('.hover-box');
104+
expect(hoverBox).toBeInTheDocument();
105+
});
106+
107+
test('formats values correctly using formatted prop', () => {
108+
const customFormatted = jest.fn((value) => `Custom ${value}`);
109+
setupTest({ formatted: customFormatted });
110+
expect(screen.getByTestId('apex-chart')).toBeInTheDocument();
111+
});
112+
113+
test('dispatches setCurrentTabInApp on mount', () => {
114+
setupTest();
115+
expect(mockDispatch).toHaveBeenCalledWith(expect.any(Object));
116+
expect(mockDispatch).toHaveBeenCalledTimes(1);
117+
});
140118

141-
describe('WebMetrics graph testing', () => {
142-
test('should have 1 div with class name "metric" ', () => {
143-
const { container } = render(<WebMetrics {...props} />);
144-
expect(container.getElementsByClassName('metric').length).toBe(1);
119+
test('handles empty series data gracefully', () => {
120+
const { container } = setupTest({ series: [] });
121+
expect(container.getElementsByClassName('chart-container').length).toBe(1);
145122
});
146123
});

0 commit comments

Comments
 (0)