Skip to content

Commit 4268ecf

Browse files
ArathyKumarArathyKumar
committed
chore: updated test cases
1 parent 1ae7863 commit 4268ecf

File tree

2 files changed

+63
-125
lines changed

2 files changed

+63
-125
lines changed

‎elements/pf-search-input/pf-search-input.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -165,11 +165,6 @@ export class PfSearchInput extends LitElement {
165165
}
166166
}
167167

168-
get #buttonLabel(): string {
169-
const { selected } = this.#combobox;
170-
return `${selected?.length ?? 0} ${this.itemsSelectedText}`;
171-
}
172-
173168
override render(): TemplateResult<1> {
174169
const { disabled, expanded, placeholder } = this;
175170
const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;
@@ -190,7 +185,7 @@ export class PfSearchInput extends LitElement {
190185
id="toggle-input"
191186
?disabled="${disabled}"
192187
@keydown=${this.#onSearchInput}
193-
placeholder="${placeholder || this.#buttonLabel}">
188+
placeholder="${placeholder}">
194189
<pf-button
195190
@click="${this.#OnClose}"
196191
?hidden="${this.#hideCloseButton()}"

‎elements/pf-search-input/test/pf-search-input.spec.ts‎

Lines changed: 62 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,6 @@ import { sendKeys } from '@web/test-runner-commands';
66
import { clickElementAtCenter, clickElementAtOffset } from '@patternfly/pfe-tools/test/utils.js';
77
import type { PfOption } from '../../pf-select/pf-option.js';
88

9-
// async function holdShift() {
10-
// await sendKeys({ down: 'Shift' });
11-
// }
12-
13-
// async function releaseShift() {
14-
// await sendKeys({ up: 'Shift' });
15-
// }
16-
179
function press(key: string) {
1810
return async function() {
1911
await sendKeys({ press: key });
@@ -76,7 +68,6 @@ describe('<pf-search-input>', function() {
7668
describe('with accessible-label attribute and 3 items', function() {
7769
let element: PfSearchInput;
7870
const updateComplete = () => element.updateComplete;
79-
const focus = () => element.focus;
8071

8172
beforeEach(async function() {
8273
element = await createFixture<PfSearchInput>(html`
@@ -110,7 +101,7 @@ describe('<pf-search-input>', function() {
110101
});
111102

112103
describe('focus()', function() {
113-
beforeEach(focus);
104+
beforeEach(press('Tab'));
114105
beforeEach(updateComplete);
115106
describe('ArrowDown', function() {
116107
beforeEach(press('ArrowDown'));
@@ -119,37 +110,21 @@ describe('<pf-search-input>', function() {
119110
it('labels the listbox with the accessible-label attribute', async function() {
120111
const snap = await a11ySnapshot();
121112
expect(snap).to.axContainQuery({
122-
role: 'combobox',
113+
role: 'listbox',
123114
name: 'label',
124115
});
125116
});
126117

127-
// it('focuses on the first item', async function() { // This will not work as the focus will still remain on the input
128-
// expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
129-
// });
130-
131-
// describe('Space', function() { // the space key will be adding <space> in the search input
132-
// beforeEach(press(' '));
133-
// beforeEach(updateComplete);
134-
// // it('selects option 1', function() {
135-
// // expect(getSelectedOptionValue(element)).to.deep.equal(['1']);
136-
// // });
137-
138-
// // it('exposes selection to assistive technology', async function() {
139-
// // expect(await a11ySnapshot()).to.axContainQuery({
140-
// // role: 'combobox',
141-
// // value: '1',
142-
// // });
143-
// // });
144-
// });
118+
it('focuses on the first item', async function() {
119+
expect(getActiveOption(element)).to.have.value('1');
120+
});
145121
});
146122
});
147123
});
148124

149125
describe('with 3 items and associated <label> elements', function() {
150126
let element: PfSearchInput;
151127
const updateComplete = () => element.updateComplete;
152-
const focus = () => element.focus;
153128

154129
beforeEach(async function() {
155130
element = await createFixture<PfSearchInput>(html`
@@ -186,13 +161,13 @@ describe('<pf-search-input>', function() {
186161
});
187162

188163
describe('focus()', function() {
189-
beforeEach(focus);
164+
beforeEach(press('Tab'));
190165
beforeEach(updateComplete);
191166
describe('ArrowDown', function() {
192167
beforeEach(press('ArrowDown'));
193168
it('labels the listbox with the label elements', async function() {
194169
expect(await a11ySnapshot()).to.axContainQuery({
195-
role: 'combobox',
170+
role: 'listbox',
196171
name: 'label1label2',
197172
});
198173
});
@@ -286,9 +261,9 @@ describe('<pf-search-input>', function() {
286261
</pf-search-input>`);
287262
});
288263

289-
// it('does not pass aXe audit', async function() { // doubt
290-
// await expect(element).to.not.be.accessible();
291-
// });
264+
it('does not pass aXe audit', async function() {
265+
await expect(element).to.not.be.accessible();
266+
});
292267

293268
it('sets aria-setsize and aria-posinset on items', function() {
294269
element.options.forEach((option, i) => {
@@ -377,42 +352,41 @@ describe('<pf-search-input>', function() {
377352
beforeEach(press('ArrowDown'));
378353
beforeEach(updateComplete);
379354

380-
// it('focuses on option 2', async function() {
381-
// expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('2');
382-
// });
355+
it('focuses on option 2', async function() {
356+
expect(getActiveOption(element)).to.have.value('2');
357+
});
383358

384359
describe('ArrowUp', function() {
385360
beforeEach(press('ArrowUp'));
386361
beforeEach(updateComplete);
387-
// it('focuses on option 1', async function() {
388-
// expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('1');
389-
// });
362+
it('focuses on option 1', async function() {
363+
expect(getActiveOption(element)).to.have.value('1');
364+
});
390365
});
391366

392367
describe('ArrowDown', async function() {
393368
beforeEach(press('ArrowDown'));
394369
beforeEach(updateComplete);
395-
await aTimeout(30);
396-
// it('focuses on option 3', async function() {
397-
// expect(await a11ySnapshot()).axTreeFocusedNode.to.have.axName('3');
398-
// });
370+
it('focuses on option 3', async function() {
371+
expect(getActiveOption(element)).to.have.value('3');
372+
});
399373

400374
describe('Enter', function() {
401375
beforeEach(press('Enter'));
402376
beforeEach(updateComplete);
403377

404-
// it('selects option 3', function() {
405-
// expect(getSelectedOptionValue(element)).to.deep.equal([
406-
// '3',
407-
// ]);
408-
// });
378+
it('selects option 3', function() {
379+
expect(getSelectedOptionValue(element)).to.deep.equal([
380+
'3',
381+
]);
382+
});
409383

410-
// it('exposes selection to assistive technology', async function() {
411-
// expect(await a11ySnapshot()).to.axContainQuery({
412-
// role: 'combobox',
413-
// value: '3',
414-
// });
415-
// });
384+
it('exposes selection to assistive technology', async function() {
385+
expect(await a11ySnapshot()).to.axContainQuery({
386+
role: 'combobox',
387+
value: '3',
388+
});
389+
});
416390

417391
it('hides the listbox', async function() {
418392
expect(element.expanded).to.be.false;
@@ -422,39 +396,6 @@ describe('<pf-search-input>', function() {
422396
});
423397
});
424398

425-
// -- This functionality needs to be implement in search input
426-
// describe('Tab', function() {
427-
// beforeEach(press('Tab'));
428-
// beforeEach(nextFrame);
429-
// beforeEach(updateComplete);
430-
// it('hides the listbox', async function() {
431-
// expect(element.expanded).to.be.false;
432-
// expect(await a11ySnapshot()).to.not.axContainRole('listbox');
433-
// });
434-
// it('does not focus on the combobox button', async function() {
435-
// expect(await a11ySnapshot()).to.not.have.axTreeFocusedNode;
436-
// });
437-
// });
438-
439-
// -- This functionality needs to be implement in search input
440-
// describe('Shift+Tab', function() {
441-
// beforeEach(holdShift);
442-
// beforeEach(press('Tab'));
443-
// beforeEach(releaseShift);
444-
// beforeEach(updateComplete);
445-
446-
// it('hides the listbox', async function() {
447-
// expect(element.expanded).to.be.false;
448-
// expect(await a11ySnapshot()).to.not.axContainRole('listbox');
449-
// });
450-
451-
// it('focuses the button', async function() {
452-
// expect(await a11ySnapshot())
453-
// .axTreeFocusedNode
454-
// .to.have.axRole('combobox');
455-
// });
456-
// });
457-
458399
describe('Escape', function() {
459400
beforeEach(press('Escape'));
460401
beforeEach(nextFrame);
@@ -478,7 +419,6 @@ describe('<pf-search-input>', function() {
478419
describe('text input interaction', function() {
479420
let element: PfSearchInput;
480421
const label = 'label';
481-
// const placeholder = 'placeholder';
482422
const updateComplete = () => element.updateComplete;
483423
const focus = () => element.focus();
484424

@@ -535,26 +475,6 @@ describe('<pf-search-input>', function() {
535475
});
536476
});
537477

538-
// will be removed as there's no toggle button
539-
// describe('clicking the toggle button', function() {
540-
// beforeEach(async function() {
541-
// await clickElementAtOffset(element, [-10, -10]);
542-
// });
543-
544-
// it('shows the listbox', async function() {
545-
// expect(element.expanded).to.be.true;
546-
// expect(await a11ySnapshot()).to.axContainRole('listbox');
547-
// });
548-
549-
// it('focuses the toggle button', async function() {
550-
// expect(element.expanded).to.be.true;
551-
// expect(await a11ySnapshot()).to.axContainQuery({
552-
// focused: true,
553-
// role: 'button',
554-
// });
555-
// });
556-
// });
557-
558478
describe('clicking the combobox input', function() {
559479
beforeEach(async function() {
560480
await clickElementAtOffset(element, [10, 10]);
@@ -607,17 +527,9 @@ describe('<pf-search-input>', function() {
607527
});
608528

609529
describe('focus()', function() {
610-
beforeEach(focus);
530+
beforeEach(press('Tab'));
611531
beforeEach(updateComplete);
612532

613-
// Doubt
614-
// it('focuses the combobox input', async function() {
615-
// expect(await a11ySnapshot()).axTreeFocusedNode
616-
// .to.have.axRole('combobox')
617-
// .and
618-
// .to.have.axName('Blue');
619-
// });
620-
621533
describe('"r"', function() {
622534
beforeEach(press('r'));
623535
beforeEach(updateComplete);
@@ -660,6 +572,15 @@ describe('<pf-search-input>', function() {
660572
expect(await a11ySnapshot()).to.axContainRole('listbox');
661573
});
662574

575+
// Skipping the test case as the role is visible in the accessibility tree,
576+
// and since the pf-button uses ElementInternals, the test case is unable to access the role.
577+
it.skip('labels the close button with the label', async function() {
578+
expect(await a11ySnapshot()).to.axContainQuery({
579+
role: 'button',
580+
name: 'close',
581+
});
582+
});
583+
663584
it('focuses option 1', function() {
664585
expect(getActiveOption(element)).to.have.value('Blue');
665586
});
@@ -730,6 +651,28 @@ describe('<pf-search-input>', function() {
730651
});
731652
});
732653

654+
describe('clicking the close button', function() {
655+
beforeEach(async function() {
656+
await clickElementAtOffset(element, [-10, 10]);
657+
});
658+
659+
it('hides the listbox', async function() {
660+
expect(element.expanded).not.to.be.true;
661+
expect(await a11ySnapshot()).to.not.axContainRole('listbox');
662+
});
663+
664+
it('hides the close button', async function() {
665+
expect(await a11ySnapshot()).not.to.axContainQuery({
666+
name: 'close',
667+
role: 'button',
668+
});
669+
});
670+
671+
it('removes the selected option value', async function() {
672+
expect(getSelectedOptionValue(element)).to.deep.equal([]);
673+
});
674+
});
675+
733676
describe('"p"', function() {
734677
beforeEach(press('p'));
735678
beforeEach(updateComplete);

0 commit comments

Comments
 (0)