HotTable not rendering in angular karma tests

Tags: #<Tag:0x00007efc617e0dd8>
#1

Hi
I have an Angular component that renders HotTable properly in the app runtime but exact same configuration setup does not render HotTable in the tests. What might be the issue ??

I am using hot-table wrapper and simply speaking it does not generate any table related dom besides main div wrapper

image

My console logs even shows that some of HOT callbacks are firing (validation hooks, dataSchema function)so “backend” of the table works correctly.

My test setup looks like this
image

I have tries with and without forRoot. All HOT configuration is created on host component constructor so it is already set at this point. Any ideas?

I have also included hot css via cdn in tests (but there is no dom so it of no use for now)

I am even able to actually get hot instance with a bit of a code. Under the hood it uses HotTableRegistrar.getInstance(id);

  ngAfterViewInit() {    // @ts-ignore
    const hotInstance = this.table.hotInstance();
    console.log('hot instance', hotInstance);
  }

which prints
'hot instance', Core{eventListeners: [Object{element: ..., event: ..., callback: ..., callbackProxy: ..., options: ..., eventManager: ...}, .........

so core is indeed there, but no rendered dom.

#2

Hi @sebastian.choina

Would you be able to prepare a package that I can test on my device? (+the steps that you take to run the test)

#3

Can it be the case that tests are ran in nested iframe?

#4

Each of our frameworks has its own tests. But generally, we do not have any examples or tutorials on how to create custom tests based on Handsontable. I have asked my colleague to share some feedback on that second topic you’ve created). And without any code samples, it is even harder to share some tips.
I should get his reply before the weekend if that is not a problem we can wait for his feedback and then get back to this issue. What do you think?

#5

Sure, I am forcing my way trough some workarounds or test gaps. I will try to check it in a standalone project to exclude influence of app internals and if it will behave exactly the same way, I will share the code with you.

Since I am using HOT angular bindings, can I see the test code for those? It surely must contain similar scenario where table has to be displayed in the test (unless not Karma+Jasmine)

#6

@aleksandra_budnik turns out we dont have to look for examples as HOT tests are behaving the same way. I have cloned HOT repo, build and modified just a little bit one of existing tests should set 'settings' as a settings object and DOM is missing for whatever reasons. I would expect the table to be actually visible. As you can see below, wrapper contains only an empty div`

  fit(`should set 'settings' as a settings object`, async () => {
    TestBed.overrideComponent(TestComponent, {
      set: {
        template: `
        I am between here>
        <hot-table [hotId]="id" [settings]="prop.settings"></hot-table>< and here
        `
      }
    });
    await TestBed.compileComponents().then(() => {
      fixture = TestBed.createComponent(TestComponent);
      const app = fixture.componentInstance;

      app.prop['settings'] = {
        data: [
          ["A1", "B1", "C1"],
          ["A2", "B2", "C2"]
        ]
      };

      fixture.detectChanges();
      expect(app.getHotInstance(app.id).getDataAtCell(0, 0)).toBe('A1');
      fail();
    });
  });

image
image.png980×969 73 KB

The funny thing is, that if I do

expect(fixture.debugElement.query(By.css("table"))).toBeNull();
it fails because it finds <table class='htCore'> somewhere xD

#7

So it was due to afterEach step. After removing it works as expected in HOT tests. Suprisingly my own tests are now rendering HOT propertly with styling etc but I had no cleanup phase there. What did change is that I had to update NodeJS and NPM to match build requirements for HOT. I have no idea if that was the case (older tools) or I did something else which fixed the issue for me…

#8

Thank you for the updates. I’m glad that you found the cause of the issue. I will update my team with that information.

#9

It is just a guess about the cause and fix, but indeed issue can be closed as it is not present for me anymore. Thanks for your efforts.

1 Like
#10