File

src/lib/test-select.ts

Description

A wrapped DOM HTML select element, providing additional methods and attributes helping with writing tests

Extends

TestHtmlElement

Index

Properties
Methods

Constructor

constructor(tester: ComponentTester, debugElement: DebugElement)
Parameters :
Name Type Optional
tester ComponentTester<any> no
debugElement DebugElement no

Properties

Public Readonly debugElement
debugElement: DebugElement
Type : DebugElement
Inherited from TestHtmlElement
Defined in TestHtmlElement:20

the wrapped debug element

Methods

selectIndex
selectIndex(index: number)

Selects the option at the given index, then dispatches an event of type change and triggers a change detection

Parameters :
Name Type Optional
index number no
Returns : void
selectLabel
selectLabel(label: string)

Selects the first option with the given label (or text), then dispatches an event of type change and triggers a change detection. If there is no option with the given label, then does nothing TODO should it throw instead?

Parameters :
Name Type Optional
label string no
Returns : void
selectValue
selectValue(value: string)

Selects the first option with the given value, then dispatches an event of type change and triggers a change detection. If there is no option with the given value, then does nothing TODO should it throw instead?

Parameters :
Name Type Optional
value string no
Returns : void
click
click()
Inherited from TestHtmlElement
Defined in TestHtmlElement:16

Clicks on the wrapped element, then triggers a change detection

Returns : void
attr
attr(name: string)
Inherited from TestHtmlElement
Defined in TestHtmlElement:62

Gets the attribute of the wrapped element with the given name

Parameters :
Name Type Optional Description
name string no

the name of the attribute to get

Returns : any
button
button(selector: string)
Inherited from TestHtmlElement
Defined in TestHtmlElement:123

Gets the first button matched by the given selector. Throws an Error if the matched element isn't actually a button.

Parameters :
Name Type Optional Description
selector string no

a CSS selector

Returns : TestButton | null

the wrapped button, or null if no element was matched

dispatchEvent
dispatchEvent(event: Event)
Inherited from TestHtmlElement
Defined in TestHtmlElement:46

dispatches the given event from the wrapped element, then triggers a change detection

Parameters :
Name Type Optional
event Event no
Returns : void
dispatchEventOfType
dispatchEventOfType(type: string)
Inherited from TestHtmlElement
Defined in TestHtmlElement:38

dispatches an event of the given type from the wrapped element, then triggers a change detection

Parameters :
Name Type Optional
type string no
Returns : void
element
element(selector: string)
Inherited from TestHtmlElement
Defined in TestHtmlElement:74

Gets the first element matching the given CSS selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput. You can thus use tester.element('#some-input') as TestInput.

Parameters :
Name Type Optional Description
selector string no

a CSS selector

Returns : TestElement | null

the wrapped element, or null if no element matches the selector.

elements
elements(selector: string)
Inherited from TestHtmlElement
Defined in TestHtmlElement:86

Gets all the elements matching the given CSS selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput. You can thus use tester.elements('input') as Array<TestInput>.

Parameters :
Name Type Optional Description
selector string no

a CSS selector

the array of matched elements, empty if no element was matched

input
input(selector: string)
Inherited from TestHtmlElement
Defined in TestHtmlElement:95

Gets the first input matched by the given selector. Throws an Error if the matched element isn't actually an input.

Parameters :
Name Type Optional Description
selector string no

a CSS selector

Returns : TestInput | null

the wrapped input, or null if no element was matched

select
select(selector: string)
Inherited from TestHtmlElement
Defined in TestHtmlElement:104

Gets the first select matched by the given selector. Throws an Error if the matched element isn't actually a select.

Parameters :
Name Type Optional Description
selector string no

a CSS selector

Returns : TestSelect | null

the wrapped select, or null if no element was matched

textarea
textarea(selector: string)
Inherited from TestHtmlElement
Defined in TestHtmlElement:114

Gets the first textarea matched by the given selector

Parameters :
Name Type Optional Description
selector string no

a CSS selector

the wrapped textarea, or null if no element was matched. Throws an Error if the matched element isn't actually a textarea.

Accessors

selectedIndex
getselectedIndex()

the selected index of the wrapped select

Returns : number
selectedValue
getselectedValue()

the value of the selected option of the wrapped select, or null if there is no selected option

Returns : string | null
selectedLabel
getselectedLabel()

the label (or text if no label) of the selected option of the wrapped select, or null if there is no selected option

Returns : string | null
optionValues
getoptionValues()

the values of the options, as an array

Returns : Array<string>
optionLabels
getoptionLabels()

the labels (or texts if no label) of the options, as an array

Returns : Array<string>
size
getsize()

the number of options in the select

import { ComponentTester } from './component-tester';
import { TestHtmlElement } from './test-html-element';
import { DebugElement } from '@angular/core';

/**
 * A wrapped DOM HTML select element, providing additional methods and attributes helping with writing tests
 */
export class TestSelect extends TestHtmlElement<HTMLSelectElement> {
  constructor(tester: ComponentTester<any>, debugElement: DebugElement) {
    super(tester, debugElement);
  }

  /**
   * Selects the option at the given index, then dispatches an event of type change and triggers a change detection
   */
  selectIndex(index: number) {
    this.nativeElement.selectedIndex = index;
    this.dispatchEventOfType('change');
  }

  /**
   * Selects the first option with the given value, then dispatches an event of type change and triggers a change detection.
   * If there is no option with the given value, then does nothing
   * TODO should it throw instead?
   */
  selectValue(value: string) {
    const index = this.optionValues.indexOf(value);
    if (index >= 0) {
      this.selectIndex(index);
    }
  }

  /**
   * Selects the first option with the given label (or text), then dispatches an event of type change and triggers a change detection.
   * If there is no option with the given label, then does nothing
   * TODO should it throw instead?
   */
  selectLabel(label: string) {
    const index = this.optionLabels.indexOf(label);
    if (index >= 0) {
      this.selectIndex(index);
    }
  }

  /**
   * the selected index of the wrapped select
   */
  get selectedIndex(): number {
    return this.nativeElement.selectedIndex;
  }

  /**
   * the value of the selected option of the wrapped select, or null if there is no selected option
   */
  get selectedValue(): string | null {
    if (this.selectedIndex < 0) {
      return null;
    }
    return this.nativeElement.options[this.selectedIndex].value;
  }

  /**
   * the label (or text if no label) of the selected option of the wrapped select, or null if there is no selected option
   */
  get selectedLabel(): string | null {
    if (this.selectedIndex < 0) {
      return null;
    }
    return this.nativeElement.options[this.selectedIndex].label;
  }

  /**
   * the values of the options, as an array
   */
  get optionValues(): Array<string> {
    return (Array.prototype.slice.call(this.nativeElement.options) as Array<HTMLOptionElement>).map(option => option.value);
  }

  /**
   * the labels (or texts if no label) of the options, as an array
   */
  get optionLabels(): Array<string> {
    return (Array.prototype.slice.call(this.nativeElement.options) as Array<HTMLOptionElement>).map(option => option.label);
  }

  /**
   * the number of options in the select
   */
  get size() {
    return this.nativeElement.options.length;
  }
}

results matching ""

    No results matching ""