Merge pull request #777 from culturecreates/develop

Develop
culturecreates · Nov 13, 2023 · 682166a · 682166a
2 parents 097d4e3 + 6a73390
commit 682166a
Show file tree

Hide file tree

Showing 18 changed files with 296 additions and 127 deletions.
diff --git a/src/components/BilingualInput/BilingualInput.jsx b/src/components/BilingualInput/BilingualInput.jsx
@@ -65,6 +65,7 @@ function BilingualInput(props) {
       animated="false"
       tabBarStyle={{ margin: '0' }}
       className="bilingual-input-tab"
+      data-cy="bilingual-tabs"
     />
   );
 }

diff --git a/src/components/ImageCrop/ImageCrop.jsx b/src/components/ImageCrop/ImageCrop.jsx
@@ -186,26 +186,24 @@ function ImageCrop(props) {
               {t('dashboard.events.addEditEvent.otherInformation.image.crop.subHeading')}
             </span>
           </Col>
-          <Col span={24}>
-            <span
-              className="quick-select-modal-sub-heading"
-              style={{ fontWeight: 700, color: '#222732' }}
-              data-cy="span-image-crop-frame-size-text">
-              {t('dashboard.events.addEditEvent.otherInformation.image.crop.savedFrameSize')}
-            </span>
-          </Col>
           <Col span={24}>
             <Radio.Group
               defaultValue={ASPECT_RATIO_TYPE.large.type}
               value={aspectRatioType}
               onChange={(event) => aspectRatioControl(event.target.value)}
               style={{ color: '#222732' }}>
               <Space direction="vertical">
-                <Radio value={ASPECT_RATIO_TYPE.large.type} data-cy="radio-button-large-aspect-ratio">
-                  {largeAspectRatio} {t('dashboard.events.addEditEvent.otherInformation.image.crop.ratio')}
+                <Radio
+                  value={ASPECT_RATIO_TYPE.large.type}
+                  data-cy="radio-button-large-aspect-ratio"
+                  className="image-ratio-text">
+                  {largeAspectRatio} {t('dashboard.events.addEditEvent.otherInformation.image.crop.largeImage')}
                 </Radio>
-                <Radio value={ASPECT_RATIO_TYPE.thumbnail.type} data-cy="radio-button-thumbnail-aspect-ratio">
-                  {thumbnailAspectRatio} {t('dashboard.events.addEditEvent.otherInformation.image.crop.ratio')}
+                <Radio
+                  value={ASPECT_RATIO_TYPE.thumbnail.type}
+                  data-cy="radio-button-thumbnail-aspect-ratio"
+                  className="image-ratio-text">
+                  {thumbnailAspectRatio} {t('dashboard.events.addEditEvent.otherInformation.image.crop.thumbnailImage')}
                 </Radio>
               </Space>
             </Radio.Group>

diff --git a/src/components/ImageCrop/imageCrop.css b/src/components/ImageCrop/imageCrop.css
@@ -60,6 +60,21 @@
   box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
 }
 
