microui-wc 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +71 -71
- package/CHANGELOG.md +1 -1
- package/README.md +14 -9
- package/dist/AGENTS.md +71 -71
- package/dist/README.md +14 -9
- package/dist/microui.css +1 -1
- package/dist/microui.esm.js.map +1 -1
- package/dist/microui.min.js.map +1 -1
- package/docs/getting-started.md +3 -3
- package/package.json +39 -11
- package/src/components/mu-schema-form.js +1 -1
- package/.github/ISSUE_TEMPLATE/bug_report.md +0 -40
- package/.github/ISSUE_TEMPLATE/feature_request.md +0 -33
- package/.github/PULL_REQUEST_TEMPLATE.md +0 -28
- package/.github/workflows/ci.yml +0 -42
- package/.github/workflows/deploy-pages.yml +0 -112
- package/CODE_OF_CONDUCT.md +0 -59
- package/CONTRIBUTING.md +0 -156
- package/SECURITY.md +0 -58
- package/app/.generated/routes/alerts.js +0 -8
- package/app/.generated/routes/avatars.js +0 -8
- package/app/.generated/routes/badges.js +0 -8
- package/app/.generated/routes/buttons.js +0 -10
- package/app/.generated/routes/cards.js +0 -10
- package/app/.generated/routes/checkboxes.js +0 -9
- package/app/.generated/routes/chips.js +0 -8
- package/app/.generated/routes/dropdowns.js +0 -9
- package/app/.generated/routes/home.js +0 -7
- package/app/.generated/routes/icons.js +0 -9
- package/app/.generated/routes/inputs.js +0 -10
- package/app/.generated/routes/installation.js +0 -7
- package/app/.generated/routes/layout.js +0 -9
- package/app/.generated/routes/modals.js +0 -9
- package/app/.generated/routes/navbar.js +0 -7
- package/app/.generated/routes/progress.js +0 -9
- package/app/.generated/routes/radios.js +0 -9
- package/app/.generated/routes/switches.js +0 -9
- package/app/.generated/routes/tabs.js +0 -8
- package/app/.generated/routes/toasts.js +0 -9
- package/app/index.html +0 -67
- package/app/pages/alerts.html +0 -23
- package/app/pages/avatars.html +0 -22
- package/app/pages/badges.html +0 -22
- package/app/pages/buttons.html +0 -71
- package/app/pages/cards.html +0 -54
- package/app/pages/checkboxes.html +0 -39
- package/app/pages/chips.html +0 -23
- package/app/pages/dropdowns.html +0 -41
- package/app/pages/home.html +0 -59
- package/app/pages/icons.html +0 -29
- package/app/pages/inputs.html +0 -66
- package/app/pages/installation.html +0 -34
- package/app/pages/layout.html +0 -30
- package/app/pages/modals.html +0 -21
- package/app/pages/navbar.html +0 -22
- package/app/pages/progress.html +0 -35
- package/app/pages/radios.html +0 -40
- package/app/pages/switches.html +0 -39
- package/app/pages/tabs.html +0 -30
- package/app/pages/toasts.html +0 -22
- package/app-dist/index.html +0 -67
- package/app-dist/pages/alerts.html +0 -23
- package/app-dist/pages/avatars.html +0 -22
- package/app-dist/pages/badges.html +0 -22
- package/app-dist/pages/buttons.html +0 -71
- package/app-dist/pages/cards.html +0 -54
- package/app-dist/pages/checkboxes.html +0 -39
- package/app-dist/pages/chips.html +0 -23
- package/app-dist/pages/dropdowns.html +0 -41
- package/app-dist/pages/home.html +0 -59
- package/app-dist/pages/icons.html +0 -29
- package/app-dist/pages/inputs.html +0 -66
- package/app-dist/pages/installation.html +0 -34
- package/app-dist/pages/layout.html +0 -30
- package/app-dist/pages/modals.html +0 -21
- package/app-dist/pages/navbar.html +0 -22
- package/app-dist/pages/progress.html +0 -35
- package/app-dist/pages/radios.html +0 -40
- package/app-dist/pages/switches.html +0 -39
- package/app-dist/pages/tabs.html +0 -30
- package/app-dist/pages/toasts.html +0 -22
- package/app-dist/pages.json +0 -217
- package/app-dist/routes/alerts.js +0 -5
- package/app-dist/routes/avatars.js +0 -1
- package/app-dist/routes/badges.js +0 -1
- package/app-dist/routes/buttons.js +0 -1
- package/app-dist/routes/cards.js +0 -1
- package/app-dist/routes/checkboxes.js +0 -9
- package/app-dist/routes/chips.js +0 -4
- package/app-dist/routes/chunk-019e5e2f.js +0 -5
- package/app-dist/routes/chunk-0m4j19yd.js +0 -2
- package/app-dist/routes/chunk-0tmmp5q0.js +0 -1
- package/app-dist/routes/chunk-10xn709r.js +0 -1
- package/app-dist/routes/chunk-15m2qcda.js +0 -2
- package/app-dist/routes/chunk-1bh8g23n.js +0 -1
- package/app-dist/routes/chunk-1vg0v937.js +0 -1
- package/app-dist/routes/chunk-1zvcgy3j.js +0 -1
- package/app-dist/routes/chunk-2afb0861.js +0 -1
- package/app-dist/routes/chunk-2c6ttpzt.js +0 -5
- package/app-dist/routes/chunk-3dy30fhs.js +0 -1
- package/app-dist/routes/chunk-426dnces.js +0 -13
- package/app-dist/routes/chunk-44kgxery.js +0 -1
- package/app-dist/routes/chunk-47fdnejd.js +0 -33
- package/app-dist/routes/chunk-49a6t2vq.js +0 -1
- package/app-dist/routes/chunk-4fe1rm5b.js +0 -1
- package/app-dist/routes/chunk-4ggmvkta.js +0 -33
- package/app-dist/routes/chunk-4vkz81q7.js +0 -33
- package/app-dist/routes/chunk-4w4tmj8f.js +0 -31
- package/app-dist/routes/chunk-532s62kr.js +0 -31
- package/app-dist/routes/chunk-5hm3bssy.js +0 -33
- package/app-dist/routes/chunk-5vrh24hc.js +0 -1
- package/app-dist/routes/chunk-61pcg25a.js +0 -1
- package/app-dist/routes/chunk-6nfhygvf.js +0 -1
- package/app-dist/routes/chunk-700e7je6.js +0 -33
- package/app-dist/routes/chunk-7fsn17kg.js +0 -1
- package/app-dist/routes/chunk-7k789b32.js +0 -1
- package/app-dist/routes/chunk-7r46q0ys.js +0 -36
- package/app-dist/routes/chunk-86fmc1fr.js +0 -5
- package/app-dist/routes/chunk-8qth37vw.js +0 -1
- package/app-dist/routes/chunk-924wv8n0.js +0 -1
- package/app-dist/routes/chunk-9mbhgxk9.js +0 -1
- package/app-dist/routes/chunk-a216hyd9.js +0 -1
- package/app-dist/routes/chunk-akzxykh9.js +0 -33
- package/app-dist/routes/chunk-b3dcvy8c.js +0 -1
- package/app-dist/routes/chunk-b74zahz5.js +0 -31
- package/app-dist/routes/chunk-bftj53p2.js +0 -5
- package/app-dist/routes/chunk-c01hnz3e.js +0 -1
- package/app-dist/routes/chunk-d8pvv5km.js +0 -1
- package/app-dist/routes/chunk-dev0aezr.js +0 -2
- package/app-dist/routes/chunk-dh6vnv0e.js +0 -1
- package/app-dist/routes/chunk-dn2cbpva.js +0 -36
- package/app-dist/routes/chunk-dvn0my90.js +0 -1
- package/app-dist/routes/chunk-dvq8mnve.js +0 -36
- package/app-dist/routes/chunk-e8c2gc4d.js +0 -5
- package/app-dist/routes/chunk-ejf9ak2x.js +0 -1
- package/app-dist/routes/chunk-f083m55s.js +0 -1
- package/app-dist/routes/chunk-fnrj28s1.js +0 -31
- package/app-dist/routes/chunk-fvg3yjdp.js +0 -31
- package/app-dist/routes/chunk-g7k381n1.js +0 -1
- package/app-dist/routes/chunk-h01kq2ae.js +0 -13
- package/app-dist/routes/chunk-h4dk761v.js +0 -5
- package/app-dist/routes/chunk-hmx91z2x.js +0 -5
- package/app-dist/routes/chunk-hxbg4m42.js +0 -36
- package/app-dist/routes/chunk-jbjnfp2b.js +0 -2
- package/app-dist/routes/chunk-jxtz5vv6.js +0 -36
- package/app-dist/routes/chunk-jxzcs0ey.js +0 -36
- package/app-dist/routes/chunk-kt7wwhcx.js +0 -1
- package/app-dist/routes/chunk-kzptszyc.js +0 -33
- package/app-dist/routes/chunk-mhgca4w4.js +0 -2
- package/app-dist/routes/chunk-mhswxa20.js +0 -1
- package/app-dist/routes/chunk-n8zfeex6.js +0 -1
- package/app-dist/routes/chunk-pee47b2r.js +0 -1
- package/app-dist/routes/chunk-pesmw829.js +0 -1
- package/app-dist/routes/chunk-pgc4c6f3.js +0 -36
- package/app-dist/routes/chunk-q8egegm1.js +0 -1
- package/app-dist/routes/chunk-q9mn2qyq.js +0 -36
- package/app-dist/routes/chunk-qh0rtaf3.js +0 -5
- package/app-dist/routes/chunk-qqhmk6ye.js +0 -2
- package/app-dist/routes/chunk-qrxygmf7.js +0 -33
- package/app-dist/routes/chunk-r46yzksx.js +0 -36
- package/app-dist/routes/chunk-rgpbw2w0.js +0 -5
- package/app-dist/routes/chunk-rnpzv3d8.js +0 -2
- package/app-dist/routes/chunk-s5v8cv05.js +0 -2
- package/app-dist/routes/chunk-sbwn5bpc.js +0 -1
- package/app-dist/routes/chunk-sqbg8jbt.js +0 -33
- package/app-dist/routes/chunk-sv8dqnf7.js +0 -1
- package/app-dist/routes/chunk-t67sw3za.js +0 -1
- package/app-dist/routes/chunk-tjdpqwdf.js +0 -31
- package/app-dist/routes/chunk-tq2mfghg.js +0 -1
- package/app-dist/routes/chunk-ttn10vt6.js +0 -1
- package/app-dist/routes/chunk-v2hzpjxr.js +0 -1
- package/app-dist/routes/chunk-wfjjkw9y.js +0 -1
- package/app-dist/routes/chunk-wt8cxzmf.js +0 -31
- package/app-dist/routes/chunk-x45d372k.js +0 -5
- package/app-dist/routes/chunk-y3wsazkt.js +0 -1
- package/app-dist/routes/chunk-y7pmgc7t.js +0 -33
- package/app-dist/routes/chunk-zefdt2q3.js +0 -31
- package/app-dist/routes/dropdowns.js +0 -6
- package/app-dist/routes/home.js +0 -1
- package/app-dist/routes/icons.js +0 -1
- package/app-dist/routes/inputs.js +0 -12
- package/app-dist/routes/installation.js +0 -1
- package/app-dist/routes/layout.js +0 -1
- package/app-dist/routes/modals.js +0 -7
- package/app-dist/routes/navbar.js +0 -1
- package/app-dist/routes/progress.js +0 -1
- package/app-dist/routes/radios.js +0 -6
- package/app-dist/routes/switches.js +0 -6
- package/app-dist/routes/tabs.js +0 -1
- package/app-dist/routes/toasts.js +0 -16
- package/assets/fonts/material-symbols-mini.woff2 +0 -0
- package/assets/fonts/material-symbols.woff2 +0 -0
- package/assets/fonts/roboto-400.woff2 +0 -0
- package/assets/fonts/roboto-500.woff2 +0 -0
- package/assets/fonts/roboto-700.woff2 +0 -0
- package/assets/logo-banner-400.jpg +0 -0
- package/assets/logo-banner-400.webp +0 -0
- package/assets/logo-banner-800.webp +0 -0
- package/assets/logo-banner.jpg +0 -0
- package/assets/logo-icon-64.jpg +0 -0
- package/assets/logo-icon-64.webp +0 -0
- package/assets/logo-icon.jpg +0 -0
- package/assets/logo-square.jpg +0 -0
- package/bun.lock +0 -312
- package/bunfig.toml +0 -4
- package/custom-elements.json +0 -1916
- package/demo/api/sample-data.json +0 -38
- package/demo/content/alerts.html +0 -115
- package/demo/content/avatars.html +0 -70
- package/demo/content/badges.html +0 -65
- package/demo/content/buttons.html +0 -188
- package/demo/content/callouts.html +0 -91
- package/demo/content/cards.html +0 -121
- package/demo/content/checkboxes.html +0 -178
- package/demo/content/chips.html +0 -67
- package/demo/content/codeblocks.html +0 -101
- package/demo/content/confirms.html +0 -115
- package/demo/content/datatables.html +0 -149
- package/demo/content/dividers.html +0 -119
- package/demo/content/dropdowns.html +0 -89
- package/demo/content/enterprise.html +0 -252
- package/demo/content/home.html +0 -149
- package/demo/content/icons.html +0 -89
- package/demo/content/inputs.html +0 -135
- package/demo/content/installation.html +0 -16
- package/demo/content/layout.html +0 -136
- package/demo/content/modals.html +0 -141
- package/demo/content/navbar.html +0 -70
- package/demo/content/progress.html +0 -119
- package/demo/content/radios.html +0 -88
- package/demo/content/skeletons.html +0 -109
- package/demo/content/spinners.html +0 -96
- package/demo/content/switches.html +0 -84
- package/demo/content/tables.html +0 -124
- package/demo/content/tabs.html +0 -85
- package/demo/content/toasts.html +0 -116
- package/demo/content/tooltips.html +0 -107
- package/demo/content/virtual-lists.html +0 -233
- package/demo/favicon.ico +0 -0
- package/demo/favicon.png +0 -0
- package/demo/full.html +0 -52
- package/demo/iife.html +0 -46
- package/demo/manifest.json +0 -34
- package/demo/pages/datatable-demo.html +0 -237
- package/demo/pages/prompt-ui-demo.html +0 -218
- package/demo/pages/responsive-demo.html +0 -122
- package/demo/pages/schema-form-demo.html +0 -270
- package/demo/robots.txt +0 -6
- package/demo/shell.html +0 -712
- package/demo/sw.js +0 -387
- package/lighthouse-audit.mjs +0 -113
- package/scripts/analyze-components.js +0 -105
- package/scripts/build-app.js +0 -193
- package/scripts/build-framework.js +0 -444
- package/scripts/build-utils.js +0 -101
- package/scripts/test-isolated.js +0 -151
- package/server.js +0 -256
- package/tests/agents/agent-integration.test.js +0 -76
- package/tests/benchmark.html +0 -296
- package/tests/build/scan-components.test.js +0 -173
- package/tests/components/all-components.test.js +0 -245
- package/tests/components/all-missing-components.test.js +0 -574
- package/tests/components/mu-alert.test.js +0 -113
- package/tests/components/mu-avatar.test.js +0 -148
- package/tests/components/mu-badge.test.js +0 -92
- package/tests/components/mu-button.test.js +0 -112
- package/tests/components/mu-card.test.js +0 -89
- package/tests/components/mu-checkbox.test.js +0 -158
- package/tests/components/mu-chip.test.js +0 -118
- package/tests/components/mu-container.test.js +0 -120
- package/tests/components/mu-divider.test.js +0 -98
- package/tests/components/mu-drawer-item.test.js +0 -199
- package/tests/components/mu-drawer.test.js +0 -96
- package/tests/components/mu-dropdown.test.js +0 -125
- package/tests/components/mu-form.test.js +0 -138
- package/tests/components/mu-grid.test.js +0 -135
- package/tests/components/mu-icon.test.js +0 -110
- package/tests/components/mu-input.test.js +0 -131
- package/tests/components/mu-lazy.test.js +0 -103
- package/tests/components/mu-modal.test.js +0 -275
- package/tests/components/mu-navbar.test.js +0 -101
- package/tests/components/mu-progress.test.js +0 -115
- package/tests/components/mu-radio.test.js +0 -114
- package/tests/components/mu-repeat.test.js +0 -106
- package/tests/components/mu-sidebar.test.js +0 -126
- package/tests/components/mu-skeleton.test.js +0 -162
- package/tests/components/mu-stack.test.js +0 -143
- package/tests/components/mu-switch.test.js +0 -292
- package/tests/components/mu-table.test.js +0 -124
- package/tests/components/mu-tabs.test.js +0 -104
- package/tests/components/mu-textarea.test.js +0 -115
- package/tests/components/mu-toast.test.js +0 -321
- package/tests/components/mu-tooltip.test.js +0 -133
- package/tests/components/mu-virtual-list.test.js +0 -109
- package/tests/core/MuElement.test.js +0 -120
- package/tests/core/agent-api.test.js +0 -125
- package/tests/core/all-core-modules.test.js +0 -442
- package/tests/core/bus.test.js +0 -364
- package/tests/core/component-schema.test.js +0 -160
- package/tests/core/feature-registry.test.js +0 -198
- package/tests/core/form-state.test.js +0 -167
- package/tests/core/http.test.js +0 -119
- package/tests/core/keyboard.test.js +0 -319
- package/tests/core/layers.test.js +0 -129
- package/tests/core/namespaced-stores.test.js +0 -114
- package/tests/core/render.test.js +0 -121
- package/tests/core/ripple.test.js +0 -131
- package/tests/core/router.test.js +0 -89
- package/tests/core/scheduler.test.js +0 -121
- package/tests/core/signals.test.js +0 -128
- package/tests/core/store.test.js +0 -171
- package/tests/core/transitions.test.js +0 -82
- package/tests/e2e/accessibility-harness.html +0 -58
- package/tests/e2e/accessibility.test.js +0 -401
- package/tests/e2e/agent-features.test.js +0 -372
- package/tests/e2e/card-spacing.test.js +0 -287
- package/tests/e2e/components.test.js +0 -439
- package/tests/e2e/demo-routes.test.js +0 -478
- package/tests/e2e/layout-css-fallback.test.js +0 -334
- package/tests/e2e/mu-alert.e2e.test.js +0 -111
- package/tests/e2e/mu-checkbox.test.js +0 -489
- package/tests/e2e/mu-chip.test.js +0 -347
- package/tests/e2e/mu-form.test.js +0 -499
- package/tests/e2e/mu-icon.test.js +0 -114
- package/tests/e2e/mu-radio.test.js +0 -113
- package/tests/e2e/mu-skeleton.test.js +0 -140
- package/tests/e2e/mu-switch.test.js +0 -415
- package/tests/e2e/mu-tabs.test.js +0 -494
- package/tests/e2e/mu-textarea.test.js +0 -242
- package/tests/e2e/mu-virtual-list.test.js +0 -427
- package/tests/e2e/perf-memory.test.js +0 -161
- package/tests/e2e/puppeteer-helper.js +0 -137
- package/tests/e2e/puppeteer.test.js +0 -226
- package/tests/e2e/pwa.test.js +0 -261
- package/tests/e2e/test-harness.html +0 -319
- package/tests/manual/test-components.html +0 -120
- package/tests/memory-test.html +0 -309
- package/tests/setup-dom.js +0 -93
- package/tests/visual-test.html +0 -301
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Unit Tests for mu-radio Component
|
|
3
|
-
* Target: 76% → 90% coverage
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { describe, test, expect, beforeAll, beforeEach } from 'bun:test';
|
|
7
|
-
import { parseHTML } from 'linkedom';
|
|
8
|
-
|
|
9
|
-
let document, customElements, body;
|
|
10
|
-
let MuRadio, MuRadioGroup;
|
|
11
|
-
|
|
12
|
-
describe('mu-radio Unit Tests', () => {
|
|
13
|
-
|
|
14
|
-
beforeAll(async () => {
|
|
15
|
-
const dom = parseHTML('<!DOCTYPE html><html><body></body></html>');
|
|
16
|
-
document = dom.document;
|
|
17
|
-
customElements = dom.customElements;
|
|
18
|
-
body = document.body;
|
|
19
|
-
|
|
20
|
-
globalThis.window = dom.window;
|
|
21
|
-
globalThis.document = document;
|
|
22
|
-
globalThis.customElements = customElements;
|
|
23
|
-
globalThis.HTMLElement = dom.HTMLElement;
|
|
24
|
-
globalThis.requestAnimationFrame = (cb) => { cb(Date.now()); return 0; };
|
|
25
|
-
globalThis.getComputedStyle = () => ({ position: 'relative', overflow: 'hidden' });
|
|
26
|
-
|
|
27
|
-
const module = await import('../../src/components/mu-radio.js');
|
|
28
|
-
MuRadio = module.MuRadio;
|
|
29
|
-
MuRadioGroup = module.MuRadioGroup;
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
beforeEach(() => { body.innerHTML = ''; });
|
|
33
|
-
|
|
34
|
-
// MU-RADIO REGISTRATION
|
|
35
|
-
test('mu-radio should be registered', () => {
|
|
36
|
-
expect(customElements.get('mu-radio')).toBe(MuRadio);
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
test('mu-radio should have correct baseClass', () => {
|
|
40
|
-
expect(MuRadio.baseClass).toBe('mu-radio');
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
test('mu-radio should observe value, checked, disabled', () => {
|
|
44
|
-
expect(MuRadio.observedAttributes).toContain('value');
|
|
45
|
-
expect(MuRadio.observedAttributes).toContain('checked');
|
|
46
|
-
expect(MuRadio.observedAttributes).toContain('disabled');
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
// MU-RADIO-GROUP REGISTRATION
|
|
50
|
-
test('mu-radio-group should be registered', () => {
|
|
51
|
-
expect(customElements.get('mu-radio-group')).toBe(MuRadioGroup);
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
test('mu-radio-group should have correct baseClass', () => {
|
|
55
|
-
expect(MuRadioGroup.baseClass).toBe('mu-radio-group');
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
// MU-RADIO RENDER
|
|
59
|
-
test('mu-radio should set role radio', () => {
|
|
60
|
-
const el = document.createElement('mu-radio');
|
|
61
|
-
body.appendChild(el);
|
|
62
|
-
expect(el.getAttribute('role')).toBe('radio');
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
test.skip('mu-radio should render outer circle (E2E only)', () => {
|
|
66
|
-
const el = document.createElement('mu-radio');
|
|
67
|
-
body.appendChild(el);
|
|
68
|
-
expect(el.querySelector('.mu-radio__outer')).not.toBeNull();
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
test.skip('mu-radio should render inner circle (E2E only)', () => {
|
|
72
|
-
const el = document.createElement('mu-radio');
|
|
73
|
-
body.appendChild(el);
|
|
74
|
-
expect(el.querySelector('.mu-radio__inner')).not.toBeNull();
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
// MU-RADIO-GROUP RENDER
|
|
78
|
-
test('mu-radio-group should set role radiogroup', () => {
|
|
79
|
-
const el = document.createElement('mu-radio-group');
|
|
80
|
-
body.appendChild(el);
|
|
81
|
-
expect(el.getAttribute('role')).toBe('radiogroup');
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
// VALUE
|
|
85
|
-
test('mu-radio-group should have value getter', () => {
|
|
86
|
-
const el = document.createElement('mu-radio-group');
|
|
87
|
-
body.appendChild(el);
|
|
88
|
-
expect(el.value).toBeDefined();
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
test('mu-radio-group should have value setter', () => {
|
|
92
|
-
const el = document.createElement('mu-radio-group');
|
|
93
|
-
el.innerHTML = '<mu-radio value="opt1"></mu-radio><mu-radio value="opt2"></mu-radio>';
|
|
94
|
-
body.appendChild(el);
|
|
95
|
-
el.value = 'opt1';
|
|
96
|
-
expect(el.value).toBe('opt1');
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
// CHECKED
|
|
100
|
-
test('mu-radio checked should reflect in aria-checked', () => {
|
|
101
|
-
const el = document.createElement('mu-radio');
|
|
102
|
-
el.setAttribute('checked', '');
|
|
103
|
-
body.appendChild(el);
|
|
104
|
-
expect(el.getAttribute('aria-checked')).toBe('true');
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
// DISABLED
|
|
108
|
-
test('mu-radio disabled should reflect in aria-disabled', () => {
|
|
109
|
-
const el = document.createElement('mu-radio');
|
|
110
|
-
el.setAttribute('disabled', '');
|
|
111
|
-
body.appendChild(el);
|
|
112
|
-
expect(el.getAttribute('aria-disabled')).toBe('true');
|
|
113
|
-
});
|
|
114
|
-
});
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Unit Tests for mu-repeat Component
|
|
3
|
-
* Target: 89% → 100%
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { describe, test, expect, beforeAll, beforeEach } from 'bun:test';
|
|
7
|
-
import { parseHTML } from 'linkedom';
|
|
8
|
-
|
|
9
|
-
let document, customElements, body;
|
|
10
|
-
let MuRepeat;
|
|
11
|
-
|
|
12
|
-
describe('mu-repeat Unit Tests', () => {
|
|
13
|
-
|
|
14
|
-
beforeAll(async () => {
|
|
15
|
-
const dom = parseHTML('<!DOCTYPE html><html><body></body></html>');
|
|
16
|
-
document = dom.document;
|
|
17
|
-
customElements = dom.customElements;
|
|
18
|
-
body = document.body;
|
|
19
|
-
|
|
20
|
-
globalThis.window = dom.window;
|
|
21
|
-
globalThis.document = document;
|
|
22
|
-
globalThis.customElements = customElements;
|
|
23
|
-
globalThis.HTMLElement = dom.HTMLElement;
|
|
24
|
-
globalThis.requestAnimationFrame = (cb) => { cb(Date.now()); return 0; };
|
|
25
|
-
|
|
26
|
-
const module = await import('../../src/components/mu-repeat.js');
|
|
27
|
-
MuRepeat = module.MuRepeat;
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
beforeEach(() => { body.innerHTML = ''; });
|
|
31
|
-
|
|
32
|
-
// REGISTRATION
|
|
33
|
-
test('should be registered', () => {
|
|
34
|
-
expect(customElements.get('mu-repeat')).toBe(MuRepeat);
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
test('should have correct baseClass', () => {
|
|
38
|
-
expect(MuRepeat.baseClass).toBe('mu-repeat');
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
// RENDER
|
|
42
|
-
test('should set display contents', () => {
|
|
43
|
-
const el = document.createElement('mu-repeat');
|
|
44
|
-
body.appendChild(el);
|
|
45
|
-
expect(el.style.display).toBe('contents');
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
// ITEMS
|
|
49
|
-
test('should have items getter/setter', () => {
|
|
50
|
-
const el = document.createElement('mu-repeat');
|
|
51
|
-
body.appendChild(el);
|
|
52
|
-
el.items = [1, 2, 3];
|
|
53
|
-
expect(el.items).toEqual([1, 2, 3]);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
test('should handle null items', () => {
|
|
57
|
-
const el = document.createElement('mu-repeat');
|
|
58
|
-
body.appendChild(el);
|
|
59
|
-
el.items = null;
|
|
60
|
-
expect(el.items).toEqual([]);
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
// KEY FN
|
|
64
|
-
test('should allow setting keyFn', () => {
|
|
65
|
-
const el = document.createElement('mu-repeat');
|
|
66
|
-
body.appendChild(el);
|
|
67
|
-
el.keyFn = (item) => item.id;
|
|
68
|
-
expect(true).toBe(true);
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
// RENDER ITEM
|
|
72
|
-
test('should allow setting renderItem', () => {
|
|
73
|
-
const el = document.createElement('mu-repeat');
|
|
74
|
-
body.appendChild(el);
|
|
75
|
-
el.renderItem = (item) => `<span>${item}</span>`;
|
|
76
|
-
expect(true).toBe(true);
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
// GET ELEMENT
|
|
80
|
-
test('should have getElement method', () => {
|
|
81
|
-
const el = document.createElement('mu-repeat');
|
|
82
|
-
body.appendChild(el);
|
|
83
|
-
expect(typeof el.getElement).toBe('function');
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
test('getElement returns undefined for unknown key', () => {
|
|
87
|
-
const el = document.createElement('mu-repeat');
|
|
88
|
-
body.appendChild(el);
|
|
89
|
-
expect(el.getElement('unknown')).toBeUndefined();
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
// REFRESH
|
|
93
|
-
test('should have refresh method', () => {
|
|
94
|
-
const el = document.createElement('mu-repeat');
|
|
95
|
-
body.appendChild(el);
|
|
96
|
-
expect(typeof el.refresh).toBe('function');
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
test('refresh should clear innerHTML', () => {
|
|
100
|
-
const el = document.createElement('mu-repeat');
|
|
101
|
-
el.innerHTML = '<div>test</div>';
|
|
102
|
-
body.appendChild(el);
|
|
103
|
-
el.refresh();
|
|
104
|
-
expect(el.innerHTML).toBe('');
|
|
105
|
-
});
|
|
106
|
-
});
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Unit Tests for mu-sidebar Component
|
|
3
|
-
* Target: 49% → 90% coverage
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { describe, test, expect, beforeAll, beforeEach } from 'bun:test';
|
|
7
|
-
import { parseHTML } from 'linkedom';
|
|
8
|
-
|
|
9
|
-
let document, customElements, body;
|
|
10
|
-
let MuSidebar, MuSidebarItem;
|
|
11
|
-
|
|
12
|
-
describe('mu-sidebar Unit Tests', () => {
|
|
13
|
-
|
|
14
|
-
beforeAll(async () => {
|
|
15
|
-
const dom = parseHTML('<!DOCTYPE html><html><body></body></html>');
|
|
16
|
-
document = dom.document;
|
|
17
|
-
customElements = dom.customElements;
|
|
18
|
-
body = document.body;
|
|
19
|
-
|
|
20
|
-
globalThis.window = dom.window;
|
|
21
|
-
globalThis.document = document;
|
|
22
|
-
globalThis.customElements = customElements;
|
|
23
|
-
globalThis.HTMLElement = dom.HTMLElement;
|
|
24
|
-
globalThis.CustomEvent = class CustomEvent extends Event {
|
|
25
|
-
constructor(type, options = {}) { super(type, options); this.detail = options.detail; }
|
|
26
|
-
};
|
|
27
|
-
globalThis.requestAnimationFrame = (cb) => { cb(Date.now()); return 0; };
|
|
28
|
-
|
|
29
|
-
const module = await import('../../src/components/mu-sidebar.js');
|
|
30
|
-
MuSidebar = module.MuSidebar;
|
|
31
|
-
MuSidebarItem = module.MuSidebarItem;
|
|
32
|
-
|
|
33
|
-
MuSidebar.prototype.emit = function (eventName, detail) {
|
|
34
|
-
try { this.dispatchEvent(new Event(eventName, { bubbles: true })); } catch (e) { }
|
|
35
|
-
};
|
|
36
|
-
MuSidebarItem.prototype.emit = function (eventName, detail) {
|
|
37
|
-
try { this.dispatchEvent(new Event(eventName, { bubbles: true })); } catch (e) { }
|
|
38
|
-
};
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
beforeEach(() => { body.innerHTML = ''; });
|
|
42
|
-
|
|
43
|
-
// ============ MuSidebar ============
|
|
44
|
-
|
|
45
|
-
test('mu-sidebar should be registered', () => {
|
|
46
|
-
expect(customElements.get('mu-sidebar')).toBe(MuSidebar);
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
test('mu-sidebar should have correct baseClass', () => {
|
|
50
|
-
expect(MuSidebar.baseClass).toBe('mu-sidebar');
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
test('mu-sidebar should observe open and width', () => {
|
|
54
|
-
expect(MuSidebar.observedAttributes).toContain('open');
|
|
55
|
-
expect(MuSidebar.observedAttributes).toContain('width');
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
test('closed sidebar should have 64px width', () => {
|
|
59
|
-
const el = document.createElement('mu-sidebar');
|
|
60
|
-
body.appendChild(el);
|
|
61
|
-
expect(el.style.width).toBe('64px');
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
test('open sidebar should have custom width', () => {
|
|
65
|
-
const el = document.createElement('mu-sidebar');
|
|
66
|
-
el.setAttribute('open', '');
|
|
67
|
-
body.appendChild(el);
|
|
68
|
-
expect(el.style.width).toBe('250px');
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
test('sidebar should have 100vh height', () => {
|
|
72
|
-
const el = document.createElement('mu-sidebar');
|
|
73
|
-
body.appendChild(el);
|
|
74
|
-
expect(el.style.height).toBe('100vh');
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
test('sidebar should have flex display', () => {
|
|
78
|
-
const el = document.createElement('mu-sidebar');
|
|
79
|
-
body.appendChild(el);
|
|
80
|
-
expect(el.style.display).toBe('flex');
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
test('toggle() should add open attribute', () => {
|
|
84
|
-
const el = document.createElement('mu-sidebar');
|
|
85
|
-
body.appendChild(el);
|
|
86
|
-
el.toggle();
|
|
87
|
-
expect(el.hasAttribute('open')).toBe(true);
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
test('toggle() should remove open attribute if open', () => {
|
|
91
|
-
const el = document.createElement('mu-sidebar');
|
|
92
|
-
el.setAttribute('open', '');
|
|
93
|
-
body.appendChild(el);
|
|
94
|
-
el.toggle();
|
|
95
|
-
expect(el.hasAttribute('open')).toBe(false);
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
// ============ MuSidebarItem ============
|
|
99
|
-
|
|
100
|
-
test('mu-sidebar-item should be registered', () => {
|
|
101
|
-
expect(customElements.get('mu-sidebar-item')).toBe(MuSidebarItem);
|
|
102
|
-
});
|
|
103
|
-
|
|
104
|
-
test('mu-sidebar-item should have correct baseClass', () => {
|
|
105
|
-
expect(MuSidebarItem.baseClass).toBe('mu-sidebar__item');
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
test('sidebar-item should have flex display', () => {
|
|
109
|
-
const el = document.createElement('mu-sidebar-item');
|
|
110
|
-
body.appendChild(el);
|
|
111
|
-
expect(el.style.display).toBe('flex');
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
test('sidebar-item should have pointer cursor', () => {
|
|
115
|
-
const el = document.createElement('mu-sidebar-item');
|
|
116
|
-
body.appendChild(el);
|
|
117
|
-
expect(el.style.cursor).toBe('pointer');
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
test('active sidebar-item should have background', () => {
|
|
121
|
-
const el = document.createElement('mu-sidebar-item');
|
|
122
|
-
el.setAttribute('active', '');
|
|
123
|
-
body.appendChild(el);
|
|
124
|
-
expect(el.style.background).toContain('primary-container');
|
|
125
|
-
});
|
|
126
|
-
});
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Unit Tests for mu-skeleton Component
|
|
3
|
-
* Target: 14.81% → 90% coverage
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { describe, test, expect, beforeAll, beforeEach } from 'bun:test';
|
|
7
|
-
import { parseHTML } from 'linkedom';
|
|
8
|
-
|
|
9
|
-
let document, customElements, body;
|
|
10
|
-
let MuSkeleton;
|
|
11
|
-
|
|
12
|
-
describe('mu-skeleton Unit Tests', () => {
|
|
13
|
-
|
|
14
|
-
beforeAll(async () => {
|
|
15
|
-
const dom = parseHTML('<!DOCTYPE html><html><head></head><body></body></html>');
|
|
16
|
-
document = dom.document;
|
|
17
|
-
customElements = dom.customElements;
|
|
18
|
-
body = document.body;
|
|
19
|
-
|
|
20
|
-
globalThis.window = dom.window;
|
|
21
|
-
globalThis.document = document;
|
|
22
|
-
globalThis.customElements = customElements;
|
|
23
|
-
globalThis.HTMLElement = dom.HTMLElement;
|
|
24
|
-
globalThis.requestAnimationFrame = (cb) => { cb(Date.now()); return 0; };
|
|
25
|
-
|
|
26
|
-
const module = await import('../../src/components/mu-skeleton.js');
|
|
27
|
-
MuSkeleton = module.MuSkeleton;
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
beforeEach(() => { body.innerHTML = ''; });
|
|
31
|
-
|
|
32
|
-
// REGISTRATION
|
|
33
|
-
test('should be registered', () => {
|
|
34
|
-
expect(customElements.get('mu-skeleton')).toBe(MuSkeleton);
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
test('should have correct baseClass', () => {
|
|
38
|
-
expect(MuSkeleton.baseClass).toBe('mu-skeleton');
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
test('should observe correct attributes', () => {
|
|
42
|
-
expect(MuSkeleton.observedAttributes).toContain('variant');
|
|
43
|
-
expect(MuSkeleton.observedAttributes).toContain('width');
|
|
44
|
-
expect(MuSkeleton.observedAttributes).toContain('height');
|
|
45
|
-
expect(MuSkeleton.observedAttributes).toContain('size');
|
|
46
|
-
expect(MuSkeleton.observedAttributes).toContain('lines');
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
// DOM STRUCTURE
|
|
50
|
-
test('should render with base class', () => {
|
|
51
|
-
const el = document.createElement('mu-skeleton');
|
|
52
|
-
body.appendChild(el);
|
|
53
|
-
expect(el.classList.contains('mu-skeleton')).toBe(true);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
test('should have block display', () => {
|
|
57
|
-
const el = document.createElement('mu-skeleton');
|
|
58
|
-
body.appendChild(el);
|
|
59
|
-
expect(el.style.display).toBe('block');
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
// RECT VARIANT (default)
|
|
63
|
-
test('should default to rect variant with 100% width', () => {
|
|
64
|
-
const el = document.createElement('mu-skeleton');
|
|
65
|
-
body.appendChild(el);
|
|
66
|
-
expect(el.style.width).toBe('100%');
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
test('should default to 20px height', () => {
|
|
70
|
-
const el = document.createElement('mu-skeleton');
|
|
71
|
-
body.appendChild(el);
|
|
72
|
-
expect(el.style.height).toBe('20px');
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
test('should have 4px border-radius for rect', () => {
|
|
76
|
-
const el = document.createElement('mu-skeleton');
|
|
77
|
-
body.appendChild(el);
|
|
78
|
-
expect(el.style.borderRadius).toBe('4px');
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
// CIRCLE VARIANT
|
|
82
|
-
test('circle variant should have 50% border-radius', () => {
|
|
83
|
-
const el = document.createElement('mu-skeleton');
|
|
84
|
-
el.setAttribute('variant', 'circle');
|
|
85
|
-
body.appendChild(el);
|
|
86
|
-
expect(el.style.borderRadius).toBe('50%');
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
test('circle variant should use size attribute', () => {
|
|
90
|
-
const el = document.createElement('mu-skeleton');
|
|
91
|
-
el.setAttribute('variant', 'circle');
|
|
92
|
-
el.setAttribute('size', '60px');
|
|
93
|
-
body.appendChild(el);
|
|
94
|
-
expect(el.style.width).toBe('60px');
|
|
95
|
-
expect(el.style.height).toBe('60px');
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
// TEXT VARIANT WITH LINES
|
|
99
|
-
test('text variant with lines > 1 should create line elements', () => {
|
|
100
|
-
const el = document.createElement('mu-skeleton');
|
|
101
|
-
el.setAttribute('variant', 'text');
|
|
102
|
-
el.setAttribute('lines', '3');
|
|
103
|
-
body.appendChild(el);
|
|
104
|
-
const lines = el.querySelectorAll('.mu-skeleton__line');
|
|
105
|
-
expect(lines.length).toBe(3);
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
test('last line in text variant should be 70% width', () => {
|
|
109
|
-
const el = document.createElement('mu-skeleton');
|
|
110
|
-
el.setAttribute('variant', 'text');
|
|
111
|
-
el.setAttribute('lines', '2');
|
|
112
|
-
body.appendChild(el);
|
|
113
|
-
const lines = el.querySelectorAll('.mu-skeleton__line');
|
|
114
|
-
expect(lines[1].style.width).toBe('70%');
|
|
115
|
-
});
|
|
116
|
-
|
|
117
|
-
// CUSTOM DIMENSIONS
|
|
118
|
-
test('should support custom width', () => {
|
|
119
|
-
const el = document.createElement('mu-skeleton');
|
|
120
|
-
el.setAttribute('width', '200px');
|
|
121
|
-
body.appendChild(el);
|
|
122
|
-
expect(el.style.width).toBe('200px');
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
test('should support custom height', () => {
|
|
126
|
-
const el = document.createElement('mu-skeleton');
|
|
127
|
-
el.setAttribute('height', '40px');
|
|
128
|
-
body.appendChild(el);
|
|
129
|
-
expect(el.style.height).toBe('40px');
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
// ANIMATION
|
|
133
|
-
test('should have animation', () => {
|
|
134
|
-
const el = document.createElement('mu-skeleton');
|
|
135
|
-
body.appendChild(el);
|
|
136
|
-
expect(el.style.animation).toContain('mu-skeleton-pulse');
|
|
137
|
-
});
|
|
138
|
-
|
|
139
|
-
// KEYFRAMES INJECTION
|
|
140
|
-
test('should inject keyframes style element', () => {
|
|
141
|
-
const el = document.createElement('mu-skeleton');
|
|
142
|
-
body.appendChild(el);
|
|
143
|
-
expect(document.getElementById('mu-skeleton-styles')).not.toBeNull();
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
// IDEMPOTENT
|
|
147
|
-
test('should be idempotent', () => {
|
|
148
|
-
const el = document.createElement('mu-skeleton');
|
|
149
|
-
body.appendChild(el);
|
|
150
|
-
el.render();
|
|
151
|
-
expect(el.style.animation).toContain('mu-skeleton-pulse');
|
|
152
|
-
});
|
|
153
|
-
|
|
154
|
-
// UPDATE
|
|
155
|
-
test('update should call render', () => {
|
|
156
|
-
const el = document.createElement('mu-skeleton');
|
|
157
|
-
body.appendChild(el);
|
|
158
|
-
el.update('width', '300px', '100%');
|
|
159
|
-
// Idempotent - won't re-render if already has animation
|
|
160
|
-
expect(el.style.display).toBe('block');
|
|
161
|
-
});
|
|
162
|
-
});
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Unit Tests for mu-stack Layout Component
|
|
3
|
-
* Target: 27% → 90% coverage
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { describe, test, expect, beforeAll, beforeEach } from 'bun:test';
|
|
7
|
-
import { parseHTML } from 'linkedom';
|
|
8
|
-
|
|
9
|
-
let document, customElements, body;
|
|
10
|
-
let MuStack;
|
|
11
|
-
|
|
12
|
-
describe('mu-stack Unit Tests', () => {
|
|
13
|
-
|
|
14
|
-
beforeAll(async () => {
|
|
15
|
-
const dom = parseHTML('<!DOCTYPE html><html><body></body></html>');
|
|
16
|
-
document = dom.document;
|
|
17
|
-
customElements = dom.customElements;
|
|
18
|
-
body = document.body;
|
|
19
|
-
|
|
20
|
-
globalThis.window = dom.window;
|
|
21
|
-
globalThis.document = document;
|
|
22
|
-
globalThis.customElements = customElements;
|
|
23
|
-
globalThis.HTMLElement = dom.HTMLElement;
|
|
24
|
-
globalThis.requestAnimationFrame = (cb) => { cb(Date.now()); return 0; };
|
|
25
|
-
|
|
26
|
-
const module = await import('../../src/components/mu-stack.js');
|
|
27
|
-
MuStack = module.MuStack;
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
beforeEach(() => { body.innerHTML = ''; });
|
|
31
|
-
|
|
32
|
-
// REGISTRATION
|
|
33
|
-
test('should be registered', () => {
|
|
34
|
-
expect(customElements.get('mu-stack')).toBe(MuStack);
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
test('should have correct baseClass', () => {
|
|
38
|
-
expect(MuStack.baseClass).toBe('mu-stack');
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
test('should observe layout attributes', () => {
|
|
42
|
-
expect(MuStack.observedAttributes).toContain('direction');
|
|
43
|
-
expect(MuStack.observedAttributes).toContain('gap');
|
|
44
|
-
expect(MuStack.observedAttributes).toContain('align');
|
|
45
|
-
expect(MuStack.observedAttributes).toContain('justify');
|
|
46
|
-
expect(MuStack.observedAttributes).toContain('wrap');
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
// DISPLAY
|
|
50
|
-
test('should have display flex', () => {
|
|
51
|
-
const el = document.createElement('mu-stack');
|
|
52
|
-
body.appendChild(el);
|
|
53
|
-
expect(el.style.display).toBe('flex');
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
// DIRECTION
|
|
57
|
-
test('should default to column direction', () => {
|
|
58
|
-
const el = document.createElement('mu-stack');
|
|
59
|
-
body.appendChild(el);
|
|
60
|
-
expect(el.style.flexDirection).toBe('column');
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
test('should support row direction', () => {
|
|
64
|
-
const el = document.createElement('mu-stack');
|
|
65
|
-
el.setAttribute('direction', 'row');
|
|
66
|
-
body.appendChild(el);
|
|
67
|
-
expect(el.style.flexDirection).toBe('row');
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
// GAP
|
|
71
|
-
test('should support xs gap', () => {
|
|
72
|
-
const el = document.createElement('mu-stack');
|
|
73
|
-
el.setAttribute('gap', 'xs');
|
|
74
|
-
body.appendChild(el);
|
|
75
|
-
expect(el.style.gap).toContain('4px');
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
test('should support sm gap', () => {
|
|
79
|
-
const el = document.createElement('mu-stack');
|
|
80
|
-
el.setAttribute('gap', 'sm');
|
|
81
|
-
body.appendChild(el);
|
|
82
|
-
expect(el.style.gap).toContain('8px');
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
test('should support lg gap', () => {
|
|
86
|
-
const el = document.createElement('mu-stack');
|
|
87
|
-
el.setAttribute('gap', 'lg');
|
|
88
|
-
body.appendChild(el);
|
|
89
|
-
expect(el.style.gap).toContain('24px');
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
test('should support custom gap value', () => {
|
|
93
|
-
const el = document.createElement('mu-stack');
|
|
94
|
-
el.setAttribute('gap', '12px');
|
|
95
|
-
body.appendChild(el);
|
|
96
|
-
expect(el.style.gap).toBe('12px');
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
// ALIGN
|
|
100
|
-
test('should default to stretch align', () => {
|
|
101
|
-
const el = document.createElement('mu-stack');
|
|
102
|
-
body.appendChild(el);
|
|
103
|
-
expect(el.style.alignItems).toBe('stretch');
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
test('should support center align', () => {
|
|
107
|
-
const el = document.createElement('mu-stack');
|
|
108
|
-
el.setAttribute('align', 'center');
|
|
109
|
-
body.appendChild(el);
|
|
110
|
-
expect(el.style.alignItems).toBe('center');
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
// JUSTIFY
|
|
114
|
-
test('should support center justify', () => {
|
|
115
|
-
const el = document.createElement('mu-stack');
|
|
116
|
-
el.setAttribute('justify', 'center');
|
|
117
|
-
body.appendChild(el);
|
|
118
|
-
expect(el.style.justifyContent).toBe('center');
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
// WRAP
|
|
122
|
-
test('should default to nowrap', () => {
|
|
123
|
-
const el = document.createElement('mu-stack');
|
|
124
|
-
body.appendChild(el);
|
|
125
|
-
expect(el.style.flexWrap).toBe('nowrap');
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
test('should support wrap attribute', () => {
|
|
129
|
-
const el = document.createElement('mu-stack');
|
|
130
|
-
el.setAttribute('wrap', '');
|
|
131
|
-
body.appendChild(el);
|
|
132
|
-
expect(el.style.flexWrap).toBe('wrap');
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
// UPDATE
|
|
136
|
-
test('update should re-apply styles', () => {
|
|
137
|
-
const el = document.createElement('mu-stack');
|
|
138
|
-
body.appendChild(el);
|
|
139
|
-
el.setAttribute('direction', 'row');
|
|
140
|
-
el.update('direction', 'row', 'column');
|
|
141
|
-
expect(el.style.flexDirection).toBe('row');
|
|
142
|
-
});
|
|
143
|
-
});
|