Write test for vue components

[cmcWebCode40]

• Write for the vda-login and vda-account components

[cmcWebCode40]

First Error

at runtime getting this error from the client-ts library, this happens when I import the veridaHelpera class in any vue component

this seems to be related to this issue here on StackOverflow referenceerror-textencoder-is-not-defined-when-running-react-scripts-test, but still finding a way to implement in vue app.

`FAIL tests/unit/account/vda-account.spec.ts ● Test suite failed to run

ReferenceError: TextEncoder is not defined

  1 | /* eslint-disable @typescript-eslint/no-explicit-any */
> 2 | import { EnvironmentType, Network } from "@verida/client-ts";
    | ^
  3 | import { EventEmitter } from "events";
  4 | import store from "store";
  5 |

  at Object.<anonymous> (node_modules/multiformats/cjs/src/codecs/json.js:5:21)
  at Object.<anonymous> (node_modules/multiformats/cjs/src/basics.js:17:12)
  at Object.<anonymous> (node_modules/multiformats/basics:1:107)
  at Object.<anonymous> (node_modules/uint8arrays/cjs/src/util/bases.js:3:14)
  at Object.<anonymous> (node_modules/uint8arrays/cjs/src/from-string.js:5:13)
  at Object.<anonymous> (node_modules/uint8arrays/cjs/src/index.js:8:18)
  at Object.<anonymous> (node_modules/did-jwt/lib/index.js:1:100)`

Second Error

I have added the VeridaHelper to the Vue properties prototype so I can access the class globally

see the file here https://github.com/verida/verida-vue-components/blob/ee33bf4bc5a4e08c1864487af3dbad3f74e14a2b/components/account/src/entry.esm.ts#L37

` ● VdaAccount.vue › renders component correctly without error

TypeError: Cannot read property 'on' of undefined

  117 |   },
  118 |   created() {
> 119 |     this.$VeridaHelper.on("profileChanged", () => {
      |                        ^
  120 |       this.profile = this.$VeridaHelper.profile;
  121 |       this.profile.avatar = this.$VeridaHelper.profile.avatar.uri;
  122 |       this.profile.did = this.$VeridaHelper.did;`

[nick-verida]

@cmcWebCode40 I fixed an issue like this in the documentation project (although ended up not needing it).

They had to do something similar in the Vault too.

See https://github.com/verida/client-rn/blob/775a11feb862740abe2d8df2f360c9e5c849d67f/client-rn/shim.ts#L25

But the solution on the StackOverflow post you linked is better, specifically this one: https://stackoverflow.com/a/57713960/280795

The reason this is needed is because it is running in node, not the browser in unit tests, so some APIs need to be polyfilled.

I think code similar to that will work in jest.config.js, so it would be called when in test mode.

[nick-verida]

@cmcWebCode40 I've fixed the TextEncoder issue. See https://github.com/verida/verida-vue-components/pull/30/commits/051e424177f39cb8f9268f3b94054cb43f8db5fa for the details.

However there are more test errors once that is fixed - not looking at them now.

[nick-verida]

Can you please remove (comment out at least) failing tests until they are fixed