yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Examples: updated naming of example (#20938)

Browse Source 
updated naming of example
This commit is contained in:
Niels Lyngsø
2025-11-24 13:38:10 +01:00
committed by GitHub
parent ea840bcfde
commit 4138262a19
4 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/examples/workspace-context-counter/README.md
View File

@@ -1,6 +1,6 @@
# Workspace Context Communication Across Extensions Example
The Workspace Context serves as the central communication hub for all workspace extensions. In this example, the context manages a counter that can be manipulated and displayed by different extension types, showcasing the power of shared state management in workspace extensions.
The Workspace Context serves as the central communication hub for all Workspace extensions. In this example, the Context manages a counter that can be manipulated and displayed by different Extension Types, showcasing the power of shared state management in Workspace extensions.
## Extension types included

60
src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-context.test.ts
View File

@@ -1,5 +1,5 @@
import { WorkspaceContextCounterElement, EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
import { ExampleCounterWorkspaceView } from './counter-workspace-view.js';
import { ExampleWorkspaceContextCounterContext, EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
import { ExampleCounterWorkspaceViewElement } from './counter-workspace-view.js';
import { ExampleCounterStatusFooterAppElement } from './counter-status-footer-app.element.js';
import { expect, fixture, defineCE } from '@open-wc/testing';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -10,11 +10,11 @@ const testHostElement = defineCE(TestHostElement);
describe('WorkspaceContextCounterElement', () => {
let element: UmbLitElement;
let context: WorkspaceContextCounterElement;
let context: ExampleWorkspaceContextCounterContext;
beforeEach(async () => {
element = await fixture(`<${testHostElement}></${testHostElement}>`);
context = new WorkspaceContextCounterElement(element);
context = new ExampleWorkspaceContextCounterContext(element);
});
describe('Counter functionality', () => {
@@ -147,18 +147,18 @@ describe('WorkspaceContextCounterElement', () => {
});
describe('ExampleCounterWorkspaceView', () => {
let element: ExampleCounterWorkspaceView;
let context: WorkspaceContextCounterElement;
let element: ExampleCounterWorkspaceViewElement;
let context: ExampleWorkspaceContextCounterContext;
let hostElement: UmbLitElement;
beforeEach(async () => {
hostElement = await fixture(`<${testHostElement}></${testHostElement}>`);
context = new WorkspaceContextCounterElement(hostElement);
context = new ExampleWorkspaceContextCounterContext(hostElement);
element = await fixture(html`<example-counter-workspace-view></example-counter-workspace-view>`, {
parentNode: hostElement,
});
// Wait for context consumption
await element.updateComplete;
});
@@ -173,7 +173,7 @@ describe('ExampleCounterWorkspaceView', () => {
it('reflects counter value changes when incremented', async () => {
context.increment();
await element.updateComplete;
const displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Current count value: 1');
});
@@ -183,7 +183,7 @@ describe('ExampleCounterWorkspaceView', () => {
context.increment();
context.increment();
await element.updateComplete;
const displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Current count value: 3');
});
@@ -192,13 +192,13 @@ describe('ExampleCounterWorkspaceView', () => {
context.increment();
context.increment();
await element.updateComplete;
let displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Current count value: 2');
context.reset();
await element.updateComplete;
displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Current count value: 0');
});
@@ -210,11 +210,11 @@ describe('ExampleCounterWorkspaceView', () => {
context.increment();
await element.updateComplete;
expect(element.shadowRoot?.textContent).to.include('Current count value: 3');
context.reset();
await element.updateComplete;
expect(element.shadowRoot?.textContent).to.include('Current count value: 0');
context.increment();
await element.updateComplete;
expect(element.shadowRoot?.textContent).to.include('Current count value: 1');
@@ -224,17 +224,17 @@ describe('ExampleCounterWorkspaceView', () => {
describe('ExampleCounterStatusFooterAppElement', () => {
let element: ExampleCounterStatusFooterAppElement;
let context: WorkspaceContextCounterElement;
let context: ExampleWorkspaceContextCounterContext;
let hostElement: UmbLitElement;
beforeEach(async () => {
hostElement = await fixture(`<${testHostElement}></${testHostElement}>`);
context = new WorkspaceContextCounterElement(hostElement);
context = new ExampleWorkspaceContextCounterContext(hostElement);
element = await fixture(html`<example-counter-status-footer-app></example-counter-status-footer-app>`, {
parentNode: hostElement,
});
// Wait for context consumption
await element.updateComplete;
});
@@ -249,7 +249,7 @@ describe('ExampleCounterStatusFooterAppElement', () => {
it('reflects counter state changes when incremented', async () => {
context.increment();
await element.updateComplete;
const displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Counter: 1');
});
@@ -261,7 +261,7 @@ describe('ExampleCounterStatusFooterAppElement', () => {
context.increment();
context.increment();
await element.updateComplete;
const displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Counter: 5');
});
@@ -271,13 +271,13 @@ describe('ExampleCounterStatusFooterAppElement', () => {
context.increment();
context.increment();
await element.updateComplete;
let displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Counter: 3');
context.reset();
await element.updateComplete;
displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Counter: 0');
});
@@ -286,16 +286,16 @@ describe('ExampleCounterStatusFooterAppElement', () => {
// Test comprehensive state change tracking
await element.updateComplete;
expect(element.shadowRoot?.textContent).to.include('Counter: 0');
context.increment();
context.increment();
await element.updateComplete;
expect(element.shadowRoot?.textContent).to.include('Counter: 2');
context.reset();
await element.updateComplete;
expect(element.shadowRoot?.textContent).to.include('Counter: 0');
context.increment();
await element.updateComplete;
expect(element.shadowRoot?.textContent).to.include('Counter: 1');
@@ -310,9 +310,9 @@ describe('ExampleCounterStatusFooterAppElement', () => {
context.increment();
context.increment();
await element.updateComplete;
const displayText = element.shadowRoot?.textContent;
expect(displayText).to.include('Counter: 2');
});
});
});
});

6
src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-context.ts
View File

@@ -4,7 +4,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbNumberState } from '@umbraco-cms/backoffice/observable-api';
// The Example Workspace Context Controller:
export class WorkspaceContextCounterElement extends UmbContextBase {
export class ExampleWorkspaceContextCounterContext extends UmbContextBase {
// We always keep our states private, and expose the values as observables:
#counter = new UmbNumberState(0);
readonly counter = this.#counter.asObservable();
@@ -24,10 +24,10 @@ export class WorkspaceContextCounterElement extends UmbContextBase {
}
// Declare a api export, so Extension Registry can initialize this class:
export const api = WorkspaceContextCounterElement;
export const api = ExampleWorkspaceContextCounterContext;
// Declare a Context Token that other elements can use to request the WorkspaceContextCounter:
export const EXAMPLE_COUNTER_CONTEXT = new UmbContextToken<WorkspaceContextCounterElement>(
export const EXAMPLE_COUNTER_CONTEXT = new UmbContextToken<ExampleWorkspaceContextCounterContext>(
'UmbWorkspaceContext',
'example.workspaceContext.counter',
);

6
src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-view.ts
View File

@@ -4,7 +4,7 @@ import { css, html, customElement, state, LitElement } from '@umbraco-cms/backof
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
@customElement('example-counter-workspace-view')
export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) {
export class ExampleCounterWorkspaceViewElement extends UmbElementMixin(LitElement) {
#counterContext?: typeof EXAMPLE_COUNTER_CONTEXT.TYPE;
@state()
@@ -46,10 +46,10 @@ export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) {
];
}
export default ExampleCounterWorkspaceView;
export default ExampleCounterWorkspaceViewElement;
declare global {
interface HTMLElementTagNameMap {
'example-counter-workspace-view': ExampleCounterWorkspaceView;
'example-counter-workspace-view': ExampleCounterWorkspaceViewElement;
}
}