Merge pull request #23 from tech-advantage/wip/strict-mode

karma.conf.js

@@ -5,13 +5,12 @@ module.exports = function(config) {
     config.set({
         basePath: '',
         frameworks: ['jasmine'],
-        files: ['test/**/*.ts', 'test/**/*.js'],
+        files: ['test/**/*.ts'],
         exclude: [],
 
         // Available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
         preprocessors: {
             'test/**/*.ts': ['webpack'],
-            'test/**/*.js': ['webpack'],
         },
         webpack: {
             module: webpackConfig.module,

karma.webpack.config.js

@@ -19,7 +19,12 @@ module.exports = {
         rules: [
             {
                 test: /\.tsx?$/,
-                use: 'ts-loader',
+                use: [{
+                    loader: 'ts-loader',
+                    options: {
+                        configFile: "tsconfig.test.json"
+                    }
+                }],
                 exclude: /node_modules/,
             },
             {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "edc-popover-utils",
-  "version": "1.0.0",
+  "version": "1.1.0-beta-0",
   "description": "Utilities for edc popovers",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,37 +14,38 @@
   },
   "license": "MIT",
   "dependencies": {
-    "tippy.js": "^6.2.6"
+    "tippy.js": "6.3.1"
   },
   "devDependencies": {
-    "@types/jasmine": "^3.5.14",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^4.3.0",
-    "eslint": "^7.10.0",
-    "file-loader": "^6.1.0",
-    "karma": "^5.2.3",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-cli": "^2.0.0",
-    "karma-firefox-launcher": "^1.3.0",
-    "karma-jasmine": "^4.0.1",
+    "@types/jasmine": "3.9.1",
+    "clean-webpack-plugin": "4.0.0",
+    "css-loader": "6.3.0",
+    "eslint": "7.32.0",
+    "file-loader": "6.2.0",
+    "karma": "6.3.4",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-cli": "2.0.0",
+    "karma-firefox-launcher": "2.1.1",
+    "karma-jasmine": "4.0.1",
     "karma-spec-reporter": "0.0.32",
-    "karma-webpack": "^4.0.2",
-    "less": "^3.12.2",
-    "less-loader": "^7.0.1",
-    "less-plugin-clean-css": "^1.5.1",
-    "mini-css-extract-plugin": "^0.11.2",
-    "popper.js": "^1.16.1",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^8.0.4",
-    "tslint": "^6.1.3",
-    "tslint-webpack-plugin": "^2.1.0",
-    "typescript": "^4.0.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^5.1.4"
+    "karma-webpack": "5.0.0",
+    "less": "4.1.1",
+    "less-loader": "10.0.1",
+    "less-plugin-clean-css": "1.5.1",
+    "mini-css-extract-plugin": "2.3.0",
+    "popper.js": "1.16.1",
+    "style-loader": "3.3.0",
+    "ts-loader": "9.2.6",
+    "tslint": "6.1.3",
+    "tslint-webpack-plugin": "2.1.1",
+    "typescript": "4.4.3",
+    "webpack": "5.53.0",
+    "webpack-cli": "4.8.0",
+    "webpack-merge": "5.8.0",
+    "ts-node": "10.2.1"
   },
   "engines": {
-    "node": ">=8.9.0"
+    "node": ">=12"
   },
   "files": [
     "dist",

src/classes/popover-config.ts

@@ -13,8 +13,8 @@ import { PopoverOptions } from './popover-options';
  * options: Popover customizations
  */
 export class PopoverConfig {
-    target: SingleTarget;
-    content: PopoverContent;
-    labels: PopoverLabels;
-    options: IPopoverOptions = new PopoverOptions();
+    target: SingleTarget | null = null;
+    content: PopoverContent | null = null;
+    labels: PopoverLabels | null = null;
+    options: IPopoverOptions | null | undefined = new PopoverOptions();
 }

src/classes/popover-content.ts

@@ -11,8 +11,8 @@ import { PopoverItem } from './popover-item';
  */
 export class PopoverContent {
 
-    constructor(public title = '',
-                public description = '',
+    constructor(public title: string | null = '',
+                public description: string | null = '',
                 public articles: PopoverItem[] = [],
                 public links: PopoverItem[] = []) {
     }

src/classes/popover-item.ts

@@ -6,6 +6,6 @@
  */
 export class PopoverItem {
     public id?: number;
-    constructor(public label: string, public url: string) {
+    constructor(public label: string | null, public url: string | null) {
     }
 }

src/classes/popover-labels.ts

@@ -7,8 +7,8 @@
  * comingSoon: the message to be displayed if no content was found
  */
 export class PopoverLabels {
-    articles?: string;
-    links?: string;
-    iconAlt?: string;
-    comingSoon?: string;
+    articles?: string | null = '';
+    links?: string | null = '';
+    iconAlt?: string | null = '';
+    comingSoon?: string | null = '';
 }

src/classes/target-event-handler.ts

@@ -23,7 +23,7 @@ export class TargetEventHandler {
      * @param displayPopover state of displayPopover option: if false, open the help viewer, if true, display the popover
      * @param url the first article url, entry point for the help viewer application
      */
-    updateClickHandler(displayPopover: boolean, url: string): void {
+    updateClickHandler(displayPopover: boolean, url: string | null | undefined): void {
         if (!this.target) {
             return;
         }
@@ -61,7 +61,7 @@ export class TargetEventHandler {
  *
  * @param e the click event
  */
-function clickHandler(e: Event) {
+function clickHandler(this: Element, e: Event): void {
     // Will be called within target element scope, "this" will refer to the dom element itself
     const articleUrl = this.getAttribute(AttributeNames.DATA_URL); // Help viewer's url has been stored as a data-property
     if (!articleUrl) {

src/helpers/config.helper.ts

@@ -14,20 +14,19 @@ export class ConfigHelper {
      * @param config the popover configuration
      * @param targetHandler the popover target (icon) handler
      */
-    static buildPropsFromConfig(config: PopoverConfig, targetHandler: TargetEventHandler): PopoverProps {
+    static buildPropsFromConfig(config: PopoverConfig, targetHandler: TargetEventHandler | null): PopoverProps | null {
         if (!ConfigHelper.checkConfig(config)) {
             return null;
         }
-        const content: HTMLDivElement = TemplateHelper.buildTemplate(config, targetHandler);
+        const content: HTMLDivElement | null = TemplateHelper.buildTemplate(config, targetHandler);
 
         if (!content) {
             return null;
         }
-        const props: PopoverProps = {
+        return {
             content,
             ...ConfigHelper.mapOptionsToProps(config.options)
         };
-        return props;
     }
 
     /**
@@ -59,7 +58,7 @@ export class ConfigHelper {
      *
      * @param options the provided options
      */
-    static mapOptionsToProps(options: IPopoverOptions): PopoverProps {
+    static mapOptionsToProps(options: IPopoverOptions | null | undefined): PopoverProps {
         const src = options || new PopoverOptions();
         return new PopoverProps(
             src.placement,
@@ -79,7 +78,7 @@ export class ConfigHelper {
      *
      * @param content the given content to check
      */
-    static hasContent(content: PopoverContent): boolean {
+    static hasContent(content: PopoverContent | null): boolean {
         return ConfigHelper.hasDescription(content) ||
             ConfigHelper.hasArticles(content) ||
             ConfigHelper.hasLinks(content);
@@ -91,25 +90,25 @@ export class ConfigHelper {
      *
      * @param content the given content to check
      */
-    static hasDescription(content: PopoverContent): boolean {
-        return content && !!content.description && !!content.description.trim();
+    static hasDescription(content: PopoverContent | null): boolean {
+        return !!content?.description && !!content.description.trim();
     }
 
     /**
      * Returns true if content has at least one article
      *
      * @param content the given content to check
      */
-    static hasArticles(content: PopoverContent): boolean {
-        return !!content && !!content.articles && content.articles.length > 0;
+    static hasArticles(content: PopoverContent | null): boolean {
+        return !!content?.articles && content.articles.length > 0;
     }
 
     /**
      * Returns true if content has at least one link
      *
      * @param content the given content to check
      */
-    static hasLinks(content: PopoverContent) {
-        return !!content && !!content.links && content.links.length > 0;
+    static hasLinks(content: PopoverContent | null): boolean {
+        return !!content?.links && content.links.length > 0;
     }
 }

src/helpers/template.helper.ts

@@ -27,7 +27,7 @@ export class TemplateHelper {
      * @param config the popover configuration
      * @param targetHandler popover event handler, to track the event listeners on the target element (for the displayPopover option)
      */
-    static buildTemplate(config: PopoverConfig, targetHandler: TargetEventHandler): HTMLDivElement {
+    static buildTemplate(config: PopoverConfig, targetHandler: TargetEventHandler | null): HTMLDivElement | null {
         if (!config || !TemplateHelper.checkTarget(targetHandler)) {
             return null;
         }
@@ -62,7 +62,7 @@ export class TemplateHelper {
      *
      * @param targetHandler the target event handler
      */
-    static checkTarget(targetHandler: TargetEventHandler): boolean {
+    static checkTarget(targetHandler: TargetEventHandler | null): boolean {
         if (!targetHandler) {
             return false;
         }
@@ -96,7 +96,7 @@ export class TemplateHelper {
      * @param content the content including the title
      * @param options the options for the popover
      */
-    private static buildHeader(content: PopoverContent, options: IPopoverOptions): HTMLDivElement {
+    private static buildHeader(content: PopoverContent | null, options: IPopoverOptions | null): HTMLDivElement | null {
         if (!options || !options.displayTitle) {
             return null;
         }
@@ -127,17 +127,17 @@ export class TemplateHelper {
      * @param labels the popover labels
      * @param options the popover options
      */
-    private static buildBody(content: PopoverContent, labels: PopoverLabels, options: IPopoverOptions): HTMLDivElement {
+    private static buildBody(content: PopoverContent | null, labels: PopoverLabels | null, options: IPopoverOptions): HTMLDivElement {
         const popoverBody = document.createElement(TagNames.DIV);
         // Body container
         popoverBody.classList.add(ClassNames.EDC_POPOVER_BODY, ClassNames.EDC_POPOVER_CONTENT);
         if (!ConfigHelper.hasContent(content)) {
             // Use coming soon message if no body content was found
-            popoverBody.innerText = labels.comingSoon;
+            popoverBody.innerText = labels?.comingSoon ?? '';
             return popoverBody;
         }
         // Add Description
-        if (content.description) {
+        if (content?.description) {
             const description = document.createElement(TagNames.ARTICLE);
             description.innerText = content.description;
             description.classList.add(ClassNames.EDC_POPOVER_DESC);
@@ -158,7 +158,7 @@ export class TemplateHelper {
      * @param options popover options
      * @private
      */
-    private static createSection(content: PopoverContent, labels: PopoverLabels, options: IPopoverOptions): HTMLDivElement {
+    private static createSection(content: PopoverContent | null, labels: PopoverLabels | null, options: IPopoverOptions): HTMLDivElement | null {
         if ((!ConfigHelper.hasArticles(content) || !options.displayArticles)
             && (!ConfigHelper.hasLinks(content) || !options.displayRelatedTopics)) {
             return null;
@@ -168,14 +168,16 @@ export class TemplateHelper {
         popoverSection.classList.add(ClassNames.EDC_POPOVER_SECTION);
 
         // Articles
-        const articles: HTMLDivElement = options.displayArticles ?
-            TemplateHelper.buildSectionList(content.articles, labels.articles, ClassNames.NEED_MORE) : null;
+        const articleSrc: PopoverItem[] = content?.articles ?? [];
+        const articles: HTMLDivElement | null = options.displayArticles ?
+            TemplateHelper.buildSectionList(articleSrc, labels?.articles, ClassNames.NEED_MORE) : null;
         if (articles) {
             popoverSection.appendChild(articles);
         }
         // Links
-        const links: HTMLDivElement = options.displayRelatedTopics ?
-            TemplateHelper.buildSectionList(content.links, labels.links, ClassNames.RELATED_TOPIC) : null;
+        const linkSrc: PopoverItem[] = content?.links ?? [];
+        const links: HTMLDivElement | null = options.displayRelatedTopics ?
+            TemplateHelper.buildSectionList(linkSrc, labels?.links, ClassNames.RELATED_TOPIC) : null;
         if (links) {
             popoverSection.appendChild(links);
         }
@@ -189,9 +191,9 @@ export class TemplateHelper {
      * @param label the string to add at the top of the list section
      * @param className the name of the item list class (specific to articles or links)
      */
-    private static buildSectionList(items: PopoverItem[], label: string, className: string): HTMLDivElement {
+    private static buildSectionList(items: PopoverItem[], label: string | null | undefined, className: string | null | undefined): HTMLDivElement | null {
         if (!items || !items.length) {
-            return;
+            return null;
         }
         const container = document.createElement(TagNames.DIV);
         // Add the label presenting the list
@@ -202,7 +204,9 @@ export class TemplateHelper {
         }
 
         const list = document.createElement(TagNames.UL);
-        list.classList.add(className);
+        if (className) {
+            list.classList.add(className);
+        }
         items.forEach((currentValue: PopoverItem) => {
             const li = TemplateHelper.createItem(currentValue);
             if (li) {
@@ -218,7 +222,7 @@ export class TemplateHelper {
      *
      * @param label the string to use for the label
      */
-    private static createSectionLabel(label: string): HTMLDivElement {
+    private static createSectionLabel(label: string | null | undefined): HTMLDivElement | null {
         if (!label || !label.trim()) {
             return null;
         }
@@ -243,10 +247,12 @@ export class TemplateHelper {
         li.classList.add(ClassNames.SECTION_ITEM);
         const link = document.createElement(TagNames.DIV);
         link.classList.add(ClassNames.SECTION_GOTO);
-        link.innerText = item.label;
+        link.innerText = item.label ?? '';
         // Add the open action on click to redirect to the web explorer
         link.onclick = (() => {
-            window.open(item.url, ElementOptions.WINDOW_OPEN_TARGET, ElementOptions.WINDOW_OPEN_FEATURES);
+            if (item && item.url) {
+                window.open(item.url, ElementOptions.WINDOW_OPEN_TARGET, ElementOptions.WINDOW_OPEN_FEATURES);
+            }
         });
         li.appendChild(link);
         return li;
@@ -264,21 +270,27 @@ export class TemplateHelper {
      * @param options the popover options
      * @param labels the popover labels
      */
-    private static addIconOptions(eventHandler: TargetEventHandler, content: PopoverContent, options: IPopoverOptions, labels: PopoverLabels): void {
-        if (options.displayTooltip && labels && labels.iconAlt) {
+    private static addIconOptions(eventHandler: TargetEventHandler | null,
+                                  content: PopoverContent | null,
+                                  options: IPopoverOptions | null,
+                                  labels: PopoverLabels | null): void {
+        if (!eventHandler) {
+            return;
+        }
+        if (options?.displayTooltip && labels?.iconAlt) {
             eventHandler.target.setAttribute(AttributeNames.TITLE, labels.iconAlt);
         } else {
             // Remove if previously set
             eventHandler.target.removeAttribute(AttributeNames.TITLE);
         }
         // Handle the click on the icon, based on displayPopover option value
         let articleUrl = '';
-        if (ConfigHelper.hasArticles(content)) {
+        if (content && ConfigHelper.hasArticles(content)) {
             // Use the first article as entry point for edc help viewer
-            articleUrl = content.articles[0].url;
+            articleUrl = content.articles[0].url ?? '';
         }
 
         // The event handler will add or remove the event listener, based on display popover option and url value
-        eventHandler.updateClickHandler(options.displayPopover, articleUrl);
+        eventHandler.updateClickHandler(!!options?.displayPopover, articleUrl);
     }
 }