add some tests for progress bars

src/progress.ts

@@ -1,9 +1,5 @@
 import { Icons, StacksCommonOptions } from "./index";
 
-// TODO: are these needed?
-// - https://stackoverflow.design/product/components/progress-bars/#privileges
-// - https://stackoverflow.design/product/components/progress-bars/#badges
-
 export type StacksBaseBarOptions = StacksCommonOptions & {
     /** The width to colour */
     width: number;
@@ -12,7 +8,7 @@ export type StacksBaseBarOptions = StacksCommonOptions & {
 };
 
 /**
- * @see https://stackoverflow.design/product/components/progress-bars/#base-style
+ * @see https://stackoverflow.design/product/components/progress-bars
  *
  * @summary Create a Stacks base progress bar
  * @param {string} id - The id of the progress bar
@@ -102,60 +98,6 @@ export const makeCircularBar = (
     return progress;
 };
 
-export type StacksSegmentedBarOptions = StacksBaseBarOptions & {
-    /** The total number of segments to include */
-    segments: number;
-};
-
-/**
- * @see https://stackoverflow.design/product/components/progress-bars/#segmented
- *
- * @summary Create a Stacks segmented progress bar
- * @param {string} id - The id of the progress bar
- * @param {StacksSegmentedBarOptions} options - configuration
- * @returns {HTMLDivElement}
- */
-export const makeSegmentedBar = (
-    id: string,
-    options: StacksSegmentedBarOptions
-): HTMLDivElement => {
-    const {
-        width,
-        segments,
-        coloring,
-        classes = [],
-    } = options;
-
-    const progress = document.createElement("div");
-    progress.id = id;
-    progress.classList.add("s-progress", "s-progress__segmented", ...classes);
-
-    if (coloring) {
-        progress.classList.add(`s-progress__${coloring}`);
-    }
-
-    const bar = document.createElement("div");
-    bar.classList.add("s-progress--bar");
-    bar.style.setProperty("width", `${width.toString()}%"`);
-
-    bar.setAttribute("role", "progressbar");
-    bar.setAttribute("aria-valuemin", "0");
-    bar.setAttribute("aria-valuemax", "100");
-    bar.setAttribute("aria-valuenow", width.toString());
-
-    const ol = document.createElement("ol");
-    ol.classList.add("s-progress--segments");
-
-    for (let i = 0; i < segments + 1; i++) {
-        const li = document.createElement("li");
-        ol.append(li);
-    }
-
-    progress.append(bar, ol);
-
-    return progress;
-};
-
 export type SteppedBarItem = {
     /** Whether the current stage has been completed or is active */
     status?: "complete" | "active";

test/progress.spec.ts

@@ -0,0 +1,30 @@
+import { expect } from "chai";
+import { appendScript, getSample } from "./index.spec";
+import { makeBaseBar, StacksBaseBarOptions } from "../src/progress";
+import { JSDOM } from "jsdom";
+
+describe("Progress", function() {
+    const pageNums = getSample(this.title.toLowerCase());
+
+    let window: JSDOM["window"];
+
+    beforeEach(() => {
+        window = new JSDOM("", { runScripts: "dangerously" }).window;
+        appendScript(window, { makeBaseBar });
+    });
+
+    it("should correctly generate progress bars", () => {
+        const bars = window.makeBaseBar as typeof makeBaseBar;
+
+        (
+            [
+                { width: 33, coloring: "info" },
+                { width: 66 },
+            ] as StacksBaseBarOptions[]
+        ).forEach((data, index) => {
+            const el = bars("id", data);
+
+            expect(el.outerHTML).to.equal(pageNums[index].outerHTML);
+        });
+    });
+});

test/sample/progress.html

@@ -0,0 +1,2 @@
+<div class="s-progress s-progress__info" id="id"><div class="s-progress--bar" style="width: 33%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33"></div></div>
+<div class="s-progress" id="id"><div class="s-progress--bar" style="width: 66%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="66"></div></div>