Query History: Split data and view models (#44922)

* Remove unused properties

* Fix unit tests

* Fix unit tests

* Split data models

* Simplify updating items in rich history

* Update tests

* Fix starring an item and add a unit test

* Move the converter to a separate file and add unit tests

* Convert a private function to an inline function

* Add more docs and clean up the code

* Update public/app/core/history/localStorageConverter.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/core/utils/richHistory.test.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Use template literals over explicit casting

* Split updateRichHistory to three separate functions

Co-authored-by: Giordano Ricci <me@giordanoricci.com>
This commit is contained in:
Piotr Jamróz
2022-02-10 13:59:43 +01:00
committed by GitHub
parent 374681b546
commit e7605ad974
16 changed files with 402 additions and 185 deletions

View File

@@ -1,26 +1,36 @@
import React from 'react';
import { shallow } from 'enzyme';
import { RichHistoryCard, Props } from './RichHistoryCard';
import { ExploreId } from '../../../types/explore';
import { ExploreId, RichHistoryQuery } from '../../../types/explore';
import { DataSourceApi, DataQuery } from '@grafana/data';
const setup = (propOverrides?: Partial<Props>) => {
const props: Props = {
const starRichHistoryMock = jest.fn();
interface MockQuery extends DataQuery {
query: string;
}
const setup = (propOverrides?: Partial<Props<MockQuery>>) => {
const props: Props<MockQuery> = {
query: {
ts: 1,
id: '1',
createdAt: 1,
datasourceUid: 'Test datasource uid',
datasourceName: 'Test datasource',
starred: false,
comment: '',
queries: [
{ expr: 'query1', refId: 'A' } as DataQuery,
{ expr: 'query2', refId: 'B' } as DataQuery,
{ expr: 'query3', refId: 'C' } as DataQuery,
{ query: 'query1', refId: 'A' },
{ query: 'query2', refId: 'B' },
{ query: 'query3', refId: 'C' },
],
},
dsImg: '/app/img',
isRemoved: false,
changeDatasource: jest.fn(),
updateRichHistory: jest.fn(),
starHistoryItem: starRichHistoryMock,
commentHistoryItem: jest.fn(),
deleteHistoryItem: jest.fn(),
setQueries: jest.fn(),
exploreId: ExploreId.left,
datasourceInstance: { name: 'Datasource' } as DataSourceApi,
@@ -32,8 +42,10 @@ const setup = (propOverrides?: Partial<Props>) => {
return wrapper;
};
const starredQueryWithComment = {
ts: 1,
const starredQueryWithComment: RichHistoryQuery<MockQuery> = {
id: '1',
createdAt: 1,
datasourceUid: 'Test datasource uid',
datasourceName: 'Test datasource',
starred: true,
comment: 'test comment',
@@ -48,9 +60,9 @@ describe('RichHistoryCard', () => {
it('should render all queries', () => {
const wrapper = setup();
expect(wrapper.find({ 'aria-label': 'Query text' })).toHaveLength(3);
expect(wrapper.find({ 'aria-label': 'Query text' }).at(0).text()).toEqual('{"expr":"query1"}');
expect(wrapper.find({ 'aria-label': 'Query text' }).at(1).text()).toEqual('{"expr":"query2"}');
expect(wrapper.find({ 'aria-label': 'Query text' }).at(2).text()).toEqual('{"expr":"query3"}');
expect(wrapper.find({ 'aria-label': 'Query text' }).at(0).text()).toEqual('{"query":"query1"}');
expect(wrapper.find({ 'aria-label': 'Query text' }).at(1).text()).toEqual('{"query":"query2"}');
expect(wrapper.find({ 'aria-label': 'Query text' }).at(2).text()).toEqual('{"query":"query3"}');
});
it('should render data source icon', () => {
const wrapper = setup();
@@ -120,11 +132,17 @@ describe('RichHistoryCard', () => {
describe('starring', () => {
it('should have title "Star query", if not starred', () => {
const wrapper = setup();
expect(wrapper.find({ title: 'Star query' })).toHaveLength(1);
const starButton = wrapper.find({ title: 'Star query' });
expect(starButton).toHaveLength(1);
starButton.simulate('click');
expect(starRichHistoryMock).toBeCalledWith(starredQueryWithComment.id, true);
});
it('should have title "Unstar query", if not starred', () => {
const wrapper = setup({ query: starredQueryWithComment });
expect(wrapper.find({ title: 'Unstar query' })).toHaveLength(1);
const starButton = wrapper.find({ title: 'Unstar query' });
expect(starButton).toHaveLength(1);
starButton.simulate('click');
expect(starRichHistoryMock).toBeCalledWith(starredQueryWithComment.id, false);
});
});
});