Motivation for or Use Case
I want to use the third-party library ngx-easy-table in my components of a bare bone JHipster project.
Overview of the issue
Unit test fails when importing an external module (ngx-easy-table) from component file. However, running the application works fine.
./mvnw works fine (and actually works in the browser too ;)
./npmw test fails:
# ./npmw test -- home.component ✘ 1
Using node installed locally v16.14.0
Using npm installed locally 8.6.0
> jhipster-ngx-easy-table@0.0.1-SNAPSHOT pretest
> npm run lint
> jhipster-ngx-easy-table@0.0.1-SNAPSHOT lint
> eslint . --ext .js,.ts
/Users/TestUser/jhipster-ngx-easy-table/src/test/javascript/cypress/support/commands.ts
81:53 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
120:34 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
✖ 2 problems (0 errors, 2 warnings)
> jhipster-ngx-easy-table@0.0.1-SNAPSHOT test
> ng test --coverage --log-heap-usage -w=2 "home.component"
FAIL src/main/webapp/app/home/home.component.spec.ts
● Test suite failed to run
Cannot find module 'ngx-easy-table' from 'src/main/webapp/app/home/home.component.ts'
Require stack:
src/main/webapp/app/home/home.component.ts
src/main/webapp/app/home/home.component.spec.ts
6 | import { AccountService } from 'app/core/auth/account.service';
7 | import { Account } from 'app/core/auth/account.model';
> 8 | import { Columns, Config, DefaultConfig } from 'ngx-easy-table';
| ^
9 |
10 | @Component({
11 | selector: 'jhi-home',
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
at Object.<anonymous> (src/main/webapp/app/home/home.component.ts:8:1)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 0 | 0 | 0 | 0 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.273 s
Ran all test suites matching /home.component/i.
Reproduce the error
I followed the installation guide from ngx-easy-table and did the following steps:
jhipster generate with default values
npm install @angular/cdk@13.3.1 --save
npm install ngx-easy-table --save
added module to shared-libs.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { TranslateModule } from '@ngx-translate/core';
import { TableModule } from 'ngx-easy-table';
@NgModule({
exports: [FormsModule, CommonModule, NgbModule, InfiniteScrollModule, FontAwesomeModule, ReactiveFormsModule, TranslateModule, TableModule],
})
export class SharedLibsModule {}
added to the end of home.component.html:
...
<ngx-table [configuration]="configuration"
[data]="data"
[columns]="columns">
</ngx-table>
changed home.component.ts:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { AccountService } from 'app/core/auth/account.service';
import { Account } from 'app/core/auth/account.model';
import { Columns, Config, DefaultConfig } from 'ngx-easy-table';
@Component({
selector: 'jhi-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit, OnDestroy {
public configuration: Config;
public columns: Columns[];
public data = [
{
phone: '+1 (934) 551-2224',
age: 20,
address: { street: 'North street', number: 12 },
company: 'ZILLANET',
name: 'Valentine Webb',
isActive: false,
},
{
phone: '+1 (948) 460-3627',
age: 31,
address: { street: 'South street', number: 12 },
company: 'KNOWLYSIS',
name: 'Heidi Duncan',
isActive: true,
},
];
account: Account | null = null;
private readonly destroy$ = new Subject<void>();
constructor(private accountService: AccountService, private router: Router) {}
ngOnInit(): void {
this.accountService
.getAuthenticationState()
.pipe(takeUntil(this.destroy$))
.subscribe(account => (this.account = account));
this.configuration = { ...DefaultConfig };
this.configuration.searchEnabled = true;
// ... etc.
this.columns = [
{ key: 'phone', title: 'Phone' },
{ key: 'age', title: 'Age' },
{ key: 'company', title: 'Company' },
{ key: 'name', title: 'Name' },
{ key: 'isActive', title: 'STATUS' },
];
}
login(): void {
this.router.navigate(['/login']);
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}
changed angular.json:
...
"styles": ["src/main/webapp/content/scss/vendor.scss", "src/main/webapp/content/scss/global.scss", "node_modules/ngx-easy-table/style.css"],
...
changed tsconfig.json:
{
"compilerOptions": {
...
"strictPropertyInitialization": false
...
JHipster Version(s)
# jhipster --version
INFO! Switching to JHipster installed locally in current project's node repository (node_modules)
7.8.1
JHipster configuration
❯ jhipster info
INFO! Switching to JHipster installed locally in current project's node repository (node_modules)
██╗ ██╗ ██╗ ████████╗ ███████╗ ██████╗ ████████╗ ████████╗ ███████╗
██║ ██║ ██║ ╚══██╔══╝ ██╔═══██╗ ██╔════╝ ╚══██╔══╝ ██╔═════╝ ██╔═══██╗
██║ ████████║ ██║ ███████╔╝ ╚█████╗ ██║ ██████╗ ███████╔╝
██╗ ██║ ██╔═══██║ ██║ ██╔════╝ ╚═══██╗ ██║ ██╔═══╝ ██╔══██║
╚██████╔╝ ██║ ██║ ████████╗ ██║ ██████╔╝ ██║ ████████╗ ██║ ╚██╗
╚═════╝ ╚═╝ ╚═╝ ╚═══════╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══════╝ ╚═╝ ╚═╝
https://www.jhipster.tech
Welcome to JHipster v7.8.1
Welcome to the JHipster Information Sub-Generator
##### **JHipster Version(s)**
\```
jhipster-ngx-easy-table@0.0.1-SNAPSHOT /Users/TestUser/jhipster-ngx-easy-table
└── generator-jhipster@7.8.1
\```
##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**
<details>
<summary>.yo-rc.json file</summary>
<pre>
{
"generator-jhipster": {
"applicationType": "monolith",
"authenticationType": "jwt",
"baseName": "jhipsterNgxEasyTable",
"blueprints": [],
"buildTool": "maven",
"cacheProvider": "ehcache",
"clientFramework": "angularX",
"clientPackageManager": "npm",
"clientTheme": "none",
"clientThemeVariant": "",
"creationTimestamp": 1655819689067,
"cypressCoverage": false,
"databaseType": "sql",
"devDatabaseType": "h2Disk",
"devServerPort": 4200,
"dtoSuffix": "DTO",
"enableGradleEnterprise": false,
"enableHibernateCache": true,
"enableSwaggerCodegen": false,
"enableTranslation": true,
"entitySuffix": "",
"jhiPrefix": "jhi",
"jhipsterVersion": "7.8.1",
"jwtSecretKey": "YourJWTSecretKeyWasReplacedByThisMeaninglessTextByTheJHipsterInfoCommandForObviousSecurityReasons",
"languages": ["en"],
"messageBroker": false,
"nativeLanguage": "en",
"otherModules": [],
"packageName": "org.example.jhipster.ngxeasytable",
"pages": [],
"prodDatabaseType": "postgresql",
"reactive": false,
"searchEngine": false,
"serverPort": "8080",
"serverSideOptions": [],
"serviceDiscoveryType": "no",
"skipCheckLengthOfIdentifier": false,
"skipFakeData": false,
"skipUserManagement": false,
"testFrameworks": ["cypress"],
"websocket": false,
"withAdminUi": true
}
}
</pre>
</details>
##### **JDL for the Entity configuration(s) `entityName.json` files generated in the `.jhipster` directory**
<details>
<summary>JDL entity definitions</summary>
<pre>
</pre>
</details>
##### **Environment and Tools**
openjdk version "11.0.15" 2022-04-19
OpenJDK Runtime Environment Homebrew (build 11.0.15+0)
OpenJDK 64-Bit Server VM Homebrew (build 11.0.15+0, mixed mode)
git version 2.36.1
node: v16.15.1
npm: 8.11.0
Docker version 20.10.16, build aa7e414
Docker Compose version v2.6.0
No change to package.json was detected. No package manager install will be executed.
Congratulations, JHipster execution is complete!
Sponsored with ❤️ by @oktadev.
