Update to generator-jhipster v8

[mshima]

Fixes #927

[mraible]

@mshima I tried again and made it to the tutorial's npm run e2e section. Even though this command does start the app on localhost:8100, Cypress cannot reach it for some reason, and all tests fail.

I also noticed that uploading a new image through the web UI used to work. Now it says "Camera plugin not supported" in the console. In the last version, there was an else clause that made it so the web UI worked too.

[mraible]

There are also a number of warnings in the console about arial-label.

[mshima]

@mshima I tried again and made it to the tutorial's npm run e2e section. Even though this command does start the app on localhost:8100, Cypress cannot reach it for some reason, and all tests fail.

I also noticed that uploading a new image through the web UI used to work. Now it says "Camera plugin not supported" in the console. In the last version, there was an else clause that made it so the web UI worked too.

Try 127.0.0.1:8100 instead.

Edit:
or use (added to workflow).

# https://github.com/cypress-io/cypress/issues/27962#issuecomment-1746294247
NODE_OPTIONS: --dns-result-order=ipv4first

[mshima]

There are also a number of warnings in the console about arial-label.

@mraible there is no change to templates.
Only changes related to jhipster v8 like properties renames.

Maybe it's related to #961. We can try to revert.

[mraible]

Try 127.0.0.1:8100

Why is this necessary for this blueprint but not for the main generator?

export NODE_OPTIONS=--dns-result-order=ipv4first

This fails, too:

** Angular Live Development Server is listening on localhost:8100, open your browser on http://localhost:8100/ **

✔ Compiled successfully.
[35874:1016/100931.054626:ERROR:node_bindings.cc(300)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.

[mshima]

Try 127.0.0.1:8100

Why is this necessary for this blueprint but not for the main generator?

It’s using 127.0.0.1 jhipster/generator-jhipster@2048035

export NODE_OPTIONS=--dns-result-order=ipv4first

This fails, too:

** Angular Live Development Server is listening on localhost:8100, open your browser on http://localhost:8100/ **

✔ Compiled successfully.
[35874:1016/100931.054626:ERROR:node_bindings.cc(300)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.

It’s probably a warning.
NODE_OPTION in this case is a runtime config. It will not work for compile time.

[mshima]

It’s using 127.0.0.1 jhipster/generator-jhipster@2048035

The main generator uses very few access from outside the container limited to npm scripts.
Ionic on the other hand is outside backend containers, we have many localhost references.
Looks more appropriate to use the NODE_OPTION option.
We can switch to 127.0.0.1.
Unfortunately tutorials should be updated too.
You can try node 20 to see if this behavior persists.

[mraible]

I tried changing cypress.config.ts to use the IP for the baseUrl:

baseUrl: 'http://127.0.0.1:8100/',

However, the tests still use localhost. So I changed angular.json to have the IP too:

"e2e": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "devServerTarget": "app:serve",
    "watch": false,
    "headed": true,
    "browser": "chrome",
    "baseUrl": "http://127.0.0.1:8100/"
  },

This makes it so 127.0.0.1 is used, but the tests still fail to resolve the website. I can click on the website when the tests are running, and it loads.

[mraible]

For some reason, http://127.0.0.1:8100 doesn't work for me in Chrome or Firefox, but http://localhost:8100 does.

[mraible]

If I run npm start in one terminal and npm run e2e in the other, the tests run successfully. I don't think it used to be this way. The image upload test does fail since it's currently only enabled when the Camera plugin is installed.

[mshima]

@mraible cypress should be fixed with camera capacitor.

[mshima]

I've tested using the following jdl:

application {
  config {
  }
  entities *
}

entity Album {
  title String required
  description TextBlob
  created Instant
}

entity Photo {
  title String required
  description TextBlob
  image ImageBlob required
  height Integer
  width Integer
  taken Instant
  uploaded Instant
}

entity Tag {
  name String required minlength(2)
}

relationship ManyToOne {
  Album{user(login)} to User with builtInEntity
  Photo{album(title)} to Album
}

relationship ManyToMany {
  Photo{tag(name)} to Tag{photo}
}

paginate Album with pagination
paginate Photo, Tag with infinite-scroll

Start backend with ionic cors:

cd backend
jhipster jdl flicker2.jdl
npm run ci:e2e:prepare
./mvnw -Pprod -Dspring.profiles.active=prod,e2e-cors

In another terminal run e2e:

cd ionic4j
npm install
npm run e2e

[mshima]

I didn't had to use 127.0.0.1 or NODE_OPTIONS for this test.

[mraible]

@mshima I think this change is necessary to fix image upload when going through a browser.

[mshima]

@mshima I think this change is necessary to fix image upload when going through a browser.

Why? It's working for me when I click at album button.

[mshima]

It's possible to force the file dialog by setting webUseInput: true at imageOptions.

[mshima]

This is what appears for me, see the album button at bottom left:

Camera works too, I've disabled to test.

Tested using Safari, Chrome and Firefox

[mraible]

@mshima What OS are you on? On my MacBook Pro M1 with macOS Ventura 13.6, I only see an error in the console:

Camera plugin not supported

[mshima]

MacBook Air M1 with macOS 13.4

[mraible]

@mshima This doesn't work for me. I tried in Chrome, Firefox, and Safari and the results are the same. Here's a video.

photo-upload.mp4

It's possible Okta is preventing this on my machine. However, I have no other machine to test it on.

Regarding npm run e2e. It doesn't work on the backend app either, so it's possible there are other restrictions that prevent me from using it. When I run the command on the backend, it errors out after the first test.

The automation client disconnected. Cannot continue running tests.

[mraible]

@mshima I can confirm that this branch fixes image upload on the web. I still can't run npm run e2e locally, but I'll approve since the CI tests are passing.

FWIW, it works if I run npm run e2e in a new project from JHipster's main branch. So, it isn't a Chrome issue.

[mshima]

e2e is not prepared for the fallback.
I don't think it's necessary since the non fallback works at docker and probably most CI environments.