Error on running unit test on component with Grid

Hi,

I have a strange error in unit tests on components that implement the Grid component (and on other components as well). In apparently quite random cases, the tests fail and I get this error: 

Cannot read properties of undefined (reading 'unsubscribe')

I am also attaching a screenshot with all the error.

Acquisizione schermata 31.03.2022 alle 10.02.59.jpg

I specify that the tests cover the code of my components, not that of the Syncfusion components (obviously the related Syncfusion modules are also loaded on the .spec file).

How should I set up tests if they contain Syncfusion components?

Thanks for the reply.


8 Replies

RS Rajapandiyan Settu Syncfusion Team April 1, 2022 12:38 PM UTC

Hi Giovanni,


Thanks for contacting Syncfusion support.


Before proceeding with your query, we need more information on your requirement. So, kindly share the below details to validate further.


  1. Did you use remote data binding in the Grid? share the complete Grid code files you have used.
  2. How could you write the test cases for EJ2 Grid component? Share the test case file.
  3. Are you using the Jasmine test case or any other test case?
  4. Did you subscribe/ unsubscribe your service in the code?
  5. Share the Angular CLI version and package.json file.
  6. If possible share a simple issue reproducible sample.


Regards,

Rajapandiyan S



GI Giovanni April 4, 2022 07:51 AM UTC

Hi,

thanks for the reply. I try to answer the questions you asked me.

  1. The data I am getting from a server and managing via NgRX. Trying, however, to insert the hard-coded data and not getting from the remote server but the problem persists.
  2. Here is an example test.The setTimeout I got it from your post on the forum that responded to a case similar to mine, but honestly it doesn't seem to solve the problem!

    it('should have tasks', (done) => {
    setTimeout(() => {
    const element = fixture.debugElement.query(By.css('.tasks'));
    expect(element).toBeTruthy();
    done();
    }, 0);
    });
  3. Yes, simply Jasmine!
  4. I only use the subscription of the NgRX selector but, as I reported in answer 1, if I replace the store with hard-coded data the error remains.
  5. Here they are!
  6. {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "advance-pm": {
    "projectType": "application",
    "schematics": {
    "@schematics/angular:component": {
    "style": "scss"
    },
    "@schematics/angular:application": {
    "strict": true
    }
    },
    "root": "",
    "sourceRoot": "src",
    "prefix": "app",
    "architect": {
    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    "outputPath": "dist/advance-pm",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": [
    "src/favicon.ico",
    "src/assets"
    ],
    "styles": [
    "src/styles.scss"
    ],
    "stylePreprocessorOptions": {
    "includePaths": [
    "node_modules/@syncfusion"
    ]
    },
    "scripts": []
    },
    "configurations": {
    "production": {
    "budgets": [
    {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
    },
    {
    "type": "anyComponentStyle",
    "maximumWarning": "200kb",
    "maximumError": "400kb"
    }
    ],
    "fileReplacements": [
    {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
    }
    ],
    "outputHashing": "all"
    },
    "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
    }
    },
    "defaultConfiguration": "production"
    },
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
    "production": {
    "browserTarget": "advance-pm:build:production"
    },
    "development": {
    "browserTarget": "advance-pm:build:development"
    }
    },
    "defaultConfiguration": "development"
    },
    "extract-i18n": {
    "builder": "@angular-devkit/build-angular:extract-i18n",
    "options": {
    "browserTarget": "advance-pm:build"
    }
    },
    "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js",
    "inlineStyleLanguage": "scss",
    "assets": [
    "src/favicon.ico",
    "src/assets"
    ],
    "styles": [
    "src/styles.scss"
    ],
    "stylePreprocessorOptions": {
    "includePaths": [
    "node_modules/@syncfusion"
    ]
    },
    "scripts": []
    }
    },
    "lint": {
    "builder": "@angular-eslint/builder:lint",
    "options": {
    "lintFilePatterns": [
    "src/**/*.ts",
    "src/**/*.html"
    ]
    }
    }
    }
    }
    },
    "defaultProject": "advance-pm"
    }



    {
    "name": "advance-pm",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "db": "json-server database/db.json -w",
    "lint": "ng lint"
    },
    "private": true,
    "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@ngrx/effects": "^13.0.2",
    "@ngrx/store": "^13.0.2",
    "@ngrx/store-devtools": "^13.0.2",
    "@syncfusion/ej2-angular-buttons": "^19.4.55",
    "@syncfusion/ej2-angular-gantt": "^19.4.56",
    "@syncfusion/ej2-angular-grids": "^19.4.56",
    "@syncfusion/ej2-angular-navigations": "^19.4.56",
    "@syncfusion/ej2-angular-popups": "^19.4.53",
    "@syncfusion/ej2-angular-splitbuttons": "^19.4.52",
    "@syncfusion/ej2-angular-treegrid": "^19.4.56",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
    },
    "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.4",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/schematics": "13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
    "@angular/cli": "~13.2.4",
    "@angular/compiler-cli": "~13.2.0",
    "@ngrx/schematics": "^13.0.2",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.11.0",
    "@typescript-eslint/parser": "5.11.0",
    "eslint": "^8.2.0",
    "jasmine-core": "~4.0.0",
    "json-server": "^0.17.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
    }
    }
  7. it's a bit complex. I try to recreate it on stackblitz


