Skip to content

Commit 7c8bb5d

Browse files
nicomiguelinonicomiguelino
authored
test: write unit tests for the ScheduleOverview component (#2390)
1 parent 2a08db5 commit 7c8bb5d

3 files changed

Lines changed: 165 additions & 29 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"lint:fix": "eslint static/src --fix",
99
"format:check": "prettier --check static/src",
1010
"format:fix": "prettier --write static/src",
11-
"test": "jest"
11+
"test": "jest --silent"
1212
},
1313
"dependencies": {
1414
"@dnd-kit/core": "^6.1.0",

‎static/src/components/active-assets.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -67,32 +67,32 @@ export const ActiveAssetsTable = ({ onEditAsset }: ActiveAssetsTableProps) => {
6767
};
6868

6969
return (
70-
<table className="ActiveAssets table">
71-
<thead className="table-borderless">
72-
<tr>
73-
<th className="font-weight-normal asset_row_name">Name</th>
74-
<th className="font-weight-normal" style={{ width: '21%' }}>
75-
Start
76-
</th>
77-
<th className="font-weight-normal" style={{ width: '21%' }}>
78-
End
79-
</th>
80-
<th className="font-weight-normal" style={{ width: '13%' }}>
81-
Duration
82-
</th>
83-
<th className="font-weight-normal" style={{ width: '7%' }}>
84-
Activity
85-
</th>
86-
<th className="font-weight-normal" style={{ width: '13%' }}>
87-
Actions
88-
</th>
89-
</tr>
90-
</thead>
91-
<DndContext
92-
sensors={sensors}
93-
collisionDetection={closestCenter}
94-
onDragEnd={handleDragEnd}
95-
>
70+
<DndContext
71+
sensors={sensors}
72+
collisionDetection={closestCenter}
73+
onDragEnd={handleDragEnd}
74+
>
75+
<table className="ActiveAssets table">
76+
<thead className="table-borderless">
77+
<tr>
78+
<th className="font-weight-normal asset_row_name">Name</th>
79+
<th className="font-weight-normal" style={{ width: '21%' }}>
80+
Start
81+
</th>
82+
<th className="font-weight-normal" style={{ width: '21%' }}>
83+
End
84+
</th>
85+
<th className="font-weight-normal" style={{ width: '13%' }}>
86+
Duration
87+
</th>
88+
<th className="font-weight-normal" style={{ width: '7%' }}>
89+
Activity
90+
</th>
91+
<th className="font-weight-normal" style={{ width: '13%' }}>
92+
Actions
93+
</th>
94+
</tr>
95+
</thead>
9696
<tbody id="active-assets" className="table-borderless">
9797
<SortableContext
9898
items={items.map((a) => a.asset_id.toString())}
@@ -119,7 +119,7 @@ export const ActiveAssetsTable = ({ onEditAsset }: ActiveAssetsTableProps) => {
119119
))}
120120
</SortableContext>
121121
</tbody>
122-
</DndContext>
123-
</table>
122+
</table>
123+
</DndContext>
124124
);
125125
};

‎static/src/tests/home.test.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { render, screen, act } from '@testing-library/react';
2+
import '@testing-library/jest-dom';
3+
import { Provider } from 'react-redux';
4+
import { configureStore } from '@reduxjs/toolkit';
5+
import { ScheduleOverview } from '@/components/home';
6+
import { RootState } from '@/types';
7+
import { assetsReducer, assetModalReducer } from '@/store/assets';
8+
import settingsReducer from '@/store/settings';
9+
10+
const initialState: RootState = {
11+
assets: {
12+
items: [
13+
{
14+
asset_id: 'ff18e72b5a2447fab372f5effa0797b1',
15+
name: 'https://react.dev/',
16+
uri: 'https://react.dev/',
17+
start_date: '2025-07-07T22:51:55.640000Z',
18+
end_date: '2025-08-06T22:51:55.640000Z',
19+
duration: 10,
20+
mimetype: 'webpage',
21+
is_enabled: 1,
22+
nocache: false,
23+
play_order: 0,
24+
skip_asset_check: false,
25+
is_active: true,
26+
is_processing: false,
27+
},
28+
{
29+
asset_id: '5bbf68491a0d4461bfe860911265b8be',
30+
name: 'https://angular.dev/',
31+
uri: 'https://angular.dev/',
32+
start_date: '2025-07-07T22:52:47.421000Z',
33+
end_date: '2025-08-06T22:52:47.421000Z',
34+
duration: 10,
35+
mimetype: 'webpage',
36+
is_enabled: 1,
37+
nocache: false,
38+
play_order: 1,
39+
skip_asset_check: false,
40+
is_active: true,
41+
is_processing: false,
42+
},
43+
{
44+
asset_id: '6eb86ce9d5c14597ae68017d4dd93900',
45+
name: 'https://vuejs.org/',
46+
uri: 'https://vuejs.org/',
47+
start_date: '2025-07-07T22:52:58.934000Z',
48+
end_date: '2025-08-06T22:52:58.934000Z',
49+
duration: 10,
50+
mimetype: 'webpage',
51+
is_enabled: 1,
52+
nocache: false,
53+
play_order: 2,
54+
skip_asset_check: false,
55+
is_active: true,
56+
is_processing: false,
57+
},
58+
],
59+
status: 'succeeded',
60+
error: null,
61+
},
62+
assetModal: {
63+
activeTab: 'uri',
64+
formData: {
65+
uri: '',
66+
skipAssetCheck: false,
67+
},
68+
isValid: true,
69+
errorMessage: '',
70+
statusMessage: '',
71+
isSubmitting: false,
72+
uploadProgress: 0,
73+
},
74+
settings: {
75+
settings: {
76+
playerName: '',
77+
defaultDuration: 10,
78+
defaultStreamingDuration: 300,
79+
audioOutput: 'hdmi',
80+
dateFormat: 'mm/dd/yyyy',
81+
authBackend: '',
82+
currentPassword: '',
83+
user: '',
84+
password: '',
85+
confirmPassword: '',
86+
showSplash: true,
87+
defaultAssets: false,
88+
shufflePlaylist: false,
89+
use24HourClock: false,
90+
debugLogging: false,
91+
},
92+
deviceModel: '',
93+
prevAuthBackend: '',
94+
hasSavedBasicAuth: false,
95+
isLoading: false,
96+
isUploading: false,
97+
uploadProgress: 0,
98+
error: null,
99+
},
100+
};
101+
102+
const createTestStore = (preloadedState = {}) => {
103+
return configureStore({
104+
reducer: {
105+
assets: assetsReducer,
106+
assetModal: assetModalReducer,
107+
settings: settingsReducer,
108+
},
109+
preloadedState,
110+
});
111+
};
112+
113+
const renderWithRedux = (
114+
component: React.ReactElement,
115+
state: RootState = initialState,
116+
) => {
117+
const store = createTestStore(state);
118+
return {
119+
...render(<Provider store={store}>{component}</Provider>),
120+
store,
121+
};
122+
};
123+
124+
describe('ScheduleOverview', () => {
125+
it('renders the home page', async () => {
126+
await act(async () => {
127+
renderWithRedux(<ScheduleOverview />);
128+
});
129+
130+
expect(screen.getByText('Schedule Overview')).toBeInTheDocument();
131+
132+
expect(screen.getByText('https://react.dev/')).toBeInTheDocument();
133+
expect(screen.getByText('https://angular.dev/')).toBeInTheDocument();
134+
expect(screen.getByText('https://vuejs.org/')).toBeInTheDocument();
135+
});
136+
});

0 commit comments

Comments
 (0)