Imposta altezza elemento in PhantomJS

Question

Come si imposta l'altezza dell'elemento durante il test in PhantomJS?

Sto testando su Karma utilizzando il framework Jasmine e eseguendo il browser headless di PhantomJS. Sto provando a testare una direttiva AngularJS che riguarda lo "scorrimento infinito" (caricamento automatico degli elementi quando l'utente scorre vicino al fondo dell'elemento contenitore). Sono non utilizzando jQuery, né desidero (a meno che non ci sia altro modo). Sto utilizzando .clientHeight, .scrollTop e .scrollHeight proprietà. La mia direttiva funziona come previsto, almeno in Chrome.

Ho provato a impostare un test per la mia direttiva, ma non riesco a trovare un modo per creare elementi con altezza diversa da zero. Il seguente codice non mi dà gioia:

describe('something', function() { 
    it('works with element height', inject(function ($document) { 
     var el = angular.element('<div>Lorem ipsum...</div>')[0]; 
     $document.append(el); 
     // size of non-empty block element should be non-zero by default 
     expect(el.clientHeight).not.toBe(0); 
     expect(el.scrollHeight).not.toBe(0); 
     // it should certainly be non-zero after the height is set manually 
     el.style.height = '999px'; 
     expect(el.clientHeight).not.toBe(0); 
     expect(el.scrollHeight).not.toBe(0); 
    })); 
}); 

Cosa sto facendo male? È possibile fare ciò che sto cercando di fare?

Risposta breve

Come regolare l'altezza dell'elemento utilizzando element.style.height funziona bene. Non ho semplicemente aggiunto l'elemento correttamente nel corpo del documento.

Answer 1

Penso che il problema sia con $ documento. È necessario definire quale documento e trovare l'elemento del corpo e allegarlo. Questo codice mi passa ora in PhantomJS.

it('works with element height', inject(function ($document) { 
    var el = angular.element('<div>Lorem ipsum...</div>')[0]; 

    //Find the correct body element 
    angular.element($document[0].body).append(el); 

    // size of non-empty block element should be non-zero by default 
    expect(el.clientHeight).to.not.equal(0); 
    expect(el.scrollHeight).to.not.equal(0); 
    // it should certainly be non-zero after the height is set manually 
    el.style.height = '999px'; 
    expect(el.clientHeight).to.not.equal(0); 
    expect(el.scrollHeight).to.not.equal(0); 
})); 

Answer 2

Si potrebbe anche rimuovere l'uso di JqLite del tutto e utilizzare metodi prime DOM ...

var el = document.createElement('div'); 
el.textContent = "Lorem ipsum..."; 

document.body.appendChild(el); 

...