-
Notifications
You must be signed in to change notification settings - Fork 456
Add data-ms-id test automation attributes #12857
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: geonode-5.0.x
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -124,6 +124,17 @@ const DownloadDialog = ({ | |
| } | ||
| }, [enabled, selectedLayer, defaultSelectedService]); // equivalent componentDidUpdate | ||
|
|
||
| useEffect(() => { | ||
| if (!enabled) { | ||
| return; | ||
| } | ||
| const dialogRoot = document.querySelector('#mapstore-export'); | ||
| dialogRoot?.setAttribute('data-ms-id', 'dataset-export-box'); | ||
|
|
||
| const formatInput = document.querySelector('#mapstore-export .mapstore-downloadoptions:not(.downloadMode) .Select-input input'); | ||
| formatInput?.setAttribute('data-ms-id', 'dataset-export-select-format'); | ||
| }, [enabled, downloadOptions, service, showLoader]); | ||
|
|
||
| const renderIcon = () => { | ||
| return loading ? <div style={{"float": "left"}}><Spinner spinnerName="circle" noFadeIn/></div> : <Glyphicon glyph="download" />; | ||
| }; | ||
|
|
@@ -153,7 +164,13 @@ const DownloadDialog = ({ | |
| <Dialog id="mapstore-export" draggable={false} modal> | ||
| <span role="header"> | ||
| <span className="modal-title about-panel-title"><Message msgId="layerdownload.title" /></span> | ||
| <button onClick={onClose} className="settings-panel-close close">{closeGlyph ? <Glyphicon glyph={closeGlyph}/> : <span>×</span>}</button> | ||
| <button | ||
| onClick={onClose} | ||
| className="settings-panel-close close" | ||
| {...{ 'data-ms-id': 'dataset-export-box-close' }} | ||
| > | ||
| {closeGlyph ? <Glyphicon glyph={closeGlyph}/> : <span>×</span>} | ||
| </button> | ||
| </span> | ||
| <div role="body"> | ||
| {showLoader | ||
|
|
@@ -190,6 +207,7 @@ const DownloadDialog = ({ | |
| <Button | ||
| bsStyle="primary" | ||
| className="download-button" | ||
| {...{ 'data-ms-id': 'dataset-export-box-export' }} | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. On multiple instances there is the usage of spread operator |
||
| disabled={formatsLoading || formats.length === 0} | ||
| onClick={handleExport}> | ||
| {renderIcon()} <Message msgId="layerdownload.export" /> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -42,10 +42,22 @@ const DownloadWPSOptions = ({ | |
| onChange('compression', selectedCompression || head(compressionOptions)); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (!advancedOptionsOpened) { | ||
| return; | ||
| } | ||
| const srsInput = document.querySelector('.mapstore-downloadwpsoptions-advanced .mapstore-downloadwpsoptions-advanced-menuitem .Select-input input'); | ||
| srsInput?.setAttribute('data-ms-id', 'dataset-export-select-reference-system'); | ||
| }, [advancedOptionsOpened, selectedSrs, srsList]); | ||
|
Comment on lines
+45
to
+51
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same as previous comment, avoid useEffect to manipulate DOM, see allyoucanmap@7586026 |
||
|
|
||
| return ( | ||
| <> | ||
| {advancedOptionsVisible && <div className="mapstore-downloadwpsoptions-advanced-options"> | ||
| <Button className="no-border" onClick={() => openAdvancedOptions(!advancedOptionsOpened)}> | ||
| <Button | ||
| className="no-border" | ||
| {...{ 'data-ms-id': 'dataset-export-toggle-advanced' }} | ||
| onClick={() => openAdvancedOptions(!advancedOptionsOpened)} | ||
| > | ||
| <Glyphicon glyph={`chevron-${advancedOptionsOpened ? 'down' : 'right'}`}/> | ||
| | ||
| <Message msgId="layerdownload.advancedOptions"/> | ||
|
|
@@ -56,7 +68,7 @@ const DownloadWPSOptions = ({ | |
|
|
||
| {/* select SRS must be always visibile */} | ||
| <div className="mapstore-downloadwpsoptions-advanced-menuitem"> | ||
| <div className="mapstore-downloadwpsoptions-advanced-menuitem-control"> | ||
| <div className="mapstore-downloadwpsoptions-advanced-menuitem-control" {...{ 'data-ms-id': 'dataset-export-select-reference-system' }}> | ||
| <label><Message msgId="layerdownload.srs" /></label> | ||
| <Select | ||
| clearable={false} | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -48,78 +48,80 @@ function CompactRichTextEditor({ | |
| }) { | ||
|
|
||
| return ( | ||
| <Editor | ||
| {...props} | ||
| editorStyle={{ minHeight: 200 }} | ||
| wrapperClassName={wrapperClassName} | ||
| toolbar={{ | ||
| options: toolbarOptions || ['fontFamily', 'blockType', 'inline', 'textAlign', 'list', 'link', 'colorPicker', 'remove', 'image', 'embedded'], | ||
| image: { | ||
| urlEnabled: true, | ||
| // upload controlled via props, disabled by default | ||
| uploadEnabled: props.uploadEnabled || false, | ||
| alignmentEnabled: false, | ||
| uploadCallback: (file) => new Promise((resolve, reject) => { | ||
| const reader = new FileReader(); | ||
| reader.addEventListener('load', () => { | ||
| resizeBase64Image(reader.result, { | ||
| size: 500, | ||
| type: 'image/jpeg', | ||
| quality: 0.8 | ||
| }).then((linkBase64) => { | ||
| resolve({ data: { link: linkBase64 } }); | ||
| <div data-ms-id="add-widget-text-description"> | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The CompactRichTextEditor is a generic component and we should avoid to add an id specific for one of the usage, it would be better to add the id to the caller instead see allyoucanmap@9f8470d |
||
| <Editor | ||
| {...props} | ||
| editorStyle={{ minHeight: 200 }} | ||
| wrapperClassName={wrapperClassName} | ||
| toolbar={{ | ||
| options: toolbarOptions || ['fontFamily', 'blockType', 'inline', 'textAlign', 'list', 'link', 'colorPicker', 'remove', 'image', 'embedded'], | ||
| image: { | ||
| urlEnabled: true, | ||
| // upload controlled via props, disabled by default | ||
| uploadEnabled: props.uploadEnabled || false, | ||
| alignmentEnabled: false, | ||
| uploadCallback: (file) => new Promise((resolve, reject) => { | ||
| const reader = new FileReader(); | ||
| reader.addEventListener('load', () => { | ||
| resizeBase64Image(reader.result, { | ||
| size: 500, | ||
| type: 'image/jpeg', | ||
| quality: 0.8 | ||
| }).then((linkBase64) => { | ||
| resolve({ data: { link: linkBase64 } }); | ||
| }); | ||
| }); | ||
| }); | ||
| if (file) { | ||
| reader.readAsDataURL(file); | ||
| } else { | ||
| reject(); | ||
| if (file) { | ||
| reader.readAsDataURL(file); | ||
| } else { | ||
| reject(); | ||
| } | ||
| }), | ||
| previewImage: true, | ||
| inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg', | ||
| alt: props.alt || { present: false, mandatory: false }, | ||
| defaultSize: { | ||
| height: 'auto', | ||
| width: '100%' | ||
| } | ||
| }), | ||
| previewImage: true, | ||
| inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg', | ||
| alt: props.alt || { present: false, mandatory: false }, | ||
| defaultSize: { | ||
| height: 'auto', | ||
| width: '100%' | ||
| } | ||
| }, | ||
| fontFamily: { | ||
| // Setup fonts via props or use default from GeoStories | ||
| options: props.fonts || DEFAULT_FONT_FAMILIES | ||
| }, | ||
| link: { | ||
| inDropdown: false, | ||
| showOpenOptionOnHover: true, | ||
| defaultTargetOption: '_self', | ||
| options: ['link', 'unlink'] | ||
| }, | ||
| blockType: { | ||
| inDropdown: true, | ||
| options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code'] | ||
| }, | ||
| inline: { | ||
| inDropdown: true, | ||
| options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace'] | ||
| }, | ||
| textAlign: { | ||
| inDropdown: true | ||
| }, | ||
| list: { | ||
| inDropdown: true | ||
| }, | ||
| embedded: { | ||
| embedCallback: link => { | ||
| const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link)); | ||
| return (detectedSrc && detectedSrc[1]) || link; | ||
| }, | ||
| defaultSize: { | ||
| height: 'auto', | ||
| width: '100%' | ||
| fontFamily: { | ||
| // Setup fonts via props or use default from GeoStories | ||
| options: props.fonts || DEFAULT_FONT_FAMILIES | ||
| }, | ||
| link: { | ||
| inDropdown: false, | ||
| showOpenOptionOnHover: true, | ||
| defaultTargetOption: '_self', | ||
| options: ['link', 'unlink'] | ||
| }, | ||
| blockType: { | ||
| inDropdown: true, | ||
| options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code'] | ||
| }, | ||
| inline: { | ||
| inDropdown: true, | ||
| options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace'] | ||
| }, | ||
| textAlign: { | ||
| inDropdown: true | ||
| }, | ||
| list: { | ||
| inDropdown: true | ||
| }, | ||
| embedded: { | ||
| embedCallback: link => { | ||
| const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link)); | ||
| return (detectedSrc && detectedSrc[1]) || link; | ||
| }, | ||
| defaultSize: { | ||
| height: 'auto', | ||
| width: '100%' | ||
| } | ||
| } | ||
| } | ||
| }} | ||
| /> | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should avoid DOM manipulation to apply an attribute to a react component, in this commit allyoucanmap@7586026 you can find the fix to avoid usage of useEffect