2 problems when I run npm test

Hello world :slight_smile:

I have 2 problems after I run npm run test to output and I would like to have an output clean (if it’s possible) ^^’

I have 2 types of problems :

  • Proxying an event bus of
  • [Vue warn]: Unknown custom element: <notifications> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
$ npm run test

> workspace@1.0.0 test
> jest

 PASS  src/tests/unit/spaceService.test.js
  convertGroupfolderToSpace method
    ✓ Return object type (6 ms)
    ✓ Is not undefined (2 ms)

 PASS  src/tests/unit/store.test.js
  Vuex store tests
    ✓ Adds a space in the Vuex store (6 ms)
    ✓ Adds a group to the space (2 ms)
    ✓ Removes a group to the space (1 ms)
    ✓ Sets space quota (1 ms)
    ✓ Get space quota (2 ms)
    ✓ Adds a user to the space (1 ms)
    ✓ Count users in workspace (2 ms)
    ✓ Count users in group (1 ms)
    ✓ Removes a user from the space (1 ms)

  console.warn
    Proxying an event bus of version 3.0.2 with 1.3.0

       98 | import { ESPACE_MANAGERS_PREFIX, ESPACE_USERS_PREFIX, ESPACE_GID_PREFIX } from './constants'
       99 | import axios from '@nextcloud/axios'
    > 100 | import Avatar from '@nextcloud/vue/dist/Components/Avatar'
          | ^
      101 | import Actions from '@nextcloud/vue/dist/Components/Actions'
      102 | import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
      103 | import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'

      at new ProxyBus (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/node_modules/@nextcloud/event-bus/dist/index.js:2341:15)
      at getBus (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/node_modules/@nextcloud/event-bus/dist/index.js:3318:12)
      at Object.<anonymous> (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/node_modules/@nextcloud/event-bus/dist/index.js:3324:11)
      at Object.<anonymous> (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/lib/requesttoken.ts:1:1)
      at Object.<anonymous> (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/lib/index.ts:1:1)
      at Object.require [as 3607] (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/external commonjs "@nextcloud/auth":1:18)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at Object.gt [as 3351] (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/l10n.js:40:27)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/Avatar/Avatar.vue?ac35:1:1
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/Avatar/Avatar.vue:24:33
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/Avatar/Avatar.vue:24:33
      at factory (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/universalModuleDefinition:3:20)
      at Object.<anonymous> (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/universalModuleDefinition:1:1)
      at src/SelectUsers.vue:100:1
      at Object.<anonymous> (src/SelectUsers.vue:184:3)
      at Object.<anonymous> (src/tests/unit/selectUsers.test.js:26:1)

  console.warn
    Proxying an event bus of version 3.0.2 with 2.1.1

       98 | import { ESPACE_MANAGERS_PREFIX, ESPACE_USERS_PREFIX, ESPACE_GID_PREFIX } from './constants'
       99 | import axios from '@nextcloud/axios'
    > 100 | import Avatar from '@nextcloud/vue/dist/Components/Avatar'
          | ^
      101 | import Actions from '@nextcloud/vue/dist/Components/Actions'
      102 | import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
      103 | import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'

      at new warn (node_modules/@nextcloud/vue/node_modules/@nextcloud/event-bus/lib/ProxyBus.ts:17:21)
      at getBus (node_modules/@nextcloud/vue/node_modules/@nextcloud/event-bus/lib/index.ts:20:16)
      at Object.getBus (node_modules/@nextcloud/vue/node_modules/@nextcloud/event-bus/lib/index.ts:26:13)
      at Object.require [as 542] (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/external commonjs "@nextcloud/event-bus":1:18)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/Avatar/Avatar.vue?ac35:1:1
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/Avatar/Avatar.vue:24:33
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/Avatar/Avatar.vue:24:33
      at factory (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/universalModuleDefinition:3:20)
      at Object.<anonymous> (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/universalModuleDefinition:1:1)
      at src/SelectUsers.vue:100:1
      at Object.<anonymous> (src/SelectUsers.vue:184:3)
      at Object.<anonymous> (src/tests/unit/selectUsers.test.js:26:1)

  console.warn
    Proxying an event bus of version 3.0.2 with 2.1.1

      93 | <script>
      94 | import axios from '@nextcloud/axios'
    > 95 | import AppContent from '@nextcloud/vue/dist/Components/AppContent'
         | ^
      96 | import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
      97 | import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
      98 | import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/AppNavigationIconBullet'

      at new warn (node_modules/@nextcloud/vue/node_modules/@nextcloud/event-bus/lib/ProxyBus.ts:17:21)
      at getBus (node_modules/@nextcloud/vue/node_modules/@nextcloud/event-bus/lib/index.ts:20:16)
      at Object.getBus (node_modules/@nextcloud/vue/node_modules/@nextcloud/event-bus/lib/index.ts:26:13)
      at Object.542 (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/external commonjs "@nextcloud/event-bus":1:26)
      at exports (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:22:16)
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/AppContent/AppDetailsToggle.vue:33:1
      at node_modules/@nextcloud/vue/dist/Components/AppContent.js:1:73674
      at node_modules/@nextcloud/vue/dist/Components/AppContent.js:1:73679
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/universalModuleDefinition:4:28
      at Object.<anonymous> (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/universalModuleDefinition:11:1)
      at src/Home.vue:95:1
      at Object.<anonymous> (src/Home.vue:315:3)
      at Object.<anonymous> (src/tests/unit/home.test.js:26:1)

  console.warn
    Proxying an event bus of version 3.0.2 with 1.3.0

      74 | import Actions from '@nextcloud/vue/dist/Components/Actions'
      75 | import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
    > 76 | import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
         | ^
      77 | import Modal from '@nextcloud/vue/dist/Components/Modal'
      78 | import SelectUsers from './SelectUsers'
      79 | import UserTable from './UserTable'

      at new ProxyBus (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/node_modules/@nextcloud/event-bus/dist/index.js:2341:15)
      at getBus (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/node_modules/@nextcloud/event-bus/dist/index.js:3318:12)
      at Object.<anonymous> (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/node_modules/@nextcloud/event-bus/dist/index.js:3324:11)
      at Object.<anonymous> (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/lib/requesttoken.ts:1:1)
      at Object.<anonymous> (node_modules/@nextcloud/vue/node_modules/@nextcloud/auth/lib/index.ts:1:1)
      at Object.require [as 3607] (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/external commonjs "@nextcloud/auth":1:18)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at Object.3351 (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/mixins/actionGlobal.js:56:70)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at Object.4430 (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/Avatar/Avatar.vue?ac35:1:1)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at Object.9378 (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/ListItemIcon/ListItemIcon.vue?8c0e:1:1)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at Object.1471 (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/Multiselect/EllipsisedOption.vue:20:33)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at Object.6251 (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/TimezonePicker/TimezonePicker.vue:69:1)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at Object.4069 (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/DatetimePicker/index.scss?021a:22:1)
      at moduleId (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/bootstrap:19:22)
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/ActionInput/ActionInput.vue?ba53:1:1
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/ActionInput/ActionInput.vue:24:33
      at node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/ActionInput/ActionInput.vue:24:33
      at factory (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/universalModuleDefinition:3:20)
      at Object.<anonymous> (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/webpack/universalModuleDefinition:1:1)
      at src/GroupDetails.vue:76:1
      at Object.<anonymous> (src/GroupDetails.vue:157:3)
      at Object.<anonymous> (src/router.js:27:1)
      at Object.<anonymous> (src/store/actions.js:24:1)
      at Object.<anonymous> (src/store/index.js:26:1)
      at Object.<anonymous> (src/tests/unit/home.test.js:30:1)

  console.debug
    Could not find capabilities initial state fall back to _oc_capabilities

      at debug (node_modules/@nextcloud/capabilities/lib/index.ts:7:11)

  console.error
    [Vue warn]: Unknown custom element: <notifications> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in
    
    ---> <Home>
           <Root>

      41 | localVue.use(Vuex)
      42 | localVue.use(VueRouter)
    > 43 | const wrappedHome = mount(Home, {
         |                          ^
      44 |      store,
      45 |      localVue,
      46 |      router,

      at warn (node_modules/vue/dist/vue.runtime.common.dev.js:4548:21)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:6455:21)
      at createChildren (node_modules/vue/dist/vue.runtime.common.dev.js:6562:17)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:6466:13)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6991:13)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3718:25)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3828:16)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:3400:33)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:3390:51)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3845:5)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8687:12)
      at init (node_modules/vue/dist/vue.runtime.common.dev.js:4353:19)
      at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:6489:17)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:6443:13)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6991:13)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3718:25)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3828:16)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:3400:33)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:3390:51)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3845:5)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8687:12)
      at init (node_modules/vue/dist/vue.runtime.common.dev.js:4353:19)
      at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:6489:17)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:6443:13)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6991:13)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3718:25)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3828:16)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:3400:33)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:3390:51)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:3845:5)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8687:12)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:14065:21)
      at Object.<anonymous> (src/tests/unit/home.test.js:43:26)

  console.info
    [INFO] AppContent: falling back to global nextcloud pane config

      at VueComponent.paneConfigID (node_modules/@nextcloud/vue/dist/Components/webpack:/NextcloudVue/src/components/AppContent/AppContent.vue:216:1)

  console.debug
    Could not find capabilities initial state fall back to _oc_capabilities

      at debug (node_modules/@nextcloud/capabilities/lib/index.ts:7:11)

 PASS  src/tests/unit/home.test.js (8.84 s)
  Home component tests
    ✓ ConvertQuotaForFrontend: Test regular quota (6 ms)
    ✓ ConvertQuotaForFrontend: Test unlimited quota (1 ms)
    ✓ Convert 10000MB to 10GB (1 ms)
    ✓ Convert 23GB to 23GB
    ✓ Convert -3 (int) to unlimited (1 ms)
    ✓ Convert -3 (string) to unlimited (1 ms)
    ✓ Return string type (1 ms)
  Creating spaces with different entries
    ✓ Home.methods.createSpace has been called (4 ms)
    ✓ Create "Sri_Lanka" (3 ms)

  console.debug
    Could not find capabilities initial state fall back to _oc_capabilities

      at debug (node_modules/@nextcloud/capabilities/lib/index.ts:7:11)

 PASS  src/tests/unit/selectUsers.test.js (8.894 s)
  SelectUsers component tests
    ✓ addUsersToWorkspaceOrGroup test: Adding a user to a subgroup (110 ms)
    ✓ addUsersToWorkspaceOrGroup test: Adding a user to a workspace (115 ms)
    ✓ addUsersToWorkspaceOrGroup test: Adding a user to a workspace with admin role (69 ms)

