diff --git a/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap index 774fd16857..6103f85cf9 100644 --- a/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap +++ b/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` spec renders the component 1`] = ` +exports[` spec renders the empty component 1`] = `
@@ -41,19 +41,14 @@ exports[` spec renders the component 1`] = ` > + /> @@ -66,7 +61,48 @@ exports[` spec renders the component 1`] = `
+ > +
+
+
+ +
+
+
+
@@ -86,19 +122,14 @@ exports[` spec renders the component 1`] = ` > + /> @@ -115,7 +146,9 @@ exports[` spec renders the component 1`] = ` />

+ > + sample-notebook-1 +

@@ -133,7 +166,7 @@ exports[` spec renders the component 1`] = ` Created
- Invalid date + 12/14/2023 06:49 PM

@@ -184,18 +217,14 @@ exports[` spec renders the component 1`] = ` > + />
spec renders the component 1`] = ` > + />
spec renders the component 1`] = `
`; -exports[` spec renders the empty component 1`] = ` +exports[` spec renders the visualization component 1`] = `
@@ -354,14 +379,19 @@ exports[` spec renders the empty component 1`] = ` > + > + + @@ -374,48 +404,7 @@ exports[` spec renders the empty component 1`] = `
-
-
-
- -
-
-
-
+ />
@@ -435,14 +424,19 @@ exports[` spec renders the empty component 1`] = ` > + > + + @@ -459,9 +453,7 @@ exports[` spec renders the empty component 1`] = ` />

- sample-notebook-1 -

+ />
@@ -479,7 +471,7 @@ exports[` spec renders the empty component 1`] = ` Created
- 12/14/2023 06:49 PM + Invalid date

