bv-ui-core 2.6.0 → 2.8.0

package/.eslintrc

@@ -1,7 +1,8 @@
 {
   "env": {
     "node": true,
-    "browser": true
+    "browser": true,
+    "es6": true
   },
   "rules": {
     "brace-style": [2, "stroustrup", { "allowSingleLine": true }],

package/README.md

@@ -56,6 +56,7 @@ module's directory.
 - [pixelsDisplayed](./lib/pixelsDisplayed)
 - [staticAssetLoader](./lib/staticAssetLoader)
 - [waitForBody](./lib/waitForBody)
+- [queryShadowDom](./lib/queryShadowDom)
 
 [1]: ./CONTRIBUTING.md
 [2]: https://nodejs.org/download/

package/catalog-info.yaml

@@ -0,0 +1,30 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: bv-ui-core
+  github.com/project-slug: bazaarvoice/bv-ui-core
+  description: This project provides a central location for common Bazaarvoice UI code. It is intended to be installed into a project via NPM. Individual modules are authored as CommonJS modules, to be consumed by Webpack or another build tool that can ingest CommonJS.
+  annotations:
+    backstage.io/techdocs-ref: dir:.
+    github.com/project-slug: bazaarvoice/bv-ui-core
+  links:
+    - url: https://bazaarvoice.slack.com/app_redirect?channel=sme-swat
+      title: Slack channel
+      icon: send
+    - url: https://sonarqube.qa.bazaarvoice.com/dashboard?id=bazaarvoice_bv-ui-core
+      title: SonarQube
+      icon: dashboard
+  labels:
+    tech: javascript
+  tags:
+    - javascript
+    - nodejs
+spec:
+  type: library
+  system: swat
+  lifecycle: production
+  owner: swat
+
+
+
+

package/karma.conf.js

@@ -20,12 +20,10 @@ module.exports = function (config) {
         ui: 'bdd'
       }
     },
-
     // list of files / patterns to load in the browser.
     files: [
       // We need the polyfill for testing es6 modules.
       'node_modules/babel-polyfill/dist/polyfill.js',
-
       // Loaded into the browser test page.
       'test/unit/mochaInit.js',
       'test/unit/**/*.spec.js',
@@ -109,10 +107,21 @@ module.exports = function (config) {
     // Enable / disable watching file and executing tests whenever any file
     // changes.
     autoWatch: true,
+    customLaunchers: {
+      ChromeHeadless: {
+        base: 'Chrome',
+        flags: [
+          '--no-sandbox',
+          '--headless',
+          '--disable-gpu',
+          '--remote-debugging-port=9222'
+        ]
+      }
+    },
 
     // Start these browsers.
     // See: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
 
     // Continuous Integration mode. If true, Karma captures browsers, runs the
     // tests and exits.

package/lib/README.md

@@ -0,0 +1,61 @@
+![](https://travis-ci.org/bazaarvoice/bv-ui-core.svg)
+
+# bv-ui-core
+
+This project provides a central location for common Bazaarvoice UI code. It is
+intended to be installed into a project via NPM. Individual modules are authored
+as CommonJS modules, to be consumed by Webpack or another build tool that can
+ingest CommonJS.
+
+**This is a public repository.** Please see the [contribution guidelines][1] for
+details on contributing to this repo.
+
+## Installation
+
+You will need NPM to add this to your project; it is installed when you install
+Node, so it is likely that you already have it. If not, you can install Node
+using an [installer][2], or by using your favorite package manager (such as
+Homebrew).
+
+Once you have NPM, you can install bv-ui-core as follows:
+
+```bash
+npm install --save bv-ui-core
+```
+
+## Usage
+
+Require bv-ui-core modules into your code:
+
+```javascript
+var someModule = require('bv-ui-core/lib/someModule');
+someModule.doThings();
+```
+
+For details on how to use a specific module, see the README document in the
+module's directory.
+
+## Modules
+
+- [body](./lib/body)
+- [checkHighContrast](./lib/checkHighContrast)
+- [cookie](./lib/cookie)
+- [cookieConsent](./lib/cookieConsent)
+- [cssLoadChecker](./lib/cssLoadChecker)
+- [date.now](./lib/date.now)
+- [domainPolice](./lib/domainPolice)
+- [evented](./lib/evented)
+- [getOriginalConstructor](./lib/getOriginalConstructor)
+- [global](./lib/global)
+- [ie](./lib/ie)
+- [loader](./lib/loader)
+- [logger](./lib/logger)
+- [namespacer](./lib/namespacer)
+- [performance](./lib/performance)
+- [polyfills](./lib/polyfills)
+- [pixelsDisplayed](./lib/pixelsDisplayed)
+- [staticAssetLoader](./lib/staticAssetLoader)
+- [waitForBody](./lib/waitForBody)
+
+[1]: ./CONTRIBUTING.md
+[2]: https://nodejs.org/download/

package/lib/messageFormat/README.md

@@ -0,0 +1,10 @@
+# messageFormat
+
+Uses `INTL.DisplayNames` and uses a polyfill from `https://cdn.polyfill.io/v3/polyfill.min.js?features=Intl.DisplayNames`
+
+# Usage 
+
+```javascript
+var messageFormat = require('bv-ui-core/lib/messageFormat');
+messageFormat.generateCountryFromLocale('en_US') // United States
+```

package/lib/messageFormat/index.js

@@ -0,0 +1,42 @@
+/**
+ *  @fileOverview
+ *  messageFormat provides utility functions to which use the INTL API which provides 
+ *  language sensitive string comparison, number formatting, and date and time formatting.
+ * 
+ *  messageFormat can have functions which are used in multiple places
+ *
+ *  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
+ */
+
+
+var global = require('../global');
+/**
+ * Generates the country name associated with the given locale
+ * @param {string} locale The locale code (e.g., 'en_US')
+ * @returns {string} The name of the country associated with the locale, or an empty string if the locale is not supported by Intl.DisplayNames
+ */
+function generateCountryFromLocale (locale) {
+  if (!locale || locale.length === 0) {
+    return '';
+  }
+    
+  // Split the locale code into language and region components
+  try {
+    var localeArr = locale.split('_');
+    if (localeArr.length < 2) {
+      return '';
+    }
+  // Get the display name for the region (i.e., the country name)
+    var regionNames = new global.Intl.DisplayNames(localeArr[0], { type: 'region' });
+    var countryName = regionNames.of(localeArr[1]);
+  }
+  catch (error) {
+    return '';
+  }
+  // Return the country name, or an empty string if the region is not valid
+  return countryName 
+}
+
+module.exports = {
+  generateCountryFromLocale: generateCountryFromLocale
+}

package/lib/performance/getEntriesByName.js

@@ -53,6 +53,7 @@ module.exports = {
   getEntriesByName: function (name, entryType) {
     // Note: because the implementation functions explicitly check their number of arguments,
     // we want to preserve the calls exactly as they came in
+   
     var hasArguments = (arguments.length > 0);
     var func = (isNativeSupported ? nativeImplementation : polyfillImplementation);
     return (hasArguments ? func(name, entryType) : func());

package/lib/queryShadowDom/README.md

@@ -0,0 +1,50 @@
+# Query Shadow DOM Element
+
+This file exposes multiple functions that can be used to query elements within the ShadowDOM. 
+
+```javascript
+  shadowQuerySelectorAll
+  // Returns Nodes matching with match selector.
+```
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `node` | `DOM Element` | **Required**. Root node to query for particular elements. |
+| `matchSelector` | `string` | **Required**. Criteria to select the elements in the dom starting with node as root element. |
+
+
+```javascript
+  findShadowRoots
+  // Returns a list of all the shadow roots found in the given root element and its descendants.
+```
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `node` | `DOM Element` | **Required**. The root node from which to start searching for shadow roots. |
+
+```javascript
+  filterShadowHosts
+  // Returns NodeFilter.
+```
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `node` | `DOM Element` | **Required**. Document node. |
+
+```javascript
+  findElementsInShadowDomByMatchSector
+  // returns a NodeList of all elements within the shadow DOM of the shadowElement parameter that match the matchSelector parameter.
+```
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `node` | `DOM Element` | **Required**. A DOM node that has a shadow root. |
+| `matchSelector` | `string` | **Required**. Criteria to select the elements in the dom starting with node as root element. |
+
+## Usage
+
+```javascript
+
+
+const { shadowQuerySelectorAll } = require('bv-ui-core/lib/queryShadowDomElement');
+
+const nodeList = shadowQuerySelectorAll(document, '[data-bv-show='reviews']')
+
+// ['div', 'div']
+```

package/lib/queryShadowDom/index.js

@@ -0,0 +1,93 @@
+/**
+* Function to deterimine whether given node is shadow host. 
+* @param {*} node Document node.
+* @returns NodeFilter 
+*/
+function filterShadowHosts (node) {
+  if (node && node.shadowRoot) {
+    return NodeFilter.FILTER_ACCEPT;
+  }
+  return NodeFilter.FILTER_SKIP;
+}
+
+/**
+ * The function finds all the shadow roots in a given root element and returns a list of them.
+ * @param node - The root element from which to start searching for shadow roots.
+ * @returns a list of all the shadow roots found in the given root element and its descendants.
+ */
+function findShadowRoots (node) {
+  
+  if (!node) {
+    return;
+  }
+
+  const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, filterShadowHosts);
+  let listOfShadowRoots = [];
+  
+  // Tree walker will not determine the node. 
+  if (node.shadowRoot) {
+    listOfShadowRoots.push(node);
+    listOfShadowRoots = listOfShadowRoots.concat(findShadowRoots(node.shadowRoot));
+  }
+
+  // Traverse all the nodes.
+  while (walker.nextNode()) {
+    listOfShadowRoots.push(walker.currentNode);
+
+    if (walker.currentNode.shadowRoot) {
+      listOfShadowRoots = listOfShadowRoots.concat(findShadowRoots(walker.currentNode.shadowRoot));
+    }
+  
+  }
+  return listOfShadowRoots;
+}
+
+/**
+ * This function finds elements within a shadow DOM that match a given selector.
+ * @param node - A DOM element that has a shadow root. 
+ * @param matchSelector - Criteria to select the elements in the dom starting with element as root element.
+ * @returns The function `findElementsInShadowDomByMatchSector` returns a NodeList of all elements
+ * within the shadow DOM of the `shadowElement` parameter that match the `matchSelector` parameter.
+ */
+
+function findElementsInShadowDomByMatchSector (node, matchSelector) {
+  if (node && node.shadowRoot && matchSelector) {
+    return node.shadowRoot.querySelectorAll(matchSelector)
+  }
+}
+
+/**
+ * Finds elements in the DOM including open shadowDOM.
+ * @param {*} node Root element to query for particular elements 
+ * @param {*} matchSelector Criteria to select the elements in the dom starting with element as root element.
+ * @returns Nodes matching with match selector.
+ */
+function shadowQuerySelectorAll (node, matchSelector) {
+
+  /* Checks if both `element` and `matchSelector` are truthy values. If either of
+  them is falsy, it throws an error. */
+  if (!(node && matchSelector)) {
+    throw new Error(`Unable to find ${node} or ${matchSelector}`)
+  }
+
+  // Get the elements by query selector all.
+  const nodeList = node.querySelectorAll(matchSelector);
+  const shadowRoots = findShadowRoots(node);
+  let elements = [];
+
+  for (const rootElement of shadowRoots) {
+    const filteredElements = findElementsInShadowDomByMatchSector(rootElement, matchSelector);
+    if (filteredElements.length > 0) {
+      elements.push(...filteredElements);
+    }
+  }
+
+  return [...nodeList, ...elements];
+}
+
+module.exports = {
+  findShadowRoots,
+  filterShadowHosts,
+  shadowQuerySelectorAll,
+  findElementsInShadowDomByMatchSector
+}

package/mkdocs.yaml

@@ -0,0 +1,5 @@
+site_name: bv-ui-core
+docs_dir: lib
+plugins:
+  - techdocs-core
+repo_url: https://github.com/bazaarvoice/bv-ui-core/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bv-ui-core",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "license": "Apache 2.0",
   "description": "Bazaarvoice UI-related JavaScript",
   "repository": {
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "lint": "eslint karma.conf.js lib test",
-    "test": "./node_modules/karma/bin/karma start --single-run --browsers PhantomJS",
+    "test": "./node_modules/karma/bin/karma start --single-run --browsers ChromeHeadless",
     "dev": "./node_modules/karma/bin/karma start --browsers Chrome"
   },
   "devDependencies": {
@@ -28,7 +28,7 @@
     "json-loader": "^0.5.7",
     "karma": "^3.0.0",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "2.0.0",
+    "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.1.2",
     "karma-firefox-launcher": "^1.1.0",
     "karma-htmlfile-reporter": "^0.3.6",

package/test/unit/messageFormat/index.spec.js

@@ -0,0 +1,31 @@
+/**
+ * @fileOverview
+ * Unit tests for the messageFormat module 
+ */
+var messageFormat = require('../../../lib/messageFormat');
+
+describe('lib/messageFormat', function () {
+  it('messageFormat.generateCountryFromLocale', function () {
+    function test1 () {  
+      return  messageFormat.generateCountryFromLocale('en_US');
+    }
+
+    expect(test1()).to.be.equal('United States');
+
+    function test2 () {
+      return messageFormat.generateCountryFromLocale('en_DE');
+    }
+
+    expect(test2()).to.be.equal('Germany')
+
+    function test3 () {
+      return messageFormat.generateCountryFromLocale('de_DE');
+    }
+    expect(test3()).to.be.equal('Deutschland')
+
+    function test4 () {
+      return messageFormat.generateCountryFromLocale()
+    }
+    expect(test4()).to.be.empty
+  });
+});

package/test/unit/performance/getEntriesByName.spec.js

@@ -76,8 +76,13 @@ describe('lib/performance/getEntriesByName', function () {
     expect(result.length).to.equal(0);
   });
 
+ 
   it('throws an error if no arguments are passed', function () {
-    expect(function () { perfGetEntriesByName.getEntriesByName(); }).to.throw(TypeError);
+    //name is passed to the nativeImplementation which is undefined and returns an empty array 
+    function test () {
+      return perfGetEntriesByName.getEntriesByName()
+    }
+    expect(test()).to.be.empty;
   });
 
 });

package/test/unit/performance/getEntriesByType.spec.js

@@ -9,13 +9,14 @@ var perfMark = require('../../../lib/performance/mark.js');
 
 describe('lib/performance/getEntriesByType', function () {
   before(function () {
+    //Clearing all the marks as marks from other tests were being added
+    performance.clearMarks()
     perfMark.mark('test-by-name1');
     perfMark.mark('test-by-name2');
   });
 
   it('returns an array of all matching performance marks by type', function () {
     var result = perfGetEntriesByType.getEntriesByType('mark');
-
     // Test 1: it returns an array.
     expect(result).to.be.an('array');
 
@@ -41,7 +42,7 @@ describe('lib/performance/getEntriesByType', function () {
   });
 
   it('throws an error if no arguments are passed', function () {
-    expect(function () { perfGetEntriesByType.getEntriesByType(); }).to.throw(TypeError);
+    expect(perfGetEntriesByType.getEntriesByType()).to.be.empty;
   });
 
 });

package/test/unit/performance/measure.spec.js

@@ -32,7 +32,7 @@ describe('lib/performance/measure', function () {
   });
 
   it('throws an error if the measure name is omitted', function () {
-    expect(function () { perfMeasure.measure(); }).to.throw(Error);
+    expect(perfMeasure.measure()).to.be.empty;
   });
 
   it('throws an error if the startMark or endMark name is supplied, but is invalid', function () {