-.image-crop-wrapper .crop-container .reactEasyCrop_Contain{
+.image-crop-wrapper .crop-container .reactEasyCrop_Contain {
   z-index: -1;
-}
+}
+
+.image-crop-wrapper .image-ratio-text {
+  color: #222732;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 24px;
+}
+
+.image-crop-wrapper .image-ratio-text .ant-radio-inner::after {
+  background-color: #1b3de6;
+}
+
+.image-crop-wrapper .ant-radio-checked .ant-radio-inner {
+  border-color: #1b3de6;
+}
diff --git a/src/components/ImageUpload/ImageUpload.jsx b/src/components/ImageUpload/ImageUpload.jsx
@@ -120,6 +120,7 @@ function ImageUpload(props) {
     <>
       <Form.Item name={formName ?? 'dragger'} valuePropName="fileList" getValueFromEvent={normFile}>
         <Upload.Dragger
+          data-cy="antd-image-upload"
           accept='.png, .jpg, .jpeg"'
           className="upload-wrapper"
           multiple={false}

diff --git a/src/components/List/SelectionItem/SelectionItem.jsx b/src/components/List/SelectionItem/SelectionItem.jsx
@@ -39,13 +39,15 @@ function SelectionItem(props) {
       style={{ border: bordered && '1px solid#607EFC', width: itemWidth && itemWidth }}>
       <List.Item
         className="selection-item-list-wrapper"
+        data-cy="list-item"
         actions={[
           showExternalSourceLink && artsDataLink && (
             <ArtsDataLink
               onClick={(e) => {
                 e.stopPropagation();
                 window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer');
-              }}>
+              }}
+              data-cy="artsdata-link-tag">
               <span style={{ textDecoration: 'underline' }}>Artsdata</span>
               <LinkOutlined />
             </ArtsDataLink>
@@ -56,13 +58,19 @@ function SelectionItem(props) {
                 type="text"
                 key="list-loadmore-close"
                 onClick={onEdit}
-                style={{ color: '#1b3de6', fontSize: '12px', fontWeight: 600, padding: '0px' }}>
+                style={{ color: '#1b3de6', fontSize: '12px', fontWeight: 600, padding: '0px' }}
+                data-cy="button-edit-entity">
                 {t('dashboard.organization.readOnly.edit')}
               </Button>
             </ReadOnlyProtectedComponent>
           ),
           closable && (
-            <Button type="text" key="list-loadmore-close" onClick={onClose} style={{ padding: '0px' }}>
+            <Button
+              type="text"
+              key="list-loadmore-close"
+              onClick={onClose}
+              style={{ padding: '0px' }}
+              data-cy="button-close-entity">
               <CloseCircleOutlined style={{ color: '#1b3de6', fontSize: '21px' }} />
             </Button>
           ),
@@ -78,10 +86,19 @@ function SelectionItem(props) {
                 backgroundColor: '#E3E8FF',
                 borderRadius: '4px',
               }}
+              data-cy="avatar-entity-logo"
             />
           }
-          title={<span className="selection-item-title">{name}</span>}
-          description={<span className="selection-item-subheading">{description}</span>}
+          title={
+            <span className="selection-item-title" data-cy="span-entity-name">
+              {name}
+            </span>
+          }
+          description={
+            <span className="selection-item-subheading" data-cy="span-entity-description">
+              {description}
+            </span>
+          }
         />
       </List.Item>
       {(postalAddress || accessibility) && (
@@ -90,7 +107,7 @@ function SelectionItem(props) {
             <Col flex="190px">
               <Row>
                 <Col>
-                  <span className="selection-item-sub-title">
+                  <span className="selection-item-sub-title" data-cy="span-street-address-title">
                     {t('dashboard.events.addEditEvent.location.streetAddress')}
                   </span>
                 </Col>
@@ -100,7 +117,7 @@ function SelectionItem(props) {
                   <div className="selection-item-sub-content">
                     <address>
                       {(postalAddress?.streetAddress?.en || postalAddress?.streetAddress?.fr) && (
-                        <span>
+                        <span data-cy="span-street-address">
                           {contentLanguageBilingual({
                             en: postalAddress?.streetAddress?.en,
                             fr: postalAddress?.streetAddress?.fr,
@@ -112,7 +129,7 @@ function SelectionItem(props) {
                       )}
                       {(postalAddress?.streetAddress?.en || postalAddress?.streetAddress?.fr) && <br />}
                       {postalAddress?.addressLocality && (
-                        <span>
+                        <span data-cy="span-address-locality">
                           {contentLanguageBilingual({
                             en: postalAddress?.addressLocality?.en,
                             fr: postalAddress?.addressLocality?.fr,
@@ -123,7 +140,7 @@ function SelectionItem(props) {
                         </span>
                       )}
                       {postalAddress?.addressRegion && (
-                        <span>
+                        <span data-cy="span-address-region">
                           {contentLanguageBilingual({
                             en: postalAddress?.addressRegion?.en,
                             fr: postalAddress?.addressRegion?.fr,
@@ -134,7 +151,7 @@ function SelectionItem(props) {
                         </span>
                       )}
 
-                      {postalAddress?.postalCode && <span>{postalAddress?.postalCode}</span>}
+                      {postalAddress?.postalCode && <span data-cy="span-postal-code">{postalAddress?.postalCode}</span>}
                       <br />
                       {Array.isArray(region) && (
                         <SmallButton
@@ -145,6 +162,7 @@ function SelectionItem(props) {
                             interfaceLanguage: user?.interfaceLanguage?.toLowerCase(),
                             calendarContentLanguage: calendarContentLanguage,
                           })}
+                          data-cy="show-region"
                         />
                       )}
                       {openingHours && (
@@ -154,8 +172,9 @@ function SelectionItem(props) {
                             target="_blank"
                             rel="noopener noreferrer"
                             className="selection-item-sub-content"
-                            style={{ color: '#0F0E98' }}>
-                            <span className="open-hour-url-link">
+                            style={{ color: '#0F0E98' }}
+                            data-cy="anchor-opening-hours">
+                            <span className="open-hour-url-link" data-cy="span-opening-hours">
                               {t('dashboard.events.addEditEvent.location.openingHours')}
                             </span>
                             &nbsp;
@@ -173,15 +192,15 @@ function SelectionItem(props) {
             <Col flex="190px">
               <Row>
                 <Col>
-                  <span className="selection-item-sub-title">
+                  <span className="selection-item-sub-title" data-cy="span-accessibility-title">
                     {t('dashboard.events.addEditEvent.location.venueAccessibility')}
                   </span>
                 </Col>
               </Row>
               <Row>
                 <Col>
                   {accessibility?.map((venueAccessibiltiy, index) => (
-                    <span className="selection-item-sub-content" key={index}>
+                    <span className="selection-item-sub-content" key={index} data-cy="span-accessibility">
                       {contentLanguageBilingual({
                         en: venueAccessibiltiy?.name?.en,
                         fr: venueAccessibiltiy?.name?.fr,
@@ -203,13 +222,14 @@ function SelectionItem(props) {
             <div className="arts-data-link-first-line">
               <span
                 style={{ textDecoration: 'underline', cursor: 'pointer' }}
-                onClick={() => window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer')}>
+                onClick={() => window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer')}
+                data-cy="span-artsdata-link">
                 Artsdata
               </span>
-              {name && <span>{name}</span>}
+              {name && <span data-cy="span-artsdata-entity-name">{name}</span>}
               {/* {description && <Badge color="#1B3DE6" size="small" />} */}
             </div>
-            {description && <span>{description}</span>}
+            {description && <span data-cy="span-artsdata-entity-description">{description}</span>}
           </div>
 
           <LinkOutlined style={{ fontSize: '16px' }} />

diff --git a/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx b/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx
@@ -328,7 +328,8 @@ function QuickCreateOrganization(props) {
                               );
                           },
                         }),
-                      ]}>
+                      ]}
+                      data-cy="form-item-quick-create-organizer-name-french-label">
                       <TextArea
                         autoSize
                         autoComplete="off"
@@ -367,7 +368,8 @@ function QuickCreateOrganization(props) {
                               );
                           },
                         }),
-                      ]}>
+                      ]}
+                      data-cy="form-item-quick-create-organizer-name-english-label">
                       <TextArea
                         autoSize
                         autoComplete="off"
@@ -389,7 +391,8 @@ function QuickCreateOrganization(props) {
                       type: 'url',
                       message: t('dashboard.events.addEditEvent.validations.url'),
                     },
-                  ]}>
+                  ]}
+                  data-cy="form-item-quick-create-organizer-website-label">
                   <StyledInput
                     addonBefore="https://"
                     autoComplete="off"
@@ -421,7 +424,8 @@ function QuickCreateOrganization(props) {
                           );
                       },
                     }),
-                  ]}>
+                  ]}
+                  data-cy="form-item-quick-create-organizer-logo-label">
                   <Row>
                     <Col>
                       <p

diff --git a/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx b/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx
@@ -296,7 +296,8 @@ function QuickCreatePerson(props) {
                                 );
                             },
                           }),
