From 1b7e31cd27b96c502f3c82b64c92f5540155a076 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Tue, 11 Oct 2022 10:15:48 +0200
Subject: [PATCH] Loki Monaco Editor: add component tests (#56658)

* feat(loki-monaco-editor): add component tests

* feat(loki-monaco-editor): rename test case

* Chore: add missing export
---
 .../MonacoFieldWrapper.test.tsx               | 36 +++++++++++++++++++
 .../MonacoQueryField.test.tsx                 | 31 ++++++++++++++++
 .../MonacoQueryFieldWrapper.tsx               |  2 +-
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx
 create mode 100644 public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx

diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx
new file mode 100644
index 00000000000..727f982a4f7
--- /dev/null
+++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import LokiLanguageProvider from '../../LanguageProvider';
+import { createLokiDatasource } from '../../mocks';
+
+import { MonacoQueryFieldWrapper, Props } from './MonacoQueryFieldWrapper';
+
+function renderComponent({
+  initialValue = '',
+  onChange = jest.fn(),
+  onRunQuery = jest.fn(),
+  runQueryOnBlur = false,
+}: Partial<Props> = {}) {
+  const datasource = createLokiDatasource();
+  const languageProvider = new LokiLanguageProvider(datasource);
+
+  render(
+    <MonacoQueryFieldWrapper
+      languageProvider={languageProvider}
+      history={[]}
+      initialValue={initialValue}
+      onChange={onChange}
+      onRunQuery={onRunQuery}
+      runQueryOnBlur={runQueryOnBlur}
+    />
+  );
+}
+
+describe('MonacoFieldWrapper', () => {
+  test('Renders with no errors', async () => {
+    renderComponent();
+
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+  });
+});
diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx
new file mode 100644
index 00000000000..89a13acbb6f
--- /dev/null
+++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import LokiLanguageProvider from '../../LanguageProvider';
+import { createLokiDatasource } from '../../mocks';
+
+import MonacoQueryField from './MonacoQueryField';
+import { Props } from './MonacoQueryFieldProps';
+
+function renderComponent({ initialValue = '', onRunQuery = jest.fn(), onBlur = jest.fn() }: Partial<Props> = {}) {
+  const datasource = createLokiDatasource();
+  const languageProvider = new LokiLanguageProvider(datasource);
+
+  render(
+    <MonacoQueryField
+      languageProvider={languageProvider}
+      initialValue={initialValue}
+      history={[]}
+      onRunQuery={onRunQuery}
+      onBlur={onBlur}
+    />
+  );
+}
+
+describe('MonacoQueryField', () => {
+  test('Renders with no errors', async () => {
+    renderComponent();
+
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+  });
+});
diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldWrapper.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
index 60295a3a83e..ed7bb2711e4 100644
--- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
+++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { MonacoQueryFieldLazy } from './MonacoQueryFieldLazy';
 import { Props as MonacoProps } from './MonacoQueryFieldProps';
 
-type Props = Omit<MonacoProps, 'onRunQuery' | 'onBlur'> & {
+export type Props = Omit<MonacoProps, 'onRunQuery' | 'onBlur'> & {
   onChange: (query: string) => void;
   onRunQuery: () => void;
   runQueryOnBlur: boolean;