Merge pull request #69 from shopgate/PWA-334-e2e-productpage

PWA-334 e2e productpage

libraries/common/components/Image/__snapshots__/spec.jsx.snap

@@ -66,6 +66,7 @@ exports[`<Image /> should render placeholders if src is null 1`] = `
     <img
       alt={null}
       className="css-1trsaz6"
+      data-test-id="image"
       role="presentation"
       src="foo/bar?w=440&h=440&q=70&zc=resize&fillc=FFFFFF"
       style={Object {}}

libraries/common/components/Image/index.jsx

@@ -183,6 +183,7 @@ class Image extends Component {
           style={inlineStyles}
           alt={this.props.alt}
           role="presentation"
+          data-test-id="image"
         />
       );
     }

libraries/ui-shared/Availability/__snapshots__/spec.jsx.snap

@@ -27,6 +27,7 @@ exports[`<Availability /> should render if state is "ok" when "showWhenAvailable
 >
   <div
     className=" css-1ixzglu"
+    data-test-id="availabilityText: Available"
   >
     Available
   </div>
@@ -42,6 +43,7 @@ exports[`<Availability /> should render if state is "warning" 1`] = `
 >
   <div
     className=" css-14jedxl"
+    data-test-id="availabilityText: Only 5 left"
   >
     Only 5 left
   </div>
@@ -57,6 +59,7 @@ exports[`<Availability /> should render if state is "warning" 2`] = `
 >
   <div
     className=" css-qsvazi"
+    data-test-id="availabilityText: Out of stock"
   >
     Out of stock
   </div>

libraries/ui-shared/Availability/index.jsx

@@ -35,7 +35,7 @@ const Availability = ({
   }
 
   return (
-    <div className={`${className} ${style}`}>
+    <div className={`${className} ${style}`} data-test-id={`availabilityText: ${text}`}>
       {text}
     </div>
   );

libraries/ui-shared/FavoritesButton/__snapshots__/spec.jsx.snap

@@ -32,7 +32,7 @@ exports[`<FavoritesButton /> should only render when no favorites set 1`] = `
       <button
         aria-label="favorites.add"
         className="css-orm6vn "
-        data-test-id="button"
+        data-test-id="favoriteButton"
         onClick={[Function]}
       >
         <Ripple
@@ -116,7 +116,7 @@ exports[`<FavoritesButton /> should render when favorites set 1`] = `
       <button
         aria-label="favorites.remove"
         className="css-orm6vn "
-        data-test-id="button"
+        data-test-id="favoriteButton"
         onClick={[Function]}
       >
         <Ripple

libraries/ui-shared/FavoritesButton/index.jsx

@@ -144,7 +144,7 @@ class FavoritesButton extends Component {
         aria-label={this.getLabel()}
         className={`${className} ${this.props.className}`}
         onClick={this.handleClick}
-        data-test-id="button"
+        data-test-id="favoriteButton"
       >
         <Ripple
           className={`${styles.ripple} ${this.props.rippleClassName}`}

libraries/ui-shared/PriceInfo/index.jsx

@@ -13,6 +13,7 @@ const PriceInfo = ({ className, text }) => (
   <div
     className={`${styles} ${className}`}
     dangerouslySetInnerHTML={{ __html: text }}
+    data-test-id={`priceInfo: ${text}`}
   />
 );
 

libraries/ui-shared/RatingStars/__snapshots__/spec.jsx.snap

@@ -4,6 +4,7 @@ exports[`<RatingStars /> renders with value of 0 1`] = `
 <div
   aria-label="reviews.rating_stars"
   className="css-13azwyo "
+  data-test-id="ratedStars: 0"
 >
   <div
     className="css-4s85e9"
@@ -74,6 +75,7 @@ exports[`<RatingStars /> renders with value of 50 1`] = `
 <div
   aria-label="reviews.rating_stars"
   className="css-13azwyo "
+  data-test-id="ratedStars: 2.5"
 >
   <div
     className="css-4s85e9"
@@ -178,6 +180,7 @@ exports[`<RatingStars /> renders with value of 100 1`] = `
 <div
   aria-label="reviews.rating_stars"
   className="css-13azwyo "
+  data-test-id="ratedStars: 5"
 >
   <div
     className="css-4s85e9"
@@ -304,6 +307,7 @@ exports[`<RatingStars /> should change rating on click 1`] = `
 <div
   aria-label="reviews.rating_stars"
   className="css-13azwyo "
+  data-test-id="ratedStars: 5"
 >
   <div
     className="css-4s85e9"
@@ -460,6 +464,7 @@ exports[`<RatingStars /> should change rating on click 2`] = `
 <div
   aria-label="reviews.rating_stars"
   className="css-13azwyo "
+  data-test-id="ratedStars: 3.5"
 >
   <div
     className="css-4s85e9"

libraries/ui-shared/RatingStars/index.jsx

@@ -145,7 +145,7 @@ class RatingStars extends Component {
     ];
 
     return (
-      <div className={className} aria-label={this.getTextualFinal(ratedStars)}>
+      <div className={className} aria-label={this.getTextualFinal(ratedStars)} data-test-id={`ratedStars: ${ratedStars}`}>
         <div className={styles.emptyStars}>
           {emptyStars}
         </div>

libraries/ui-shared/TaxDisclaimer/__snapshots__/spec.jsx.snap

@@ -3,9 +3,13 @@
 exports[`<TaxDisclaimer /> should display null 1`] = `""`;
 
 exports[`<TaxDisclaimer /> should display the component 1`] = `
-<Translate
-  className="css-fazkyv"
-  params={Object {}}
-  string="product.tax_disclaimer"
-/>
+<div
+  data-test-id="taxDisclaimer"
+>
+  <Translate
+    className="css-fazkyv"
+    params={Object {}}
+    string="product.tax_disclaimer"
+  />
+</div>
 `;

libraries/ui-shared/TaxDisclaimer/index.jsx

@@ -9,10 +9,12 @@ import styles from './style';
  */
 const TaxDisclaimer = () => (
   showTaxDisclaimer ? (
-    <I18n.Text
-      className={styles}
-      string="product.tax_disclaimer"
-    />
+    <div data-test-id="taxDisclaimer">
+      <I18n.Text
+        className={styles}
+        string="product.tax_disclaimer"
+      />
+    </div>
   ) : null
 );