Skip to content

Commit 39a5362

Browse files
hifi-philhifi-phil
authored
Add testing to workspace counter examples (#19838)
* update workspace example * Update readme for workspace counter example * update workspace counter examples readme * Update examples workspace counter to include some testing * Update glob pattern for text examples for windows
1 parent de64c53 commit 39a5362

File tree

2 files changed

+322
-0
lines changed

2 files changed

+322
-0
lines changed

‎src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-context.test.ts

Lines changed: 318 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,318 @@
1+
import { WorkspaceContextCounterElement, EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
2+
import { ExampleCounterWorkspaceView } from './counter-workspace-view.js';
3+
import { ExampleCounterStatusFooterAppElement } from './counter-status-footer-app.element.js';
4+
import { expect, fixture, defineCE } from '@open-wc/testing';
5+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
6+
import { html } from '@umbraco-cms/backoffice/external/lit';
7+
8+
class TestHostElement extends UmbLitElement {}
9+
const testHostElement = defineCE(TestHostElement);
10+
11+
describe('WorkspaceContextCounterElement', () => {
12+
let element: UmbLitElement;
13+
let context: WorkspaceContextCounterElement;
14+
15+
beforeEach(async () => {
16+
element = await fixture(`<${testHostElement}></${testHostElement}>`);
17+
context = new WorkspaceContextCounterElement(element);
18+
});
19+
20+
describe('Counter functionality', () => {
21+
it('initializes with counter value of 0', (done) => {
22+
context.counter.subscribe((value) => {
23+
expect(value).to.equal(0);
24+
done();
25+
});
26+
});
27+
28+
it('increments counter value when increment method is called', (done) => {
29+
let callbackCount = 0;
30+
31+
context.counter.subscribe((value) => {
32+
callbackCount++;
33+
if (callbackCount === 1) {
34+
expect(value).to.equal(0);
35+
context.increment();
36+
} else if (callbackCount === 2) {
37+
expect(value).to.equal(1);
38+
done();
39+
}
40+
});
41+
});
42+
43+
it('increments counter multiple times correctly', (done) => {
44+
let callbackCount = 0;
45+
46+
context.counter.subscribe((value) => {
47+
callbackCount++;
48+
if (callbackCount === 1) {
49+
expect(value).to.equal(0);
50+
context.increment();
51+
context.increment();
52+
context.increment();
53+
} else if (callbackCount === 4) {
54+
expect(value).to.equal(3);
55+
done();
56+
}
57+
});
58+
});
59+
});
60+
61+
describe('Reset functionality', () => {
62+
it('resets counter to 0 when reset method is called', (done) => {
63+
let callbackCount = 0;
64+
65+
context.counter.subscribe((value) => {
66+
callbackCount++;
67+
if (callbackCount === 1) {
68+
expect(value).to.equal(0);
69+
// First increment the counter
70+
context.increment();
71+
context.increment();
72+
} else if (callbackCount === 3) {
73+
expect(value).to.equal(2);
74+
// Then reset it
75+
context.reset();
76+
} else if (callbackCount === 4) {
77+
expect(value).to.equal(0);
78+
done();
79+
}
80+
});
81+
});
82+
83+
it('can reset from any counter value', (done) => {
84+
let callbackCount = 0;
85+
86+
context.counter.subscribe((value) => {
87+
callbackCount++;
88+
if (callbackCount === 1) {
89+
expect(value).to.equal(0);
90+
// Increment to a higher number
91+
context.increment();
92+
context.increment();
93+
context.increment();
94+
context.increment();
95+
context.increment();
96+
} else if (callbackCount === 6) {
97+
expect(value).to.equal(5);
98+
context.reset();
99+
} else if (callbackCount === 7) {
100+
expect(value).to.equal(0);
101+
done();
102+
}
103+
});
104+
});
105+
106+
it('reset works when counter is already at 0', (done) => {
107+
context.counter.subscribe((value) => {
108+
expect(value).to.equal(0);
109+
// Reset when already at 0 - should not cause issues
110+
context.reset();
111+
// Verify it's still 0
112+
expect(value).to.equal(0);
113+
done();
114+
});
115+
});
116+
});
117+
118+
describe('Increment and Reset interaction', () => {
119+
it('can increment after reset', (done) => {
120+
let callbackCount = 0;
121+
122+
context.counter.subscribe((value) => {
123+
callbackCount++;
124+
if (callbackCount === 1) {
125+
expect(value).to.equal(0);
126+
context.increment();
127+
} else if (callbackCount === 2) {
128+
expect(value).to.equal(1);
129+
context.reset();
130+
} else if (callbackCount === 3) {
131+
expect(value).to.equal(0);
132+
context.increment();
133+
} else if (callbackCount === 4) {
134+
expect(value).to.equal(1);
135+
done();
136+
}
137+
});
138+
});
139+
});
140+
141+
describe('Context integration', () => {
142+
it('provides context that can be consumed by other components', () => {
143+
// Verify context is available for consumption
144+
expect(EXAMPLE_COUNTER_CONTEXT).to.not.be.undefined;
145+
});
146+
});
147+
});
148+
149+
describe('ExampleCounterWorkspaceView', () => {
150+
let element: ExampleCounterWorkspaceView;
151+
let context: WorkspaceContextCounterElement;
152+
let hostElement: UmbLitElement;
153+
154+
beforeEach(async () => {
155+
hostElement = await fixture(`<${testHostElement}></${testHostElement}>`);
156+
context = new WorkspaceContextCounterElement(hostElement);
157+
158+
element = await fixture(html`<example-counter-workspace-view></example-counter-workspace-view>`, {
159+
parentNode: hostElement,
160+
});
161+
162+
// Wait for context consumption
163+
await element.updateComplete;
164+
});
165+
166+
describe('Counter value display', () => {
167+
it('shows initial counter value', async () => {
168+
await element.updateComplete;
169+
const displayText = element.shadowRoot?.textContent;
170+
expect(displayText).to.include('Current count value: 0');
171+
});
172+
173+
it('reflects counter value changes when incremented', async () => {
174+
context.increment();
175+
await element.updateComplete;
176+
177+
const displayText = element.shadowRoot?.textContent;
178+
expect(displayText).to.include('Current count value: 1');
179+
});
180+
181+
it('reflects counter value changes when incremented multiple times', async () => {
182+
context.increment();
183+
context.increment();
184+
context.increment();
185+
await element.updateComplete;
186+
187+
const displayText = element.shadowRoot?.textContent;
188+
expect(displayText).to.include('Current count value: 3');
189+
});
190+
191+
it('reflects counter value changes when reset', async () => {
192+
context.increment();
193+
context.increment();
194+
await element.updateComplete;
195+
196+
let displayText = element.shadowRoot?.textContent;
197+
expect(displayText).to.include('Current count value: 2');
198+
199+
context.reset();
200+
await element.updateComplete;
201+
202+
displayText = element.shadowRoot?.textContent;
203+
expect(displayText).to.include('Current count value: 0');
204+
});
205+
206+
it('maintains correct value display through increment and reset cycles', async () => {
207+
// Test a complete workflow cycle
208+
context.increment();
209+
context.increment();
210+
context.increment();
211+
await element.updateComplete;
212+
expect(element.shadowRoot?.textContent).to.include('Current count value: 3');
213+
214+
context.reset();
215+
await element.updateComplete;
216+
expect(element.shadowRoot?.textContent).to.include('Current count value: 0');
217+
218+
context.increment();
219+
await element.updateComplete;
220+
expect(element.shadowRoot?.textContent).to.include('Current count value: 1');
221+
});
222+
});
223+
});
224+
225+
describe('ExampleCounterStatusFooterAppElement', () => {
226+
let element: ExampleCounterStatusFooterAppElement;
227+
let context: WorkspaceContextCounterElement;
228+
let hostElement: UmbLitElement;
229+
230+
beforeEach(async () => {
231+
hostElement = await fixture(`<${testHostElement}></${testHostElement}>`);
232+
context = new WorkspaceContextCounterElement(hostElement);
233+
234+
element = await fixture(html`<example-counter-status-footer-app></example-counter-status-footer-app>`, {
235+
parentNode: hostElement,
236+
});
237+
238+
// Wait for context consumption
239+
await element.updateComplete;
240+
});
241+
242+
describe('Status display', () => {
243+
it('shows initial counter status', async () => {
244+
await element.updateComplete;
245+
const displayText = element.shadowRoot?.textContent;
246+
expect(displayText).to.include('Counter: 0');
247+
});
248+
249+
it('reflects counter state changes when incremented', async () => {
250+
context.increment();
251+
await element.updateComplete;
252+
253+
const displayText = element.shadowRoot?.textContent;
254+
expect(displayText).to.include('Counter: 1');
255+
});
256+
257+
it('reflects counter state changes when incremented multiple times', async () => {
258+
context.increment();
259+
context.increment();
260+
context.increment();
261+
context.increment();
262+
context.increment();
263+
await element.updateComplete;
264+
265+
const displayText = element.shadowRoot?.textContent;
266+
expect(displayText).to.include('Counter: 5');
267+
});
268+
269+
it('reflects counter state changes when reset', async () => {
270+
context.increment();
271+
context.increment();
272+
context.increment();
273+
await element.updateComplete;
274+
275+
let displayText = element.shadowRoot?.textContent;
276+
expect(displayText).to.include('Counter: 3');
277+
278+
context.reset();
279+
await element.updateComplete;
280+
281+
displayText = element.shadowRoot?.textContent;
282+
expect(displayText).to.include('Counter: 0');
283+
});
284+
285+
it('maintains accurate status display through complete workflow cycles', async () => {
286+
// Test comprehensive state change tracking
287+
await element.updateComplete;
288+
expect(element.shadowRoot?.textContent).to.include('Counter: 0');
289+
290+
context.increment();
291+
context.increment();
292+
await element.updateComplete;
293+
expect(element.shadowRoot?.textContent).to.include('Counter: 2');
294+
295+
context.reset();
296+
await element.updateComplete;
297+
expect(element.shadowRoot?.textContent).to.include('Counter: 0');
298+
299+
context.increment();
300+
await element.updateComplete;
301+
expect(element.shadowRoot?.textContent).to.include('Counter: 1');
302+
});
303+
304+
it('synchronizes with context state changes across multiple increments and resets', async () => {
305+
// Test synchronization with rapid state changes
306+
context.increment();
307+
context.increment();
308+
context.increment();
309+
context.reset();
310+
context.increment();
311+
context.increment();
312+
await element.updateComplete;
313+
314+
const displayText = element.shadowRoot?.textContent;
315+
expect(displayText).to.include('Counter: 2');
316+
});
317+
});
318+
});

‎src/Umbraco.Web.UI.Client/package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,10 @@
191191
"test:dev-watch": "npm run generate:check-const-test && web-test-runner --watch --config ./web-test-runner.dev.config.mjs",
192192
"test:watch": "npm run generate:check-const-test && web-test-runner --watch",
193193
"test": "npm run generate:check-const-test && npm run check:module-dependencies && web-test-runner",
194+
"test:examples": "npm run generate:check-const-test && web-test-runner --files \"./examples/**/*.test.ts\"",
195+
"test:examples:dev": "npm run generate:check-const-test && web-test-runner --config ./web-test-runner.dev.config.mjs --files \"./examples/**/*.test.ts\"",
196+
"test:examples:watch": "npm run generate:check-const-test && web-test-runner --watch --config ./web-test-runner.dev.config.mjs --files \"./examples/**/*.test.ts\"",
197+
"test:examples:browser": "npm run generate:check-const-test && web-test-runner --config ./web-test-runner.dev.config.mjs --files \"./examples/**/*.test.ts\" --manual",
194198
"wc-analyze:vscode": "wca **/*.element.ts --format vscode --outFile dist-cms/vscode-html-custom-data.json",
195199
"wc-analyze": "wca **/*.element.ts --outFile dist-cms/custom-elements.json",
196200
"generate:tsconfig": "node ./devops/tsconfig/index.js",

0 commit comments

Comments
 (0)