-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(Listbox): Make search algorithm account for multiple ranges (#…
…766) * fix: highlighting * refactor: fix algorithm and white-space on search * fix: render highlights without wrap * Update apis/nucleus/src/components/listbox/listbox-highlight.js * fix: change jsdoc typedef * fix: use theme variant instead of explicit font size Co-authored-by: Christian Veinfors <christian.veinfors@gmail.com>
- Loading branch information
1 parent
19925fe
commit 428bba5
Showing
6 changed files
with
700 additions
and
430 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
apis/nucleus/src/components/listbox/__tests__/list-box-highlight.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import getSegmentsFromRanges from '../listbox-highlight'; | ||
|
|
||
| describe('listbox highlight', () => { | ||
| let sandbox; | ||
|
|
||
| // The label we want to create segments out of, where each segment | ||
| // can be either highlighted or non-highlighted. | ||
| let label; | ||
|
|
||
| beforeEach(() => { | ||
| label = 'ABCDEFGHIJKLMNOPQRSTUVW'; | ||
| }); | ||
|
|
||
| before(() => { | ||
| sandbox = sinon.createSandbox(); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| sandbox.reset(); | ||
| }); | ||
|
|
||
| after(() => { | ||
| sandbox.restore(); | ||
| }); | ||
|
|
||
| it('should return expected segments for one highlighted range only', () => { | ||
| const ranges = [{ qCharPos: 1, qCharCount: 4 }]; | ||
| expect(getSegmentsFromRanges(label, ranges)).to.deep.equal([ | ||
| ['A', false], | ||
| ['BCDE', true], | ||
| ['FGHIJKLMNOPQRSTUVW', false], | ||
| ]); | ||
| }); | ||
| it('should return expected segment for a range starting with 0', () => { | ||
| const ranges = [{ qCharPos: 0, qCharCount: 5 }]; | ||
| expect(getSegmentsFromRanges(label, ranges)).to.deep.equal([ | ||
| ['ABCDE', true], | ||
| ['FGHIJKLMNOPQRSTUVW', false], | ||
| ]); | ||
| }); | ||
|
|
||
| it('should return expected segments for two highlighted ranges', () => { | ||
| const ranges = [ | ||
| { qCharPos: 1, qCharCount: 4 }, | ||
| { qCharPos: 7, qCharCount: 10 }, | ||
| ]; | ||
| expect(getSegmentsFromRanges(label, ranges)).to.deep.equal([ | ||
| ['A', false], | ||
| ['BCDE', true], | ||
| ['FG', false], | ||
| ['HIJKLMNOPQ', true], | ||
| ['RSTUVW', false], | ||
| ]); | ||
| }); | ||
|
|
||
| it('should return expected segments for many highlighted ranges', () => { | ||
| const ranges = [ | ||
| { qCharPos: 1, qCharCount: 4 }, | ||
| { qCharPos: 6, qCharCount: 3 }, | ||
| { qCharPos: 12, qCharCount: 2 }, | ||
| ]; | ||
| expect(getSegmentsFromRanges(label, ranges)).to.deep.equal([ | ||
| ['A', false], | ||
| ['BCDE', true], | ||
| ['F', false], | ||
| ['GHI', true], | ||
| ['JKL', false], | ||
| ['MN', true], | ||
| ['OPQRSTUVW', false], | ||
| ]); | ||
| }); | ||
|
|
||
| it('should return expected segments for many highlighted ranges starting with 0', () => { | ||
| const ranges = [ | ||
| { qCharPos: 0, qCharCount: 5 }, | ||
| { qCharPos: 6, qCharCount: 3 }, | ||
| { qCharPos: 12, qCharCount: 2 }, | ||
| ]; | ||
| expect(getSegmentsFromRanges(label, ranges)).to.deep.equal([ | ||
| ['ABCDE', true], | ||
| ['F', false], | ||
| ['GHI', true], | ||
| ['JKL', false], | ||
| ['MN', true], | ||
| ['OPQRSTUVW', false], | ||
| ]); | ||
| }); | ||
|
|
||
| it('should return expected segments when highlighting until the end of a label', () => { | ||
| const ranges = [ | ||
| { qCharPos: 6, qCharCount: 3 }, | ||
| { qCharPos: 12, qCharCount: 11 }, | ||
| ]; | ||
| expect(getSegmentsFromRanges(label, ranges)).to.deep.equal([ | ||
| ['ABCDEF', false], | ||
| ['GHI', true], | ||
| ['JKL', false], | ||
| ['MNOPQRSTUVW', true], | ||
| ]); | ||
| }); | ||
| }); |
Oops, something went wrong.