проверка начальной загрузки с помощью Qunit - PullRequest
Новая
       15

проверка начальной загрузки с помощью Qunit

1 голос
/ 21 марта 2019

На моей странице есть bootstrap calendar, который позволяет пользователю выбрать дату.У меня есть start время и endtime.Я хотел бы проверить следующее:

  1. Если пользователь оставит селектор даты пустым, тест завершится неудачно с сообщением типа cannot leave fields empty.

  2. Если пользователь вводит endtime, который меньше startime, тест завершится неудачно и выдаст сообщение, подобное Cannot have endtime less than starttime.

Я вставлю код, который работает с datepicker.Я использую Qunit для тестирования и Bootstrap 4.

button.js

// Runs date picker plugin
$('input.date').datepicker();

// Gets data
var data;
fetch('/reportSaver', {
    // data: dates,
    method: 'POST'
}).then(function (response) {
    return response.json();
}).then(function (json) {
    data = json;
});

// Form submit
$('form').on('submit', function (event) {
    event.preventDefault();

    var dates = {
        startdate: new Date($('.startdate').val()),
        enddate: new Date($('.enddate').val())
    };

    // Minimum validation for dates
    if ((dates.startdate && dates.startdate > dates.enddate) ||
        (dates.enddate && dates.enddate < dates.startdate)) {
        return alert('Use valid dates!');
    }

    // Filter rows
    var rows = data.filter(function (register) {
        var date = new Date(register.receivedDateTime);

        return (
            (!dates.startdate || date > dates.startdate) &&
            (!dates.enddate || date < dates.enddate)
        );
        // Convert to HTML
    }).map(function (row) {
        return `
            <tr>
                <td>&nbsp;</td>
                <td>${row.subject || '-'}</td>
                <td>${row.receivedDateTime || '-'}</td>
                <td>${row.isRead || '-'}</td>
                <td>${row.sendDateTime || '-'}</td>
            </tr>
        `;
    });

    // Show content
    $('table tbody').html(rows.join(''));
});

// Clear click
$('.clear-table').on('click', function () {
    // Clears table
    $('table tbody').html('<tr><td colspan="5">Make a search</td></tr>');

    // Clears inputs
    $('input').val('');
});

form.html

{{!-- Post form for Date Picker --}}
<form id="post_form" method="GET" action="/routes/reportSaver.js">
    <div class="date-picker">
        <h3>Date</h3>
        <input placeholder="Initial date" type="text" class="date startdate"> -
        <input placeholder="End date" type="text" class="date enddate">
    </div>

    <hr>

    {{!-- Button to save the Report --}}
    <button id="bt1" type="submit" class="btn btn-danger">Click to Get Reports</button>
    <button id="bt2" type="submit" class="btn btn-danger clear-table">Clear</button>
</form>

Qunit Test Example

QUnit.test("Datepicker Test", function (assert) {
    var datepicker = $("#startDate");

    var event = $.Event("onSelect");

    datepicker.on("onSelect"),
        function () {
            alert("Test");
        };

    // Trigger the key event
    datepicker.trigger(event);
});
...