Угловое 1 - событие изменения размера окна триггера в тестах

Question

У меня есть директива, которая условно применяет классы CSS к визуализированному HTML на основе вычислений по ширине окна. Директива работает отлично ... если вы измените размер окна на этой странице, вы увидите, как элементы помещаются в раскрывающееся меню переполнения: http://ngofficeuifabric.com/demos/uifBreadcrumb. Код для контроллера директивы находится здесь: https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/src/components/breadcrumb/breadcrumbDirective.ts#L119-L164.

Задача, которую мы имеем, - написать надежные тесты. В рамках тестов мы хотим проверить, что класс переполнения добавлен/удален в зависимости от изменения размера окна. Мы пробовали множество способов сделать это без везения ... кажется, событие resize будет срабатывать, но мы после теста оценим. У нас это работалось, установив значение свойства window.innerWidth, но это должно быть только для чтения.

Мы попытались установить значение, прежде чем все испытания в качестве отправной точки:

beforeAll(() => { 
    originalWidth = jQuery(document.body).css('width'); 
    jQuery(document.body).css('width', '800px'); 
    jQuery(window).trigger('resize'); 
}); 

, а затем пытается тест вроде этого:

it('should not have is-overflow class',() => { 
    expect(element).not.toHaveClass('is-overflow'); 
}); 

Это терпит неудачу, потому что PhantomJS начинается ширина = 400px поэтому класс добавлен, но в beforeAll() мы устанавливаем его на 800 пикселей ... обработчик события изменения размера запускается хорошо после того, как этот тест запускается &, это вызывает ошибку. Даже добавление задержек с setTimeout() не помогает (и не желательно).

В других тестах мы должны несколько раз изменять размер браузера, чтобы обеспечить обновление информации по мере необходимости.

it('should change breadcrumb count on resize', inject(($window: ng.IWindowService) => { 
    let startingWidth: string = jQuery(document.body).css('width'); 

    let visibleLinks: JQuery = element.find('.ms-Breadcrumb-list li'); 
    expect(visibleLinks.length).toBe(4); 

    let overflowLinks: JQuery = element.find('.ms-ContextualMenu li'); 
    expect(overflowLinks.length).toBe(2); 

    // narrow down window 
    jQuery(document.body).css('width', '620px'); // must be less than break point 
    jQuery(window).trigger('resize'); 

    visibleLinks = element.find('.ms-Breadcrumb-list li'); 
    expect(visibleLinks.length).toBe(2); 

    overflowLinks = element.find('.ms-ContextualMenu li'); 
    expect(overflowLinks.length).toBe(4); 

    // back to normal 
    jQuery(document.body).css('width', startingWidth); 
    jQuery(window).trigger('resize'); 

    visibleLinks = element.find('.ms-Breadcrumb-list li'); 
    expect(visibleLinks.length).toBe(4); 

    overflowLinks = element.find('.ms-ContextualMenu li'); 
    expect(overflowLinks.length).toBe(2); 
})); 

вручную тестирование директива показывает, что это именно то, что мы хотим, но после добавления многочисленных console.log() заявления, то ясно, что событие изменения размера не стрелять сразу же, когда мы пытаемся назвать это ... скорее задерживаются на запускать ПОСЛЕ испытаний.

Есть ли надежный способ запуска события изменения размера для запуска и завершения тестов?

Answer 1

Я думаю, что изменение размера и прокрутка не по периметру модульного теста. было бы легко выполнить проверку такого рода событий внутри теста интеграции (т. Е. С помощью транспортира).

Например, я должен был разработать прокрутку к вершине в одном из моих проектов, и единственный способ проверить это был с интеграционными тестами.