Tests are not passing for Angular and React applications with Reveal component

[wnvko]

Test for Angular and React are not passing when there is Reveal component added to the application. Steps for Angular:

1. Create angular application.
2. Add reveal component.
3. Run tests.

ReferenceError: $ is not defined error is logged in the console.

Steps for React:

1. Create react application.
2. Add reveal component.
3. Run tests.

ReferenceError: $ is not defined error is logged in the console.

Note: you can go to https://my.appbuilder.dev/ create new application, add Reveal component to the view and download it for Angular and React.

[brianlagunas]

Did you submit this issue to the correct repo? This looks like a AppBuilder codegen issue.

That error means that the jquery dependency was not found/loaded

Also, the codegen versions of the Reveal dependency is over a year old. current version is 1.6.7

[wnvko]

@brianlagunas I have updated my application to Reveal 1.6.7. Also, updated jQuery to 3.6.0 and dayjs to 1.8.21. The build passes with no issues and application starts and runs with no issues. Only the test fails. This is not an App Builder / Code Gen issue as I am able to build and run the application. And yes, jQuery is there too.

The question here is how the test should reach to the jQuery as it is provided in the index.html and is not actually part of the reveal component.

Note: we are using revealbi/dom 0.0.11, revealbi/ui 0.1.14 and revealbi/ui-react 0.1.6. We are on the way to move to 0.2.x but it was out after the release of React for App Builder.

[brianlagunas]

This is not an issue with the component itself. This is an issue with configuring the testing framework you are using to properly load any dependencies the component has.

[wnvko]

@brianlagunas We tried several ways to fix the test setup with no success. For Angular we have this in the template:

<rv-reveal-view dashboard="Sales" [options]="dashboardOptions" class="reveal-dash-board"></rv-reveal-view>

and in code behind we have this:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RevealSdkSettings, RevealViewOptions } from '@revealbi/ui';

RevealSdkSettings.serverUrl = 'https://samples.revealbi.io/upmedia-backend/reveal-api/';

@Component({
  selector: 'app-master-view',
  standalone: true,
  imports: [],
  templateUrl: './master-view.component.html',
  styleUrls: ['./master-view.component.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MasterViewComponent {
  dashboardOptions: RevealViewOptions = {
    visualizations: {
      menu: {
        copy: false,
        duplicate: false
      }
    }
  };
}

The issue in the test is coming from this line:

RevealSdkSettings.serverUrl = 'https://samples.revealbi.io/upmedia-backend/reveal-api/';

serverUrl is a full property with getter and setter. In the setter it calls $.ig.....

Our test is very simple like this:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { MasterViewComponent } from './master-view.component';

describe('MasterViewComponent', () => {
  let component: MasterViewComponent;
  let fixture: ComponentFixture<MasterViewComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MasterViewComponent ],
      imports: [ NoopAnimationsModule, FormsModule ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MasterViewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

The test is actually fails at this line:

import { MasterViewComponent } from './master-view.component';

it does not even start. At this line MasterViewComponent is created and it hits the serverUrl setter and fails with:

Error during loading: Uncaught ReferenceError: $ is not defined in

We tried to provide the jQuery as static resource, we tried to provide it as local variable and many other ways. However, as the test fails before it is event started we did not find a clean way to fix this issue.

One more thing. This issue came from Code Generator. In Code Generator we are trying to create clean and readable applications. In this case, even if we find some hacky way to make tests run, I am not sure we will implement this in Code Gen. From day one of this project we do all possible to provide our customers with up-to-date clean and readable code.

The question here is how to setup the test environment in a clean way.

Note: following the steps described here when I set $.ig.RevealSdkSettings.setBaseUrl("url-to-server");, as described in the remark, tests are not passing.

[brianlagunas]

@wnvko since you reopened this issue, I assume you will be working on a solution and will be submitting your PR when you find it.