Тестирование Жасмин - Как проверить применяемый класс?

Question

В настоящее время я создаю свой первый проект JS и впервые пробую модульное тестирование Jasmine.

В моем коде я хочу протестировать функцию в одном из моих классов, который применяет класс css к элементу кнопки.Однако мне трудно пройти тест Жасмин, и я не уверен, почему.

Тест не пройден из-за того, что тест не видит класс '.btn-active' в целевой кнопке, что говорит о том, что функция не запущена, однако я не уверен, как этого добиться.

JS Class:

class ModeSelection {
        constructor() {
                this.easyBtn = $('#easy-mode');
                this.mediumBtn = $('#medium-mode');
                this.hardBtn = $('#hard-mode');
        }
        //applies the active class depending upon the button selected
        easyMode() {
                this.easyBtn.on('click', () => {
                        this.easyBtn.addClass('btn-active');
                        this.mediumBtn.removeClass('btn-active');
                        this.hardBtn.removeClass('btn-active');

                        $('.card-med').addClass('remove');
                        $('.card-hard').addClass('remove');
                });
        }

Обратите внимание, перед каждым тестом я установил прибор, который содержит кнопку html, к которой я тоже собираюсь применить класс.

Fixture:

beforeEach(function() {
        setFixtures(`
<div class="mode-select row">
                        <div class="col-sm-12 mode-header">
                           <h4>Select your difficulty</h4> 
                        </div>

                        <div class="col-xs-12 col-sm-4">
                            <button id="easy-mode" class="btn btn-mode btn-easy">Easy</button>
                        </div>
                         <div class="col-xs-12 col-sm-4">
                            <button id="medium-mode" class="btn btn-mode btn-med">Medium</button>
                        </div>
                         <div class="col-xs-12 col-sm-4">
                            <button id="hard-mode" class="btn btn-mode btn-hard btn-active">Hard</button>
                        </div>
</div>
      `)
});

Жасминовый тест:

 describe('Check easy mode functions', function() {
        beforeEach(function() {
            this.mode = new ModeSelection();

        });

      it('btn-active to be applied when easy function activated', function() {

            var spy = spyOn(this.mode, 'easyMode').and.callThrough();


            expect($('#easy-mode')).toHaveClass('btn-active')
        });

 });

Извиняюсь, если это довольно просто, но я новичок в Жасмин и просто искал лучший способ заставить этот тест работать.

Спасибо

Сэм

Answer 1

Это должно сработать, если вы включите в него свои светильники:

let mode;
describe('ModeSelection', () => { // tested class name
  beforeEach(() => {
    mode = new ModeSelection(); // setup
  });

  describe('call easyMode()', () => { // tested method name 
    it('should add btn-active class to #easy-mode element', () => {
      mode.easyMode(); // call tested method
      expect($('#easy-mode')).toHaveClass('btn-active')// assert it ran correctly
    });
  });
});