e5f613401f
* wip section menu expansion * make section context local to each section * split kind manifest from element file * make generic entity expansion manager * wip menu context * add collapsed and expanded events * Export new expansion entity event modules * rename events * dispatch events * Set tree expansion changes in the menu context * expand menu from workspace * do not allow undefined * make menu item feature folder * Update menu-variant-tree-structure-workspace-context-base.ts * menu: pass expansion as prop to prevent dependency on the section sidebar * use correct event * Add event listener support to extension slot element Introduces an 'events' property to UmbExtensionSlotElement, allowing dynamic assignment and removal of event listeners on extension components. Event listeners are added when extensions are permitted and removed on disconnect, improving extensibility and event handling for extension slots. * Add entity expansion event handling to sidebar menu Introduces handlers for entity expansion and collapse events in the section sidebar menu. This change enables the menu to respond to expansion state changes by updating the context accordingly. * Optimize expansion state updates in menu components Introduces a local expansion state to both section sidebar and tree menu item components to prevent unnecessary updates and rerenders. This improves performance by ensuring state updates only occur when needed. * only check if we have a local state already * add bulk expand method * use bulk expand method * align naming * mute updates * lower threshold * add expansion model with target * add function to link entries * fix self import * export constants * update js docs for entity expansion manager * link entries * fix import * do not export from menu here * fix import * fix import * align how we register manifests * add specific managers for section sidebar menu * use structure items * dot not expand current item * Refactor section sidebar menu to use programmatic extension slot Replaces the template-based <umb-extension-slot> with a programmatically created UmbExtensionSlotElement for improved performance and UX. * add section context extension * register menu as section context instead of hardcoding * rename folder * align naming * export extension slot elements * fix typings * destroy extension slot element when host is disconnected * use entry model * move and rename * register global context to hold menu state across sections * temp observe section specific expansions * temp observe section specific expansions * add method to collapse multiple items * bind expansion to section * make entity expansion manager generic * add helper method * remove temp test data * include last item in target * remove unused * pass full entry to event * add type for menu item expansion * export types * add menuItem alias * Update types.ts * support menu item expansion entry * add const for menu item alias + use for breadcrumb and menu item * add data type menu item alias const + apply to breadcrumb * move to correct manifest * add menu item alias to expand entries * Update manifests.ts * add menu structure kind types * add kind to manifests * add menu item context * filter menu items * handle menu item expansion * clean up * fix order * add example dashboard and entity action * import types * align model type names * align naming * use ui component * add guard for menu item entry * use correct type * Update section-sidebar-menu.element.ts * Update entity-expansion.manager.ts * export constants * add menuItemAlias to manifest * add menuItemAlias to manifest * add menuItemAlias to manifest * add menuItemAlias to manifest * add menu item alias * add menuItemAlias to manifest * add menuItemAlias to manifest * add menuItemAlias to manifest * add alias * add kind * fix import path * do not expand menu from modal * collect all menu-item files in one folder * fix lint errors * Update content-detail-workspace-base.ts * clean up * rename to example * add button to collapse everything within a section * fix breadcrumb for non-variant structure * reload entity * destroy * remove self * Updated acceptance tests to check if a caret button is open before clicking * Bumped version of test helpers * use const --------- Co-authored-by: Andreas Zerbst <andr317c@live.dk> Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>
Umbraco Acceptance Tests
You can watch a video following these instructions here and a longer UmbraCollab recording here. Make sure to use the latest recommended main branch rather than v10 that's mentioned in the video. Alternatively, follow along the instructions below.
Prerequisites
- NodeJS 22+
- A running installed Umbraco on url: https://localhost:44339 (Default development port)
- Install using a
SqlServer/LocalDbas the tests execute too fast forSqliteto handle.
- Install using a
Getting started
The tests are located in the project/folder as Umbraco.Tests.AcceptanceTests. Make sure you run npm ci & npx playwright install in that folder, or let your IDE do that.
The script will ask you to enter the username and password for a superadmin user of your Umbraco CMS.
Executing tests
There are two npm scripts that can be used to execute the test:
npm run test- Executes the tests headless.
npm run ui- Executes the tests in a browser handled by a playwright application.
In case of errors it is recommended to use await page.pause() so you can step through your test.
Executing single tests
If you wish to run a single set of tests, which may be helpful when writing tests you can use the following command. As before, you need to run these tests in the 'tests/Umbraco.Tests.AcceptanceTest' folder.
npx playwright test <testname.ts>
For example to run the Login Test:
npx playwright test tests/DefaultConfig/Login/Login.spec.ts
To run a single test (if you have several in a file), you can use this syntax.
npx playwright test -g "<name of test>"
For example:
npx playwright test -g "can create content with the document link"
Executing tests in UI Mode
If you would like to have an overview of all your test, to be able to see all the steps in the tests being executed and you would like to be able to run all of your tests one after another, and maybe only just one test. Then you should use UI Mode. As before, you need to run these commands in the 'tests/Umbraco.Tests.AcceptanceTest' folder.
npx playwright test --ui
You can also specify which tests you want to run
npx playwright test --ui tests/DefaultConfig
When entering UI Mode, you might only able to see the authenticate test. To fix this you will need to click on the 'Projects' in UI mode and select 'Chromium'. After you've done this. You should be able to see all your tests for the location you specified when running the command.
Environment Configuration
The environment configuration is begin setup by the npm installation script.
This results in the creation of this file: .env.
This file is already added to .gitignore and can contain values that are different for each developer machine.
The file has the following content:
UMBRACO_USER_LOGIN=email for superadmin
UMBRACO_USER_PASSWORD=password for superadmin
URL=https://localhost:44339
You can change this if you like or run the config script to reset the values, type "npm run config" in your terminal.
Documentation
For further documentation on Playwright, see the Playwright documentation.