AngularJS typeahead with protractor - angularjs

I'm trying to use protractor to implement some e2e tests.
I'd like to simulate user interaction with the autocomplete typeaheaded control.
I can't find a way to select (click) one element from the autocomplete list.
Some suggestions?
I'm using AngularJSv1.3.3 and Bootstrap v3.3.0.

This worked for me:
// type into the typeahead
element(by.model('job')).sendKeys('123');
// uib-typeahead uses match in matches...
element.all(by.repeater('match in matches')).get(0).click();

Related

Angular material datepicker md-date-locale directive not working

I'm trying to use the md-date-locale directive to overwrite angular material options for one date-picker input (as specified in https://material.angularjs.org/latest/api/directive/mdDatepicker) but it's not working.
Here is an example using the angular material example to test
md-date-locale="{ firstDayOfWeek: 2 }"
http://codepen.io/Hyperalpha/pen/gmwMdm
If it's not possible, I need to update datepicker options after loading (not in module.config() ).
Thanks
You need to set firstDayOfWeek in config function then its working fine
myAppModule.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.firstDayOfWeek = 2;
});
Working codepen

Require a match with Angular-Strap typeahead

Is there a way to require that the user only enter a value which matches one of the values in the ng-options array, similar to a select element? I guess I'm looking for a combination of typeahead and select. The Chosen javascript plugin does this but I have had issues with that plugin with AngularJs 1.3.

ui.bootstrap typeahead with blur

I'm using angular bootstrap typeahed.
It's possibility to display not-full word in input with blur, like in https://twitter.github.io/typeahead.js/examples/ ?
I try do this in ui.bootstrap-typeahed, but I have only typed chars.
I use $http request to get elements for data.
Thanks for any idea.
Found the answer in the typeahead documentation. Typeahead fills the input with the selected or autocompleted value on blur. To avoid this, $('#selector').typeahead('val', '<contents>') should be used instead of $('#selector').val('<contents>').

Angular UI bootstrap: Type ahead select multiple

I am using angular UI bootstrap type-ahead directive for type-ahead in a form
http://angular-ui.github.io/bootstrap/
I am fetching the records from remote server via $http service. It is working fine.
However I can select only one element from list at a time.
I want to select multiple values from the list and show all currently selected element in input field with a remove button just like tags for SO. The selected tags are stored in angular array model.
How to achieve this ?
I have read documentation for Angular UI bootstrap but I am not able to find anything.
This guy made a directive for this. Should do exactly what you want and it's even using the ui-bootstraps typeahead.
https://github.com/mbenford/ngTagsInput
The best solution I have found so far is io.select
it does exactly what you require, multi-select typeahead.
and the markup is neat and clean too e.g:
<oi-select
oi-options="list.id as list.description for list in lists"
ng-model="tags"
multiple
placeholder="Select">
</oi-select>
This component is also compatible with bootstrap and the new bootstrap 4.
In js file :
To list all selected items, use $item with typeahead-on-select and push to an array for ex.evtMem. delete fn to delete selected item.
HTML :
Use table to list all array values using ng-repeat. Addition to that add remove glyphicon image and function to delete corresponding item.

How to test accordion using Protractor?

Sometimes my user reports that accordion in my application is not working . So i want test whether the accordion is working or not working. I am using Angular js in frontend. Currently i am testing using protractor e2e framework.
My accordion markup looks like
before clicking the accordion division
<div id="accordion"></div>
after click
<div id="accordion-expand">
so the change is id
I find difficult while identifying css change in protractor. is there any other way to test this?
Try this:
// Given
var accordion = element(by.id('accordion'));
expect(accordion.isPresent()).toBeTruthy();
// When
accordion.click();
// Then
expect(accordion.isPresent()).toBeFalsy();
expect(element(by.id('accordion-expand')).isPresent()).toBeTruthy();
Hope this helps.

Resources