@schukai/monster 4.139.0 → 4.140.0

package/test/cases/components/layout/tabs.mjs

@@ -61,6 +61,90 @@ let htmlOverflow = `
     </monster-tabs>
 `;
 
+// language=html
+let htmlAvailability = `
+    <monster-tabs id="availability-tabs">
+        <div id="overview-panel" data-monster-name="overview" data-monster-button-label="Overview">
+            Overview content
+        </div>
+        <div id="vacation-panel" data-monster-name="vacation" data-monster-button-label="Vacation" data-monster-tab-available="false">
+            Vacation content
+        </div>
+        <div id="details-panel" data-monster-name="details" data-monster-button-label="Details">
+            Details content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlActiveUnavailable = `
+    <monster-tabs id="fallback-tabs">
+        <div id="first-panel" data-monster-name="first" data-monster-button-label="First">
+            First content
+        </div>
+        <div id="second-panel" data-monster-name="second" data-monster-button-label="Second" class="active">
+            Second content
+        </div>
+        <div id="third-panel" data-monster-name="third" data-monster-button-label="Third">
+            Third content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlRemoveFallback = `
+    <monster-tabs id="remove-fallback-tabs" data-monster-options='{"features":{"openFirst":false}}'>
+        <div id="remove-first-panel" data-monster-name="first" data-monster-button-label="First">
+            First content
+        </div>
+        <div id="remove-second-panel" data-monster-name="second" data-monster-button-label="Second" class="active">
+            Second content
+        </div>
+        <div id="remove-third-panel" data-monster-name="third" data-monster-button-label="Third">
+            Third content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlDisabled = `
+    <monster-tabs id="disabled-tabs">
+        <div id="enabled-panel" data-monster-name="enabled" data-monster-button-label="Enabled">
+            Enabled content
+        </div>
+        <div id="disabled-panel"
+             data-monster-name="disabled"
+             data-monster-button-label="Disabled"
+             data-monster-tab-disabled="true"
+             data-monster-tab-disabled-reason="Only available for employees">
+            Disabled content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlMetadata = `
+    <monster-tabs id="metadata-tabs">
+        <div id="metadata-panel"
+             data-monster-name="metadata"
+             data-monster-button-label="Metadata"
+             data-monster-tab-kind="profile"
+             data-monster-tab-priority="10"
+             data-monster-tab-group="main">
+            Metadata content
+        </div>
+    </monster-tabs>
+`;
+
+// language=html
+let htmlNoDerivedLabel = `
+    <monster-tabs id="label-tabs" data-monster-options='{"features":{"deriveLabelFromContent":false}}'>
+        <div id="content-panel">
+            Overview about your profile and vacation configuration
+        </div>
+    </monster-tabs>
+`;
+
 let Tabs;
 let restoreBoundingClientRect = null;
 let restoreResizeObserver = null;
@@ -407,6 +491,245 @@ describe('Tabs', function () {
 			});
         });
 
