public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CodeEditor: Fix broken styles (#88495)

Browse Source 
* fix: remove erroneous container

* fix: update selector

* fix: pass data attrs via `wrapperProps`

* fix: ensure `toBeInTheDocument` checks have unique markup
This commit is contained in:
Nick Richmond
2024-05-30 20:34:00 +03:00
committed by GitHub
parent 09cb3a6048
commit fddf77ee35
5 changed files with 16 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-e2e-selectors/src/selectors/components.ts
+1 -1
View File
@@ -527,7 +527,7 @@ export const Components = {
container: 'data-testid Code editor container', container: 'data-testid Code editor container',
}, },
ReactMonacoEditor: { ReactMonacoEditor: {
container: 'data-testid ReactMonacoEditor container', editorLazy: 'data-testid ReactMonacoEditor editorLazy',
}, },
DashboardImportPage: { DashboardImportPage: {
textarea: 'data-testid-import-dashboard-textarea', textarea: 'data-testid-import-dashboard-textarea',
packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
+11 -18
View File
@@ -16,7 +16,7 @@ import type { ReactMonacoEditorProps } from './types';
* @internal * @internal
* Experimental export * Experimental export
**/ **/
const MonacoEditorLazy = (props: ReactMonacoEditorProps) => { export const ReactMonacoEditorLazy = (props: ReactMonacoEditorProps) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const { loading, error, dependency } = useAsyncDependency( const { loading, error, dependency } = useAsyncDependency(
import(/* webpackChunkName: "react-monaco-editor" */ './ReactMonacoEditor') import(/* webpackChunkName: "react-monaco-editor" */ './ReactMonacoEditor')
@@ -31,13 +31,21 @@ const MonacoEditorLazy = (props: ReactMonacoEditorProps) => {
<ErrorWithStack <ErrorWithStack
title="React Monaco Editor failed to load" title="React Monaco Editor failed to load"
error={error} error={error}
errorInfo={{ componentStack: error?.stack || '' }} errorInfo={{ componentStack: error?.stack ?? '' }}
/> />
); );
} }
const ReactMonacoEditor = dependency.ReactMonacoEditor; const ReactMonacoEditor = dependency.ReactMonacoEditor;
return <ReactMonacoEditor {...props} loading={props.loading ?? null} />; return (
<ReactMonacoEditor
{...props}
loading={props.loading ?? null}
wrapperProps={{
'data-testid': selectors.components.ReactMonacoEditor.editorLazy,
}}
/>
);
}; };
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
@@ -48,18 +56,3 @@ const getStyles = (theme: GrafanaTheme2) => {
}), }),
}; };
}; };
const withContainer = <P extends object>(Component: React.ComponentType<P>): React.ComponentType<P> => {
const WithContainer = (props: P) => (
// allow tests to easily determine if the code editor has rendered in any of its three states (loading, error, or ready)
<div data-testid={selectors.components.ReactMonacoEditor.container}>
<Component {...props} />
</div>
);
WithContainer.displayName = Component.displayName;
return WithContainer;
};
export const ReactMonacoEditorLazy = withContainer(MonacoEditorLazy);
public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ describe('MonacoFieldWrapper', () => {
renderComponent(); renderComponent();
await waitFor(async () => { await waitFor(async () => {
const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container); const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
expect(monacoEditor).toBeInTheDocument(); expect(monacoEditor).toBeInTheDocument();
}); });
}); });
public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ describe('MonacoQueryField', () => {
test('Renders with no errors', async () => { test('Renders with no errors', async () => {
renderComponent(); renderComponent();
const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container); const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
expect(monacoEditor).toBeInTheDocument(); expect(monacoEditor).toBeInTheDocument();
}); });
}); });
public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.test.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ describe('LokiQueryCodeEditor', () => {
props.showExplain = true; props.showExplain = true;
props.datasource.metadataRequest = jest.fn().mockResolvedValue([]); props.datasource.metadataRequest = jest.fn().mockResolvedValue([]);
render(<LokiQueryCodeEditor {...props} query={defaultQuery} />); render(<LokiQueryCodeEditor {...props} query={defaultQuery} />);
const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container); const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
expect(monacoEditor).toBeInTheDocument(); expect(monacoEditor).toBeInTheDocument();
expect(screen.getByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument(); expect(screen.getByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
}); });
@@ -43,7 +43,7 @@ describe('LokiQueryCodeEditor', () => {
const props = createDefaultProps(); const props = createDefaultProps();
props.datasource.metadataRequest = jest.fn().mockResolvedValue([]); props.datasource.metadataRequest = jest.fn().mockResolvedValue([]);
render(<LokiQueryCodeEditor {...props} query={defaultQuery} />); render(<LokiQueryCodeEditor {...props} query={defaultQuery} />);
const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container); const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
expect(monacoEditor).toBeInTheDocument(); expect(monacoEditor).toBeInTheDocument();
expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument(); expect(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
}); });