IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-19 13:03:32 -06:00
Code Issues 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 13:34:00 -04:00 committed by GitHub
parent 09cb3a6048
commit fddf77ee35
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 16 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -527,7 +527,7 @@ export const Components = {
container: 'data-testid Code editor container',
},
ReactMonacoEditor: {
container: 'data-testid ReactMonacoEditor container',
editorLazy: 'data-testid ReactMonacoEditor editorLazy',
},
DashboardImportPage: {
textarea: 'data-testid-import-dashboard-textarea',

29
packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx
View File

@ -16,7 +16,7 @@ import type { ReactMonacoEditorProps } from './types';
* @internal
* Experimental export
**/
const MonacoEditorLazy = (props: ReactMonacoEditorProps) => {
export const ReactMonacoEditorLazy = (props: ReactMonacoEditorProps) => {
const styles = useStyles2(getStyles);
const { loading, error, dependency } = useAsyncDependency(
import(/* webpackChunkName: "react-monaco-editor" */ './ReactMonacoEditor')
@ -31,13 +31,21 @@ const MonacoEditorLazy = (props: ReactMonacoEditorProps) => {
<ErrorWithStack
title="React Monaco Editor failed to load"
error={error}
errorInfo={{ componentStack: error?.stack || '' }}
errorInfo={{ componentStack: error?.stack ?? '' }}
/>
);
}
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) => {
@ -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);

2
public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx
View File

@ -27,7 +27,7 @@ describe('MonacoFieldWrapper', () => {
renderComponent();
await waitFor(async () => {
const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container);
const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
expect(monacoEditor).toBeInTheDocument();
});
});

2
public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx
View File

@ -33,7 +33,7 @@ describe('MonacoQueryField', () => {
test('Renders with no errors', async () => {
renderComponent();
const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.container);
const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
expect(monacoEditor).toBeInTheDocument();
});
});

4
public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.test.tsx
View File

@ -34,7 +34,7 @@ describe('LokiQueryCodeEditor', () => {
props.showExplain = true;
props.datasource.metadataRequest = jest.fn().mockResolvedValue([]);
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(screen.getByText(EXPLAIN_LABEL_FILTER_CONTENT)).toBeInTheDocument();
});
@ -43,7 +43,7 @@ describe('LokiQueryCodeEditor', () => {
const props = createDefaultProps();
props.datasource.metadataRequest = jest.fn().mockResolvedValue([]);
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(screen.queryByText(EXPLAIN_LABEL_FILTER_CONTENT)).not.toBeInTheDocument();
});