Тест класса элементов, показывающий ng-нетронутый и неуспешный при правильном вводе - PullRequest
Новая
       9

Тест класса элементов, показывающий ng-нетронутый и неуспешный при правильном вводе

0 голосов
/ 05 января 2019

Я пытаюсь протестировать небольшое угловое приложение, которое я сделал. Мое приложение - это простая таблица пользователей (вы можете добавлять и редактировать пользователей). Имя и адрес электронной почты подтверждены.

Я хочу проверить проверку при вводе имени, проверка очень проста - ваше имя должно быть длиной не менее 3 символов. Если ваше имя прошло проверку , то имя будет выделено зеленым цветом , а класс ввода будет

имя пользователя контроль формы input-sm ng-dirty ng-valid-parse ng-touch-ng-valid-required ng-valid ng-valid-minlength

если ваше имя не прошло проверку ввод имени будет желтым , а класс ввода будет

имя пользователя, управление формой, ввод-sm ng-недействительный ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched

conf.js 

exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
onPrepare : function() {
    // browser.manage().window().setSize(1600, 1000);
    browser.manage().window().maximize();
},
capabilities: {
    'browserName': 'chrome'
},
specs: ['specs/main-spec.js'],
jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 3000000,
},
};

Основные-spec.js 

const userFormPage = require('../pages/user-form-page');
describe('test app', function () {
    it('should get to the main page of the app', function () {
        browser.get('http://localhost:8080/TestAppExample/index');
        expect(browser.getCurrentUrl()).toEqual('http://localhost:8080/TestAppExample/index');
    });
    it('should write wrong input in the name input',function () {
        userFormPage.sendKeysNameInput('na');
        expect(userFormPage.getNameInput().getAttribute('value')).toEqual('na');
        // browser.wait(function () {
        //     return nameInput.getAttribute('class').then((attr) => {
        //         return attr == 'username form-control input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched';
        //     })
        // },10000);
        expect(userFormPage.getNameInput().getAttribute('class')).toEqual('username form-control input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched');
    });
});

пользователь-форма-page.js 

var userFormPage= function () {
    var nameInput = element(by.id('uname'));

    this.getNameInput = function () {
        return nameInput;
    };

    this.sendKeysNameInput = function (keys) {
        nameInput.clear().sendKeys(keys)
    }
};

module.exports = new userFormPage();

index.html 

<html>
    <head>
        <title>Test App</title>
        <link href="/TestAppExample/static/css/bootstrap.css" rel="stylesheet">
        <link href="/TestAppExample/static/css/app.css" rel="stylesheet">
    </head>
    <body data-ng-app="myApp" class="ng-cloak">
        <div class="generic-container" data-ng-controller="UserController as controller">
            <div class="panel panel-default">
                <div class="panel-heading"><span class="lead">User Registration Form </span></div>
                <div class="formcontainer">
                    <form data-ng-submit="controller.submit()" name="myForm" class="form-horizontal">
                        <input type="hidden" data-ng-model="controller.user.id" />
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label class="col-md-2 control-lable" for="uname">Name</label>
                                <div class="col-md-7">
                                    <input type="text" data-ng-model="controller.user.userName" id="uname" class="username form-control input-sm"
                                        placeholder="Enter your name" required data-ng-minlength="3"/>
                                    <div class="has-error" data-ng-show="myForm.$dirty">
                                        <span data-ng-show="myForm.uname.$error.required">This is a required field</span>
                                        <span data-ng-show="myForm.uname.$error.minlength">Minimum length required is 3</span>
                                        <span data-ng-show="myForm.uname.$invalid">This field is invalid </span>
                                     </div>
                                </div>

                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-12">
                                <label class="col-md-2 control-lable" for="address">Address</label>
                                <div class="col-md-7">
                                    <input type="text" data-ng-model="controller.user.address" id="address" class="form-control input-sm"
                                        placeholder="Enter your Address. [This field is validation free]"/>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-12">
                                <label class="col-md-2 control-lable" for="email">Email</label>
                                <div class="col-md-7">
                                    <input type="email" data-ng-model="controller.user.email" id="email" class="email form-control input-sm"
                                        placeholder="Enter your Email" required/>
                                    <div class="has-error" data-ng-show="myForm.$dirty">
                                        <span data-ng-show="myForm.email.$error.required">This is a required field</span>
                                        <span data-ng-show="myForm.email.$invalid">This field is invalid </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-actions floatRight">
                                <input type="submit" id="submit" value="{{!controller.user.id ? 'Add' : 'Update'}}"
                                    class="btn btn-primary btn-sm" data-ng-disabled="myForm.$invalid">
                                <button type="button" id="reset" data-ng-click="controller.reset()" class="btn btn-warning btn-sm"
                                    data-ng-disabled="myForm.$pristine">Reset Form</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading"><span class="lead">List of Users </span></div>
                <div class="tablecontainer">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Email</th>
                                <th width="20%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-ng-repeat="u in controller.users" class="user-row">
                                <td><span data-ng-bind="u.userName" class="user-name-td"></span></td>
                                <td><span data-ng-bind="u.address"></span></td>
                                <td><span data-ng-bind="u.email"></span></td>
                                <td>
                                    <button type="button" id="edit" data-ng-click="controller.edit(u.id)"
                                        class="btn btn-success custom-width">Edit</button>
                                    <button type="button" id="remove" data-ng-click="controller.openModal(u)"
                                        class="btn btn-danger custom-width">Remove</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div data-ng-controller="ModalInstanceController as modalCtrl">
            <script type="text/ng-template" id="modalContent">
                <div class="modal-header">
                    <h3 class="modal-title">Delete user</h3>
                </div>
                <div class="modal-body">
                    <label class="control-lable">Are you sure wan't to delete user {{userName}}?</label>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="ok" type="button" ng-click="$close()">OK</button>
                    <button class="btn btn-warning" id="cancel" type="button" ng-click="$dismiss('cancel')">Cancel</button>
                </div>
            </script>
        </div>

        <script src="/TestAppExample/static/js/vendor/angular.js"></script>
        <script src="/TestAppExample/static/js/vendor/jquery.min.js"></script>
        <script src="/TestAppExample/static/js/vendor/ui-bootstrap-tpls-1.3.2.js"></script>
        <script src="/TestAppExample/static/js/vendor/bootstrap.min.js"></script>
        <script src="/TestAppExample/static/js/app.js"></script>
        <script src="/TestAppExample/static/js/service/UserService.js"></script>
        <script src="/TestAppExample/static/js/controller/UserController.js"></script>
        <script src="/TestAppExample/static/js/controller/ModalInstanceController.js"></script>
    </body>
