How to append a DOM element to an angular 2 TestBed?

Question

To cut to the chase, I would like to know if there is a way to prepend a DOM element to the test DOM. I'm new to testing but something like fixture.degugElement.prepend('div'). From what I've learned about testing this probably reveals a design flaw, so if you'd like some justification I have added the reason below.

Why I need to do this:

In my application I have a text ticker directive similar to this previous version. In order to function I have to measure the length of the text. To achieve this I create a ghost element an stick it in my AppComponent

@Component({
  selector: 'app-root',
  template: `
    <div id="ghost"></div> <!-- THIS IS THE GUY I NEED -->
    <div class="main-area">
      <router-outlet></router-outlet>
    </div>
  `,
  styleUrls: ['./app.component.scss']
})

Unfortunately I need this element to be where it is because of of the css positioning required to measure it properly, but that means that it is not available in my tests.

excellent! that worked. I'll have to familiarize myself with testbed more. — Nate May, Jun 20 '17 at 18:27
@NateMay How did you actually append and override it. Can you please post the answer? I have to add `` to my existing template, which is around 130 lines. — Amit Chigadani, Oct 10 '17 at 12:29
Answer posted. Notice that the async needs to wrap the `TestBed`'s `beforeEach()` — Nate May, Oct 10 '17 at 16:16

score 3 · Accepted Answer · answered Oct 10 '17 at 16:15

3

Looks something like this:

const newTemplate = `<div id="ghost"></div>${oldTemplate}`

...

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ComponentUnderTest],
    // ... more module stuff
  }).overrideTemplate(ComponentUnderTest, newTemplate )
  .compilecomponents();
}));

answered Oct 10 '17 at 16:15

Nate May

3,814
7
33
86

Works for angular 5 – Carlos Pliego May 30 '18 at 23:45

How to append a DOM element to an angular 2 TestBed?

1 Answers1