mit einem Klick
oe-ui-test
// Use when writing or fixing Angular/Ionic UI tests in the FEMS/OpenEMS UI (Karma/Jasmine), including formly view tests, chart tests, and component unit tests.
// Use when writing or fixing Angular/Ionic UI tests in the FEMS/OpenEMS UI (Karma/Jasmine), including formly view tests, chart tests, and component unit tests.
| name | oe-ui-test |
| description | Use when writing or fixing Angular/Ionic UI tests in the FEMS/OpenEMS UI (Karma/Jasmine), including formly view tests, chart tests, and component unit tests. |
Use this skill when writing or fixing Angular/Ionic tests under ui/src/app/.
ui/.// @ts-strict-ignore only when unavoidable and consistent with nearby specs.Testing helpers live in ui/src/app/shared/components/shared/testing/:
utils.spec.ts: TestContext, TestingUtilstester.ts: OeFormlyViewTester, OeChartTestercommon.ts: OeTester.ChartOptionschannels.spec.ts: reusable channel fixturesUse DummyConfig from src/app/shared/components/edge/edgeconfig.spec.ts for EdgeConfig and Edge test data. Do not manually construct EdgeConfig or Edge.
let testContext: TestContext;
beforeEach(async () => {
testContext = await TestingUtils.sharedSetup();
});
For routed components with a componentId route parameter:
let testContext: TestContext & { route: ActivatedRoute };
beforeEach(async () => {
testContext = await TestingUtils.setupWithActivatedRoute("meter0");
});
For extra providers/imports, use TestingUtils.mergeSetup(...) and follow nearby specs.
import { DummyConfig } from "src/app/shared/components/edge/edgeconfig.spec";
const config = DummyConfig.from(
DummyConfig.Component.SOCOMEC_CONSUMPTION_METER("meter0"),
);
const edge = DummyConfig.dummyEdge({ role: Role.OWNER });
Inspect DummyConfig.Component in edgeconfig.spec.ts for available component factories before adding new ones. For chart tests, convert dummy configs before use:
const realConfig = DummyConfig.convertDummyEdgeConfigToRealEdgeConfig(config);
Use OeFormlyViewTester for components exposing generateView():
expect(OeFormlyViewTester.apply(
MyComponent.generateView(testContext.translate, component, edge),
{ "component0/ActivePower": 3000 },
)).toEqual({
title: "My Component",
lines: [
CHANNEL_LINE("Power", "3.000 W"),
],
});
Common line helpers include CHANNEL_LINE, VALUE_FROM_CHANNELS_LINE, LINE_INFO, LINE_HORIZONTAL, PHASE_ADMIN, and PHASE_GUEST. Inspect edgeconfig.spec.ts for the full helper list.
Use OeChartTester for history chart components exposing getChartData(). Always wrap both sides of chart comparisons in TestingUtils.removeFunctions().
expect(TestingUtils.removeFunctions(
OeChartTester.apply(
MyChartComponent.getChartData(
DummyConfig.convertDummyEdgeConfigToRealEdgeConfig(config),
testContext.route,
testContext.translate,
),
"line",
History.DAY,
testContext,
config,
),
)).toEqual(TestingUtils.removeFunctions(expectedView));
Use DATA and LABELS from chart test constants where nearby specs do. Use OeTester.ChartOptions helpers for chart options; inspect common.ts for the full list.
testContext.translate.use("de") or "en" when asserting translated strings.it() blocks per scenario.History.DAY and History.MONTH in a nearby channels.spec.ts.TestBed unless the component under test requires it.Run from ui/:
npm test
npm run lint