Модульное тестирование JS DMP, я правильно пишу?
Поэтому я работаю над созданием библиотеки компонентов и структурировал ее так, чтобы она выглядела как эта структура
app
|---components
|-------element
|----element.hbs
|----_element.scss
|----element.js
В настоящем JS я пытаюсь использовать DMP (не уверен, правильно ли я это написал, если нет, пожалуйста, не стесняйтесь исправлять, все еще пытаясь обернуть голову вокруг различных шаблонов)
element.js
import $ from 'jquery';
import VARIABLE from 'ajsfile.js';
let Element = ( function() {
const _private = {
cacheDom: () => {
_private.$element = $( '.js-element' );
_private.$trigger = $( '.js-element__trigger' );
_private.$target = $( '.js-element__target' );
_private.$icon = $( '.js-element__icon' );
},
bindEvents: () => {
_private.$trigger.on( 'click', function( e ) {
e.preventDefault();
_private.toggleTarget( $( this ) );
});
},
preRender: () => {
_private.$trigger.attr( 'aria-expanded', 'false' );
_private.$target.slideUp( 0 );
},
toggleTarget: ( $thisTrigger ) => {
let $thisParent = $thisTrigger.closest( _private.$element );
let $thisTarget = $thisParent.find( _private.$target );
let $thisIcon = $thisParent.find( _private.$icon );
$thisTrigger
.toggleClass( 'is-expanded' )
.attr( 'aria-expanded', ( i, attr ) => {
return attr == 'true' ? 'false' : 'true';
});
$thisTarget.slideToggle( VARIABLE );
$thisIcon.toggleClass( 'is-rotated' );
},
init: () => {
_private.cacheDom();
_private.bindEvents();
_private.preRender();
}
};
/* test-code */
const api = {
__test: _private
};
return api;
/* end-test-code */
const _public = {
preRender: _private.preRender,
toggleTarget: _private.toggleTarget,
init: _private.init
};
return _public;
})();
module.exports = Element;
Блок кода с комментарием фактически удаляется при сборке, отсюда читал о тестировании частного модуля, но ESLint возвращает ошибку: недоступный код.
Когда я изменяю _public на это, оно работает, ну, это не ошибка:
const _public = {
preRender: _private.preRender,
toggleTarget: _private.toggleTarget,
init: _private.init,
/* test-code */
__test: _private
/* end-test-code */
};
Тест (ожидаемая часть, я не запускаю обе, либо одна, которую я запускаю, я получаю ошибку):
import Element from './element.js';
describe( 'Element', function() {
beforeEach( function() {
this.element = Element;
});
it( 'should display closed', function() {
console.log( this.element.__test );
expect( this.element.toggleTarget ).toHaveClass( '.is-expanded' );
// or
expect( this.element.__test.toggleTarget ).toHaveClass( '.is-expanded' );
// or
expect( this.element.__test.toggleTarget( '.aclass' ) ).toHaveClass( '.is-expanded' );
});
});
В консоли я вижу:
LOG: function toggleTarget($thisTrigger) { ... }
PhantomJS 2.1.1 (Mac OS X 0.0.0) Element should display closed FAILED
Expected Function to have class '.is-expanded'.
test-context.js:10507:61
loaded@http://localhost:9876/context.js:162:17
TypeError: undefined is not a constructor (evaluating '$thisTrigger.closest(_private.$element)') thrown
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.002 secs / 0.003 secs)
Я делаю что-то не так или это потому, что в этом сценарии ничего не нужно тестировать, поскольку в основном это DOM?
Или я просто думаю об этом все неправильно?
Любая помощь будет оценена, так как я все еще новичок в этом мышлении