diff --git a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts index 650a52d503..9bbc263ff6 100644 --- a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts +++ b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts @@ -1,9 +1,9 @@ -import { assert, expect } from '@open-wc/testing'; +import { assert, aTimeout, expect } from '@open-wc/testing'; import { sendKeys, setViewport } from '@web/test-runner-commands'; import { html } from 'lit/static-html.js'; import { fixture } from '../../core/testing/private.js'; -import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing.js'; +import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js'; import type { SbbBreadcrumbElement } from '../breadcrumb.js'; import { SbbBreadcrumbGroupElement } from './breadcrumb-group.js'; @@ -14,33 +14,59 @@ describe(`sbb-breadcrumb-group`, () => { describe('without ellipsis', () => { let element: SbbBreadcrumbGroupElement; - beforeEach(async () => { - element = await fixture(html` - - - One - Two - - `); - }); - - it('renders', async () => { - assert.instanceOf(element, SbbBreadcrumbGroupElement); + describe('with three breadcrumbs', () => { + beforeEach(async () => { + element = await fixture(html` + + + One + Two + + `); + }); + + it('renders', async () => { + assert.instanceOf(element, SbbBreadcrumbGroupElement); + }); + + it('keyboard navigation', async () => { + const first: SbbBreadcrumbElement = + element.querySelector('#breadcrumb-0')!; + const second: SbbBreadcrumbElement = + element.querySelector('#breadcrumb-1')!; + const third: SbbBreadcrumbElement = + element.querySelector('#breadcrumb-2')!; + + first.focus(); + await sendKeys({ down: 'ArrowRight' }); + expect(document.activeElement!.id).to.be.equal(second.id); + await sendKeys({ down: 'ArrowRight' }); + expect(document.activeElement!.id).to.be.equal(third.id); + }); }); - it('keyboard navigation', async () => { - const first: SbbBreadcrumbElement = - element.querySelector('#breadcrumb-0')!; - const second: SbbBreadcrumbElement = - element.querySelector('#breadcrumb-1')!; - const third: SbbBreadcrumbElement = - element.querySelector('#breadcrumb-2')!; - - first.focus(); - await sendKeys({ down: 'ArrowRight' }); - expect(document.activeElement!.id).to.be.equal(second.id); - await sendKeys({ down: 'ArrowRight' }); - expect(document.activeElement!.id).to.be.equal(third.id); + describe('with two breadcrumns', () => { + beforeEach(async () => { + element = await fixture(html` + + Level 0 + Level 1 + + `); + }); + + it('should not collapse', async () => { + await setViewport({ width: 80, height: 1000 }); + await waitForLitRender(element); + // We need to ensure that the collapsed state is really rendered + await aTimeout(20); + + const ellipsisButton = element.shadowRoot!.querySelector( + '#sbb-breadcrumb-ellipsis', + )!; + + expect(ellipsisButton).to.be.null; + }); }); }); diff --git a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts index 2143dd4547..b31709d199 100644 --- a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts +++ b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts @@ -25,6 +25,8 @@ import style from './breadcrumb-group.scss?lit&inline'; import '../../icon.js'; +const MIN_BREADCRUMBS_TO_COLLAPSE = 3; + /** * It can be used as a container for one or more `sbb-breadcrumb` component. * @@ -119,7 +121,7 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin< this.listChildren[this.listChildren.length - 1]?.setAttribute('aria-current', 'page'); // If it is not expandable, reset state - if (this.listChildren.length < 3) { + if (this.listChildren.length < MIN_BREADCRUMBS_TO_COLLAPSE) { this._state = null; } } @@ -159,7 +161,11 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin< /** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */ private _evaluateCollapsedState(): void { - if (!this._state && this.scrollWidth > this.offsetWidth) { + if ( + !this._state && + this.scrollWidth > this.offsetWidth && + this.listChildren.length >= MIN_BREADCRUMBS_TO_COLLAPSE + ) { this._state = 'collapsed'; this._resizeObserver.disconnect(); }