generated from daviddarnes/component-template
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrelative-time.test.js
111 lines (80 loc) · 3.86 KB
/
relative-time.test.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { parseHTML } from "linkedom";
import assert from "node:assert/strict";
import { afterEach, before, describe, it } from "node:test";
describe("<relative-time> Web Component", () => {
let window, document, customElements, HTMLElement, DocumentFragment, Event;
const now = new Date();
const defaultBody = `<relative-time><time datetime="${now.toISOString()}">${now.toISOString()}</time></relative-time>`;
before(async () => {
window = global.window = parseHTML(`
<!DOCTYPE html>
<html lang="en">
<body>
${defaultBody}
</body>
</html>
`);
DocumentFragment = global.DocumentFragment = window.DocumentFragment;
document = global.document = window.document;
customElements = global.customElements = window.customElements;
Event = global.Event = window.Event;
HTMLElement = global.HTMLElement = window.HTMLElement;
await import("./relative-time.js");
});
afterEach(() => {
document.body.innerHTML = defaultBody;
});
it("Should be defined in the customElements registry", () => {
assert.strictEqual(!!customElements.get("relative-time"), true);
});
it("Should modify the innerHTML of children <time> elements", () => {
const timeElement = document.querySelector("time");
assert.notStrictEqual(timeElement.innerHTML, now.toISOString());
});
it("Should set a localized datetime to <time> elements’ title attribute", () => {
const timeElement = document.querySelector("time");
assert.strictEqual(!!timeElement.getAttribute("title"), true);
});
it("Should be able to use a specific division", () => {
const customElement = document.querySelector("relative-time");
customElement.setAttribute("division", "seconds");
const timeElement = document.querySelector("time");
assert.strictEqual(/second/.test(timeElement.innerHTML), true);
});
it("Should be able to use a maximum division", () => {
const customElement = document.querySelector("relative-time");
customElement.setAttribute("max-division", "seconds");
const timeElement = document.querySelector("time");
assert.strictEqual(/second/.test(timeElement.innerHTML), true);
});
it("Should be able to force a numeric format", () => {
const yesterday = new Date();
yesterday.setDate(new Date().getDate() - 1);
document.body.innerHTML = `<relative-time format-numeric="always"><time datetime="${yesterday.toISOString()}">${yesterday.toISOString()}</time></relative-time>`;
const timeElement = document.querySelector("time");
assert.strictEqual(/\d+/.test(timeElement.innerHTML), true);
});
it("Should be able to force a long style format", () => {
const recent = new Date(new Date().getTime() - 10000);
document.body.innerHTML = `<relative-time format-style="long"><time datetime="${recent}">${recent}</time></relative-time>`;
const timeElement = document.querySelector("time");
assert.strictEqual(/\d+ second/.test(timeElement.innerHTML), true);
});
it("Should be able to force a short style format", () => {
const recent = new Date(new Date().getTime() - 10000);
document.body.innerHTML = `<relative-time format-style="short"><time datetime="${recent}">${recent}</time></relative-time>`;
const timeElement = document.querySelector("time");
assert.strictEqual(/\d+ sec\./.test(timeElement.innerHTML), true);
});
it("Should be able to force a narrow style format", () => {
const recent = new Date(new Date().getTime() - 10000);
document.body.innerHTML = `<relative-time format-style="narrow"><time datetime="${recent}">${recent}</time></relative-time>`;
const timeElement = document.querySelector("time");
assert.strictEqual(/\d+s\s/.test(timeElement.innerHTML), true);
});
it("Should not perform work on invalid datetimes", () => {
document.body.innerHTML = `<relative-time><time datetime="invalid">Invalid</time></relative-time>`;
const timeElement = document.querySelector("time");
assert.strictEqual(timeElement.innerHTML, "Invalid");
});
});