Test Suites: 4 passed, 4 total
Tests:       23 passed, 23 total
Snapshots:   0 total
Time:        11.216 s, estimated 24 s
Ran all test suites.

I dont know what is the Proxying an event bus of. I don’t know how to resolve this problem :confused:

But, for the problem with the “notification” is that I don’t initialise it in my home.test.js : workspace/home.test.js at 68e4468e3c16a88500b60bdcdbbec0833a91cf8c · arawa/workspace · GitHub .

Wherease with the Home.vue file I initialise it : workspace/Home.vue at main · arawa/workspace · GitHub

If you have a solution or one idea, thank you in advance :pray:

If you run npm ls @nextcloud/event-bus in your app’s root directory you will likely find that there are at least two versions of the package. The log is merely a warning. You may ignore it.

The background of this warning is that the package has to register a global variable to communicate with other instances of the package in other apps. And if the versions of the two instances don’t match it could happen that they are incompatible.

1 Like

The notifications is a element you are using. I am not aware that this is an official HTML tag. It is not listed in your components. I suspect that this will cause trouble in the compile step as well or at least the browser will see an unknown HTML tag.


Regarding the other issue:
What is the version of your event bus package? Can you check with npm ls @nextcloud/event-bus? What version of @nextcloud/vue are you using?

