Skip to content

Commit b01d125

Browse files
kensternberg-authentikkensternberg-authentik
committed
Applies the new vitest suite to ak-timestamp.
\# What \# Why \# How \# Designs \# Test Steps \# Other Notes
1 parent d726c34 commit b01d125

File tree

1 file changed

+65
-235
lines changed

1 file changed

+65
-235
lines changed

‎src/ak-timestamp/ak-timestamp.test.ts‎

Lines changed: 65 additions & 235 deletions
Original file line numberDiff line numberDiff line change
@@ -1,275 +1,105 @@
1+
// Import the component to register it
12
import "./ak-timestamp.js";
23

4+
import { Timestamp } from "./ak-timestamp.js";
5+
36
import { spread } from "@open-wc/lit-helpers";
4-
import { $, browser, expect } from "@wdio/globals";
7+
import { describe, expect, it } from "vitest";
8+
import { render } from "vitest-browser-lit";
9+
import { Locator, locators, page } from "vitest/browser";
10+
11+
import { html } from "lit";
12+
13+
locators.extend({
14+
getElement() {
15+
return "ak-timestamp";
16+
},
17+
getTime() {
18+
return "ak-timestamp >> time";
19+
},
20+
getWarning() {
21+
return 'ak-timestamp >> [part="warning"]';
22+
},
23+
});
524

6-
import { html, render } from "lit";
25+
declare module "vitest/browser" {
26+
interface LocatorSelectors {
27+
getElement(): Locator;
28+
getTime(): Locator;
29+
getWarning(): Locator;
30+
}
31+
}
732

