How to use @uipath/angular - 10 common examples

it('should not select partial match if not focused', fakeAsync(() => {
                // there should be 0 < QQ_* results in mockResults but no 'QQ_'
                const customString = 'QQ_';
                overrideItems = [
                    ...items,
                    { id: 'QQ_1', text: 'QQ_1' },
                    { id: 'QQ_2', text: 'QQ_2' },
                    { id: 'QQ_3', text: 'QQ_3' },
                ];
                fixture.detectChanges();

                const display = fixture.debugElement.query(By.css('.display'));
                display.nativeElement.dispatchEvent(EventGenerator.click);
                fixture.detectChanges();
                tick(SEARCH_DEBOUNCE);

                const searchInput = fixture.debugElement.query(By.css('.mat-input-element')).nativeElement;
                searchInput.value = customString;
                searchInput.dispatchEvent(new Event('input'));
                fixture.detectChanges();
                tick(SEARCH_DEBOUNCE);

                const customItem = fixture.debugElement.query(By.css('.custom-item'));

                expect(uiSuggest.items.length).toBeGreaterThan(0);
                expect(!!customItem).toBe(true);

                const itemContainer = fixture.debugElement.query(By.css('.item-list-container'));
                itemContainer.nativeElement.dispatchEvent(

it('should emit when clicking the ALL the children', fakeAsync(() => {
                const THROTTLE = 1000 / 3 + 1;

                let ev: MouseEvent;
                fixture.detectChanges();

                // BUTTON CLICK
                const containerDgbEl = fixture.debugElement.query(By.css(`#${OUTER_CONTAINER_ID}`));

                const buttonDbgEl = containerDgbEl.query(By.css(`.${BTN_CLASS}`));
                buttonDbgEl.nativeElement.dispatchEvent(EventGenerator.click);
                fixture.detectChanges();
                tick(THROTTLE);

                expect(handlerSpy).toHaveBeenCalled();
                expect(handlerSpy).toHaveBeenCalledTimes(1);

                ev = handlerSpy.calls.mostRecent().returnValue;
                expect(ev.constructor).toBe(MouseEvent);
                expect(ev.target).toBe(buttonDbgEl.nativeElement);

                // TEXT WRAPPER CLICK
                const txtWrapperDebugEl = containerDgbEl.query(By.css(`.${TEXT_WRAPPER_CLASS}`));
                txtWrapperDebugEl.nativeElement.dispatchEvent(EventGenerator.click);
                fixture.detectChanges();
                tick(THROTTLE);

it('should check all rows if the header checkbox is clicked', () => {
                        const checkboxHeader = fixture.debugElement.query(By.css('.ui-grid-header-cell.ui-grid-checkbox-cell'));

                        const checkboxInput = checkboxHeader.query(By.css('input'));
                        checkboxInput.nativeElement.dispatchEvent(EventGenerator.click);

                        fixture.detectChanges();

                        const matCheckbox = checkboxHeader.query(By.css('mat-checkbox')).componentInstance as MatCheckbox;

                        expect(matCheckbox.checked).toEqual(true);

                        const rowCheckboxList = fixture.debugElement
                            .queryAll(By.css('.ui-grid-row .ui-grid-cell.ui-grid-checkbox-cell mat-checkbox'))
                            .map(el => el.componentInstance as MatCheckbox);

                        expect(rowCheckboxList.length).toEqual(data.length);

                        rowCheckboxList.forEach(checkbox => expect(checkbox.checked).toEqual(true));

                        expect(grid.selectionManager.selected.length).toEqual(data.length);

it('should NOT display the search input and display the selection actions if at least one row is selected', () => {
                fixture.detectChanges();

                const rowCheckboxInputList = fixture.debugElement
                    .queryAll(By.css('.ui-grid-row .ui-grid-cell.ui-grid-checkbox-cell input'));

                const checkboxInput = faker.helpers.randomize(rowCheckboxInputList);

                checkboxInput.nativeElement.dispatchEvent(EventGenerator.click);

                fixture.detectChanges();

                const headerSelectionAction = fixture.debugElement.query(By.css('.selection-action-button'));
                const gridSearch = fixture.debugElement.query(By.css('ui-grid-search'));

                expect(gridSearch).toBeFalsy();
                expect(headerSelectionAction).toBeDefined();
                expect(headerSelectionAction.nativeElement).toBeDefined();
                expect(headerSelectionAction.nativeElement.innerText).toEqual('Selection Action');
            });
        });

it('should emit when clicking the parent', () => {
                fixture.detectChanges();

                const containerDgbEl = fixture.debugElement.query(By.css(`#${OUTER_CONTAINER_ID}`));

                containerDgbEl.nativeElement.dispatchEvent(EventGenerator.click);
                fixture.detectChanges();

                expect(handlerSpy).toHaveBeenCalled();
                expect(handlerSpy).toHaveBeenCalledTimes(1);

                const ev: MouseEvent = handlerSpy.calls.mostRecent().returnValue;
                expect(ev.constructor).toBe(MouseEvent);
                expect(ev.target).toBe(containerDgbEl.nativeElement);
            });
        });

it('should clear value if the user clicks the clear button', () => {
                const input = fixture.debugElement.query(By.css('input'));

                input.nativeElement.value = value;
                input.nativeElement.dispatchEvent(EventGenerator.input());

                fixture.detectChanges();

                expect(search.value).not.toEqual('');

                const clear = fixture.debugElement.query(By.css('.ui-grid-search-cancel'));

                clear.nativeElement.dispatchEvent(EventGenerator.click);

                fixture.detectChanges();

                expect(search.value).toEqual('');
            });

it('should trigger browse when parent container is clicked', () => {
            const spy = spyOn(fileInput, 'click');

            const container = fixture.debugElement.query(By.css('div'));

            container.nativeElement.dispatchEvent(EventGenerator.click);

            expect(spy).toHaveBeenCalled();
        });

it('should remove value after clicking clear element', () => {
            component.files = [fakeFile(component.fileType)];

            const fileClear = fixture.debugElement.query(By.css('.clear')).nativeElement as HTMLDivElement;
            fileClear.dispatchEvent(EventGenerator.click);
            fixture.detectChanges();

            expect(component.files).toBeUndefined();
        });
        it('should not remove value after clicking clear element while disabled', () => {

it('should increment negatively if DIRECTION is UP and NAVIGATING UP', () => {
            component.direction = 'up';

            fixture.detectChanges();
            const display = fixture.debugElement.query(By.css('.display'));
            display.nativeElement.dispatchEvent(
                EventGenerator.keyDown(Key.Enter),
            );

            const itemContainer = fixture.debugElement.query(By.css('.item-list-container'));

            itemContainer.nativeElement.dispatchEvent(
                EventGenerator.keyDown(Key.ArrowUp),
            );

            expect(uiSuggest.activeIndex).toEqual(items.length - 2);
        });

it('should close if Shift + Tab is pressed', () => {
            fixture.detectChanges();
            const display = fixture.debugElement.query(By.css('.display'));
            display.nativeElement.dispatchEvent(
                EventGenerator.keyDown(Key.Enter),
            );

            fixture.detectChanges();

            expect(uiSuggest.isOpen).toBeTruthy();

            const itemContainer = fixture.debugElement.query(By.css('.item-list-container'));

            itemContainer.nativeElement.dispatchEvent(
                EventGenerator.keyDown(Key.Tab, Key.Shift),
            );

            expect(uiSuggest.isOpen).toBeFalsy();
        });