Hi @ChristophWurst :slight_smile:

Great command line !
Here is the result of the npm ls @nextcloud/event-bus command line :

$ npm ls @nextcloud/event-bus
workspace@1.0.0 /home/zak/Documents/arawa/codes/nextcloud-docker-dev/workspace/stable24/apps-extra/workspace
├─┬ @nextcloud/axios@2.1.0
│ └─┬ @nextcloud/auth@2.0.0
│   └── @nextcloud/event-bus@3.0.2
└─┬ @nextcloud/vue@5.4.0
  ├─┬ @nextcloud/auth@1.3.0
  │ └── @nextcloud/event-bus@1.3.0
  └── @nextcloud/event-bus@2.1.1

Arf… The program uses 3 different event-bus.

Do you think the problem comes from the @nextcloud/axios , @nextcloud/auth and @nextcloud/vue libraries ?

Yeah, but I find it pollutes the output and it gives me the impression that is not normal :confused:

But, I find this command line to hide the console commands : jest --silent.
But I think it’s a bid idea :thinking:

Are you suggesting that I should create a PR to update every library I use ?

Hi @christianlupus :slight_smile:

I am using this library to push a notification : vue-notification - npm

You can see I use it in the package.json : workspace/package.json at 68e4468e3c16a88500b60bdcdbbec0833a91cf8c · arawa/workspace · GitHub

