Testing a component output component.element

Help Requests
1

Hello everyone,
I’m trying to test a simple component output:

import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
import {PLATFORM} from 'aurelia-pal';

describe('Account Details', () => {
  let component;

  beforeEach(() => {
    component = StageComponent
      .withResources(PLATFORM.moduleName('account-details'))
      .inView('<account-details"></account-details>');
  });

  it('should render first name', done => {
    component.create(bootstrap).then(() => {
      console.log(component.element);
      expect(component.element.textContent).toBe('No details yet.');
      done();
    }).catch(e => { console.log(e.toString()) });
  });

  afterEach(() => {
    component.dispose();
  });
});

<template>
  <div class="account-details">${message}</div>
</template>

import { inject, customElement, bindable, useView } from 'aurelia-framework';
import {PLATFORM} from 'aurelia-pal';

@useView(PLATFORM.moduleName('account-details.html'))
@customElement('account-details')
@inject(Element)
export class AccountDetails {
  message = "No details yet.";

  constructor(element) {
    this.element = element;
  }
}

How can I test the output of the component?
“No details yet.”
when try component element, I get :
_ HTMLUnknownElement {
[Symbol(SameObject caches)]: [Object: null prototype] {
attributes: NamedNodeMap {},
style: CSSStyleDeclaration {
_values: {},
_importants: {},
_length: 0,
onChange: [Function (anonymous)]
},
dataset: DOMStringMap {},
classList: DOMTokenList {},
children: HTMLCollection {}
}
}

If I try document.querySelector("div.account-details"); I’ve got NULL
On component.element.innerText => undefined

2

I think that the@useView might be causing the problem.

The convention should automatically associate the markup with the class. That is, it should work even without the @useView.

3

I’ll try ity out without the decorator.

4

Just a general and dummy question, but how can I (with or without @useView) ensure that my component has a h4 title, containing some text and/or simulate a click on a button and inspect the result?

5

That’s where the conventional loader of au1 comes to play. As long as you have the same name for the view model and the html files (for example: custom-element.[tj]s and custom-element.html), it can load associate the html with the view model class.

1 Like