@schukai/monster 4.145.3 → 4.147.0

package/test/cases/components/navigation/table-of-content.mjs

@@ -66,6 +66,7 @@ describe('TableOfContent', function () {
 		const heading = document.createElement('h2');
 		const paragraph = document.createElement('p');
 
+		tableOfContent.setAttribute('data-monster-option-follow-scroll', 'true');
 		heading.textContent = 'Introduction';
 		paragraph.textContent = 'Content';
 		tableOfContent.appendChild(heading);
@@ -123,4 +124,123 @@ describe('TableOfContent', function () {
 
 		await waitForCondition(() => navigation.style.top === '170px');
 	});
+
+	it('should keep the navigation static by default', async function () {
+		const target = document.getElementById('target');
+		const outerScroller = document.createElement('div');
+		const tableOfContent = document.createElement('monster-table-of-content');
+		const heading = document.createElement('h2');
+
+		heading.textContent = 'Introduction';
+		tableOfContent.appendChild(heading);
+
+		Object.defineProperties(outerScroller, {
+			clientHeight: { configurable: true, value: 200 },
+			scrollHeight: { configurable: true, value: 600 },
+			clientWidth: { configurable: true, value: 300 },
+			scrollWidth: { configurable: true, value: 300 },
+		});
+
+		outerScroller.style.overflowY = 'auto';
+		outerScroller.appendChild(tableOfContent);
+		target.appendChild(outerScroller);
+
+		const navigation = tableOfContent.shadowRoot.querySelector('.navigation');
+
+		await waitForCondition(() => navigation.querySelectorAll('.heading-strip').length === 1);
+
+		outerScroller.scrollTop = 120;
+		outerScroller.dispatchEvent(new window.Event('scroll'));
+
+		await new Promise((resolve) => setTimeout(resolve, 50));
+
+		expect(tableOfContent.getOption('followScroll')).to.equal(false);
+		expect(navigation.classList.contains('follow-scroll')).to.equal(false);
+		expect(navigation.style.top).to.equal('');
+	});
+
+	it('should enable scroll following at runtime', async function () {
+		const target = document.getElementById('target');
+		const outerScroller = document.createElement('div');
+		const tableOfContent = document.createElement('monster-table-of-content');
+		const heading = document.createElement('h2');
+
+		heading.textContent = 'Introduction';
+		tableOfContent.appendChild(heading);
+
+		Object.defineProperties(outerScroller, {
+			clientHeight: { configurable: true, value: 200 },
+			scrollHeight: { configurable: true, value: 600 },
+			clientWidth: { configurable: true, value: 300 },
+			scrollWidth: { configurable: true, value: 300 },
+		});
+
+		outerScroller.style.overflowY = 'auto';
+		outerScroller.getBoundingClientRect = () => ({
+			top: 0,
+			bottom: 200,
+			left: 0,
+			right: 300,
+			width: 300,
+			height: 200,
+			x: 0,
+			y: 0,
+		});
+
+		tableOfContent.getBoundingClientRect = () => ({
+			top: outerScroller.scrollTop ? -20 : 100,
+			bottom: outerScroller.scrollTop ? 80 : 200,
+			left: 0,
+			right: 300,
+			width: 300,
+			height: 100,
+			x: 0,
+			y: outerScroller.scrollTop ? -20 : 100,
+		});
+
+		outerScroller.appendChild(tableOfContent);
+		target.appendChild(outerScroller);
+
+		const navigation = tableOfContent.shadowRoot.querySelector('.navigation');
+
+		await waitForCondition(() => navigation.querySelectorAll('.heading-strip').length === 1);
+
+		tableOfContent.setOption('followScroll', true);
+		await waitForCondition(() => navigation.style.top === '50px');
+
+		outerScroller.scrollTop = 120;
+		outerScroller.dispatchEvent(new window.Event('scroll'));
+
+		await waitForCondition(() => navigation.style.top === '170px');
+		expect(navigation.classList.contains('follow-scroll')).to.equal(true);
+	});
+
+	it('should render long heading lists inside a constrained scrollable list', async function () {
+		const target = document.getElementById('target');
+		const tableOfContent = document.createElement('monster-table-of-content');
+
+		for (let i = 1; i <= 100; i++) {
+			const heading = document.createElement('h2');
+			heading.textContent = `Section ${i}`;
+			tableOfContent.appendChild(heading);
+		}
+
+		target.appendChild(tableOfContent);
+
+		const navigationList = tableOfContent.shadowRoot.querySelector(
+			'[data-monster-role="navigation-list"]',
+		);
+		const cssText = Array.from(tableOfContent.constructor.getCSSStyleSheet())
+			.map((styleSheet) =>
+				Array.from(styleSheet.cssRules)
+					.map((rule) => rule.cssText)
+					.join('\n'),
+			)
+			.join('\n');
+
+		await waitForCondition(() => navigationList.querySelectorAll('li').length === 100);
+
+		expect(cssText).to.contain('max-height');
+		expect(cssText).to.contain('overflow-y: auto');
+	});
 });