-                        ]}>
+                        ]}
+                        data-cy="form-item-quick-create-person-name-french-label">
                         <TextArea
                           autoSize
                           autoComplete="off"
@@ -331,7 +332,8 @@ function QuickCreatePerson(props) {
                                 );
                             },
                           }),
-                        ]}>
+                        ]}
+                        data-cy="form-item-quick-create-person-name-english-label">
                         <TextArea
                           autoSize
                           autoComplete="off"
@@ -346,7 +348,8 @@ function QuickCreatePerson(props) {
                   <Form.Item
                     name="occupation"
                     label={taxonomyDetails(allTaxonomyData?.data, user, 'Occupation', 'name', false)}
-                    hidden={taxonomyDetails(allTaxonomyData?.data, user, 'Occupation', 'name', false) ? false : true}>
+                    hidden={taxonomyDetails(allTaxonomyData?.data, user, 'Occupation', 'name', false) ? false : true}
+                    data-cy="form-item-quick-create-person-occupation-label">
                     <TreeSelectOption
                       style={{
                         display: !taxonomyDetails(allTaxonomyData?.data, user, 'Occupation', 'name', false) && 'none',
@@ -365,13 +368,15 @@ function QuickCreatePerson(props) {
                         false,
                         calendarContentLanguage,
                       )}
+                      data-cy="treeselect-quick-create-person-occupation"
                       tagRender={(props) => {
                         const { label, closable, onClose } = props;
                         return (
                           <Tags
                             closable={closable}
                             onClose={onClose}
-                            closeIcon={<CloseCircleOutlined style={{ color: '#1b3de6', fontSize: '12px' }} />}>
+                            closeIcon={<CloseCircleOutlined style={{ color: '#1b3de6', fontSize: '12px' }} />}
+                            data-cy={`tags-quick-create-person-occupation-${label}`}>
                             {label}
                           </Tags>
                         );
@@ -386,7 +391,8 @@ function QuickCreatePerson(props) {
                         type: 'url',
                         message: t('dashboard.events.addEditEvent.validations.url'),
                       },
-                    ]}>
+                    ]}
+                    data-cy="form-item-quick-create-person-website-label">
                     <StyledInput
                       addonBefore="https://"
                       autoComplete="off"