Allow filename and display name to be used separately or together

Author: davegaeddert

index.js

@@ -16,9 +16,9 @@ const css = `
 }
 `;
 
-class CodeplusInstance {
+export class CodeplusInstance {
   constructor(node, options) {
-    if (node.parentNode.tagName === "PRE") {
+    if (node.parentNode && node.parentNode.tagName === "PRE") {
       // Automatically detect if we're in a pre tag
       this.containerNode = node.parentNode;
     } else {
@@ -35,18 +35,23 @@ class CodeplusInstance {
     this.copyButtonClass = options.copyButtonClass;
     this.renderCopyButton = options.renderCopyButton;
 
-    const parsed = parse(this.codeNode.innerText);
+    const parsed = parse(this.codeNode.innerText || "");
 
     this.filename = parsed.filename;
     this.displayName = parsed.displayName;
     this.groupName = parsed.groupName;
   }
   getNavName() {
+    if (this.filename && this.displayName) {
+      return `${this.filename} (${this.displayName})`;
+    }
+    if (this.filename) {
+      return this.filename;
+    }
     if (this.displayName) {
       return this.displayName;
-    } else if (this.filename) {
-      return this.filename;
     }
+    return "";
   }
   hasNav() {
     return this.filename || this.displayName || this.groupName;

package.json

@@ -20,6 +20,7 @@
     "@babel/preset-env": "^7.17.10",
     "babel-jest": "^28.0.3",
     "jest": "^28.0.3",
+    "jest-environment-jsdom": "^28.0.2",
     "parcel": "^2.5.0",
     "prettier": "^2.6.2"
   },

test.js

@@ -1,4 +1,9 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import parse from "./parse";
+import {CodeplusInstance} from "./index"
 
 test("parse filename", () => {
   const parsed = parse("# filename.js\nfunction foo() {}");
@@ -44,3 +49,25 @@ test("parse filename, display, group", () => {
     groupName: "group example",
   });
 });
+
+test("nav with filename", () => {
+  const node = document.createElement("code");
+  const instance = new CodeplusInstance(node, {});
+  instance.filename = "filename.js";
+  expect(instance.getNavName()).toEqual("filename.js");
+});
+
+test("nav with display name", () => {
+  const node = document.createElement("code");
+  const instance = new CodeplusInstance(node, {});
+  instance.displayName = "Test";
+  expect(instance.getNavName()).toEqual("Test");
+});
+
+test("nav with filename and display", () => {
+  const node = document.createElement("code");
+  const instance = new CodeplusInstance(node, {});
+  instance.filename = "filename.js";
+  instance.displayName = "Test";
+  expect(instance.getNavName()).toEqual("filename.js (Test)");
+});