From df6572b53f549436dcc282ac875721c031575885 Mon Sep 17 00:00:00 2001 From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com> Date: Thu, 23 Feb 2023 11:51:51 +0100 Subject: [PATCH] Laura/refactor/move tests for running queries (#63581) * refactor: move tests to a new file and clean up original file * refactor: restructure test * refactor: remove linting error * refactor: change wording in test description --- .../app/features/explore/ExplorePage.test.tsx | 92 +--------------- .../app/features/explore/spec/query.test.tsx | 102 ++++++++++++++++++ 2 files changed, 103 insertions(+), 91 deletions(-) create mode 100644 public/app/features/explore/spec/query.test.tsx diff --git a/public/app/features/explore/ExplorePage.test.tsx b/public/app/features/explore/ExplorePage.test.tsx index 10e1875e630..bd16ed3546d 100644 --- a/public/app/features/explore/ExplorePage.test.tsx +++ b/public/app/features/explore/ExplorePage.test.tsx @@ -7,7 +7,7 @@ import { serializeStateToUrlParam } from '@grafana/data'; import { locationService, config } from '@grafana/runtime'; import { changeDatasource } from './spec/helper/interactions'; -import { makeLogsQueryResponse, makeMetricsQueryResponse } from './spec/helper/query'; +import { makeLogsQueryResponse } from './spec/helper/query'; import { setupExplore, tearDown, waitForExplore } from './spec/helper/setup'; import * as mainState from './state/main'; import * as queryState from './state/query'; @@ -65,96 +65,6 @@ describe('ExplorePage', () => { }); }); - describe('Handles running/not running query', () => { - it('inits url and renders editor but does not call query on empty url', async () => { - const { datasources } = setupExplore(); - await waitForExplore(); - - // At this point url should be initialised to some defaults - expect(locationService.getSearchObject()).toEqual({ - orgId: '1', - left: serializeStateToUrlParam({ - datasource: 'loki-uid', - queries: [{ refId: 'A', datasource: { type: 'logs', uid: 'loki-uid' } }], - range: { from: 'now-1h', to: 'now' }, - }), - }); - expect(datasources.loki.query).not.toBeCalled(); - }); - - it('runs query when url contains query and renders results', async () => { - const urlParams = { - left: serializeStateToUrlParam({ - datasource: 'loki-uid', - queries: [{ refId: 'A', expr: '{ label="value"}' }], - range: { from: 'now-1h', to: 'now' }, - }), - }; - const { datasources } = setupExplore({ urlParams }); - jest.mocked(datasources.loki.query).mockReturnValueOnce(makeLogsQueryResponse()); - - // Make sure we render the logs panel - await screen.findByText(/^Logs$/); - - // Make sure we render the log line - await screen.findByText(/custom log line/i); - - // And that the editor gets the expr from the url - await screen.findByText(`loki Editor input: { label="value"}`); - - // We did not change the url - expect(locationService.getSearchObject()).toEqual({ - orgId: '1', - ...urlParams, - }); - - // We called the data source query method once - expect(datasources.loki.query).toBeCalledTimes(1); - expect(jest.mocked(datasources.loki.query).mock.calls[0][0]).toMatchObject({ - targets: [{ expr: '{ label="value"}' }], - }); - }); - - it('handles url change and runs the new query', async () => { - const urlParams = { left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="value"}' }]) }; - const { datasources } = setupExplore({ urlParams }); - jest.mocked(datasources.loki.query).mockReturnValueOnce(makeLogsQueryResponse()); - // Wait for rendering the logs - await screen.findByText(/custom log line/i); - - jest.mocked(datasources.loki.query).mockReturnValueOnce(makeLogsQueryResponse('different log')); - - locationService.partial({ - left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="different"}' }]), - }); - - // Editor renders the new query - await screen.findByText(`loki Editor input: { label="different"}`); - // Renders new response - await screen.findByText(/different log/i); - }); - - it('handles url change and runs the new query with different datasource', async () => { - const urlParams = { left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="value"}' }]) }; - const { datasources } = setupExplore({ urlParams }); - jest.mocked(datasources.loki.query).mockReturnValueOnce(makeLogsQueryResponse()); - // Wait for rendering the logs - await screen.findByText(/custom log line/i); - await screen.findByText(`loki Editor input: { label="value"}`); - - jest.mocked(datasources.elastic.query).mockReturnValueOnce(makeMetricsQueryResponse()); - - locationService.partial({ - left: JSON.stringify(['now-1h', 'now', 'elastic', { expr: 'other query' }]), - }); - - // Editor renders the new query - await screen.findByText(`elastic Editor input: other query`); - // Renders graph - await screen.findByText(/Graph/i); - }); - }); - describe('Handles open/close splits and related events in UI and URL', () => { it('opens the split pane when split button is clicked', async () => { setupExplore(); diff --git a/public/app/features/explore/spec/query.test.tsx b/public/app/features/explore/spec/query.test.tsx new file mode 100644 index 00000000000..16dea667f66 --- /dev/null +++ b/public/app/features/explore/spec/query.test.tsx @@ -0,0 +1,102 @@ +import { screen } from '@testing-library/react'; + +import { serializeStateToUrlParam } from '@grafana/data'; +import { locationService } from '@grafana/runtime'; + +import { makeLogsQueryResponse, makeMetricsQueryResponse } from './helper/query'; +import { setupExplore, tearDown, waitForExplore } from './helper/setup'; + +describe('Explore: handle running/not running query', () => { + afterEach(() => { + tearDown(); + }); + it('inits url and renders editor but does not call query on empty url', async () => { + const { datasources } = setupExplore(); + await waitForExplore(); + + // At this point url should be initialised to some defaults + expect(locationService.getSearchObject()).toEqual({ + orgId: '1', + left: serializeStateToUrlParam({ + datasource: 'loki-uid', + queries: [{ refId: 'A', datasource: { type: 'logs', uid: 'loki-uid' } }], + range: { from: 'now-1h', to: 'now' }, + }), + }); + expect(datasources.loki.query).not.toBeCalled(); + }); + + it('runs query when url contains query and renders results', async () => { + const urlParams = { + left: serializeStateToUrlParam({ + datasource: 'loki-uid', + queries: [{ refId: 'A', expr: '{ label="value"}' }], + range: { from: 'now-1h', to: 'now' }, + }), + }; + const { datasources } = setupExplore({ urlParams }); + jest.mocked(datasources.loki.query).mockReturnValueOnce(makeLogsQueryResponse()); + + // Make sure we render the logs panel + await screen.findByText(/^Logs$/); + + // Make sure we render the log line + await screen.findByText(/custom log line/i); + + // And that the editor gets the expr from the url + await screen.findByText(`loki Editor input: { label="value"}`); + + // We did not change the url + expect(locationService.getSearchObject()).toEqual({ + orgId: '1', + ...urlParams, + }); + + // We called the data source query method once + expect(datasources.loki.query).toBeCalledTimes(1); + expect(jest.mocked(datasources.loki.query).mock.calls[0][0]).toMatchObject({ + targets: [{ expr: '{ label="value"}' }], + }); + }); + + describe('handles url change', () => { + const urlParams = { left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="value"}' }]) }; + + it('and runs the new query', async () => { + const { datasources } = setupExplore({ urlParams }); + jest.mocked(datasources.loki.query).mockReturnValueOnce(makeLogsQueryResponse()); + // Wait for rendering the logs + await screen.findByText(/custom log line/i); + + jest.mocked(datasources.loki.query).mockReturnValueOnce(makeLogsQueryResponse('different log')); + + locationService.partial({ + left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="different"}' }]), + }); + + // Editor renders the new query + await screen.findByText(`loki Editor input: { label="different"}`); + // Renders new response + await screen.findByText(/different log/i); + }); + + it('and runs the new query with different datasource', async () => { + const { datasources } = setupExplore({ urlParams }); + jest.mocked(datasources.loki.query).mockReturnValueOnce(makeLogsQueryResponse()); + // Wait for rendering the logs + await screen.findByText(/custom log line/i); + await screen.findByText(`loki Editor input: { label="value"}`); + + jest.mocked(datasources.elastic.query).mockReturnValueOnce(makeMetricsQueryResponse()); + + locationService.partial({ + left: JSON.stringify(['now-1h', 'now', 'elastic', { expr: 'other query' }]), + }); + + // Editor renders the new query + await screen.findByText(`elastic Editor input: other query`); + // Renders graph + await screen.findByText(/Graph/i); + }); + }); +});