vite-plugin-single-spa icon indicating copy to clipboard operation
vite-plugin-single-spa copied to clipboard

Add unit testing for CSS mounting code

Open webJose opened this issue 1 year ago • 0 comments

Is your feature request related to a problem?

CSS mounting code is not yet backed by unit testing. This has been like this historically because of the injected variables projectId and cssMap.

Please select the type of project this would be for: [ ] Root Config [x] Micro-frontend/parcel

Describe the solution you'd like

Refactor singleMife-css.ts and multiMife-css.ts so projectId and cssMap are injected as parameters through an internal version of cssLifecycleFactory.

Details

The idea is to create "internal-only" modules that are complete and don't depend on replaced values from a Vite build process so they can be imported and unit-tested. In a nutshell:

  1. Rename singleMife-css.ts and multiMife-css.ts to singleMifeImpl.ts and multiMifeImpl.ts.
  2. Add the extra base, projectId and cssMap parameters to cssLifecycleFactory().
  3. From cssLifecycleFactory(), distribute base, projectId and cssMap to wherever is needed.
  4. Get rid of the module-level definitions of base, projectId and cssMap.
  5. Create new files with the original names for singleMife and multiMife.
  6. Place the original definitions of base, projectId and cssMap in these files or move to a common file and import.
  7. From the new files, import the modified cssLifecycleFactory() function and export a modified version with base, projectId and cssMap pre-filled using bind().

webJose avatar Apr 25 '24 01:04 webJose