Fix duplicate dropdown dividers (#32760)
Fix #27466 The problem is that any item in the menu could be hidden, pure CSS won't work, and dropdown's builtin "hideDividers" doesn't work with our "scope dividers". The newly introduced "archived" label makes the dividers regression more.
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
import {createElementFromHTML} from '../../utils/dom.ts';
|
||||
import {hideScopedEmptyDividers} from './dropdown.ts';
|
||||
|
||||
test('hideScopedEmptyDividers-simple', () => {
|
||||
const container = createElementFromHTML(`<div>
|
||||
<div class="divider"></div>
|
||||
<div class="item">a</div>
|
||||
<div class="divider"></div>
|
||||
<div class="divider"></div>
|
||||
<div class="divider"></div>
|
||||
<div class="item">b</div>
|
||||
<div class="divider"></div>
|
||||
</div>`);
|
||||
hideScopedEmptyDividers(container);
|
||||
expect(container.innerHTML).toEqual(`
|
||||
<div class="divider hidden transition"></div>
|
||||
<div class="item">a</div>
|
||||
<div class="divider hidden transition"></div>
|
||||
<div class="divider hidden transition"></div>
|
||||
<div class="divider"></div>
|
||||
<div class="item">b</div>
|
||||
<div class="divider hidden transition"></div>
|
||||
`);
|
||||
});
|
||||
|
||||
test('hideScopedEmptyDividers-hidden1', () => {
|
||||
const container = createElementFromHTML(`<div>
|
||||
<div class="item">a</div>
|
||||
<div class="divider" data-scope="b"></div>
|
||||
<div class="item tw-hidden" data-scope="b">b</div>
|
||||
</div>`);
|
||||
hideScopedEmptyDividers(container);
|
||||
expect(container.innerHTML).toEqual(`
|
||||
<div class="item">a</div>
|
||||
<div class="divider hidden transition" data-scope="b"></div>
|
||||
<div class="item tw-hidden" data-scope="b">b</div>
|
||||
`);
|
||||
});
|
||||
|
||||
test('hideScopedEmptyDividers-hidden2', () => {
|
||||
const container = createElementFromHTML(`<div>
|
||||
<div class="item" data-scope="">a</div>
|
||||
<div class="divider" data-scope="b"></div>
|
||||
<div class="item tw-hidden" data-scope="b">b</div>
|
||||
<div class="divider" data-scope=""></div>
|
||||
<div class="item" data-scope="">c</div>
|
||||
</div>`);
|
||||
hideScopedEmptyDividers(container);
|
||||
expect(container.innerHTML).toEqual(`
|
||||
<div class="item" data-scope="">a</div>
|
||||
<div class="divider hidden transition" data-scope="b"></div>
|
||||
<div class="item tw-hidden" data-scope="b">b</div>
|
||||
<div class="divider hidden transition" data-scope=""></div>
|
||||
<div class="item" data-scope="">c</div>
|
||||
`);
|
||||
});
|
||||
Reference in New Issue
Block a user