Модульное тестирование 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?

Или я просто думаю об этом все неправильно?

Любая помощь будет оценена, так как я все еще новичок в этом мышлении

0 ответов

Другие вопросы по тегам