Skip to content

Commit e9a5718

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

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
@@ -3,9 +3,9 @@ import { fixtureSync, nextFrame, nextResize } 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 type { DashboardSection } from '../vaadin-dashboard-section.js';
8-
import type { DashboardWidget } from '../vaadin-dashboard-widget.js';
6+
import { DashboardLayout } from '../vaadin-dashboard-layout.js';
7+
import { DashboardSection } from '../vaadin-dashboard-section.js';
8+
import { DashboardWidget } from '../vaadin-dashboard-widget.js';
99
import {
1010
assertHeadingLevel,
1111
expectLayout,
@@ -621,25 +621,30 @@ describe('dashboard layout', () => {
621621
});
622622

623623
describe('root heading level', () => {
624-
let dashboard: DashboardLayout;
624+
let dashboardLayout: DashboardLayout;
625+
let newDashboardLayout: DashboardLayout;
625626
let section: DashboardSection;
626627
let widget: DashboardWidget;
627628
let nestedWidget: DashboardWidget;
628629

629630
beforeEach(async () => {
630-
dashboard = fixtureSync(`
631-
<vaadin-dashboard-layout>
632-
<vaadin-dashboard-widget widget-title="Widget"></vaadin-dashboard-widget>
633-
<vaadin-dashboard-section section-title="Section">
634-
<vaadin-dashboard-widget widget-title="Nested Widget"></vaadin-dashboard-widget>
635-
</vaadin-dashboard-section>
636-
</vaadin-dashboard-layout>
637-
`);
631+
const container = fixtureSync(`
632+
<div>
633+
<vaadin-dashboard-layout id="layout1">
634+
<vaadin-dashboard-widget widget-title="Widget"></vaadin-dashboard-widget>
635+
<vaadin-dashboard-section section-title="Section">
636+
<vaadin-dashboard-widget widget-title="Nested Widget"></vaadin-dashboard-widget>
637+
</vaadin-dashboard-section>
638+
</vaadin-dashboard-layout>
639+
<vaadin-dashboard-layout id="layout2" root-heading-level="3"></vaadin-dashboard-layout>
640+
</div>
641+
`);
638642
await nextFrame();
639-
await nextResize(dashboard);
640-
widget = dashboard.querySelector('vaadin-dashboard-widget') as DashboardWidget;
641-
section = dashboard.querySelector('vaadin-dashboard-section') as DashboardSection;
643+
dashboardLayout = container.querySelector('#layout1') as DashboardLayout;
644+
widget = dashboardLayout.querySelector('vaadin-dashboard-widget') as DashboardWidget;
645+
section = dashboardLayout.querySelector('vaadin-dashboard-section') as DashboardSection;
642646
nestedWidget = section.querySelector('vaadin-dashboard-widget') as DashboardWidget;
647+
newDashboardLayout = container.querySelector('#layout2') as DashboardLayout;
643648
});
644649

645650
function assertHeadingLevels(expectedHeadingLevel: number) {
@@ -653,31 +658,75 @@ describe('root heading level', () => {
653658
});
654659

655660
it('should use custom title heading level when set on dashboard layout', async () => {
656-
dashboard.rootHeadingLevel = 4;
661+
dashboardLayout.rootHeadingLevel = 4;
657662
await nextFrame();
658663
assertHeadingLevels(4);
659664
});
660665

661666
it('should revert to default title heading level (2) when set to null', async () => {
662-
dashboard.rootHeadingLevel = 4;
667+
dashboardLayout.rootHeadingLevel = 4;
663668
await nextFrame();
664-
dashboard.rootHeadingLevel = null;
669+
dashboardLayout.rootHeadingLevel = null;
665670
await nextFrame();
666671
assertHeadingLevels(2);
667672
});
668673

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

‎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)