vendredi 29 juin 2018

Testing dom in angular

I have this form in an tect.html file and I want to test if the button is disabled or not:

//an ID INPUT
 <label class="form-control-label" jhiTranslate="oncosupApp.protocolo.identificador" for="field_identificador">Identificador</label>
        <input type="text" class="form-control" name="identificador" id="field_identificador"
            [(ngModel)]="protocolo.identificador" required/>


//and the button
<button id="ref_button" type="submit" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">

I am using protractor, cucumber, and dom methods to test if this button is disabled when the form data are invalid, so I check its attribute disabled like this:

const { Given, When, Then } = require('cucumber');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const chai = require('chai');
const expect  = chai.expect;
const should = chai.should();
chai.use(require('chai-dom'));

Given('I go to the project', {timeout: 90 * 1000},function(callback) {
  browser.driver.manage().window().maximize();
        browser.get('http://localhost:8080/#/').then(callback);   

  });
  
   When('I put a blank id',{timeout: 90 * 1000},  function( callback) {
        
        element(by.css("*[id='field_identificador']")).click();
        element(by.css("*[id='field_identificador']")).sendKeys('4').then(callback);
       
    });
    
    
    Then('Disabled should be true',{timeout: 90 * 1000}, function() {
  JSDOM.fromFile("src/main/webapp/app/entities/protocolo/protocolo-dialog.component.html").then(dom => {
   dom.window.document.getElementById("ref_button").hasAttribute('disabled').should.be.true;
     
    });
  });
Now the test always fails, cause it doesnt find disabled. But when I use jasmine and protractor though, like below, it works perfectly, fails when it is enabled and passes when disabled.
//describe.....

it('When the id is blank form is invalid so disabled should be true', function () {
        
        element(by.css("*[id='field_identificador']")).click();
      element(by.css("*[id='field_identificador']")).sendKeys('');
        
        expect(button.getAttribute('disabled')).toEqual('true');

    });
What am I missing in the first cobination with cucmber? Maybe jsdom? Maybe teh callbacks? Maybe there is another way to test dom using cucmber and protrcator???

Thanks!

Aucun commentaire:

Enregistrer un commentaire