I declared it in my main.js for Vue.js to use : workspace/src/main.js at 68e4468e3c16a88500b60bdcdbbec0833a91cf8c · arawa/workspace · GitHub

And I use it in my Home.vue : workspace/src/Home.vue at 68e4468e3c16a88500b60bdcdbbec0833a91cf8c · arawa/workspace · GitHub

I am using @nextcloud/vue@5.4.0.
The Dependabot has detected an update : npm: bump @nextcloud/vue from 5.4.0 to 7.0.1 by dependabot[bot] · Pull Request #593 · arawa/workspace · GitHub

But the CI is broken… Maybe because I use the release 7 of npm and the release 7 of node : workspace/.github/workflows/node.js.yml at 68e4468e3c16a88500b60bdcdbbec0833a91cf8c · arawa/workspace · GitHub

Regarding the notifications:
In your tests, you are not activating the notifications, are you? So, this might just be a requirement to setup the test environment first if I am correct.

W.r.t. the @nextcloud/event-bus I cannot add anything useful on top of @ChristophWurst. He is more knowledge then me here.

One comment on @nextcloud/vue version 5.x vs 7.x: The version 5.x is intended for Nextcloud version up to 24. For 25 and only for 25 (and successors) you need the 7.x versions. With the version 6 a new prefix Nc was introduced on all components. So it is no longer an ActionButton but a NcActionButton.

Hi !!! :slight_smile:

I’m sorry to answer you very late :pray:

I could fix the major of my problems and I create a PR :slight_smile:

But, I have already the problem of the different versions of the @nextcloud/event-bus.
I think I cannot resolve this problem, so I leave it aside.

One comment on @nextcloud/vue version 5.x vs 7.x: The version 5.x is intended for Nextcloud version up to 24. For 25 and only for 25 (and successors) you need the 7.x versions. With the version 6 a new prefix Nc was introduced on all components. So it is no longer an ActionButton but a NcActionButton

Thanks @christianlupus for your warning !!! :slight_smile:

I update the @nextcloud/vue later :slight_smile:
Thanks again :blush: