diff --git a/src/plugins/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap b/src/plugins/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap
new file mode 100644
index 0000000000000..03431fe2437b7
--- /dev/null
+++ b/src/plugins/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MarkdownOptions should match snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/plugins/vis_type_markdown/public/markdown_options.test.tsx b/src/plugins/vis_type_markdown/public/markdown_options.test.tsx
new file mode 100644
index 0000000000000..170dde7ee91e6
--- /dev/null
+++ b/src/plugins/vis_type_markdown/public/markdown_options.test.tsx
@@ -0,0 +1,56 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { MarkdownVisParams } from './types';
+import { MarkdownOptions } from './markdown_options';
+
+describe('MarkdownOptions', () => {
+ const props = ({
+ stateParams: {
+ fontSize: 12,
+ markdown: 'hello from 2020 🥳',
+ openLinksInNewTab: false,
+ },
+ setValue: jest.fn(),
+ } as unknown) as VisOptionsProps;
+
+ it('should match snapshot', () => {
+ const comp = shallow();
+ expect(comp).toMatchSnapshot();
+ });
+
+ it('should update markdown on change', () => {
+ const comp = shallow();
+ const value = 'see you in 2021 😎';
+ const textArea = comp.find('EuiTextArea');
+ const onChange = textArea.prop('onChange');
+ onChange?.({
+ target: {
+ // @ts-expect-error
+ value,
+ },
+ });
+
+ expect(props.setValue).toHaveBeenCalledWith('markdown', value);
+ });
+});
diff --git a/src/plugins/vis_type_markdown/public/markdown_options.tsx b/src/plugins/vis_type_markdown/public/markdown_options.tsx
index a6349793619a0..674fbeb517510 100644
--- a/src/plugins/vis_type_markdown/public/markdown_options.tsx
+++ b/src/plugins/vis_type_markdown/public/markdown_options.tsx
@@ -22,7 +22,6 @@ import {
EuiPanel,
EuiTitle,
EuiLink,
- EuiIcon,
EuiTextArea,
EuiFlexGroup,
EuiFlexItem,
@@ -35,7 +34,7 @@ import { MarkdownVisParams } from './types';
function MarkdownOptions({ stateParams, setValue }: VisOptionsProps) {
const onMarkdownUpdate = useCallback(
- (value: MarkdownVisParams['markdown']) => setValue('markdown', value),
+ ({ target: { value } }: React.ChangeEvent) => setValue('markdown', value),
[setValue]
);
@@ -61,8 +60,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps{' '}
-
+ />
@@ -74,7 +72,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps onMarkdownUpdate(value)}
+ onChange={onMarkdownUpdate}
fullWidth={true}
data-test-subj="markdownTextarea"
resize="none"