-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into add-cluster-name-flag
- Loading branch information
Showing
13 changed files
with
498 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
151 changes: 151 additions & 0 deletions
151
frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,151 @@ | ||
import { render, RenderResult } from '@testing-library/react'; | ||
import userEvent from '@testing-library/user-event'; | ||
import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange'; | ||
import { logsQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range'; | ||
import { server } from 'mocks-server/server'; | ||
import { rest } from 'msw'; | ||
import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils'; | ||
import { QueryBuilderProvider } from 'providers/QueryBuilder'; | ||
import MockQueryClientProvider from 'providers/test/MockQueryClientProvider'; | ||
import { I18nextProvider } from 'react-i18next'; | ||
import { Provider } from 'react-redux'; | ||
import { MemoryRouter } from 'react-router-dom'; | ||
import { VirtuosoMockContext } from 'react-virtuoso'; | ||
import i18n from 'ReactI18'; | ||
import store from 'store'; | ||
|
||
import LogsExplorerViews from '..'; | ||
import { logsQueryRangeSuccessNewFormatResponse } from './mock'; | ||
|
||
const logExplorerRoute = '/logs/logs-explorer'; | ||
|
||
const queryRangeURL = 'http://localhost/api/v3/query_range'; | ||
|
||
const lodsQueryServerRequest = (): void => | ||
server.use( | ||
rest.post(queryRangeURL, (req, res, ctx) => | ||
res(ctx.status(200), ctx.json(logsQueryRangeSuccessResponse)), | ||
), | ||
); | ||
|
||
// mocking the graph components in this test as this should be handled separately | ||
jest.mock( | ||
'container/TimeSeriesView/TimeSeriesView', | ||
() => | ||
// eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name | ||
function () { | ||
return <div>Time Series Chart</div>; | ||
}, | ||
); | ||
jest.mock( | ||
'container/LogsExplorerChart', | ||
() => | ||
// eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name | ||
function () { | ||
return <div>Histogram Chart</div>; | ||
}, | ||
); | ||
|
||
jest.mock('constants/panelTypes', () => ({ | ||
AVAILABLE_EXPORT_PANEL_TYPES: ['graph', 'table'], | ||
})); | ||
|
||
jest.mock('d3-interpolate', () => ({ | ||
interpolate: jest.fn(), | ||
})); | ||
|
||
jest.mock('hooks/queryBuilder/useGetExplorerQueryRange', () => ({ | ||
__esModule: true, | ||
useGetExplorerQueryRange: jest.fn(), | ||
})); | ||
|
||
// Set up the specific behavior for useGetExplorerQueryRange in individual test cases | ||
beforeEach(() => { | ||
(useGetExplorerQueryRange as jest.Mock).mockReturnValue({ | ||
data: { payload: logsQueryRangeSuccessNewFormatResponse }, | ||
}); | ||
}); | ||
|
||
const renderer = (): RenderResult => | ||
render( | ||
<MemoryRouter initialEntries={[logExplorerRoute]}> | ||
<Provider store={store}> | ||
<I18nextProvider i18n={i18n}> | ||
<MockQueryClientProvider> | ||
<QueryBuilderProvider> | ||
<VirtuosoMockContext.Provider | ||
value={{ viewportHeight: 300, itemHeight: 100 }} | ||
> | ||
<LogsExplorerViews selectedView={SELECTED_VIEWS.SEARCH} showHistogram /> | ||
</VirtuosoMockContext.Provider> | ||
</QueryBuilderProvider> | ||
</MockQueryClientProvider> | ||
</I18nextProvider> | ||
</Provider> | ||
</MemoryRouter>, | ||
); | ||
|
||
describe('LogsExplorerViews -', () => { | ||
it('render correctly with props - list and table', async () => { | ||
lodsQueryServerRequest(); | ||
const { queryByText, queryByTestId } = renderer(); | ||
|
||
expect(queryByTestId('periscope-btn')).toBeInTheDocument(); | ||
await userEvent.click(queryByTestId('periscope-btn') as HTMLElement); | ||
|
||
expect(document.querySelector('.menu-container')).toBeInTheDocument(); | ||
|
||
const menuItems = document.querySelectorAll('.menu-items .item'); | ||
expect(menuItems.length).toBe(3); | ||
|
||
// switch to table view | ||
// eslint-disable-next-line sonarjs/no-duplicate-string | ||
await userEvent.click(queryByTestId('table-view') as HTMLElement); | ||
|
||
expect( | ||
queryByText( | ||
'{"container_id":"container_id","container_name":"container_name","driver":"driver","eta":"2m0s","location":"frontend","log_level":"INFO","message":"Dispatch successful","service":"frontend","span_id":"span_id","trace_id":"span_id"}', | ||
), | ||
).toBeInTheDocument(); | ||
}); | ||
|
||
it('check isLoading state', async () => { | ||
lodsQueryServerRequest(); | ||
(useGetExplorerQueryRange as jest.Mock).mockReturnValue({ | ||
data: { payload: logsQueryRangeSuccessNewFormatResponse }, | ||
isLoading: true, | ||
isFetching: false, | ||
}); | ||
const { queryByText, queryByTestId } = renderer(); | ||
|
||
// switch to table view | ||
await userEvent.click(queryByTestId('table-view') as HTMLElement); | ||
expect( | ||
queryByText( | ||
'Just a bit of patience, just a little bit’s enough ⎯ we’re getting your logs!', | ||
), | ||
).toBeInTheDocument(); | ||
}); | ||
|
||
it('check error state', async () => { | ||
lodsQueryServerRequest(); | ||
(useGetExplorerQueryRange as jest.Mock).mockReturnValue({ | ||
data: { payload: logsQueryRangeSuccessNewFormatResponse }, | ||
isLoading: false, | ||
isFetching: false, | ||
isError: true, | ||
}); | ||
const { queryByText, queryByTestId } = renderer(); | ||
|
||
expect( | ||
queryByText('Something went wrong. Please try again or contact support.'), | ||
).toBeInTheDocument(); | ||
|
||
// switch to table view | ||
await userEvent.click(queryByTestId('table-view') as HTMLElement); | ||
|
||
expect( | ||
queryByText('Something went wrong. Please try again or contact support.'), | ||
).toBeInTheDocument(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
export const logsQueryRangeSuccessNewFormatResponse = { | ||
data: { | ||
result: [], | ||
resultType: '', | ||
newResult: { | ||
status: 'success', | ||
data: { | ||
resultType: '', | ||
result: [ | ||
{ | ||
queryName: 'A', | ||
series: null, | ||
list: [ | ||
{ | ||
timestamp: '2024-02-15T21:20:22Z', | ||
data: { | ||
attributes_bool: {}, | ||
attributes_float64: {}, | ||
attributes_int64: {}, | ||
attributes_string: { | ||
container_id: 'container_id', | ||
container_name: 'container_name', | ||
driver: 'driver', | ||
eta: '2m0s', | ||
location: 'frontend', | ||
log_level: 'INFO', | ||
message: 'Dispatch successful', | ||
service: 'frontend', | ||
span_id: 'span_id', | ||
trace_id: 'span_id', | ||
}, | ||
body: | ||
'2024-02-15T21:20:22.035Z\tINFO\tfrontend\tDispatch successful\t{"service": "frontend", "trace_id": "span_id", "span_id": "span_id", "driver": "driver", "eta": "2m0s"}', | ||
id: 'id', | ||
resources_string: { | ||
'container.name': 'container_name', | ||
}, | ||
severity_number: 0, | ||
severity_text: '', | ||
span_id: '', | ||
trace_flags: 0, | ||
trace_id: '', | ||
}, | ||
}, | ||
], | ||
}, | ||
], | ||
}, | ||
}, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.