Mapstore2 ariol

web/client/components/TOC/TOCItemsSettings.jsx

@@ -102,6 +102,7 @@ const TOCItemSettings = (props) => {
                                     <NavItemT
                                         key={'ms-tab-settings-' + tab.id}
                                         tooltip={<Message msgId={tab.tooltipId}/> }
+                                        cy-data={`edit-style-btn-${tab.glyph}`}
                                         eventKey={tab.id}
                                         onClick={() => {
                                             onSetTab(tab.id);

web/client/components/catalog/Catalog.jsx

@@ -306,7 +306,7 @@ class Catalog extends React.Component {
                         this.search({ services: this.props.services, selectedService: this.props.selectedService, searchText: this.props.searchText });
                     }
                 }}
-                className={this.props.buttonClassName} key="catalog_search_button" disabled={this.props.loading || !this.isValidServiceSelected()}>
+                className={this.props.buttonClassName} key="catalog_search_button" cy-data="catalog-search-button" disabled={this.props.loading || !this.isValidServiceSelected()}>
                 <Message msgId="catalog.search" />
             </Button>);
         }
@@ -323,6 +323,7 @@ class Catalog extends React.Component {
         const textSearch = (<FormControl
             ref="searchText"
             type="text"
+            cy-data="catalog-search"
             style={{
                 textOverflow: "ellipsis"
             }}
@@ -358,7 +359,7 @@ class Catalog extends React.Component {
                                 onClick={() => this.props.onChangeCatalogMode("edit", false)}>
                                 <Glyphicon glyph="pencil" />
                             </InputGroup.Addon>) : null}
-                            {this.props.canEdit && <InputGroup.Addon className="btn" onClick={() => this.props.onChangeCatalogMode("edit", true)}>
+                            {this.props.canEdit && <InputGroup.Addon className="btn" cy-data="catalog-add-service" onClick={() => this.props.onChangeCatalogMode("edit", true)}>
                                 <Glyphicon glyph="plus" />
                             </InputGroup.Addon>}
                         </InputGroup>

web/client/components/catalog/CatalogServiceEditor.jsx

@@ -112,17 +112,17 @@ const CatalogServiceEditor = ({
             />
             <FormGroup controlId="buttons" key="buttons">
                 <Col xs={12}>
-                    <Button style={buttonStyle} disabled={saving || !valid} onClick={onSaveService} key="catalog_add_service_button">
+                    <Button style={buttonStyle} disabled={saving || !valid} onClick={onSaveService} key="catalog_add_service_button" cy-data="catalog-save">
                         {saving ? <Loader size={12} style={{display: 'inline-block'}} /> : null}
                         <Message msgId="save" />
                     </Button>
                     {service && !service.isNew
-                        ? <Button style={buttonStyle} disabled={saving} onClick={() => onDeleteService(service, services)} key="catalog_delete_service_button">
+                        ? <Button style={buttonStyle} disabled={saving} onClick={() => onDeleteService(service, services)} key="catalog_delete_service_button" cy-data="catalog-delete">
                             <Message msgId="catalog.delete" />
                         </Button>
                         : null
                     }
-                    <Button style={buttonStyle} disabled={disabled} onClick={onCancel} key="catalog_back_view_button">
+                    <Button style={buttonStyle} disabled={disabled} onClick={onCancel} key="catalog_back_view_button" cy-data="catalog-cancel">
                         <Message msgId="cancel" />
                     </Button>
                 </Col>

web/client/components/catalog/RecordItem.jsx

@@ -219,6 +219,7 @@ class RecordItem extends React.Component {
                 disabled: this.state.loading,
                 loading: this.state.loading,
                 glyph: 'plus',
+                'cy-data': 'catalog-add-first-result',
                 onClick: () => this.onAddToMap(record)
             }]),
             ...(links.length > 0

web/client/components/catalog/editor/MainForm.jsx

@@ -51,6 +51,7 @@ const DefaultURLEditor = ({
 
     const UrlForm = (<FormControl
         type="text"
+        cy-data="catalog-service-url"
         style={{
             textOverflow: "ellipsis"
         }}
@@ -203,6 +204,7 @@ export default ({
                     <FormControl
                         onChange={(e) => onChangeType(e.target.value)}
                         value={service && service.type}
+                        cy-data="catalog-service-type"
                         componentClass="select">
                         {serviceTypes.map((type) => <option value={type.name} key={type.name}>{type.label}</option>)}
                     </FormControl>
@@ -211,6 +213,7 @@ export default ({
                     <ControlLabel><Message msgId="catalog.serviceTitle" /></ControlLabel>
                     <FormControl
                         type="text"
+                        cy-data="catalog-service-title"
                         style={{
                             textOverflow: "ellipsis"
                         }}

web/client/components/cookie/Cookie.jsx

@@ -52,6 +52,7 @@ class Cookie extends React.Component {
     renderAcceptButton = () => {
         return (
             <Button
+                cy-data="cookie-accept-button"
                 className="cookie-button"
                 id="accept-cookie"
                 bsStyle="primary"
@@ -63,10 +64,11 @@ class Cookie extends React.Component {
     renderMoreDetails = () => {
         return this.props.externalCookieUrl ?
             (
-                <a style={{cursor: "pointer"}}
+                <a cy-data="cookie-privacy-link" style={{cursor: "pointer"}}
                     id="accept-cookie"
                     href={this.props.externalCookieUrl}>
                     <Button
+                        cy-data="cookie-privacy-text"
                         className="cookie-button"
                         id="decline-cookie"
                         bsStyle="primary" >
@@ -95,14 +97,14 @@ class Cookie extends React.Component {
     }
     render() {
         return this.props.show ? (
-            <div className={this.props.seeMore ? "mapstore-cookie-panel see-more" : "mapstore-cookie-panel not-see-more"}>
+            <div cy-data="cookie-overlay" className={this.props.seeMore ? "mapstore-cookie-panel see-more" : "mapstore-cookie-panel not-see-more"}>
                 <div role="header" className="cookie-header" style={{height: this.props.seeMore ? "44px" : "0px"}}>
                     {this.props.seeMore ? <Glyphicon className="cookie-close-btn" glyph="1-close" onClick={() => this.props.onMoreDetails(false)}/> : null }
                 </div>
                 <div role="body" className="cookie-body-container">
                     {!this.props.externalCookieUrl && this.props.seeMore ? (
                         <MoreDetails html={this.props.html}/>
-                    ) : (<div className="cookie-message">
+                    ) : (<div cy-data="cookie-banner-maintext" className="cookie-message">
                         <Message msgId="cookie.info"/>
                     </div>) }
                     <br/>

web/client/components/data/download/DownloadDialog.jsx

@@ -124,6 +124,17 @@ const DownloadDialog = ({
         }
     }, [enabled, selectedLayer, defaultSelectedService]); // equivalent componentDidUpdate
 
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const dialogRoot = document.querySelector('#mapstore-export');
+        dialogRoot?.setAttribute('cy-data', 'dataset-export-box');
+
+        const formatInput = document.querySelector('#mapstore-export .mapstore-downloadoptions:not(.downloadMode) .Select-input input');
+        formatInput?.setAttribute('cy-data', '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"
+                    {...{ 'cy-data': '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"
+                    {...{ 'cy-data': 'dataset-export-box-export' }}
                     disabled={formatsLoading || formats.length === 0}
                     onClick={handleExport}>
                     {renderIcon()} <Message msgId="layerdownload.export" />

web/client/components/data/download/DownloadOptions.jsx

@@ -137,14 +137,16 @@ class DownloadOptions extends React.Component {
 
             <div className="mapstore-downloadoptions">
                 <label><Message msgId="layerdownload.format" /></label>
-                <Select
-                    clearable={false}
-                    isLoading={this.props.formatsLoading}
-                    onOpen={() => this.props.formatOptionsFetch(this.props.layer)}
-                    value={this.props.downloadOptions?.selectedFormat}
-                    noResultsText={<Message msgId="layerdownload.format" />}
-                    onChange={(sel) => this.props.onChange("selectedFormat", sel.value)}
-                    options={this.props.formats.map(f => ({value: f.name, label: f.label || f.name}))} />
+                <div {...{ 'cy-data': 'dataset-export-select-format' }}>
+                    <Select
+                        clearable={false}
+                        isLoading={this.props.formatsLoading}
+                        onOpen={() => this.props.formatOptionsFetch(this.props.layer)}
+                        value={this.props.downloadOptions?.selectedFormat}
+                        noResultsText={<Message msgId="layerdownload.format" />}
+                        onChange={(sel) => this.props.onChange("selectedFormat", sel.value)}
+                        options={this.props.formats.map(f => ({value: f.name, label: f.label || f.name}))} />
+                </div>
             </div>
 
             <DownloadWPSOptions

web/client/components/data/download/DownloadWPSOptions.jsx

@@ -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('cy-data', 'dataset-export-select-reference-system');
+    }, [advancedOptionsOpened, selectedSrs, srsList]);
+
     return (
         <>
             {advancedOptionsVisible && <div className="mapstore-downloadwpsoptions-advanced-options">
-                <Button className="no-border" onClick={() => openAdvancedOptions(!advancedOptionsOpened)}>
+                <Button
+                    className="no-border"
+                    {...{ 'cy-data': 'dataset-export-toggle-advanced' }}
+                    onClick={() => openAdvancedOptions(!advancedOptionsOpened)}
+                >
                     <Glyphicon glyph={`chevron-${advancedOptionsOpened ? 'down' : 'right'}`}/>
                     &nbsp;&nbsp;&nbsp;
                     <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" {...{ 'cy-data': 'dataset-export-select-reference-system' }}>
                         <label><Message msgId="layerdownload.srs" /></label>
                         <Select
                             clearable={false}

web/client/components/mapviews/settings/CompactRichTextEditor.jsx

@@ -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 cy-data="add-widget-text-description">
+            <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>
     );
 }
 

web/client/components/widgets/builder/wizard/text/TextOptions.jsx

@@ -38,6 +38,7 @@ function TextOptions({ data = {}, onChange = () => {} }) {
                                 style={{ marginBottom: 10 }}
                                 placeholder="widgets.builder.wizard.titlePlaceholder"
                                 value={data.title}
+                                cy-data="add-widget-text-title"
                                 type="text"
                                 onChange={(e) =>
                                     onChange("title", e.target.value)

web/client/plugins/DrawerMenu.jsx

@@ -63,6 +63,7 @@ const DrawerButton = connect(state => ({
 }) =>
     <Button
         id={id}
+        cy-data="drawer-menu-button"
         style={menuButtonStyle}
         bsStyle={buttonStyle}
         key="menu-button"