</html>

Мой тест записывает 'na' в поле ввода имени, а имя ввода становится желтым, как и должно, но когда я запускаю тест, я получаю следующую ошибку

Ожидается, что 'username form-control input-sm ng-unououched ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength' равно 'username-контроль формы input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched '.

EDIT

Если я поменяю свой sendKeysNameInput() метод на 

 this.sendKeysNameInput = function (id, keys) {
    var targetInput = element(by.id(id));
    (<HTMLInputElement>targetInput).focus().clear().sendKeys(keys)
}

Тогда я получаю неожиданную ошибку токена 

        (<HTMLInputElement>targetInput).focus().clear().sendKeys(keys)
         ^

SyntaxError: Unexpected token <

Моя идея (WebStorm) предложила мне установить мой язык как реагирующий, когда я изменил свой метод sendKeysNameInput(), но я использую обычный js с node.js (библиотеки транспортировщика и жасмина) и тестирую приложение Angular.

1 Ответ

0 голосов
/ 05 января 2019

Добавьте nameInput.focus() в ваш sendKeysNameInput(), который установит фокус на ваш вход и заставит его считаться "затронутым". В качестве альтернативы вы можете изменить sendKeysNameInput() на что-то вроде 

this.sendKeysNameInput = function (id, keys) {
    var targetInput = element(by.id(id));
    (<HTMLInputElement>targetInput).focus().clear().sendKeys(keys)
}

И getNameInput() к чему-то более похожему на 

this.getInputValue = function (id) {
  return (<HTMLInputElement>document.getElementById(id)).value
};

И создайте метод с именем getClassValue()

this.getInputValue = function (id) {
  return document.getElementById(id).className
};

Что позволит вам сделать это 

userFormPage.sendKeysNameInput('uname', 'na');
expect(userFormPage.getInputValue('uname').toEqual('na');
expect(userFormPage.getClassValue('uname').toEqual('...');

И это превратит ваши функции в чистые функции , что позволит вам работать с несколькими входами в форме по мере роста.

Еще одна вещь, которую стоит упомянуть: если я прав, вы не хотите получать атрибут класса , а вместо этого className свойство DOM. Атрибуты используются для инициализации свойств DOM и, как правило, впоследствии не изменяются, атрибут класса должен обновляться, но рекомендуется использовать свойство DOM, которое будет всегда обновляться.

Некоторые свойства, такие как textContent, не имеют прикрепленных к ним атрибутов, и наоборот, некоторые атрибуты, такие как colspan, не имеют связанных свойств DOM, в случае colspan получение атрибута является единственно возможным делать. В случае Input, который имеет атрибут value и свойство value, вы обнаружите, что атрибут никогда не обновляется, что вы можете увидеть здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...