Merge pull request #3426 from nils-a/bugfix/GH-3425

(#3425) fixed nesting of Headers

samples/react-page-navigator/assets/sample.json

@@ -9,7 +9,7 @@
       "This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component."
     ],
     "creationDateTime": "2019-09-05",
-    "updateDateTime": "2022-12-22",
+    "updateDateTime": "2023-01-20",
     "products": [
       "SharePoint"
     ],

samples/react-page-navigator/src/Service/NavLinkBuilder.test.ts

@@ -15,6 +15,76 @@ describe("The NavLinkBuilder without a preceding collapsable header", () => {
   const h3 = h2+1;
   const h4 = h3+1;
 
+  it("should nest correctly without h1", () => {
+    const linkH2: IMockLink = {
+        name: "h2",
+    };
+    const linkH3: IMockLink = {
+      name: "h3",
+    };
+    const linkH2a: IMockLink = {
+      name: "another h2",
+    };
+    const linkH3a: IMockLink = {
+      name: "another h3",
+    };
+
+    const actual = [];
+    navLinkBuilder.build(actual, linkH2, h2);
+    navLinkBuilder.build(actual, linkH3, h3);
+    navLinkBuilder.build(actual, linkH2a, h2);
+    navLinkBuilder.build(actual, linkH3a, h3);
+
+    expect(actual).toMatchSnapshot();
+  });
+
+  
+  it("should nest correctly for wrong order headings", () => {
+    const linkH1: IMockLink = {
+        name: "h1",
+    };
+    const linkH2: IMockLink = {
+      name: "h2",
+    };
+    const linkH3: IMockLink = {
+      name: "h3",
+    };
+    const linkH4: IMockLink = {
+      name: "h4",
+    };
+
+    const actual = [ ];
+    navLinkBuilder.build(actual, linkH4, h4);
+    navLinkBuilder.build(actual, linkH3, h3);
+    navLinkBuilder.build(actual, linkH2, h2);
+    navLinkBuilder.build(actual, linkH1, h1);
+
+    expect(actual).toMatchSnapshot();
+  });
+
+  it("should nest correctly for headings with a jump", () => {
+    const linkH1: IMockLink = {
+        name: "h1",
+    };
+    const linkH2: IMockLink = {
+      name: "h2",
+    };
+    const linkH3: IMockLink = {
+      name: "h3",
+    };
+    const linkH4: IMockLink = {
+      name: "h4",
+    };
+
+    const actual = [ ];
+    navLinkBuilder.build(actual, linkH3, h3);
+    navLinkBuilder.build(actual, linkH4, h4);
+    navLinkBuilder.build(actual, linkH1, h1);
+    navLinkBuilder.build(actual, linkH2, h2);
+
+    expect(actual).toMatchSnapshot();
+  });
+
   it("should add a single item to an empty list", () => {
     const lnk: IMockLink = {
         name: "xyz",
@@ -175,6 +245,75 @@ describe("The NavLinkBuilder with a collapsable header", () => {
     };
   });
 
+  it("should nest correctly without h1", () => {
+    const linkH2: IMockLink = {
+        name: "h2",
+    };
+    const linkH3: IMockLink = {
+      name: "h3",
+    };
+    const linkH2a: IMockLink = {
+      name: "another h2",
+    };
+    const linkH3a: IMockLink = {
+      name: "another h3",
+    };
+
+    const actual = [ head ];
+    navLinkBuilder.build(actual, linkH2, h2);
+    navLinkBuilder.build(actual, linkH3, h3);
+    navLinkBuilder.build(actual, linkH2a, h2);
+    navLinkBuilder.build(actual, linkH3a, h3);
+
+    expect(actual).toMatchSnapshot();
+  });
+
+  it("should nest correctly for wrong order nestings", () => {
+    const linkH1: IMockLink = {
+        name: "h1",
+    };
+    const linkH2: IMockLink = {
+      name: "h2",
+    };
+    const linkH3: IMockLink = {
+      name: "h3",
+    };
+    const linkH4: IMockLink = {
+      name: "h4",
+    };
+
+    const actual = [ head ];
+    navLinkBuilder.build(actual, linkH4, h4);
+    navLinkBuilder.build(actual, linkH3, h3);
+    navLinkBuilder.build(actual, linkH2, h2);
+    navLinkBuilder.build(actual, linkH1, h1);
+
+    expect(actual).toMatchSnapshot();
+  });
+
+  it("should nest correctly for headings with a jump", () => {
+    const linkH1: IMockLink = {
+        name: "h1",
+    };
+    const linkH2: IMockLink = {
+      name: "h2",
+    };
+    const linkH3: IMockLink = {
+      name: "h3",
+    };
+    const linkH4: IMockLink = {
+      name: "h4",
+    };
+
+    const actual = [ ];
+    navLinkBuilder.build(actual, linkH3, h3);
+    navLinkBuilder.build(actual, linkH4, h4);
+    navLinkBuilder.build(actual, linkH1, h1);
+    navLinkBuilder.build(actual, linkH2, h2);
+
+    expect(actual).toMatchSnapshot();
+  });
+
   it("should add a single item to the heading", () => {
     const lnk: IMockLink = {
       name: "xyz",

samples/react-page-navigator/src/Service/NavLinkBuilder.ts

@@ -12,8 +12,10 @@ export class navLinkBuilder {
  */
  public static build<T extends IHierarchyEntry<T>>(currentLinks: T[], newLink: T, order: number) {
   const lastIndex = currentLinks.length - 1;
+  const startorder:number = (currentLinks as any).__startorder || 0;
 
-  if (lastIndex < 0 || order <= 0) {
+  if (lastIndex < 0 || order <= startorder) {
+    (currentLinks as any).__startorder = order;
     currentLinks.push(newLink);
     return;
   }

samples/react-page-navigator/src/Service/__snapshots__/NavLinkBuilder.test.ts.snap

@@ -50,6 +50,75 @@ Array [
 ]
 `;
 
+exports[`The NavLinkBuilder with a collapsable header should nest correctly for headings with a jump 1`] = `
+Array [
+  Object {
+    "links": Array [
+      Object {
+        "name": "h4",
+      },
+    ],
+    "name": "h3",
+  },
+  Object {
+    "links": Array [
+      Object {
+        "name": "h2",
+      },
+    ],
+    "name": "h1",
+  },
+]
+`;
+
+exports[`The NavLinkBuilder with a collapsable header should nest correctly for wrong order nestings 1`] = `
+Array [
+  Object {
+    "links": Array [
+      Object {
+        "name": "h4",
+      },
+      Object {
+        "name": "h3",
+      },
+      Object {
+        "name": "h2",
+      },
+      Object {
+        "name": "h1",
+      },
+    ],
+    "name": "head",
+  },
+]
+`;
+
+exports[`The NavLinkBuilder with a collapsable header should nest correctly without h1 1`] = `
+Array [
+  Object {
+    "links": Array [
+      Object {
+        "links": Array [
+          Object {
+            "name": "h3",
+          },
+        ],
+        "name": "h2",
+      },
+      Object {
+        "links": Array [
+          Object {
+            "name": "another h3",
+          },
+        ],
+        "name": "another h2",
+      },
+    ],
+    "name": "head",
+  },
+]
+`;
+
 exports[`The NavLinkBuilder with a collapsable header should not nest two h2 1`] = `
 Array [
   Object {
@@ -189,6 +258,65 @@ Array [
 ]
 `;
 
+exports[`The NavLinkBuilder without a preceding collapsable header should nest correctly for headings with a jump 1`] = `
+Array [
+  Object {
+    "links": Array [
+      Object {
+        "name": "h4",
+      },
+    ],
+    "name": "h3",
+  },
+  Object {
+    "links": Array [
+      Object {
+        "name": "h2",
+      },
+    ],
+    "name": "h1",
+  },
+]
+`;
+
+exports[`The NavLinkBuilder without a preceding collapsable header should nest correctly for wrong order headings 1`] = `
+Array [
+  Object {
+    "name": "h4",
+  },
+  Object {
+    "name": "h3",
+  },
+  Object {
+    "name": "h2",
+  },
+  Object {
+    "name": "h1",
+  },
+]
+`;
+
+exports[`The NavLinkBuilder without a preceding collapsable header should nest correctly without h1 1`] = `
+Array [
+  Object {
+    "links": Array [
+      Object {
+        "name": "h3",
+      },
+    ],
+    "name": "h2",
+  },
+  Object {
+    "links": Array [
+      Object {
+        "name": "another h3",
+      },
+    ],
+    "name": "another h2",
+  },
+]
+`;
+
 exports[`The NavLinkBuilder without a preceding collapsable header should not nest two h2 1`] = `
 Array [
   Object {