bug: Karma UI doesn't fully work in an Ionic Angular application

[davidkron]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Jasmine part of the Karma UI doesn't show. This screenshot is from a newly created Ionic application using the CLI.

Expected Behavior

Jasmine part of the Karma UI should show. This screenshot is from a newly created Angular application (without Ionic) using the CLI.

Steps to Reproduce

1. npm install -g @ionic/cli@latest
2. ionic start my-app blank --type=angular-standalone
3. cd my-app/
4. npm run test

Note: didn't provide a reproduction URL, as the problem is shown in a newly generated Ionic application.

Code Reproduction URL

https://github.com

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   -
   /home/vagrant/.npm-global/lib/node_modules/@ionic/cli/lib/project/index.js
   - /home/vagrant/.npm-global/lib/node_modules/@ionic/cli/lib/index.js
   - /home/vagrant/.npm-global/lib/node_modules/@ionic/cli/index.js
   - /home/vagrant/.npm-global/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   -
   /home/vagrant/.npm-global/lib/node_modules/@ionic/cli/lib/project/index.js
   - /home/vagrant/.npm-global/lib/node_modules/@ionic/cli/lib/index.js
   - /home/vagrant/.npm-global/lib/node_modules/@ionic/cli/index.js
   - /home/vagrant/.npm-global/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.0 (/home/vagrant/.npm-global/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 8.3.3 @angular-devkit/build-angular : 18.2.9 @angular-devkit/schematics : 18.2.9 @angular/cli : 18.2.9 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2 @capacitor/android : not installed @capacitor/core : 6.1.2 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.17.0 (/usr/bin/node) npm : 10.8.3 OS : Linux 5.15

Additional Information

No response

[lizurej]

After struggling with the project for a while, I realized that there are several things that were preventing the report from being displayed.

But only one of them is caused by Ionic.

It seems that Ionic has a CSS file called @ionic/angular/css/structure.css in which it adds the following CSS block:

html:not(.hydrated) body {
    display: none
}

It seems that the purpose of this CSS code is to hide non-"hydrated" HTML tags. The issue is that this code conflicts because Karma, along with Jasmine, creates an iframe with a complete HTML document, and that HTML tag doesn't have the "hydrated" class.

In my case, what I did was add the following code in my global.scss:

.plt-desktop > body {
    display: block !important
}

On the other hand, and this doesn't depend on Ionic, the default configuration of Karma in the karma.conf.js file that comes with Ionic doesn't seem to work. I haven't discovered the reason yet.

However, deleting the karma.conf.js and removing the reference to it in angular.json seems to solve the problem.

[davidgeary]

FYI, I have the same problem, but rather than editing the global CSS, I created a separate testing.css file containing:

html:not(.hydrated) body {
  display: block;
  position: initial;
}

and then added it to the list of files in the projects/app/architect/test/options/styles section of angular.json so that it's only included in test builds. (This also makes it easier to remove the fix if/when this is resolved.)

[UPDATE: for Ng20/Ionic 8.6, see this comment]

[gingerr]

FYI, had also the same problem and worked around it differently )and later stumbled upon this issue).

My solution: test.ts getTestBed().configureTestingModule({ providers: [importProvidersFrom(IonicModule.forRoot())] });

[davidgeary]

It would appear that upgrading to Ng20/Ionic 8.6 has stopped the workaround above solving this issue, but I haven't worked out why yet.

In the meantime, since I'm not running any tests that rely on the CSS, the simplest option for me is simply to comment out the stylesheets listed under projects/app/architect/test/options/styles in angular.json, so Ionic's styling is not included.