小编ela*_*ash的帖子

我正在使用jQuery UI Tooltip小部件

<li>
    <div class="i1">
        <a href="#inf-1"title="??????????">
            <span class="ui-icon ui-icon-search"></span>
        </a>
    </div>
</li>
<li><a href="#inf-2"title="???????????"><span class="ui-icon ui-icon-info"></span></a></li>
<li><a href="#inf-3"title="???????"><span class="ui-icon ui-icon-copy"></span></a></li>

我根据他们的例子编写了以下CSS,它就像一个魅力:

.tooltip {
    display:none;
    background: black;
    font-size:12px;
    height:10px;
    width:80px;
    padding:10px;
    color:#fff; 
    z-index: 99;
    bottom: 10px;
    border: 2px solid white;
/* for IE */
  filter:alpha(opacity=80);
  /* CSS3 standard */
  opacity:0.8;
}

但我有3-4个工具提示,我想看起来不同(如上面的示例html)所以我将它们包装在一个类中并执行此操作:

.i1 .tooltip  {
    display:none;
    background: red;
    font-size:12px;
    height:40px;
    width:80px;
    padding:20px;
    color:#fff; 
    z-index: 99;
    bottom: 10px;
    left: 50px important!;
    border: 2px solid white;
/* for IE */
  filter:alpha(opacity=80); …

基本上我有一个看起来像这样的组件:

export class CmpB extends CmpA {
    variableA:any = {};
    @Input() config:any = {};
    constructor(private serviceA: serviceA,
        @Optional() private CmpC?: CmpC) {
        super();
    }
    ngOnInit() {
        if (this.CmpC) {
            super.doSomething(parameterA);
            //other stuff
        }
    }
}

所以我基本上得到了扩展CmpA的CmpB(根据配置改变了变量A)并且为了做某事它需要一个特定的父组件CmpC.......我需要为它编写一个实际验证CmpA突变的测试.

我的测试看起来像这样

describe('CmpB', () => {
    let mock: any = MockComponent({ selector: "app-element", template: "<CmpC><CmpB></CmpB></CmpC>" });
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [mock, CmpC, CmpB],
            providers: [
                ServiceA
            ]
        }).compileComponents();
    });

    it('CmpB component test', async(() => {
        const appMock = TestBed.createComponent(mock);
        appMock.detectChanges();
        const el = appMock.debugElement.nativeElement …