Skip to content

Commit a0088af

Browse files
ugur-vaadinugur-vaadin
committed
test: move section tests, remove duplicates, make all elements custom
1 parent fa29c2e commit a0088af

File tree

2 files changed

+71
-118
lines changed

2 files changed

+71
-118
lines changed

‎packages/dashboard/test/dashboard-layout.test.ts‎

Lines changed: 70 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import '../vaadin-dashboard-layout.js';
44
import '../vaadin-dashboard-section.js';
55
import '../vaadin-dashboard-widget.js';
66
import '@vaadin/vaadin-lumo-styles/spacing.js';
7-
import type { DashboardLayout } from '../vaadin-dashboard-layout.js';
8-
import type { DashboardSection } from '../vaadin-dashboard-section.js';
9-
import type { DashboardWidget } from '../vaadin-dashboard-widget.js';
7+
import { DashboardLayout } from '../vaadin-dashboard-layout.js';
8+
import { DashboardSection } from '../vaadin-dashboard-section.js';
9+
import { DashboardWidget } from '../vaadin-dashboard-widget.js';
1010
import {
1111
assertHeadingLevel,
1212
expectLayout,
@@ -618,25 +618,30 @@ describe('dashboard layout', () => {
618618
});
619619

620620
describe('root heading level', () => {
621-
let dashboard: DashboardLayout;
621+
let dashboardLayout: DashboardLayout;
622+
let newDashboardLayout: DashboardLayout;
622623
let section: DashboardSection;
623624
let widget: DashboardWidget;
624625
let nestedWidget: DashboardWidget;
625626

626627
beforeEach(async () => {
627-
dashboard = fixtureSync(`
628-
<vaadin-dashboard-layout>
629-
<vaadin-dashboard-widget widget-title="Widget"></vaadin-dashboard-widget>
630-
<vaadin-dashboard-section section-title="Section">
631-
<vaadin-dashboard-widget widget-title="Nested Widget"></vaadin-dashboard-widget>
632-
</vaadin-dashboard-section>
633-
</vaadin-dashboard-layout>
634-
`);
628+
const container = fixtureSync(`
629+
<div>
630+
<vaadin-dashboard-layout id="layout1">
631+
<vaadin-dashboard-widget widget-title="Widget"></vaadin-dashboard-widget>
632+
<vaadin-dashboard-section section-title="Section">
633+
<vaadin-dashboard-widget widget-title="Nested Widget"></vaadin-dashboard-widget>
634+
</vaadin-dashboard-section>
635+
</vaadin-dashboard-layout>
636+
<vaadin-dashboard-layout id="layout2" root-heading-level="3"></vaadin-dashboard-layout>
637+
</div>
638+
`);
635639
await nextFrame();
636-
await nextResize(dashboard);
637-
widget = dashboard.querySelector('vaadin-dashboard-widget') as DashboardWidget;
638-
section = dashboard.querySelector('vaadin-dashboard-section') as DashboardSection;
640+
dashboardLayout = container.querySelector('#layout1') as DashboardLayout;
641+
widget = dashboardLayout.querySelector('vaadin-dashboard-widget') as DashboardWidget;
642+
section = dashboardLayout.querySelector('vaadin-dashboard-section') as DashboardSection;
639643
nestedWidget = section.querySelector('vaadin-dashboard-widget') as DashboardWidget;
644+
newDashboardLayout = container.querySelector('#layout2') as DashboardLayout;
640645
});
641646

642647
function assertHeadingLevels(expectedHeadingLevel: number) {
@@ -650,31 +655,75 @@ describe('root heading level', () => {
650655
});
651656

652657
it('should use custom title heading level when set on dashboard layout', async () => {
653-
dashboard.rootHeadingLevel = 4;
658+
dashboardLayout.rootHeadingLevel = 4;
654659
await nextFrame();
655660
assertHeadingLevels(4);
656661
});
657662

658663
it('should revert to default title heading level (2) when set to null', async () => {
659-
dashboard.rootHeadingLevel = 4;
664+
dashboardLayout.rootHeadingLevel = 4;
660665
await nextFrame();
661-
dashboard.rootHeadingLevel = null;
666+
dashboardLayout.rootHeadingLevel = null;
662667
await nextFrame();
663668
assertHeadingLevels(2);
664669
});
665670

666671
it('should update heading levels for newly added components', async () => {
667-
dashboard.rootHeadingLevel = 3;
672+
dashboardLayout.rootHeadingLevel = 3;
668673
await nextFrame();
669674
const newWidget = document.createElement('vaadin-dashboard-widget');
670-
dashboard.appendChild(newWidget);
675+
dashboardLayout.appendChild(newWidget);
671676
const newSection = document.createElement('vaadin-dashboard-section');
672677
const nestedInNewSection = document.createElement('vaadin-dashboard-widget');
673678
newSection.appendChild(nestedInNewSection);
674-
dashboard.appendChild(newSection);
679+
dashboardLayout.appendChild(newSection);
675680
await nextFrame();
676681
assertHeadingLevel(newWidget, 3);
677682
assertHeadingLevel(newSection, 3);
678683
assertHeadingLevel(nestedInNewSection, 4);
679684
});
685+
686+
describe('moving between parents', () => {
687+
it('should update heading level when moved to another dashboard layout', async () => {
688+
newDashboardLayout.appendChild(section);
689+
await nextFrame();
690+
assertHeadingLevel(section, 3);
691+
assertHeadingLevel(nestedWidget, 4);
692+
});
693+
694+
it('should update heading level when a new widget is added', async () => {
695+
const newWidget = document.createElement('vaadin-dashboard-widget');
696+
newWidget.widgetTitle = 'New Widget';
697+
section.appendChild(newWidget);
698+
await nextFrame();
699+
assertHeadingLevel(newWidget, 3);
700+
newDashboardLayout.appendChild(section);
701+
await nextFrame();
702+
assertHeadingLevel(newWidget, 4);
703+
});
704+
});
705+
706+
it('should update heading level when custom elements are used', async () => {
707+
class CustomLayout extends DashboardLayout {}
708+
customElements.define('custom-dashboard-layout', CustomLayout);
709+
class CustomSection extends DashboardSection {}
710+
customElements.define('custom-dashboard-section', CustomSection);
711+
class CustomWidget extends DashboardWidget {}
712+
customElements.define('custom-dashboard-widget', CustomWidget);
713+
const customLayout = fixtureSync(`
714+
<custom-dashboard-layout root-heading-level="5">
715+
<custom-dashboard-widget widget-title="Custom Widget"></custom-dashboard-widget>
716+
<custom-dashboard-section section-title="Custom Section">
717+
<custom-dashboard-widget widget-title="Custom Nested Widget"></custom-dashboard-widget>
718+
</custom-dashboard-section>
719+
</custom-dashboard-layout>
720+
`) as CustomLayout;
721+
await nextFrame();
722+
const widget = customLayout.querySelector('custom-dashboard-widget') as CustomWidget;
723+
const section = customLayout.querySelector('custom-dashboard-section') as CustomSection;
724+
const nestedWidget = section.querySelector('custom-dashboard-widget') as CustomWidget;
725+
assertHeadingLevel(widget, 5);
726+
assertHeadingLevel(section, 5);
727+
assertHeadingLevel(nestedWidget, 6);
728+
});
680729
});

‎packages/dashboard/test/dashboard-section.test.ts‎

Lines changed: 1 addition & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@ import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
33
import '../vaadin-dashboard-layout.js';
44
import '../vaadin-dashboard-section.js';
55
import '../vaadin-dashboard-widget.js';
6-
import type { DashboardLayout } from '../vaadin-dashboard-layout.js';
7-
import { DashboardSection } from '../vaadin-dashboard-section.js';
8-
import type { DashboardWidget } from '../vaadin-dashboard-widget.js';
6+
import type { DashboardSection } from '../vaadin-dashboard-section.js';
97
import {
10-
assertHeadingLevel,
118
getDraggable,
129
getMoveApplyButton,
1310
getMoveBackwardButton,
@@ -117,97 +114,4 @@ describe('dashboard section', () => {
117114
expect(getMoveBackwardButton(section)?.getAttribute('title')).to.eql('baz');
118115
});
119116
});
120-
121-
describe('title heading level', () => {
122-
describe('with dashboard layout parent', () => {
123-
let layout: DashboardLayout;
124-
let section: DashboardSection;
125-
let nestedWidget: DashboardWidget;
126-
127-
beforeEach(async () => {
128-
layout = fixtureSync(`
129-
<vaadin-dashboard-layout>
130-
<vaadin-dashboard-section section-title="Section">
131-
<vaadin-dashboard-widget widget-title="Nested Widget"></vaadin-dashboard-widget>
132-
</vaadin-dashboard-section>
133-
</vaadin-dashboard-layout>
134-
`);
135-
section = layout.querySelector('vaadin-dashboard-section') as DashboardSection;
136-
nestedWidget = section.querySelector('vaadin-dashboard-widget') as DashboardWidget;
137-
await nextFrame();
138-
});
139-
140-
it('should have title heading level (2) by default', () => {
141-
assertHeadingLevel(section, 2);
142-
});
143-
144-
it('should update heading level when parent dashboard layout changes', async () => {
145-
layout.rootHeadingLevel = 4;
146-
await nextFrame();
147-
assertHeadingLevel(section, 4);
148-
assertHeadingLevel(nestedWidget, 5);
149-
});
150-
});
151-
152-
describe('moving between parents', () => {
153-
let newLayout: DashboardLayout;
154-
let section: DashboardSection;
155-
let nestedWidget: DashboardWidget;
156-
157-
beforeEach(async () => {
158-
const container = fixtureSync(`
159-
<div>
160-
<vaadin-dashboard-layout id="layout1" root-heading-level="1">
161-
<vaadin-dashboard-section section-title="Section">
162-
<vaadin-dashboard-widget widget-title="Nested Widget"></vaadin-dashboard-widget>
163-
</vaadin-dashboard-section>
164-
</vaadin-dashboard-layout>
165-
<vaadin-dashboard-layout id="layout2" root-heading-level="3"></vaadin-dashboard-layout>
166-
</div>
167-
`);
168-
const initialLayout = container.querySelector('#layout1') as DashboardLayout;
169-
newLayout = container.querySelector('#layout2') as DashboardLayout;
170-
section = initialLayout.querySelector('vaadin-dashboard-section') as DashboardSection;
171-
nestedWidget = section.querySelector('vaadin-dashboard-widget') as DashboardWidget;
172-
await nextFrame();
173-
});
174-
175-
it('should update heading level when moved to another dashboard layout', async () => {
176-
newLayout.appendChild(section);
177-
await nextFrame();
178-
assertHeadingLevel(section, 3);
179-
assertHeadingLevel(nestedWidget, 4);
180-
});
181-
182-
it('should update heading level when a new widget is added', async () => {
183-
const newWidget = document.createElement('vaadin-dashboard-widget');
184-
newWidget.widgetTitle = 'New Widget';
185-
section.appendChild(newWidget);
186-
await nextFrame();
187-
assertHeadingLevel(newWidget, 2);
188-
newLayout.appendChild(section);
189-
await nextFrame();
190-
assertHeadingLevel(newWidget, 4);
191-
});
192-
});
193-
194-
describe('custom section', () => {
195-
it('should update heading level when a custom section is used', async () => {
196-
class CustomSection extends DashboardSection {}
197-
customElements.define('custom-dashboard-section', CustomSection);
198-
const layout = fixtureSync(`
199-
<vaadin-dashboard-layout root-heading-level="5">
200-
<custom-dashboard-section section-title="Custom Section">
201-
<vaadin-dashboard-widget widget-title="Widget in Custom"></vaadin-dashboard-widget>
202-
</custom-dashboard-section>
203-
</vaadin-dashboard-layout>
204-
`) as DashboardLayout;
205-
await nextFrame();
206-
const customSection = layout.querySelector('custom-dashboard-section') as DashboardSection;
207-
const widget = customSection.querySelector('vaadin-dashboard-widget') as DashboardWidget;
208-
assertHeadingLevel(customSection, 5);
209-
assertHeadingLevel(widget, 6);
210-
});
211-
});
212-
});
213117
});

0 commit comments

Comments
 (0)