What is the best way to attach a DOM element to an Angular 2 TestBed?

Question

What is the best way to attach a DOM element to an Angular 2 TestBed?

I was wondering if it is possible to add a DOM element to the test DOM before running tests. I'm new to testing, but something like

fixture.debugElement.prepend('div')

might work. However, I understand that this approach may indicate a design flaw in my code. If you would like more explanation on why I am asking this question, please see below.

Reason for needing this:

In my application, I have a text ticker directive similar to a previous version found at this link. For this directive to work properly, I need to calculate the length of the text. To do this, I create a ghost element and place it in my AppComponent as shown below:

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

Unfortunately, this element needs to be positioned where it is due to CSS requirements for proper measurement. However, this means that it is not accessible in my tests.

angular typescript angular2-testing

Answer 1

Answer №1

Here is an example of what it might look like:

const updatedTemplate = `<div id="ghost"></div>${existingTemplate}`

...

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [TestedComponent],
    // ... additional module configurations
  }).overrideTemplate(TestedComponent, updatedTemplate )
  .compileComponents();
}));

Answer 2

Here is an example of what it might look like:

const updatedTemplate = `<div id="ghost"></div>${existingTemplate}`

...

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [TestedComponent],
    // ... additional module configurations
  }).overrideTemplate(TestedComponent, updatedTemplate )
  .compileComponents();
}));

What is the best way to attach a DOM element to an Angular 2 TestBed?

Answer №1

Similar questions

Yelp API call resulting in an 'undefined' response

Hide panel when button is clicked - bootstrap

Issues with Angular2 http.get() returning 404 errors consistently

"Troubleshooting: Module not found" (Getting started with Jest in a nested project connected to a shared directory)

Creating a JSON object from an array of data using TypeScript

The NgRx Store encountered an error: Unable to freeze

No declaration file was found for the module named 'vue2-timepicker'

Modify the content of a separate division by selecting a different item in a list with the help of Vue.js and TypeScript

How can I add a JavaScript-created element into a Primeng TurboTable component?

The issue of binding subjects in an Angular share service

Is there a way to disable tslint warnings for npm linked packages?

Steps to deactivate an angular material component on version 2.0.0-beta.5

The CSS "mask" property is experiencing compatibility issues on Google Chrome

Locate and return the index in Typescript

Steps for generating data with Typescript Sequelize model without specifying an id:

React and TypeScript: Anticipating a function call or assignment but encountered an expression instead

Dynamically loading external JavaScript for an Angular component and triggering the window load event

The subsequent picture is not appearing on screen

How to retrieve the value of a selected item in primeng using p-dropdown and angular

Adding a new key to a specific position in an array using Angular