@@ -530,14 +522,18 @@ exports[` spec renders the empty component 1`] = ` > + > + +
spec renders the empty component 1`] = ` > + > + +
spec', () => { it('renders the empty component and checks code block operations', async () => { httpClientMock.get = jest.fn(() => Promise.resolve((emptyNotebook as unknown) as HttpResponse)); + let postFlag = 1; httpClientMock.post = jest.fn(() => { - console.log('post called'); - return Promise.resolve((addCodeBlockResponse as unknown) as HttpResponse); + if (postFlag === 1) { + postFlag += 1; + return Promise.resolve((addCodeBlockResponse as unknown) as HttpResponse); + } else return Promise.resolve((runCodeBlockResponse as unknown) as HttpResponse); }); const utils = render( spec', () => { utils.getByText('Add code block').click(); }); + await waitFor(() => { + expect(utils.getByPlaceholderText(codePlaceholderText)).toBeInTheDocument(); + }); + + act(() => { + utils.getByLabelText('Toggle show input').click(); + }); + + await waitFor(() => { + expect(utils.queryByPlaceholderText(codePlaceholderText)).toBeNull(); + }); + + act(() => { + utils.getByLabelText('Toggle show input').click(); + }); + + act(() => { + fireEvent.input(utils.getByPlaceholderText(codePlaceholderText), { + target: { value: '%md \\n hello' }, + }); + fireEvent.click(utils.getByText('Run')); + }); + + await waitFor(() => { + expect(utils.queryByText('Run')).toBeNull(); + expect(utils.getByText('hello')).toBeInTheDocument(); + }); + + act(() => { + fireEvent.click(utils.getByTestId('input_only')); + }); + + await waitFor(() => { + expect(utils.queryByText('Refresh')).toBeInTheDocument(); + }); + + act(() => { + fireEvent.click(utils.getByTestId('output_only')); + }); + + await waitFor(() => { + expect(utils.queryByText('Refresh')).toBeNull(); + expect(utils.getByText('hello')).toBeInTheDocument(); + }); + }); + + it('renders a notebook and checks paragraph actions', async () => { + httpClientMock.get = jest.fn(() => + Promise.resolve((codeBlockNotebook as unknown) as HttpResponse) + ); + httpClientMock.put = jest.fn(() => + Promise.resolve((clearOutputNotebook as unknown) as HttpResponse) + ); + httpClientMock.delete = jest.fn(() => + Promise.resolve(({ paragraphs: [] } as unknown) as HttpResponse) + ); + + const utils = render( + + ); + await waitFor(() => { + expect(utils.getByText('sample-notebook-1')).toBeInTheDocument(); + }); + + act(() => { + fireEvent.click(utils.getByText('Paragraph actions')); + }); + + act(() => { + fireEvent.click(utils.getByText('Clear all outputs')); + }); + await waitFor(() => { expect( - utils.getByPlaceholderText( - 'Type %md, %sql or %ppl on the first line to define the input type. Code block starts here.' + utils.queryByText( + 'Are you sure you want to clear all outputs? The action cannot be undone.' ) ).toBeInTheDocument(); }); act(() => { - utils.getByLabelText('Toggle show input').click(); + fireEvent.click(utils.getByTestId('confirmModalConfirmButton')); + }); + + await waitFor(() => { + expect(utils.queryByText('hello')).toBeNull(); + }); + + act(() => { + fireEvent.click(utils.getByText('Paragraph actions')); + }); + + act(() => { + fireEvent.click(utils.getByText('Delete all paragraphs')); }); await waitFor(() => { expect( - utils.queryByPlaceholderText( - 'Type %md, %sql or %ppl on the first line to define the input type. Code block starts here.' + utils.queryByText( + 'Are you sure you want to delete all paragraphs? The action cannot be undone.' ) - ).toBeNull(); + ).toBeInTheDocument(); }); + + act(() => { + fireEvent.click(utils.getByTestId('confirmModalConfirmButton')); + }); + + await waitFor(() => { + expect(utils.queryByText('No paragraphs')).toBeInTheDocument(); + }); + }); + + it('renders a notebook and checks notebook actions', async () => { + const renameNotebookMock = jest.fn(() => + Promise.resolve((notebookPutResponse as unknown) as HttpResponse) + ); + const cloneNotebookMock = jest.fn(() => Promise.resolve('dummy-string')); + httpClientMock.get = jest.fn(() => + Promise.resolve((codeBlockNotebook as unknown) as HttpResponse) + ); + + httpClientMock.put = jest.fn(() => { + return Promise.resolve((notebookPutResponse as unknown) as HttpResponse); + }); + + httpClientMock.post = jest.fn(() => { + return Promise.resolve((addCodeBlockResponse as unknown) as HttpResponse); + }); + + const utils = render( + + ); + await waitFor(() => { + expect(utils.getByText('sample-notebook-1')).toBeInTheDocument(); + }); + + act(() => { + fireEvent.click(utils.getByText('Notebook actions')); + }); + + act(() => { + fireEvent.click(utils.getByText('Rename notebook')); + }); + + await waitFor(() => { + expect(utils.queryByTestId('custom-input-modal-input')).toBeInTheDocument(); + }); + + act(() => { + fireEvent.input(utils.getByTestId('custom-input-modal-input'), { + target: { value: 'test-notebook-newname' }, + }); + fireEvent.click(utils.getByTestId('custom-input-modal-confirm-button')); + }); + + await waitFor(() => { + expect(renameNotebookMock).toHaveBeenCalledTimes(1); + }); + + act(() => { + fireEvent.click(utils.getByText('Notebook actions')); + }); + + act(() => { + fireEvent.click(utils.getByText('Duplicate notebook')); + }); + + await waitFor(() => { + expect(utils.queryByTestId('custom-input-modal-input')).toBeInTheDocument(); + }); + + act(() => { + fireEvent.click(utils.getByTestId('custom-input-modal-confirm-button')); + }); + + expect(cloneNotebookMock).toHaveBeenCalledTimes(1); + + act(() => { + fireEvent.click(utils.getByText('Notebook actions')); + }); + + act(() => { + fireEvent.click(utils.getByText('Delete notebook')); + }); + + await waitFor(() => { + expect(utils.queryByTestId('delete-notebook-modal-input')).toBeInTheDocument(); + }); + + act(() => { + fireEvent.input(utils.getByTestId('delete-notebook-modal-input'), { + target: { value: 'delete' }, + }); + }); + + act(() => { + fireEvent.click(utils.getByTestId('delete-notebook-modal-delete-button')); + }); + + expect(deleteNotebook).toHaveBeenCalledTimes(1); }); - it('renders the component', async () => { + it('renders the visualization component', async () => { SavedObjectsActions.getBulk = jest.fn().mockResolvedValue({ observabilityObjectList: [{ savedVisualization: sampleSavedVisualization }], }); diff --git a/public/components/notebooks/components/helpers/__tests__/default_parser.test.tsx b/public/components/notebooks/components/helpers/__tests__/default_parser.test.tsx index 517f87c712..fdcabaa007 100644 --- a/public/components/notebooks/components/helpers/__tests__/default_parser.test.tsx +++ b/public/components/notebooks/components/helpers/__tests__/default_parser.test.tsx @@ -11,7 +11,7 @@ import { sampleNotebook5, sampleParsedParagraghs1, sampleParsedParagraghs2, -} from '../../../../../../test/sampleDefaultNotebooks'; +} from '../../../../../../test/sample_default_notebooks'; import { defaultParagraphParser } from '../default_parser'; // Perfect schema diff --git a/public/components/notebooks/components/helpers/__tests__/zeppelin_parser.test.tsx b/public/components/notebooks/components/helpers/__tests__/zeppelin_parser.test.tsx index 0f6f29dd84..90349e0bc8 100644 --- a/public/components/notebooks/components/helpers/__tests__/zeppelin_parser.test.tsx +++ b/public/components/notebooks/components/helpers/__tests__/zeppelin_parser.test.tsx @@ -11,7 +11,7 @@ import { sampleNotebook5, sampleParsedParagraghs1, sampleParsedParagraghs2, -} from '../../../../../../test/sampleZeppelinNotebooks'; +} from '../../../../../../test/sample_zeppelin_notebooks'; import { zeppelinParagraphParser } from '../zeppelin_parser'; // Perfect schema diff --git a/public/components/notebooks/components/paragraph_components/__tests__/para_input.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/para_input.test.tsx index ad183024eb..112326e1e8 100644 --- a/public/components/notebooks/components/paragraph_components/__tests__/para_input.test.tsx +++ b/public/components/notebooks/components/paragraph_components/__tests__/para_input.test.tsx @@ -7,7 +7,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react'; import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; -import { sampleParsedParagraghs1 } from '../../../../../../test/sampleDefaultNotebooks'; +import { sampleParsedParagraghs1 } from '../../../../../../test/sample_default_notebooks'; import { ParaInput } from '../para_input'; describe(' spec', () => { diff --git a/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx index 1cdb81a707..f12e92d013 100644 --- a/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx +++ b/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx @@ -7,7 +7,7 @@ import { render } from '@testing-library/react'; import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; -import { sampleParsedParagraghs1 } from '../../../../../../test/sampleDefaultNotebooks'; +import { sampleParsedParagraghs1 } from '../../../../../../test/sample_default_notebooks'; import { ParaOutput } from '../para_output'; describe(' spec', () => { diff --git a/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx index ccd8503564..c51a687f1c 100644 --- a/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx +++ b/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx @@ -8,7 +8,7 @@ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; import httpClientMock from '../../../../../../test/__mocks__/httpClientMock'; -import { sampleParsedParagraghs1 } from '../../../../../../test/sampleDefaultNotebooks'; +import { sampleParsedParagraghs1 } from '../../../../../../test/sample_default_notebooks'; import { Paragraphs } from '../paragraphs'; jest.mock('../../../../../../../../src/plugins/embeddable/public', () => ({ diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx index ee6a1a52b5..62db9de1ab 100644 --- a/public/components/notebooks/components/paragraph_components/para_output.tsx +++ b/public/components/notebooks/components/paragraph_components/para_output.tsx @@ -7,10 +7,7 @@ import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui'; import MarkdownRender from '@nteract/markdown'; import { Media } from '@nteract/outputs'; import moment from 'moment'; -import React, { useState } from 'react'; -import { set } from '@elastic/safer-lodash-set'; -import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container'; -import PPLService from '../../../../services/requests/ppl'; +import React from 'react'; import { CoreStart } from '../../../../../../../src/core/public'; import { DashboardContainerInput, @@ -18,6 +15,8 @@ import { } from '../../../../../../../src/plugins/dashboard/public'; import { ParaType } from '../../../../../common/types/notebooks'; import { uiSettingsService } from '../../../../../common/utils'; +import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container'; +import PPLService from '../../../../services/requests/ppl'; import { QueryDataGridMemo } from './para_query_grid'; const OutputBody = ({ diff --git a/public/components/notebooks/components/paragraph_components/para_query_grid.tsx b/public/components/notebooks/components/paragraph_components/para_query_grid.tsx index 6321c57026..87e63845aa 100644 --- a/public/components/notebooks/components/paragraph_components/para_query_grid.tsx +++ b/public/components/notebooks/components/paragraph_components/para_query_grid.tsx @@ -3,9 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import $ from 'jquery'; import { EuiDataGrid, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui'; +import $ from 'jquery'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; interface QueryDataGridProps { rowCount: number; diff --git a/test/notebooks_constants.ts b/test/notebooks_constants.ts index 8c9e811897..6075a81075 100644 --- a/test/notebooks_constants.ts +++ b/test/notebooks_constants.ts @@ -9,3 +9,46 @@ export const addCodeBlockResponse = { input: { inputType: 'MARKDOWN', inputText: '' }, output: [{ outputType: 'MARKDOWN', result: '', execution_time: '0s' }], }; + +export const runCodeBlockResponse = { + output: [{ outputType: 'MARKDOWN', result: '\n\nhello', execution_time: '0.939 ms' }], + input: { inputText: '%md \n\nhello', inputType: 'MARKDOWN' }, + dateCreated: '2023-12-18T22:13:39.627Z', + dateModified: '2023-12-18T22:17:24.853Z', + id: 'paragraph_7713f4d5-c3b2-406d-9f06-99a1fe0251f3', +}; + +export const codePlaceholderText = + 'Type %md, %sql or %ppl on the first line to define the input type. Code block starts here.'; + +export const codeBlockNotebook = { + path: 'sample-notebook-1', + dateCreated: '2023-12-14T18:49:43.375Z', + dateModified: '2023-12-18T23:40:59.500Z', + paragraphs: [ + { + output: [{ result: 'hello', outputType: 'MARKDOWN', execution_time: '0.018 ms' }], + input: { inputText: '%md\nhello', inputType: 'MARKDOWN' }, + dateCreated: '2023-12-18T23:38:50.848Z', + dateModified: '2023-12-18T23:39:12.265Z', + id: 'paragraph_de00ea2d-a8fb-45d1-8085-698f51c6b6be', + }, + ], +}; + +export const clearOutputNotebook = { + paragraphs: [ + { + output: [], + input: { inputText: '%md\nhello', inputType: 'MARKDOWN' }, + dateCreated: '2023-12-18T23:38:50.848Z', + dateModified: '2023-12-18T23:39:12.265Z', + id: 'paragraph_de00ea2d-a8fb-45d1-8085-698f51c6b6be', + }, + ], +}; + +export const notebookPutResponse = { + status: 'OK', + message: { objectId: '69CpaYwBKIZhlDIhx-OK' }, +}; diff --git a/test/sampleDefaultNotebooks.tsx b/test/sample_default_notebooks.tsx similarity index 100% rename from test/sampleDefaultNotebooks.tsx rename to test/sample_default_notebooks.tsx diff --git a/test/sampleZeppelinNotebooks.tsx b/test/sample_zeppelin_notebooks.tsx similarity index 100% rename from test/sampleZeppelinNotebooks.tsx rename to test/sample_zeppelin_notebooks.tsx