plone / volto

React-based frontend for the Plone Content Management System
https://demo.plone.org/
MIT License
448 stars 610 forks source link

Error when testing customized Volto module in addon #6244

Closed wesleybl closed 1 month ago

wesleybl commented 1 month ago

Describe the bug When customizing the FormValidation.jsx module and copying its tests to the addon, I receive the error below when executing the tests:

FAIL src/addons/my.addon/src/customizations/volto/helpers/FormValidation/FormValidation.test.js
  ● Test suite failed to run

    node_modules/@plone/volto/src/helpers/FormValidation/validators.ts:1:35 - error TS7016: Could not find a declaration file for module './FormValidation'. '/home/user/git/app/node_modules/@plone/volto/src/helpers/FormValidation/FormValidation.jsx' implicitly has an 'any' type.

    1 import { validationMessage } from './FormValidation';

To Reproduce Steps to reproduce the behavior:

  1. Create a Volto app with an addon.
  2. Create the file:

app/src/addons/my.addon/src/customizations/volto/helpers/FormValidation/FormValidation.jsx

And place the contents of the corresponding Volto file, replacing relative imports with absolute imports.

  1. Create the file:

app/src/addons/my.addon/src/customizations/volto/helpers/FormValidation/FormValidation.test.js

And place the contents of the corresponding Volto file, replacing relative imports with absolute imports.

  1. Run the command:
    CI=true yarn test --no-cache

Expected behavior The test should run without errors.

Software (please complete the following information):

Volto 18.0.0-alpha.42 Plone 6.0.12 plone.restapi 9.7.1 CMF 3.5 Zope 5.10 Python 3.12.3 (main, Apr 27 2024, 19:00:21) [GCC 11.4.0] PIL 9.5.0 (Pillow)

Additional context I tried creating a FormValidation.d.ts file but it didn't work.

wesleybl commented 1 month ago

If I use the full path when importing validationMessage in validators.ts, the test works. The import would look like this:

import { validationMessage } from '@plone/volto/helpers/FormValidation/FormValidation';

Is there another way to solve this?

ichim-david commented 1 month ago

If I use the full path when importing validationMessage in validators.ts, the test works. The import would look like this:

import { validationMessage } from '@plone/volto/helpers/FormValidation/FormValidation';

Is there another way to solve this?

@wesleybl it looks like an omission or we haven't thought of such an interaction. Given that message is imported full path I suggest we do the same with validationMessage. Would you be willing to make a pull request with this fix but in the process also check if there are similar issues with the other validation files?

wesleybl commented 1 month ago

Would you be willing to make a pull request with this fix but in the process also check if there are similar issues with the other validation files?

@ichim-david Basically, this can happen in any .ts file that imports relatively. Another place where this happens is here:

https://github.com/plone/volto/blob/eb611a8485457171a94409fd097906cc8ae4d16a/packages/volto/src/helpers/Blocks/cloneBlocks.ts#L3-L7

I'm going to make a PR.