小编Lui*_*lle的帖子

我正在测试使用Angular(2+)制作的网络应用程序,我使用Jasmine + Karma作为测试环境.我经常搜索但是我无法测试一个元素是否可见,我以为我会找到一个罐装匹配器或Angular的一些实用方法,但我没有.
我尝试使用classList属性HTMLElement,测试:visible,但这不起作用.
我觉得我缺少一些基本的东西,因为它应该是一些基本的东西.
那么,在下面的例子中,我如何测试带有id的div header-menu-dropdown-button是否可见？

这是我正在努力的测试方法:

模板

<div id="header-menu-dropdown-button" class="dropdown-closing-level" [hidden]="!showUserMenu" (click)="showMenu($event)"></div>
<ul [hidden]="!showUserMenu" class="dropdown-menu" aria-labelledby="dropdown">
    <li class="dropdown-item"><a href="#">Account</a></li>
    <li class="dropdown-item"><a href="#" (click)="logout($event)">Logout</a></li>
</ul>

测试

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule, TranslationsModule],
        declarations: [ AppHeaderComponent ], // declare the test component
    })
}));

beforeEach(() => {
    fixture = TestBed.createComponent(AppHeaderComponent);
    comp = fixture.componentInstance;
    menuDropDownButtonDe = fixture.debugElement.query(By.css('#header-menu-dropdown-button'));
    menuDropDownButtonEl = menuDropDownButtonDe.nativeElement;
});

it('menu should be closed by default', () =>  {
    //Here I want …

我正在尝试构建一个支持插件的Web应用程序,环境是Angular 2(到目前为止),Typescript 2.1和Webpack 2.我有一些扩展点(插槽)插件可以在其中绘制内容:基本上我有一个组件它能够托管运行时已知的其他组件(参见"掌握Angular 2组件"第10章的想法,以及SO + plunker如何在运行时编译和"绘制"Angular组件)

这就是我想要实现的目标:

// in plugin.service.ts
loadPlugin(url)
{
    return System.import('absolute OR relative ?? plugin base path' + name)
           .then((pluginModule) => {
               const Plugin = pluginModule.default;
               // then use the plugin
    });
}

...

//content of the plugin file being imported
export default class HeaderButtonsPlugin {
    constructor() {}
    //useful things about the plugin
}

我在运行时使用System.importWebpack 导入模块,虽然我知道不推荐使用,但AFAIK是使用typescript动态导入模块的唯一方法,因为importtypescript本身尚不支持(参考这里).(有没有其他方法可以实现这一目标？)

现在,仅仅为了测试系统,我使用下面的目录树将插件目录包含在应用程序的同一根目录(src目录)中; 请注意,这会导致webpack在编译时知道插件代码的存在,并将插件和应用程序打包在同一个bundle的集合中,这是为了测试插件架构功能而进行的简化; 这是文件夹树:

- src
    - app
        - core
            - plugin.service.ts
    - …