Как протестировать веб-компоненты в Dart?

Question

Существует не так много документации в отношении тестирования веб-ui в Dart. Доступны два метода: a) запустить DumpRenderTree от Chrome или b) трюк, который состоит из loading the app as is and running the test code on top of it. Для тривиальных случаев первый вариант кажется немного утомительным. Поэтому последний вариант - который в моем случае не работает, когда дело доходит до загрузки компонентов.

со следующей структурой файла:

test/ 
    main_test.html 
    main_test.dart 
web/ 
    main.html 
    app.html 

(all the files are listed in this gist)

Следующий тест набор висит на втором этапе.

main() { 
    useShadowDom = true; 

    test('Inline element is initially present.',() { 
    var story =() => expect(query('#hdr'), isNotNull); 
    Timer.run(expectAsync0(story)); 
    }); 

    test('Component is loaded.',() { 
    var story =() => expect(query('#globe'), isNotNull); 
    Timer.run(expectAsync0(story)); 
    }); 
} 

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

Answer 1

Для тестирования веб-интерфейса вы должны запросить теневой РОМ или xtag (это) из webcomponent, что вы whant испытать вместо «классического» йота.
основе TodoMVC code sample

с кодом:
рабочая версия этого теста является:

main() { 
    useShadowDom = true; 

    test('Inline element is initially present.',() { 
    var story =() => expect(query('#hdr'), isNotNull); 
    Timer.run(expectAsync0(story)); 
    }); 

    test('Component is loaded.',() { 
    var root = query("span[is=x-app]").shadowRoot; 
    var story =() => expect(root.query('#globe'), isNotNull); 
    Timer.run(expectAsync0(story)); 
    }); 
} 

и тестовая версия без expectAsync должна быть:

main() { 
    useShadowDom = true; 

    Timer.run(() { 
    test('Header element is initially present.',() { 
     var hdr = query('#hdr'); 
     expect(hdr, isNotNull); 
    }); 

    test('EchapApp component is loaded.',() { 
     var root = query("span[is=x-app]").shadowRoot; 
     var globe = root.query('#globe'); 
     expect(globe, isNotNull); 
    }); 
    }); 
} 

и окончательная версия без теневого домика:

main() { 
    //useShadowDom = true; 

    Timer.run(() { 
    test('Header element is initially present.',() { 
     var hdr = query('#hdr'); 
     expect(hdr, isNotNull); 
    }); 

    test('EchapApp component is loaded.',() { 
     var root = query("span[is=x-app]").xtag; 
     var globe = root.query('#globe'); 
     expect(globe, isNotNull); 
    }); 
    }); 

} 

Для меня это 3 коды 100% проходят на Dartium с
Dart Editor версии 0.5.20_r24275
Dart SDK версии 0.5.20.4_r24275

Answer 2

Хотя это не характерно для Дарта, вы можете использовать Selenium для тестирования пользовательского интерфейса. Я считаю, что некоторые члены команды Дарт использовали Selenium для тестирования UI.

Answer 3

Вы можете попробовать использовать карма-дротик бегуна: https://github.com/karma-runner/karma-dart

Он даже имеет пример веб-компонентов.

library click_counter_test; 

import 'package:unittest/unittest.dart'; 
import 'dart:html'; 
import '../web/out/xclickcounter.dart'; 

main() { 
    test('CounterComponent.increment',() { 
    var hello = new DivElement(); 
    var component = new CounterComponent.forElement(hello); 
    expect(component.count, equals(0)); 
    component.increment(); 
    expect(component.count, equals(1)); 
    }); 
}