feat(ABPDOCS-138): adding tests

blocks/abp-review/abp-review.js → libs/blocks/abp-review/abp-review.js

@@ -1,4 +1,4 @@
-import { html, render } from './htm-preact.js';
+import { html, render } from '../../deps/htm-preact.js';
 
 import HelixReview from './components/helixReview/HelixReview.js';
 

blocks/abp-review/components/review/Comments.js → libs/blocks/abp-review/components/abp-review/Comments.js

@@ -3,7 +3,7 @@ import {
   useState,
   useRef,
   html,
-} from '../../htm-preact.js';
+} from '../../../../deps/htm-preact.js';
 
 function Comments({
   label,
@@ -15,8 +15,6 @@ function Comments({
   rating,
 }) {
   const maxLength = 500;
-  const [hasComment, setHasComment] = useState(false);
-  const [displaySend, setDisplaySend] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
   const [charCount, setCharCount] = useState(maxLength);
 
@@ -29,20 +27,17 @@ function Comments({
 
   const onCommentChange = (e) => {
     const { value } = e.target;
-    setHasComment(!!value);
     setCharCount(maxLength - value.length);
     if (handleCommentChange) {
       handleCommentChange(value);
     }
   };
 
   const onBlur = (e) => {
-    setDisplaySend(!!e.target.value);
     setHasFocus(false);
   };
 
   const onFocus = () => {
-    setDisplaySend(true);
     setHasFocus(true);
   };
 

blocks/abp-review/components/review/RatingInput.js → libs/blocks/abp-review/components/abp-review/RatingInput.js

@@ -1,4 +1,4 @@
-import { html } from '../../htm-preact.js';
+import { html } from '../../../../deps/htm-preact.js';
 
 const KEY_ENTER = 13;
 const KEY_SPACE = 32;

blocks/abp-review/components/review/RatingSummary.js → libs/blocks/abp-review/components/abp-review/RatingSummary.js

@@ -1,4 +1,4 @@
-import { html } from '../../htm-preact.js';
+import { html } from '../../../../deps/htm-preact.js';
 
 function RatingSummary({
   averageRating = 0,

blocks/abp-review/components/review/Ratings.js → libs/blocks/abp-review/components/abp-review/Ratings.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, html } from '../../htm-preact.js';
+import { useEffect, useState, html } from '../../../../deps/htm-preact.js';
 
 import RatingInput from './RatingInput.js';
 import useHover from '../../useHover.js';

blocks/abp-review/components/review/Review.js → libs/blocks/abp-review/components/abp-review/Review.js

@@ -3,7 +3,7 @@ import {
   useEffect,
   useRef,
   useState,
-} from '../../htm-preact.js';
+} from '../../../../deps/htm-preact.js';
 
 import { addToAverage } from '../../utils/utils.js';
 import sanitizeComment from '../../utils/sanitizeComment.js';

blocks/abp-review/components/helixReview/HelixReview.js → libs/blocks/abp-review/components/helixReview/HelixReview.js

@@ -1,7 +1,7 @@
-import { useState, html } from '../../htm-preact.js';
+import { useState, html } from '../../../../deps/htm-preact.js';
 
 import sendHelixData from '../../utils/sendHelixData.js';
-import Review from '../review/Review.js';
+import Review from '../abp-review/Review.js';
 
 const HelixReview = ({
   clickTimeout = 5000,

blocks/abp-review/useHover.js → libs/blocks/abp-review/useHover.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from './htm-preact.js';
+import { useEffect, useState, useRef } from '../../deps/htm-preact.js';
 /**
  * React hook to track if the mouse is hovering over a DOM ref
  * Returns a hover state object with two properties:

blocks/tree-view/tree-view.js → libs/blocks/tree-view/tree-view.js

@@ -1,4 +1,4 @@
-import { getLibs } from '../../scripts/utils.js';
+import { getLibs } from '../../../scripts/utils.js';
 
 const BACOM_HOSTS = ['localhost', '--bacom--adobecom.hlx.page', '--bacom--adobecom.hlx.live', 'business.adobe.com'];
 

package.json

@@ -4,8 +4,9 @@
   "version": "1.0.0",
   "description": "Website foundation technology.",
   "scripts": {
-    "test": "wtr \"./test/**/*.test.js\" --node-resolve --port=2000 --coverage",
+    "test": "wtr --config ./web-test-runner.config.mjs \"./test/**/*.test.(js|html)\" --node-resolve --port=2000 --coverage --concurrent-browsers 4",
     "test:watch": "npm test -- --watch",
+    "test:file": "wtr --config ./web-test-runner.config.mjs --node-resolve --port=2000 --coverage",
     "lint": "npm run lint:js && npm run lint:css",
     "lint:js": "eslint .",
     "lint:css": "stylelint 'blocks/**/*.css' 'styles/*.css'"
@@ -20,6 +21,11 @@
     "url": "https://github.com/adobecom/college/issues"
   },
   "homepage": "https://github.com/adobecom/college#readme",
+  "dependencies": {
+    "htm": "^3.1.1",
+    "preact": "^10.11.0",
+    "@preact/signals": "1.0.4"
+  },
   "devDependencies": {
     "@babel/core": "7.17.7",
     "@babel/eslint-parser": "7.17.0",
@@ -30,13 +36,15 @@
     "chai": "4.3.6",
     "eslint": "8.11.0",
     "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-chai-friendly": "^0.7.2",
+    "eslint-plugin-compat": "^4.0.2",
+    "eslint-plugin-ecmalist": "^1.0.8",
     "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "microbundle": "0.15.1",
     "sinon": "13.0.1",
     "stylelint": "14.6.0",
     "stylelint-config-prettier": "9.0.3",
-    "stylelint-config-standard": "25.0.0",
-    "htm": "^3.1.1",
-    "preact": "^10.11.0",
-    "@preact/signals": "1.0.4"
+    "stylelint-config-standard": "25.0.0"
   }
 }

test/blocks/review/components/helixReview/HelixReview.test.js

@@ -0,0 +1,109 @@
+import { expect } from '@esm-bundle/chai';
+import { html, render } from '../../../../../libs/deps/htm-preact.js';
+import { waitForElement, delay } from '../../../../helpers/waitfor.js';
+
+import HelixReview from '../../../../../libs/blocks/abp-review/components/helixReview/HelixReview.js';
+import {
+  stubFetch,
+  stubFetchError,
+  stubEmptyResponse,
+} from './mockHelixData.js';
+
+describe('HelixReview', () => {
+  stubFetch();
+  beforeEach(() => {
+    const strings = {
+      tooltipdelay: 5,
+      postUrl: '',
+    };
+    window.localStorage.setItem('/data/review', JSON.stringify({ rating: 5 }));
+    const helixReview = html`<${HelixReview}
+      clickTimeout="5000"
+      commentThreshold="3"
+      hideTitleOnReload="true"
+      lang="en"
+      reviewTitle="Review"
+      strings=${strings}
+      tooltipDelay=${strings.tooltipdelay}
+      postUrl=${strings.postUrl}
+      visitorId=""
+      reviewPath="/data/review"
+      onRatingSet=${(/* { rating, comment } */) => {}}
+      onRatingHover=${(/* { rating } */) => {}}
+      onReviewLoad=${(/* { hasRated, rating } */) => {}}
+      productJson="{}"
+    />`;
+    render(helixReview, document.body);
+  });
+
+  it('should display review', async () => {
+    const reviewElement = await waitForElement('.hlx-ReviewWrapper');
+    const titleElement = reviewElement.querySelector('.hlx-reviewTitle');
+    expect(reviewElement).to.exist;
+    expect(titleElement).to.exist;
+  });
+
+  it('should test handle submit', async () => {
+    const reviewElement = await waitForElement('.hlx-ReviewWrapper');
+    const formElement = reviewElement.querySelector('.hlx-Review');
+    formElement.dispatchEvent(new Event('submit'));
+    await delay(100);
+    const thankYouElement = reviewElement.querySelector('.hlx-submitResponse');
+    expect(thankYouElement).to.exist;
+  });
+
+  it('should test the review without review path', async () => {
+    stubEmptyResponse();
+    const strings = {
+      tooltipdelay: 5,
+      postUrl: '',
+    };
+    const helixReview = html`<${HelixReview}
+      clickTimeout="5000"
+      commentThreshold="3"
+      hideTitleOnReload="true"
+      lang="en"
+      reviewTitle="Review"
+      strings=${strings}
+      tooltipDelay=${strings.tooltipdelay}
+      postUrl=${strings.postUrl}
+      visitorId=""
+      reviewPath="/data/review"
+      onRatingSet=${(/* { rating, comment } */) => {}}
+      onRatingHover=${(/* { rating } */) => {}}
+      onReviewLoad=${(/* { hasRated, rating } */) => {}}
+      productJson="{}"
+    />`;
+    render(helixReview, document.body);
+    const reviewElement = await waitForElement('.hlx-ReviewWrapper');
+    expect(reviewElement).to.exist;
+  });
+
+  it('should test the review without review path', async () => {
+    stubFetchError();
+    window.localStorage.removeItem('/data/review');
+    const strings = {
+      tooltipdelay: 5,
+      postUrl: '',
+    };
+    const helixReview = html`<${HelixReview}
+      clickTimeout="5000"
+      commentThreshold="3"
+      hideTitleOnReload="true"
+      lang="en"
+      reviewTitle="Review"
+      strings=${strings}
+      tooltipDelay=${strings.tooltipdelay}
+      postUrl=${strings.postUrl}
+      visitorId=""
+      reviewPath="/data/review"
+      onRatingSet=${(/* { rating, comment } */) => {}}
+      onRatingHover=${(/* { rating } */) => {}}
+      onReviewLoad=${(/* { hasRated, rating } */) => {}}
+      productJson="{}"
+    />`;
+    render(helixReview, document.body);
+    const reviewElement = await waitForElement('.hlx-ReviewWrapper');
+    expect(reviewElement).to.exist;
+  });
+});

test/blocks/review/components/helixReview/mockHelixData.js

@@ -0,0 +1,46 @@
+import { stub } from 'sinon';
+
+stub(window, 'fetch');
+
+const data = [{
+  total: 100,
+  rating: 4,
+  average: 4,
+}];
+
+function jsonOk(body) {
+  const mockResponse = new window.Response(JSON.stringify(body), {
+    status: 200,
+    headers: { 'Content-type': 'application/json' },
+  });
+
+  return Promise.resolve(mockResponse);
+}
+
+function jsonError(status, body) {
+  const mockResponse = new window.Response(JSON.stringify(body), {
+    status: 500,
+    ok: false,
+    headers: { 'Content-type': 'application/json' },
+  });
+
+  return Promise.reject(mockResponse);
+}
+
+export const stubFetch = () => {
+  const resp = jsonOk({ data: JSON.stringify(data) });
+  window.fetch.returns(resp);
+};
+
+export const stubFetchError = () => {
+  const resp = jsonError({
+    status: 500,
+    data: JSON.stringify(data),
+  });
+  window.fetch.returns(resp);
+};
+
+export const stubEmptyResponse = () => {
+  const resp = jsonOk({ data: JSON.stringify([]) });
+  window.fetch.returns(resp);
+};

test/blocks/review/mocks/body.html

@@ -0,0 +1,46 @@
+<div class="review">
+  <div>
+    <div>Review url</div>
+    <div>https://main--helixdemo--nkthakur48.hlx.page/data/review</div>
+  </div>
+  <div>
+    <div>Title</div>
+    <div>Rate your Experience</div>
+  </div>
+  <div>
+    <div>Hide title</div>
+    <div>false</div>
+  </div>
+  <div>
+    <div>Rating verb</div>
+    <div>Vote, Votes</div>
+  </div>
+  <div>
+    <div>Rating noun</div>
+    <div>Star, Stars</div>
+  </div>
+  <div>
+    <div>Comment placeholder</div>
+    <div>Please give your feedback</div>
+  </div>
+  <div>
+    <div>Comment field label</div>
+    <div>Review Feedback</div>
+  </div>
+  <div>
+    <div>Submit text</div>
+    <div>Send</div>
+  </div>
+  <div>
+    <div>Thank you text</div>
+    <div>Thanks for your feedback</div>
+  </div>
+  <div>
+    <div>Tooltips</div>
+    <div>Poor, Below Average, Good, Very Good, Outstanding</div>
+  </div>
+  <div>
+    <div>Tooltip delay</div>
+    <div>5</div>
+  </div>
+</div>

test/blocks/review/mocks/missing-fields.html

@@ -0,0 +1 @@
+<div class="review"></div>