如何从量角器测试角度js日期选择器

Question

我是量角器的新手，在这里我尝试测试量角器的angularjs日期选择器。

我试图找到一种方法来做到这一点，而这篇文章是我唯一找到的东西，使用起来不太清楚

如果有人知道如何测试，请帮忙。

我需要的是选择今天的日期。

提前感谢：）

< li >编辑-

alecxe，这是我的日期选择器的屏幕截图。很抱歉，无法提供页面的链接。:(

<input 
       class="form-control ng-pristine ng-valid ng-not-empty ng-touched" 
       ng-model="invoice.fromdate" 
       data-date-format="yyyy-MM-dd" 
       data-date-type="string" 
       data-max-="" data-autoclose="1" 
       bs-datepicker="" 
       ng-change="dateRange()" 
       type="text">

Answer 1

var data_picker = element(by.model("invoice.fromdate"));

// select current date with date function

var current_date = new Date();

var day = today.getDate();

var month = today.getMonth()+1; //By default January count as 0

var year = today.getFullYear();

if(day<10) {
    day='0'+day
} 

if(month<10) {
    month='0'+month
} 

current_date = month+'/'+day+'/'+year;

data_picker.clear();  // Note if you are facing error message related to clear. Comment this line

data_picker.sendKeys(today);

Hope this will work

Answer 2

发送键（） 仅当日期在元素上并且 uib 日期选取器是一种下拉列表交易时才有效。这对我没有帮助，因为我的日期选取器元素是独立的，没有与输入元素配对。
evaluate（） 不会在浏览器中更新 angular 的实际模型（这就引出了一个问题，即评估实际上有多大用处...）。根据量角器文档，评估，“评估输入，就好像它在当前基础元素的范围内一样。在我的情况下，我想测试日期选择器生成的日期是否通过发布请求到达我的enpdpoint，然后再次返回（因此e2e）而不会被effed（损坏），因此，我需要我的日期在浏览器实例中的角度模型上，而不仅仅是在浏览器驱动程序环境中或量角器测试的运行时环境中。我可能错了。
这个期望（）通过，但ng形式是无效的（我假设浏览器中的b / c模型实际上没有更新以接收我试图传入的日期。

function convertToPickerDate(date) {
    var date = new Date(date);
    var dd = date.getDate();
    var mm = date.getMonth() + 1; //January is 0!
    var yyyy = date.getFullYear();
    var yy = yyyy.toString().slice(2);

    return mm + '/' + dd + '/' + yy;
}     

// expect passes, but form is invalid - DON'T USE for standalone cal
it('should enter start date in date picker', function () {
        offerStart = convertToPickerDate(myData.startDate);
        var offerStartPicker = element(by.model('current.startDate'));
        offerStartPicker.evaluate("current.startDate = '" + offerStart + "'");
        offerStartPicker.evaluate("current.startDate").then(function (value) {
            expect(value).toBe(offerStart);
        });
})

但是元素所在的ng表单无效…

我的解决方案使用css选择和箭头键来选择相对于今天的日期:

Shipment Start Date: <em id="offerStartPrint">{{current.startDate | date:'shortDate' }}</em>
<div id="offerStart"
        name="offerStart"
        uib-datepicker
        ng-model="current.startDate"
        class=""
        ng-change="setStartDate()"
        datepicker-options="startDateOptions"
        required></div>
</div>

function convertToPickerDate(date) {
    var date = new Date(date);
    var dd = date.getDate();
    var mm = date.getMonth() + 1; //January is 0!
    var yyyy = date.getFullYear();
    var yy = yyyy.toString().slice(2);

    return mm + '/' + dd + '/' + yy;
}

it('should enter expiration date in date picker using tabs and arrows :)', function () {
        // select today element on uib-datepicker calendar
        // div#offerStart elem has date model
        var calToday = element(by.css('div#offerStart table td button.active')); 

        calToday.sendKeys(protractor.Key.ARROW_DOWN);  // one week away
        calToday.sendKeys(protractor.Key.ARROW_DOWN);  // two weeks away
        calToday.click(); // if you remove this click no date is entered
        var fortnightAway = new Date(Date.now() + 12096e5);
        fortnightAwayString = convertToPickerDate(fortnightAway);
        expect(element(by.id('offerStartPrint')).getText()).toBe(fortnightAwayString);
    })

左箭头和右箭头可用于一次增加/减少一天的日期。向上/向下箭头可用于一次增加/减少一周。人们或许也能弄清楚如何穿越月和年。

Answer 3

我认为您可以避免手动操作日期选择器，而是通过发送带有今天日期值的键来设置日期：

var picker = element(by.model("invoice.fromdate"));

// get today's date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
} 

today = mm+'/'+dd+'/'+yyyy;

picker.clear();
picker.sendKeys(today);

或者，通过直接设置关联模型的值：

picker.evaluate("invoice.fromdate= '" + today + "'");