833
describe("ak-timestamp component", () => {
9-
afterEach(async () => {
10-
await browser.execute(async () => {
11-
await document.body.querySelector("ak-timestamp")?.remove();
12-
// @ts-expect-error expression of type '"_$litPart$"' is added by Lit
13-
if (document.body._$litPart$) {
14-
// @ts-expect-error expression of type '"_$litPart$"' is added by Lit
15-
await delete document.body._$litPart$;
16-
}
17-
});
18-
});
19-
20-
const renderComponent = async (properties = {}) => {
21-
const root = render(
22-
html`<ak-timestamp ${spread(properties)}></ak-timestamp>`,
23-
document.body,
24-
);
25-
await browser.pause(100);
26-
return root;
27-
};
34+
const renderComponent = async (properties = {}) =>
35+
render(html`<ak-timestamp ${spread(properties)}></ak-timestamp>`);
2836

2937
it("renders the current time by default", async () => {
30-
await renderComponent();
31-
const timestamp = await $("ak-timestamp");
32-
await expect(timestamp).toExist();
33-
34-
const timeElement = await timestamp.$(">>>time");
35-
await expect(timeElement).toExist();
36-
37-
// Get the datetime attribute which should be a valid ISO string
38-
const datetimeAttr = await timeElement.getAttribute("datetime");
39-
expect(new Date(datetimeAttr).toString()).not.toBe("Invalid Date");
38+
renderComponent();
39+
const timestamp = await page.getElement();
40+
await expect(timestamp).toBeVisible();
41+
42+
const timeElement = await page.getTime();
43+
await expect.element(timeElement).toBeVisible();
44+
await expect.element(timeElement).toHaveAttribute("datetime");
45+
await expect.element(timeElement).not.toHaveAttribute("datetime", "Invalid Date");
4046
});
4147

4248
it("renders a specified date string", async () => {
4349
const testDate = "2023-01-15T12:30:00Z";
44-
await renderComponent({ date: testDate });
45-
46-
const timeElement = await $("ak-timestamp").$(">>>time");
47-
const datetimeAttr = await timeElement.getAttribute("datetime");
48-
expect(datetimeAttr).toBe(new Date(testDate).toISOString());
50+
renderComponent({ date: testDate });
51+
const timeElement = await page.getTime();
52+
await expect
53+
.element(timeElement)
54+
.toHaveAttribute("datetime", new Date(testDate).toISOString());
4955
});
5056

5157
it("renders a specified date object", async () => {
5258
const testDate = new Date("2023-01-15T12:30:00Z");
53-
await renderComponent({ ".raw": testDate });
59+
renderComponent({ ".raw": testDate });
5460

55-
const timeElement = await $("ak-timestamp").$(">>>time");
56-
const datetimeAttr = await timeElement.getAttribute("datetime");
57-
expect(datetimeAttr).toBe(testDate.toISOString());
61+
const timeElement = await page.getTime();
62+
await expect
63+
.element(timeElement)
64+
.toHaveAttribute("datetime", new Date(testDate).toISOString());
5865
});
5966

6067
it("renders a specified timestamp number", async () => {
6168
const testTimestamp = 1673784600000; // 2023-01-15T12:30:00Z in milliseconds
62-
await renderComponent({ date: testTimestamp });
63-
const timeElement = await $("ak-timestamp").$(">>>time");
64-
const datetimeAttr = await timeElement.getAttribute("datetime");
65-
expect(datetimeAttr).toBe(new Date(testTimestamp).toISOString());
69+
renderComponent({ date: testTimestamp });
70+
const timeElement = await page.getTime();
71+
await expect
72+
.element(timeElement)
73+
.toHaveAttribute("datetime", new Date(testTimestamp).toISOString());
6674
});
6775

6876
it("renders a warning for invalid dates", async () => {
69-
await renderComponent({ date: "not-a-date" });
70-
71-
const warningElement = await $("ak-timestamp").$('>>>[part="warning"]');
72-
await expect(warningElement).toExist();
73-
await expect(warningElement).toHaveText("Failed to parse time");
77+
renderComponent({ date: "not-a-date" });
78+
const warningElement = await page.getWarning();
79+
await expect.element(warningElement).toBeVisible();
80+
await expect.element(warningElement).toHaveTextContent("Failed to parse time");
7481
});
7582

7683
it("applies date format correctly", async () => {
7784
// Create a specific test date
7885
const testDate = "2023-01-15T12:30:00Z";
7986

8087
// Set date format to "short" and render
81-
await renderComponent({ "date": testDate, "date-format": "short" });
82-
83-
// Get formatted time string from component
84-
const shortTimeElement = await $("ak-timestamp").$(">>>time");
85-
const shortTimeText = await shortTimeElement.getText();
88+
renderComponent({ "date": testDate, "date-format": "short" });
89+
const element = (await page.getElement().element()) as Timestamp;
90+
const time = await page.getTime();
91+
const timeElement = await time.element();
92+
const shortTimeText = timeElement.textContent;
8693

87-
// Now render with "long" format
88-
await renderComponent({ "date": testDate, "date-format": "long" });
89-
90-
const longTimeElement = await $("ak-timestamp").$(">>>time");
91-
const longTimeText = await longTimeElement.getText();
94+
await element.setAttribute("date-format", "long");
95+
await element.updateComplete;
96+
const longTimeElement = await time.element();
97+
const longTimeText = longTimeElement.textContent;
9298

9399
// The two formats should be different
94100
expect(shortTimeText).not.toEqual(longTimeText);
95101

96102
// Short format should be shorter than long format
97103
expect(shortTimeText.length).toBeLessThan(longTimeText.length);
98104
});
99-
100-
it("applies time format correctly", async () => {
101-
const testDate = "2023-01-15T12:30:00Z";
102-
103-
// Set time format to "short" and render
104-
await renderComponent({ "date": testDate, "time-format": "short" });
105-
106-
// Get formatted time string from component
107-
const shortTimeElement = await $("ak-timestamp").$(">>>time");
108-
const shortTimeText = await shortTimeElement.getText();
109-
110-
// Now render with "full" format
111-
await renderComponent({ "date": testDate, "time-format": "full" });
112-
113-
const fullTimeElement = await $("ak-timestamp").$(">>>time");
114-
const fullTimeText = await fullTimeElement.getText();
115-
116-
// The two formats should be different
117-
expect(shortTimeText).not.toEqual(fullTimeText);
118-
119-
// Short format should be shorter than full format
120-
expect(shortTimeText.length).toBeLessThan(fullTimeText.length);
121-
});
122-
123-
it("displays UTC time when specified", async () => {
124-
const testDate = "2023-01-15T12:30:00Z";
125-
126-
// Render with UTC flag
127-
await renderComponent({ "date": testDate, "?display-utc": true });
128-
const utcTimeElement = await $("ak-timestamp").$(">>>time");
129-
const utcTimeText = await utcTimeElement.getText();
130-
131-
// UTC time should be different from local time
132-
// and should include "utc" suffix
133-
expect(utcTimeText.toLowerCase()).toContain("utc");
134-
135-
// Check that full UTC format includes "Coordinated Universal Time"
136-
await renderComponent({
137-
"date": testDate,
138-
"should-display-utc": true,
139-
"time-format": "full",
140-
});
141-
142-
const fullUtcElement = await $("ak-timestamp").$(">>>time");
143-
const fullUtcText = await fullUtcElement.getText();
144-
expect(fullUtcText).toContain("Coordinated Universal Time");
145-
});
146-
147-
it("applies display suffix when provided", async () => {
148-
const testDate = "2023-01-15T12:30:00Z";
149-
const suffix = "EDT";
150-
151-
await renderComponent({ "date": testDate, "display-suffix": suffix });
152-
153-
const timeElement = await $("ak-timestamp").$(">>>time");
154-
const timeText = await timeElement.getText();
155-
156-
// Check that the suffix is in the displayed time
157-
expect(timeText).toContain(suffix);
158-
});
159-
160-
it("applies custom display suffix with UTC", async () => {
161-
const testDate = "2023-01-15T12:30:00Z";
162-
const suffix = "Greenwich Mean Time";
163-
164-
await renderComponent({
165-
"date": testDate,
166-
"?should-display-utc": true,
167-
"display-suffix": suffix,
168-
});
169-
170-
const timeElement = await $("ak-timestamp").$(">>>time");
171-
const timeText = await timeElement.getText();
172-
173-
// Check that the custom suffix is used instead of the default UTC suffix
174-
expect(timeText).toContain(suffix);
175-
expect(timeText).not.toContain("utc");
176-
});
177-
178-
it("respects 12-hour format setting", async () => {
179-
// Set up a date with a specific hour to test 12/24 hour format
180-
const testDate = "2023-01-15T15:30:00Z"; // 3:30 PM
181-
182-
// Force 12-hour format
183-
await renderComponent({
184-
"date": testDate,
185-
"?is-12-hour": true,
186-
});
187-
188-
const timeElement12hr = await $("ak-timestamp").$(">>>time");
189-
const timeText12hr = await timeElement12hr.getText();
190-
191-
// Force 24-hour format by setting is-12-hour to false
192-
await renderComponent({
193-
"date": testDate,
194-
"?is-12-hour": false,
195-
});
196-
197-
const timeElement24hr = await $("ak-timestamp").$(">>>time");
198-
const timeText24hr = await timeElement24hr.getText();
199-
200-
// 12-hour format should contain AM/PM indicator
201-
const has12HourIndicator = /am|pm/i.test(timeText12hr);
202-
expect(has12HourIndicator).toBe(true);
203-
204-
// 24-hour format should not contain AM/PM indicator
205-
const has24HourIndicator = /am|pm/i.test(timeText24hr);
206-
expect(has24HourIndicator).toBe(false);
207-
});
208-
209-
it("respects custom locale setting", async () => {
210-
const testDate = "2023-01-15T12:30:00Z";
211-
212-
// Test with US English locale
213-
await renderComponent({
214-
date: testDate,
215-
locale: "en-US",
216-
});
217-
218-
const timeElementUS = await $("ak-timestamp").$(">>>time");
219-
const timeTextUS = await timeElementUS.getText();
220-
221-
// Test with French locale
222-
await renderComponent({
223-
date: testDate,
224-
locale: "fr-FR",
225-
});
226-
227-
const timeElementFR = await $("ak-timestamp").$(">>>time");
228-
const timeTextFR = await timeElementFR.getText();
229-
230-
// The formatted dates should be different between locales
231-
expect(timeTextUS).not.toEqual(timeTextFR);
232-
});
233-
234-
it("handles dynamic date updates", async () => {
235-
// Initial render with one date
236-
const initialDate = "2023-01-15T12:30:00Z";
237-
await renderComponent({ date: initialDate });
238-
239-
const initialTimeElement = await $("ak-timestamp").$(">>>time");
240-
const initialDatetime = await initialTimeElement.getAttribute("datetime");
241-
242-
// Update the date property
243-
const newDate = "2023-05-20T18:45:00Z";
244-
await browser.execute((newDateValue) => {
245-
const timestamp = document.querySelector("ak-timestamp");
246-
if (timestamp) {
247-
timestamp.date = newDateValue;
248-
}
249-
}, newDate);
250-
251-
// Wait for update
252-
await browser.pause(100);
253-
254-
// Check if the datetime attribute was updated
255-
const updatedTimeElement = await $("ak-timestamp").$(">>>time");
256-
const updatedDatetime = await updatedTimeElement.getAttribute("datetime");
257-
258-
expect(updatedDatetime).not.toEqual(initialDatetime);
259-
expect(updatedDatetime).toEqual(new Date(newDate).toISOString());
260-
});
261-
262-
it("renders the time element with proper attributes", async () => {
263-
const testDate = "2023-01-15T12:30:00Z";
264-
await renderComponent({ date: testDate });
265-
266-
const timeElement = await $("ak-timestamp").$(">>>time");
267-
268-
// Check the time element has the correct part attribute
269-
await expect(timeElement).toHaveAttribute("part", "timestamp");
270-
271-
// Check datetime attribute is an ISO string
272-
const datetimeAttr = await timeElement.getAttribute("datetime");
273-
expect(datetimeAttr).toBe(new Date(testDate).toISOString());
274-
});
275105
});

0 commit comments

Comments
 (0)