+		it('should ignore unavailable panels when creating tabs and buttons', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlAvailability;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('availability-tabs');
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelectorAll('button[part=button]').length === 2 &&
+					tabs.getActiveTab() === 'overview'
+				);
+			}).then(() => {
+				try {
+					const tabs = document.getElementById('availability-tabs');
+					const vacation = document.getElementById('vacation-panel');
+					const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
+
+					expect(tabs.getTabs().length).to.equal(2);
+					expect(tabs.getTabs().includes(vacation)).to.equal(false);
+					expect(tabs.shadowRoot.querySelector(
+						`button[part=button][data-monster-tab-reference="${vacation.getAttribute('id')}"]`,
+					)).to.equal(null);
+					expect(buttons[0].textContent.trim()).to.equal('Overview');
+					expect(buttons[1].textContent.trim()).to.equal('Details');
+					expect(tabs.getActiveTab()).to.equal('overview');
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}).catch(done);
+		});
+
+		it('should ignore unavailable tabs in activeTab and rebuild when they become available', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlAvailability;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('availability-tabs');
+				return tabs instanceof Tabs && tabs.getActiveTab() === 'overview';
+			}).then(() => {
+				const tabs = document.getElementById('availability-tabs');
+				const vacation = document.getElementById('vacation-panel');
+				let availabilityEvent = null;
+				tabs.addEventListener('monster-tab-availability-changed', (event) => {
+					availabilityEvent = event;
+				});
+
+				tabs.activeTab('vacation');
+				expect(tabs.getActiveTab()).to.equal('overview');
+
+				vacation.setAttribute('data-monster-tab-available', 'true');
+
+				return waitForCondition(() => {
+					return tabs.shadowRoot.querySelectorAll('button[part=button]').length === 3;
+				}).then(() => {
+					try {
+						expect(availabilityEvent).to.not.equal(null);
+						expect(availabilityEvent.detail.name).to.equal('vacation');
+						expect(availabilityEvent.detail.available).to.equal(true);
+
+						tabs.activeTab('vacation');
+						expect(tabs.getActiveTab()).to.equal('vacation');
+						done();
+					} catch (e) {
+						done(e);
+					}
+				}, 100);
+			}).catch(done);
+		});
+
+		it('should fallback when the active tab becomes unavailable', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlActiveUnavailable;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('fallback-tabs');
+				return tabs instanceof Tabs && tabs.getActiveTab() === 'second';
+			}).then(() => {
+				const tabs = document.getElementById('fallback-tabs');
+				const activePanel = document.getElementById('second-panel');
+				activePanel.setAttribute('data-monster-tab-available', 'false');
+
+				return waitForCondition(() => tabs.getActiveTab() === 'first').then(() => {
+					try {
+						expect(activePanel.classList.contains('active')).to.equal(false);
+						expect(tabs.shadowRoot.querySelectorAll('button[part=button]').length).to.equal(2);
+						done();
+					} catch (e) {
+						done(e);
+					}
+				});
+			}).catch(done);
+		});
+
+		it('should fallback when the active tab is removed directly', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlRemoveFallback;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('remove-fallback-tabs');
+				return (
+					tabs instanceof Tabs &&
+					tabs.getActiveTab() === 'second' &&
+					tabs.shadowRoot.querySelectorAll('button[part=button]').length === 3
+				);
+			}).then(() => {
+				const tabs = document.getElementById('remove-fallback-tabs');
+				setTimeout(() => {
+					document.getElementById('remove-second-panel').remove();
+
+					waitForCondition(() => tabs.getActiveTab() === 'first').then(() => {
+						try {
+							expect(tabs.shadowRoot.querySelectorAll('button[part=button]').length).to.equal(2);
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}).catch(done);
+				});
+			}).catch(done);
+		});
+
+		it('should keep disabled tabs visible but not activatable', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlDisabled;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('disabled-tabs');
+				const disabledPanel = document.getElementById('disabled-panel');
+				const disabledButton = tabs?.shadowRoot?.querySelector(
+					`button[part=button][data-monster-tab-reference="${disabledPanel?.getAttribute('id')}"]`,
+				);
+				return (
+					tabs instanceof Tabs &&
+					disabledButton instanceof HTMLButtonElement &&
+					tabs.getActiveTab() === 'enabled'
+				);
+			}).then(() => {
+				try {
+					const tabs = document.getElementById('disabled-tabs');
+					const disabledPanel = document.getElementById('disabled-panel');
+					const disabledButton = tabs.shadowRoot.querySelector(
+						`button[part=button][data-monster-tab-reference="${disabledPanel.getAttribute('id')}"]`,
+					);
+
+					expect(disabledButton.disabled).to.equal(true);
+					expect(disabledButton.getAttribute('title')).to.equal('Only available for employees');
+					tabs.activeTab('disabled');
+					expect(tabs.getActiveTab()).to.equal('enabled');
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}).catch(done);
+		});
+
+		it('should expose refresh, sync, hide and show APIs', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlAvailability;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('availability-tabs');
+				return tabs instanceof Tabs && tabs.shadowRoot.querySelectorAll('button[part=button]').length === 2;
+			}).then(() => {
+				const tabs = document.getElementById('availability-tabs');
+
+				tabs.showTab('vacation');
+				return tabs.refreshTabs().then((result) => {
+					expect(result).to.equal(tabs);
+					expect(tabs.getTabs().length).to.equal(3);
+
+					tabs.hideTab('vacation');
+					return tabs.syncTabs();
+				}).then((result) => {
+					try {
+						expect(result).to.equal(tabs);
+						expect(tabs.getTabs().length).to.equal(2);
+						expect(document.getElementById('vacation-panel').getAttribute('data-monster-tab-available')).to.equal('false');
+						done();
+					} catch (e) {
+						done(e);
+					}
+				});
+			}).catch(done);
+		});
+
+		it('should not derive labels from content when disabled by option', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlNoDerivedLabel;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('label-tabs');
+				return tabs instanceof Tabs && tabs.shadowRoot.querySelector('button[part=button]') !== null;
+			}).then(() => {
+				try {
+					const tabs = document.getElementById('label-tabs');
+					const button = tabs.shadowRoot.querySelector('button[part=button]');
+					expect(button.textContent.trim()).to.equal('New Tab');
+					expect(document.getElementById('content-panel').hasAttribute('data-monster-button-label')).to.equal(false);
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}).catch(done);
+		});
+
+		it('should include stable names and metadata in tab events and buttons', function (done) {
+			let mocks = document.getElementById('mocks');
+			mocks.innerHTML = htmlMetadata;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById('metadata-tabs');
+				return tabs instanceof Tabs && tabs.shadowRoot.querySelector('button[part=button]') !== null;
+			}).then(() => {
+				try {
+					const tabs = document.getElementById('metadata-tabs');
+					const button = tabs.shadowRoot.querySelector('button[part=button]');
+					let changedEvent = null;
+					tabs.addEventListener('monster-tab-changed', (event) => {
+						changedEvent = event;
+					});
+
+					expect(button.getAttribute('data-monster-tab-name')).to.equal('metadata');
+					expect(button.getAttribute('data-monster-tab-kind')).to.equal('profile');
+					expect(button.getAttribute('data-monster-tab-priority')).to.equal('10');
+					expect(button.getAttribute('data-monster-tab-group')).to.equal('main');
+
+					tabs.activeTab('metadata');
+					expect(changedEvent).to.not.equal(null);
+					expect(changedEvent.detail.name).to.equal('metadata');
+					expect(changedEvent.detail.tab).to.equal('metadata');
+					expect(changedEvent.detail.metadata.kind).to.equal('profile');
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}).catch(done);
+		});
+
     });