adding tests, coverage, fixing security, JS doc

.env

@@ -1,3 +1 @@
-# Defines the Output Bundle Path for the "npm run dev" target.
-# It is recommended to point it directly to the SPM jscript folder.
-# For example: %SPM_ROOT_PATH%/webclient/WebContent/CDEJ/jscript/SPMUIComponents
+# Defines the Output Bundle Path for the "npm run dev" target.

.gitignore

@@ -1,6 +1,11 @@
 # Dependency directories
 node_modules/
 dist/
+coverage/
+reports/
+config/
 
 # storybook
-storybook-static/
+storybook-static/
+
+.DS_STORE

package.json

@@ -9,9 +9,13 @@
     }
   },
   "scripts": {
+    "preinstall": "npx npm-force-resolutions",
+    "clean": "rm -rf node_modules/",
     "build": "gulp prod:spm",
     "dev": "gulp dev:spm",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest src/* --config ./config/jest.config.js",
+    "gen-doc": "jsdoc -c ./config/jsdoc-config.json -d ./reports/doc",
+    "coverage": "npm run test -- --coverage --coverageDirectory ./reports/coverage",
     "lint": "./node_modules/.bin/eslint ./src",
     "start": "webpack-dev-server --mode development",
     "storybook": "start-storybook -p 6006",
@@ -28,11 +32,14 @@
     "@storybook/addon-essentials": "^6.3.8",
     "@storybook/addon-links": "^6.3.8",
     "@storybook/react": "^6.3.8",
-    "babel-loader": "^8.0.2",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.3.1",
+    "babel-loader": "^8.0.2",
     "css-loader": "^1.0.0",
     "dotenv": "^8.2.0",
     "dotenv-webpack": "^3.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
     "eslint": "^7.11.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.12.0",
@@ -45,13 +52,15 @@
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "husky": "^4.3.0",
-    "node-sass": "^4.14.1",
+    "jest": "^24.9.0",
+    "jsdoc": "^3.6.7",
+    "node-sass": "^6.0.1",
     "sass-loader": "^10.0.3",
     "shelljs": "^0.8.4",
     "style-loader": "^0.23.0",
     "webpack": "4.42.1",
     "webpack-cli": "3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
     "@carbon/grid": "^10.20.0",
@@ -70,5 +79,11 @@
     "react-app-polyfill": "^1.0.6",
     "regenerator-runtime": "^0.13.7",
     "prop-types": "*"
+  },
+  "resolutions": {
+    "immer": "9.0.6",
+    "set-value": "4.0.1",
+    "glob-parent": "5.1.2",
+    "trim": "0.0.3"
   }
 }

public-path.js

@@ -1,5 +1,7 @@
+
+
 // Path to SPMUIComponents directory (relative to WebContent folder).
-const spmUIComponentsBaseURL = 'CDEJ/jscript/SPMUIComponents/';
+const spmUIComponentsBaseURL =  process.env.RELATIVE_PATH_TO_BUNDLE;
 
 // Retrieves Static Content Server from SPM.
 //

src/react/examples/Logo/Logo.js

@@ -0,0 +1,72 @@
+/*
+ * Licensed Materials - Property of IBM
+ *
+ * PID 5725-H26
+ *
+ * Copyright IBM Corporation 2021. All Rights Reserved.
+ *
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import settings from '../../settings';
+
+ /**
+  * Example component.
+  * <p>
+  * A logo component that renders an image within a circle. A typical usage pattern for this component
+  *  would be for the avatar of a person.
+  * @namespace Logo
+  */
+
+/**
+ * @typedef {Object} Logo
+ * @memberof Logo
+ * @property {node} children Child node(s). This is required. An 'img' node i a typical child node 
+ * @property {string} className CSS class name to be added to class list. This is optional.
+ * @property {string} size The size of logo. Accepted values are 'small', 'mdeium', or 'large'.
+ * This is optional and the default is medium.
+ * @property {Object} other Addtional properties that can be added to the rendered logo. The attributes
+ * will be passed straigh through and added to the rendered ouput.
+ */
+const Logo = ({ children, className, size, ...other }) => {
+  const styleClass = cx(
+    `${settings.prefix}--logo`,
+    {
+      [`${settings.prefix}--logo--large`]: size === 'large',
+      [`${settings.prefix}--logo--medium`]: size === 'medium',
+      [`${settings.prefix}--logo--small`]: size === 'small',
+    },
+    className
+  );
+  return (
+    <div className={styleClass} {...other}>
+      {children}
+    </div>
+  );
+};
+
+Logo.propTypes = {
+  /**
+   * Pass in the image that will be rendered within the Logo
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Additional styling
+   */
+  className: PropTypes.string,
+  /**
+   * Specify an optional size for the Logo. Defaults to 'medium'
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+};
+
+Logo.defaultProps = {
+  size: 'medium',
+  className: undefined,
+};
+
+export default Logo;

src/react/Logo/Logo.stories.js → src/react/examples/Logo/Logo.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Example from '../../examples/images/sample-logo.jpg';
+import Example from '../../../examples/images/sample-logo.jpg';
 import Logo from './Logo';
 
 

src/react/examples/Logo/__tests__/Logo.test.js

@@ -0,0 +1,73 @@
+/*
+ * Licensed Materials - Property of IBM
+ *
+ * PID 5725-H26
+ *
+ * Copyright IBM Corporation 2020. All Rights Reserved.
+ *
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+
+import { mount } from 'enzyme';
+import React from 'react';import Logo from '../Logo';
+import settings from '../../../settings';
+
+
+describe('Logo tests', () => {
+  it('tests Logo 1 children node', () => {
+    const smallLogo = mount(
+      <Logo size="small">
+        <img src="../sample-logo.jpg" alt="small logo" />
+      </Logo>
+    );
+    const logoDiv = smallLogo.find('div');
+    // check that the root div exists
+    expect(logoDiv.exists()).toBeTruthy();
+    // check class name on root div
+    expect(
+      logoDiv.hasClass(`${settings.prefix}--logo`)
+    ).toBeTruthy();
+    expect(
+      logoDiv.hasClass(`${settings.prefix}--logo--small`)
+    ).toBeTruthy();
+
+    // check child nodes
+    expect(logoDiv.at(0).children().length).toBe(1);
+    // 1st node
+    expect(logoDiv.at(0).childAt(0).type()).toBe("img");
+    // testing the number of attributes are corrcet
+    const imgAtts = logoDiv.at(0).childAt(0).props();
+    expect(Object.keys(imgAtts).length).toBe(2);
+    expect(logoDiv.at(0).childAt(0).props().src).toBe("../sample-logo.jpg");
+    expect(logoDiv.at(0).childAt(0).props().alt).toBe("small logo");  
+  });
+
+  it('tests Logo all attributes', () => {
+    const largeLogo = mount(
+      <Logo size="large" className="settings.prefix--logo--extraextra" id="logo_123">
+          <img src="../sample-logo.jpg" alt="small logo" />
+      </Logo>
+    );
+    const logoDiv = largeLogo.find('div');
+    // check that the root div exists
+    expect(logoDiv.exists()).toBeTruthy();
+    // check class name on root div
+
+    const divAtts = logoDiv.at(0).props();
+    expect(Object.keys(divAtts).length).toBe(3);
+
+   expect(logoDiv.at(0).props().className).toBe("bx--logo bx--logo--large settings.prefix--logo--extraextra");
+   expect(logoDiv.at(0).props().id).toBe("logo_123");
+   // this is the child nodes not an attribute
+   expect(typeof logoDiv.at(0).props().children !== 'string').toBeTruthy();
+    // check child nodes
+    expect(logoDiv.at(0).children().length).toBe(1);
+
+    // child node already tested previoussly
+  });
+
+});
+
+
+

src/react/PersonFolio/PersonFolio.js → src/react/examples/PersonFolio/PersonFolio.js

@@ -1,8 +1,35 @@
+/*
+ * Licensed Materials - Property of IBM
+ *
+ * PID 5725-H26
+ *
+ * Copyright IBM Corporation 2021. All Rights Reserved.
+ *
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+
 import React from 'react';
 import PropTypes from "prop-types";
 import cx from 'classnames';
-import settings from '../settings';
+import settings from '../../settings';
+
+/**
+  * An Example component.
+  * <p>
+  * A PersonFolio component that renders a list of people.
+  * @namespace PersonFolio
+  */
 
+/**
+ * @typedef {Object} PersonFolio
+ * @memberof PersonFolio
+ * @property {node} children Child node(s). This is optional.
+ * @property {string} className CSS class name to be added to class list. This is optional.
+ * @property {number} age The person's age. This is optional and there iss no default value.
+ * @property {Object} other Addtional properties that can be added to a rendered person. The attributes
+ * will be passed straigh through and added to the rendered ouput.
+ */
 const PersonFolio = ({ children, className, age, ...other }) => {
     const styleClass = cx(
       `${settings.prefix}--personfolio`,
@@ -26,10 +53,9 @@ const PersonFolio = ({ children, className, age, ...other }) => {
     );
   };
 
-
   PersonFolio.propTypes = {
     /**
-     * Pass in the image that will be rendered within the Avatar
+     * Pass in the image that will be rendered within the Logo.
      */
     children: PropTypes.node,
 
@@ -51,4 +77,11 @@ const PersonFolio = ({ children, className, age, ...other }) => {
     age: undefined,
   };
 
+  /**
+ * Group
+ * @typedef {Object} PortFolio
+ * @memberof PortFolio
+ * @property {node} childeren
+ * @property {string} className
+ */
 export default PersonFolio;