all repos — h3 @ 9fa8fbf627eecea4cb8bb8fa50855ea33948ca96

A tiny, extremely minimalist JavaScript microframework.

__tests__/router.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 
const h3 = require("../h3.js").default;

let preStartCalled = false;
let postStartCalled = false;

let hash = "#/c2";
const mockLocation = {
  get hash() {
    return hash;
  },
  set hash(value) {
    const event = new CustomEvent("hashchange");
    event.oldURL = hash;
    event.newURL = value;
    hash = value;
    window.dispatchEvent(event);
  },
};

describe("h3 (Router)", () => {
  beforeEach(async () => {
    const preStart = () => (preStartCalled = true);
    const postStart = () => (postStartCalled = true);
    const C1 = () => {
      const $onrender = (node) => node.classList.add("test");
      const parts = h3.route.parts;
      const content = Object.keys(parts).map((key) =>
        h3("li", `${key}: ${parts[key]}`)
      );
      return h3("ul.c1", { $onrender }, content);
    };
    const C2 = () => {
      const params = h3.route.params;
      const content = Object.keys(params).map((key) =>
        h3("li", `${key}: ${params[key]}`)
      );
      return h3("ul.c2", content);
    };
    return await h3.init({
      routes: {
        "/c1/:a/:b/:c": C1,
        "/c2": C2,
      },
      location: mockLocation,
      preStart: preStart,
      postStart: postStart,
    });
  });

  it("should support routing configuration at startup", () => {
    expect(h3.route.def).toEqual("/c2");
  });

  it("should support pre/post start hooks", () => {
    expect(preStartCalled).toEqual(true);
    expect(postStartCalled).toEqual(true);
  });

  it("should support the capturing of parts within the current route", () => {
    mockLocation.hash = "#/c1/1/2/3";
    expect(document.body.childNodes[0].childNodes[1].textContent).toEqual(
      "b: 2"
    );
    expect(document.body.childNodes[0].classList.contains("test")).toEqual(
      true
    );
  });

  it("should expose a navigateTo method to navigate to another path", () => {
    h3.navigateTo("/c2", { test1: 1, test2: 2 });
    expect(document.body.childNodes[0].childNodes[1].textContent).toEqual(
      "test2: 2"
    );
    h3.navigateTo("/c2");
    expect(document.body.childNodes[0].innerHTML).toEqual("");
  });

  it("should fail if no route matches at startup", async () => {
    mockLocation.hash = "#/test";
    try {
      await h3.init({
        element: document.body,
        routes: { "/aaa": () => false },
      });
    } catch (e) {
      expect(e.message).toMatch(/No route matches/);
    }
  });
});