test: add Tests and Storybook for AsyncAceEditor (#13241)

superset-frontend/spec/helpers/Worker.ts

@@ -21,9 +21,12 @@ class Worker {
 
   onMessage: Function;
 
+  terminate: Function;
+
   constructor(stringUrl: string) {
     this.url = stringUrl;
     this.onMessage = () => {};
+    this.terminate = () => {};
   }
 
   postMessage(msg: string) {

superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx

@@ -0,0 +1,108 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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 {
+  SQLEditor,
+  FullSQLEditor,
+  MarkdownEditor,
+  TextAreaEditor,
+  CssEditor,
+  JsonEditor,
+  ConfigEditor,
+  AsyncAceEditorOptions,
+} from '.';
+
+type EditorType =
+  | 'sql'
+  | 'full-sql'
+  | 'markdown'
+  | 'text-area'
+  | 'css'
+  | 'json'
+  | 'config';
+
+const editorTypes: EditorType[] = [
+  'sql',
+  'full-sql',
+  'markdown',
+  'text-area',
+  'css',
+  'json',
+  'config',
+];
+
+export default {
+  title: 'AsyncAceEditor',
+};
+
+const parseEditorType = (editorType: EditorType) => {
+  switch (editorType) {
+    case 'sql':
+      return SQLEditor;
+    case 'full-sql':
+      return FullSQLEditor;
+    case 'markdown':
+      return MarkdownEditor;
+    case 'text-area':
+      return TextAreaEditor;
+    case 'css':
+      return CssEditor;
+    case 'json':
+      return JsonEditor;
+    default:
+      return ConfigEditor;
+  }
+};
+
+export const AsyncAceEditor = (
+  args: AsyncAceEditorOptions & { editorType: EditorType },
+) => {
+  const { editorType, ...props } = args;
+  const Editor = parseEditorType(editorType);
+  return <Editor {...props} />;
+};
+
+AsyncAceEditor.args = {
+  defaultTabSize: 2,
+  width: '100%',
+  height: 500,
+  value: `{"text": "Simple text"}`,
+};
+
+AsyncAceEditor.argTypes = {
+  editorType: {
+    defaultValue: 'json',
+    control: { type: 'select', options: editorTypes },
+  },
+  defaultTheme: {
+    defaultValue: 'github',
+    control: { type: 'radio', options: ['textmate', 'github'] },
+  },
+};
+
+AsyncAceEditor.story = {
+  parameters: {
+    actions: {
+      disabled: true,
+    },
+    knobs: {
+      disabled: true,
+    },
+  },
+};

superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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 { render, screen, waitFor } from 'spec/helpers/testing-library';
+import AsyncAceEditor, {
+  SQLEditor,
+  FullSQLEditor,
+  MarkdownEditor,
+  TextAreaEditor,
+  CssEditor,
+  JsonEditor,
+  ConfigEditor,
+  AceModule,
+  AsyncAceEditorOptions,
+} from 'src/components/AsyncAceEditor';
+
+const selector = '[id="brace-editor"]';
+
+test('renders SQLEditor', async () => {
+  const { container } = render(<SQLEditor />);
+
+  await waitFor(() => {
+    expect(container.querySelector(selector)).toBeInTheDocument();
+  });
+});
+
+test('renders FullSQLEditor', async () => {
+  const { container } = render(<FullSQLEditor />);
+
+  await waitFor(() => {
+    expect(container.querySelector(selector)).toBeInTheDocument();
+  });
+});
+
+test('renders MarkdownEditor', async () => {
+  const { container } = render(<MarkdownEditor />);
+
+  await waitFor(() => {
+    expect(container.querySelector(selector)).toBeInTheDocument();
+  });
+});
+
+test('renders TextAreaEditor', async () => {
+  const { container } = render(<TextAreaEditor />);
+
+  await waitFor(() => {
+    expect(container.querySelector(selector)).toBeInTheDocument();
+  });
+});
+
+test('renders CssEditor', async () => {
+  const { container } = render(<CssEditor />);
+
+  await waitFor(() => {
+    expect(container.querySelector(selector)).toBeInTheDocument();
+  });
+});
+
+test('renders JsonEditor', async () => {
+  const { container } = render(<JsonEditor />);
+
+  await waitFor(() => {
+    expect(container.querySelector(selector)).toBeInTheDocument();
+  });
+});
+
+test('renders ConfigEditor', async () => {
+  const { container } = render(<ConfigEditor />);
+
+  await waitFor(() => {
+    expect(container.querySelector(selector)).toBeInTheDocument();
+  });
+});
+
+test('renders a custom placeholder', () => {
+  const aceModules: AceModule[] = ['mode/css', 'theme/github'];
+  const editorOptions: AsyncAceEditorOptions = {
+    placeholder: () => <p role="paragraph">Custom placeholder</p>,
+  };
+  const Editor = AsyncAceEditor(aceModules, editorOptions);
+
+  render(<Editor />);
+
+  expect(screen.getByRole('paragraph')).toBeInTheDocument();
+});