microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-11-24 06:49:04 +03:00
Code Issues Projects Releases Wiki Activity

chore: add cm placeholder text (#33635)

Browse Source
This commit is contained in:
Pavel Feldman 2024-11-15 16:19:35 -08:00 committed by GitHub
parent 508021362d
commit a98021499f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/recorder/src/recorder.tsx
View File

@ -27,7 +27,7 @@ import { CallLogView } from './callLog';
import './recorder.css';
import { asLocator } from '@isomorphic/locatorGenerators';
import { toggleTheme } from '@web/theme';
import { copy } from '@web/uiUtils';
import { copy, useSetting } from '@web/uiUtils';
import yaml from 'yaml';
import { parseAriaKey } from '@isomorphic/ariaSnapshot';
import type { AriaKeyError, ParsedYaml } from '@isomorphic/ariaSnapshot';
@ -47,7 +47,7 @@ export const Recorder: React.FC<RecorderProps> = ({
}) => {
const [selectedFileId, setSelectedFileId] = React.useState<string | undefined>();
const [runningFileId, setRunningFileId] = React.useState<string | undefined>();
const [selectedTab, setSelectedTab] = React.useState<string>('log');
const [selectedTab, setSelectedTab] = useSetting<string>('recorderPropertiesTab', 'log');
const [ariaSnapshot, setAriaSnapshot] = React.useState<string | undefined>();
const [ariaSnapshotErrors, setAriaSnapshotErrors] = React.useState<SourceHighlight[]>();
@ -189,7 +189,7 @@ export const Recorder: React.FC<RecorderProps> = ({
{
id: 'locator',
title: 'Locator',
render: () => <CodeMirrorWrapper text={locator} language={source.language} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
render: () => <CodeMirrorWrapper text={locator} placeholder='Type locator to inspect' language={source.language} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
},
{
id: 'log',
@ -198,8 +198,8 @@ export const Recorder: React.FC<RecorderProps> = ({
},
{
id: 'aria',
title: 'Aria snapshot',
render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} language={'yaml'} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
title: 'Aria',
render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} placeholder='Type aria template to match' language={'yaml'} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
},
]}
selectedTab={selectedTab}

1
packages/web/src/components/codeMirrorModule.tsx
View File

@ -24,6 +24,7 @@ import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/python/python';
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/addon/display/placeholder';
import 'codemirror/addon/mode/simple';
import 'codemirror/mode/yaml/yaml';

4
packages/web/src/components/codeMirrorWrapper.css
View File

@ -181,3 +181,7 @@ body.dark-mode .CodeMirror span.cm-type {
text-decoration-color: var(--vscode-errorForeground);
text-decoration-style: wavy;
}
.CodeMirror-placeholder {
color: var(--vscode-input-placeholderForeground) !important;
}

8
packages/web/src/components/codeMirrorWrapper.tsx
View File

@ -46,6 +46,7 @@ export interface SourceProps {
wrapLines?: boolean;
onChange?: (text: string) => void;
dataTestId?: string;
placeholder?: string;
}
export const CodeMirrorWrapper: React.FC<SourceProps> = ({
@ -62,6 +63,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
wrapLines,
onChange,
dataTestId,
placeholder,
}) => {
const [measure, codemirrorElement] = useMeasure<HTMLDivElement>();
const [modulePromise] = React.useState<Promise<CodeMirror>>(import('./codeMirrorModule').then(m => m.default));
@ -89,7 +91,8 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
&& mode === codemirrorRef.current.cm.getOption('mode')
&& !!readOnly === codemirrorRef.current.cm.getOption('readOnly')
&& lineNumbers === codemirrorRef.current.cm.getOption('lineNumbers')
&& wrapLines === codemirrorRef.current.cm.getOption('lineWrapping')) {
&& wrapLines === codemirrorRef.current.cm.getOption('lineWrapping')
&& placeholder === codemirrorRef.current.cm.getOption('placeholder')) {
// No need to re-create codemirror.
return;
}
@ -102,6 +105,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
readOnly: !!readOnly,
lineNumbers,
lineWrapping: wrapLines,
placeholder,
});
codemirrorRef.current = { cm };
if (isFocused)
@ -109,7 +113,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
setCodemirror(cm);
return cm;
})();
}, [modulePromise, codemirror, codemirrorElement, language, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused]);
}, [modulePromise, codemirror, codemirrorElement, language, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused, placeholder]);
React.useEffect(() => {
if (codemirrorRef.current)

6
tests/library/inspector/cli-codegen-aria.spec.ts
View File

@ -67,7 +67,7 @@ test.describe(() => {
await recorder.page.click('x-pw-tool-item.pick-locator');
await recorder.page.hover('button');
await recorder.trustedClick();
await recorder.recorderPage.getByRole('tab', { name: 'Aria snapshot' }).click();
await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
- textbox
- text: '- button "Submit"'
@ -88,7 +88,7 @@ test.describe(() => {
await recorder.page.click('x-pw-tool-item.pick-locator');
await submitButton.hover();
await recorder.trustedClick();
await recorder.recorderPage.getByRole('tab', { name: 'Aria snapshot' }).click();
await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
- text: '- button "Submit"'
`);
@ -131,7 +131,7 @@ test.describe(() => {
await submitButton.hover();
await recorder.trustedClick();
await recorder.recorderPage.getByRole('tab', { name: 'Aria snapshot' }).click();
await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
- text: '- button "Submit"'
`);