feat(ABPDOCS-138): adding tests

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 → 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 → 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 → 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 → 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 → 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

@@ -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

@@ -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

@@ -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/abp-review/abp-review.test.js

@@ -0,0 +1,28 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import { waitForElement } from '../../helpers/waitfor.js';
+import init from '../../../blocks/abp-review/abp-review.js';
+
+describe('Review Comp', () => {
+  beforeEach(async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    window.localStorage.setItem('/data/review', JSON.stringify({ rating: 5 }));
+    window.s_adobe = { visitor: { getMarketingCloudVisitorID: () => 'abcd' } };
+  });
+
+  it('could be initialized', async () => {
+    const div = document.querySelector('.review');
+    await init(div);
+    const review = await waitForElement('.hlx-ReviewWrapper');
+    expect(review).to.exist;
+  });
+
+  it('could be initialized (with all missing fields)', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/missing-fields.html' });
+    const div = document.querySelector('.review');
+    await init(div);
+
+    const review = await waitForElement('.hlx-ReviewWrapper');
+    expect(review).to.exist;
+  });
+});

test/blocks/abp-review/components/abp-review/Comments.test.js

@@ -0,0 +1,54 @@
+import { expect } from '@esm-bundle/chai';
+import { html, render } from '../../../../../deps/htm-preact.js';
+import { waitForElement, delay } from '../../../../helpers/waitfor.js';
+
+import Comments from '../../../../../blocks/abp-review/components/abp-review/Comments.js';
+
+describe('Comments', () => {
+  beforeEach(() => {
+    const mockFn = () => {};
+    const comment = html`<${Comments}
+      label=""
+      comment=""
+      handleCommentChange=${mockFn}
+    />`;
+    render(comment, document.body);
+  });
+  it('should display text area', async () => {
+    const commentElem = await waitForElement(
+      'fieldset.hlx-Review-commentFields',
+    );
+    const textAreaElem = commentElem.querySelector('textarea');
+    expect(textAreaElem).to.exist;
+  });
+
+  it('could be focussed', async () => {
+    const commentElem = await waitForElement(
+      'fieldset.hlx-Review-commentFields',
+    );
+    const ctaCoverElem = commentElem.querySelector('#ctaCover');
+    const textAreaElem = commentElem.querySelector('textarea');
+    ctaCoverElem.click();
+
+    const isSelected = textAreaElem === document.activeElement;
+    expect(isSelected).to.be.true;
+    expect(commentElem.classList.contains('has-focus')).to.be.true;
+  });
+
+  it('should test for input blur', async () => {
+    const commentElem = await waitForElement('.hlx-Review-commentFields');
+    const textAreaElem = commentElem.querySelector('textarea');
+    const onBlurEvent = new Event('blur');
+    textAreaElem.dispatchEvent(onBlurEvent);
+    await delay(100);
+    expect(commentElem.classList.contains('has-focus')).to.be.false;
+  });
+
+  it('should test for input change', async () => {
+    const commentElem = await waitForElement('.hlx-Review-commentFields');
+    const textAreaElem = commentElem.querySelector('textarea');
+    const onInputChange = new Event('input');
+    textAreaElem.dispatchEvent(onInputChange);
+    expect(textAreaElem.getAttribute('value')).to.be.null;
+  });
+});

test/blocks/abp-review/components/abp-review/RatingInput.test.js

@@ -0,0 +1,38 @@
+import { expect } from '@esm-bundle/chai';
+import { html, render } from '../../../../../deps/htm-preact.js';
+import { waitForElement } from '../../../../helpers/waitfor.js';
+
+import RatingInput from '../../../../../blocks/abp-review/components/abp-review/RatingInput.js';
+
+describe('RatingInput', () => {
+  beforeEach(() => {
+    const mockFn = () => {};
+    const ratingInput = html`<${RatingInput}
+      index="1"
+      isInteractive="true"
+      onClick=${mockFn}
+      hasKeyboardFocus="true"
+      isActive="true"
+      isHovering="true"
+      starString="star"
+      starStringPlural="stars"
+      tooltip="bad"
+    />`;
+    render(ratingInput, document.body);
+  });
+
+  it('should display rating Input', async (done) => {
+    done();
+    const ratingInputElement = await waitForElement('.hlx-Review-ratingFields');
+    expect(ratingInputElement).to.exist;
+  });
+
+  it('should test keypress event', async (done) => {
+    done();
+    const ratingInputElement = await waitForElement(
+      '.hlx-Review-ratingFields input',
+    );
+    expect(ratingInputElement.classList.contains('has-keyboard-focus')).to.be
+      .true;
+  });
+});

