How to use @dynatrace/barista-components - 10 common examples

it('should set last property on last child for deprecated dt-breadcrumbs-item', () => {
    const fixture = createComponent(TestBreadcrumbsWithDeprecatedItems);
    const component = fixture.componentInstance;
    const lastValues = component.items.map(
      // tslint:disable-next-line:deprecation
      (item: DtBreadcrumbsItem) => item._lastItem,
    );
    expect(lastValues).toEqual([false, false, true]);
  });

it('should not open using the arrow keys when the input is readonly', fakeAsync(() => {
      const trigger = fixture.componentInstance.trigger;
      input.readOnly = true;
      fixture.detectChanges();

      // Expected panel state to start out closed.
      expect(trigger.panelOpen).toBe(false);
      dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
      flush();

      fixture.detectChanges();
      // Expected panel to stay closed.
      expect(trigger.panelOpen).toBe(false);
    }));

_handleSubmit(event: Event): void {
    event.preventDefault();
    event.stopImmediatePropagation();
    const range = this._validateRange();
    if (isDefined(range)) {
      this.rangeSubmitted.emit(
        new DtFilterFieldRangeSubmittedEvent(
          this,
          this._selectedOperator as DtFilterFieldRangeOperator,
          range as number | [number, number],
          this.unit,
        ),
      );
      // After emission we need to reset the range state, to have a fresh one
      // if another range opens.
      this._valueFrom = '';
      this._valueTo = '';
      this._selectedOperator = null;
    }
  }

it('should constrain the selectedArea to the origin', fakeAsync(() => {
        dispatchMouseEvent(selectedAreaNative, 'mousedown', 150, 10);
        fixture.detectChanges();
        flush();
        tickRequestAnimationFrame();
        // move the mouse to the edge of the window
        dispatchMouseEvent(window, 'mousemove', 0, 10);
        flush();
        tickRequestAnimationFrame();
        selectedAreaNative = getSelectionArea(globalSelectionAreaContainer!);
        expect(selectedAreaNative.style.left).toEqual('0px');
        expect(selectedAreaNative.style.width).toEqual('100px');

        // move the mouse over the edge of the origin
        dispatchMouseEvent(window, 'mousemove', 420, 10);
        flush();
        tickRequestAnimationFrame();
        selectedAreaNative = getSelectionArea(globalSelectionAreaContainer!);
        expect(selectedAreaNative.style.left).toEqual('300px');
        expect(selectedAreaNative.style.width).toEqual('100px');
      }));
    });

it('should call bound function when selecting an eventBubble', () => {
      jest.spyOn(fixture.componentInstance, 'logSelected');
      const firstBubble = fixture.debugElement.query(
        By.css('.dt-event-chart-event'),
      );
      dispatchFakeEvent(firstBubble.nativeElement, 'click');

      expect(fixture.componentInstance.logSelected).toHaveBeenCalledWith(
        expect.any(DtEventChartSelectedEvent),
      );
      // Check if the now selected element fits the elements
      expect(fixture.componentInstance.selected.sources).toHaveLength(1);
      expect(fixture.componentInstance.selected.sources[0]).toMatchObject({
        _duration: 0,
        _value: 0,
        lane: 'xhr',
        data: '1',
      });
    });

it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
      dispatchFakeEvent(input, 'focus');
      fixture.detectChanges();
      flush();
      dispatchFakeEvent(document, 'touchend');

      // Expected tapping outside the panel to set its state to closed.
      expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
      // Expected tapping outside the panel to close the panel.
      expect(overlayContainerElement.textContent).toEqual('');
    }));

it('should display an error message when the parent form is submitted', fakeAsync(() => {
      // Expected form not to have been submitted
      expect(testComponent.form.submitted).toBe(false);
      // Expected form control to be invalid
      expect(testComponent.formControl.invalid).toBe(true);
      // Expected no error message
      expect(containerEl.querySelectorAll('dt-error').length).toBe(0);

      dispatchFakeEvent(
        fixture.debugElement.query(By.css('form')).nativeElement,
        'submit',
      );
      fixture.detectChanges();
      flush();

      // Expected form to have been submitted
      expect(testComponent.form.submitted).toBe(true);
      // Expected container to have the invalid CSS class.
      expect(containerEl.classList).toContain('dt-form-field-invalid');
      // Expected one error message to have been rendered.
      expect(containerEl.querySelectorAll('dt-error').length).toBe(1);
      // Expected aria-invalid to be set to "true".
      expect(inputEl.getAttribute('aria-invalid')).toBe('true');
    }));

it('should navigate with the click on the numbers', () => {
      const fixture = createComponent(PaginationTestComponent);
      const instance = fixture.componentInstance;
      instance.length = 120;
      instance.pageSize = 10;
      fixture.detectChanges();

      expect(instance.pagination.currentPage).toBe(1);
      const page1 = fixture.debugElement.nativeElement.querySelector(
        '.dt-pagination-item button',
      );
      dispatchFakeEvent(page1, 'click');
      fixture.detectChanges();
      expect(instance.pagination.currentPage).toBe(2);

      // 4th element is the page 3
      const page2 = fixture.debugElement.nativeElement.querySelector(
        '.dt-pagination-item:nth-child(4) button',
      );
      dispatchFakeEvent(page2, 'click');
      fixture.detectChanges();
      expect(instance.pagination.currentPage).toBe(3);
    });

it('should trigger a switch to Range event when the shift key was pressed', () => {
      const spy = jest.fn();
      const subscription = timestamp._switchToRange.subscribe(spy);

      const event = createKeyboardEvent('keydown', UP_ARROW);
      jest.spyOn(event, 'shiftKey', 'get').mockImplementation(() => true);
      dispatchEvent(selector, event);
      expect(spy).toHaveBeenCalledTimes(1);
      expect(spy).toHaveBeenCalledWith(10); // value of the timestamp
      subscription.unsubscribe();
    });

zone.simulateZoneExit();

      // Filter down the option list to a subset of original options ('Alabama', 'California')
      typeInElement('al', input);
      fixture.detectChanges();
      tick();

      let options = overlayContainerElement.querySelectorAll(
        'dt-option',
      );
      options[0].click();

      // Changing value from 'Alabama' to 'al' to re-populate the option list,
      // ensuring that 'California' is created new.
      dispatchFakeEvent(input, 'focusin');
      typeInElement('al', input);
      fixture.detectChanges();
      tick();

      options = overlayContainerElement.querySelectorAll(
        'dt-option',
      );
      options[1].click();
      fixture.detectChanges();

      // Expected clicking a new option to set the panel state to closed.
      expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
      // Expected clicking a new option to close the panel.
      expect(overlayContainerElement.textContent).toEqual('');
    }));