RS Rajapandiyan Settu Syncfusion Team April 5, 2022 01:00 PM UTC

Hi Giovanni,


Thanks for sharing the details.


Currently, we are preparing the sample (“Angular 13 with unit test for Grid component”) to check the reported behavior at our end. So, we will update the further details on or before Apr 8th, 2022.


We appreciate your patience until then.


Regards,

Rajapandiyan S



GI Giovanni April 6, 2022 03:09 PM UTC

Thank you very much, I appreciate your interests to my problem. I look forward to your demo.



RS Rajapandiyan Settu Syncfusion Team April 8, 2022 02:14 PM UTC

Hi Giovanni,


Thanks for your update.


We have prepared the EJ2 Grid sample with simple unit test cases in Angular 13. All the test cases are properly executed at our end. Please find the below sample and code example for your reference.


 

[app.component.spec]

 

import { Grid, Edit, Page, Sort, Aggregate, GridModel, Group, Toolbar, Selection, Freeze } from '@syncfusion/ej2-grids';

 

Grid.Inject(Aggregate, Edit, Page, Group, Toolbar, Selection, Freeze, Sort);

 

let createGrid: Function = (options: GridModel, done: Function): Grid => {

  let grid: Grid;

  let dataBound: EmitType<Object> = () => { done(); };

  grid = new Grid(

    extend({}, {

        dataSource: data.slice(0, 15)

      },

      options,));

  document.body.appendChild(createElement('div', { id: 'Grid' }));

  grid.appendTo('#Grid');

  return grid;

};

 

let destroy: EmitType<Object> = (grid: Grid) => {

  if (grid) {

    grid.destroy();

    if (document.getElementById('Grid')) {

      (document.getElementById('Grid') as HTMLElement).remove();

    }

  }

};

 

describe('AppComponent', () => {

  beforeEach(async () => {

    await TestBed.configureTestingModule({

      imports: [

        RouterTestingModule,

        GridModule

      ],

      declarations: [

        AppComponent

      ],

      providers: [PageService, SortService, FilterService, GroupService],

    }).compileComponents();

  });

 

  let gridObj: Grid;

  let done: Function;

  beforeAll(() => {

    gridObj = createGrid(

      {

        allowPaging: true,

        dataSource: data,

        allowSorting: true,

        height: 300,

        columns: [

          { field: "OrderID", headerText: "Order ID", textAlign: 'Right', width: 90 },

          { field: "CustomerID", headerText: "Customer ID", width: 120 },

          { field: "Freight", headerText: "Freight", textAlign: "Right", format: "C2", width: 90 },

          { field: "OrderDate", headerText: "Order Date", textAlign: "Right", format: "yMd", width: 90 },

        ],

      }, done); // create the Grid component

  });

 

  it('Grid header testing', () => {

    expect(gridObj.element.querySelectorAll('.e-gridheader').length).toBe(1);  // header test case

  });

 

  it('Grid pager testing', () => {

    expect(gridObj.element.querySelectorAll('.e-gridpager').length).toBe(1); // pager test case

  });

 

  afterAll(() => {

    destroy(gridObj); // destroy the Grid

    (gridObj as any) = null; 

  });

});

 


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ng-unit-test-1319391954.zip


Note:

If you are writing multiple test cases on Grid component, kindly execute the test cases in async way. Since Grid takes some time to perform the actions. Also, please avoid the data comparison in the test cases. Because it takes considerable time to get the data from remote services.


Still, if you face the same issue, Kindly share the issue reproducible sample or try to make the issue in the given sample to validate further.


Regards,

Rajapandiyan S



GI Giovanni April 11, 2022 09:16 AM UTC

Hi,

Thanks for the reply, but I think we got it wrong! I don't want to test the Grid component: the Syncfusion Grid component is wrapped inside my component (Table) as I pass all the configurations and reuse the Syncfusion component without having to re-insert all the settings each time.

I created a GitHub repository with the minimal components: https://github.com/gioppy/syncfusion-grid-test 

In the project, inside `shared/table` there is the component that wraps the Syncfusion Grid component. While in the `dashboard` there is the component that uses the Table component. For simplicity I have removed NgRX and the data is hard-coded.

If you run `ng test --include=src/app/dashboard` probably you get the error (9 times out of 10 the error appears).

Thank you very much!



RS Rajapandiyan Settu Syncfusion Team April 12, 2022 03:42 PM UTC

Hi Giovanni,


Currently, we are checking the shared sample at our end. We will update the further details on or before Apr 18th, 2022.


We appreciate your patience until then.


Regards,

Rajapandiyan S



RS Rajapandiyan Settu Syncfusion Team April 18, 2022 03:11 PM UTC

Hi Giovanni,


Thanks for your patience.


We have tested the sample by following the steps you suggested, but we are unable to replicate the issue at our end. Find the video demo of the reported problem.


Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/video_ng_test437399261.zip


Find the CLI version and node version used in our machine,


Screenshot:


  1. Did you able to reproduce the reported issue in the attached sample?
  2. Share your CLI version and node version.
  3. Please check the issue with our CLI version and node version as shared above.


Regards,

Rajapandiyan S


Loader.
Up arrow icon