test/blocks/abp-review/components/abp-review/RatingSummary.test.js

@@ -0,0 +1,23 @@
+import { expect } from '@esm-bundle/chai';
+import { html, render } from '../../../../../deps/htm-preact.js';
+import { waitForElement } from '../../../../helpers/waitfor.js';
+
+import RatingSummary from '../../../../../blocks/abp-review/components/abp-review/RatingSummary.js';
+
+describe('RatingSummary', () => {
+  beforeEach(() => {
+    const ratingSummary = html`<${RatingSummary}
+      averageRating="4"
+      maxRating="5"
+      totalReviews="100"
+      reviewString="Review"
+      reviewStringPlural="Reviews"
+    />`;
+    render(ratingSummary, document.body);
+  });
+
+  it('should display rating summary', async () => {
+    const reviewElement = await waitForElement('div.hlx-ReviewStats');
+    expect(reviewElement).to.exist;
+  });
+});

test/blocks/abp-review/components/abp-review/Ratings.test.js

@@ -0,0 +1,64 @@
+import { expect } from '@esm-bundle/chai';
+import { html, render } from '../../../../../deps/htm-preact.js';
+import { waitForElement } from '../../../../helpers/waitfor.js';
+
+import Ratings from '../../../../../blocks/abp-review/components/abp-review/Ratings.js';
+
+describe('Ratings', () => {
+  beforeEach(() => {
+    const mockFn = () => {};
+    const ratings = html`<${Ratings}
+        count="5"
+        isInteractive="true"
+        onClick=${mockFn}
+        onRatingHover=${mockFn}
+        rating="4"
+        starsLegend="Choose a star rating"
+        starString="star"
+        starStringPlural="stars"
+      />
+      tooltips=['This sucks', 'Meh', "It's OK", 'I like it', 'Best thing ever']
+      tooltipDelay=5000 />`;
+    render(ratings, document.body);
+  });
+
+  it('should display ratings', async () => {
+    const ratingElement = await waitForElement('.hlx-Review-ratingFields');
+    expect(ratingElement).to.exist;
+  });
+
+  it('should test keypress on ratings', async () => {
+    const ratingElement = await waitForElement('.hlx-Review-ratingFields');
+    const inputElements = ratingElement.querySelectorAll('input');
+    const keyPressEvent = new KeyboardEvent('keypress', {
+      bubbles: true,
+      cancelable: true,
+      keyCode: 13,
+    });
+    inputElements[3].dispatchEvent(keyPressEvent);
+    expect(inputElements[3].classList.contains('is-Active')).to.be.true;
+  });
+
+  it('should test mouse events on fieldset', async () => {
+    const ratingElement = await waitForElement('.hlx-Review-ratingFields');
+    const mouseDownEvent = document.createEvent('MouseEvents');
+    mouseDownEvent.initEvent('mousedown', true, true);
+    ratingElement.dispatchEvent(mouseDownEvent);
+    const inputElement = ratingElement.querySelectorAll('input')[0];
+    expect(inputElement.classList.contains('is-Active')).to.be.true;
+  });
+
+  it('should test focus on ratings', async () => {
+    const ratingElement = await waitForElement('.hlx-Review-ratingFields');
+    const inputElements = ratingElement.querySelectorAll('input');
+    ratingElement.dispatchEvent(new Event('focus'));
+    expect(inputElements[3].classList.contains('is-Active')).to.be.true;
+  });
+
+  it('should test click on ratings input', async () => {
+    const ratingElement = await waitForElement('.hlx-Review-ratingFields');
+    const inputElements = ratingElement.querySelectorAll('input');
+    inputElements[3].dispatchEvent(new Event('click'));
+    expect(inputElements[3].classList.contains('is-Active')).to.be.true;
+  });
+});