We have a big (very customizable) stencil.js component which loads text from a JSON (depending on locale), does several tranformations and eventually displays a dialog.
We have placeholders in the texts, like %MY_LINK_PLACEHOLDER%, which get transformed to branded link components (wrapper for <a>
-elements from company branded Stencil library).
So, simplified:
Input (from JSON) "This is my text with a %MY_LINK%."
Output: This is my text with a <corp-link><a href="foo">link</a></corp-link>.
As JSX can’t render the link if it is passed back as a string (or at least I don’t know how), the method that does the replacement returns an Array like this ["This is my text with a", <corp-link><a href="foo">link</a></corp-link> as HTMLElement, "."]
(I’m not sure, if returning the link as HTMLElement is a good idea. I’d gladly take other suggestions!).
So, the “text elements” have the type: string | HTMLElement | Array<string | HTMLElement>
Now, the actual question:
I’m trying to test, that the links get properly replaced.
When logging the element I get something like this:
'$flags$': 0,
'$tag$': 'corp-link',
'$text$': null,
'$elm$': {},
'$children$': [
{
'$flags$': 0,
...
So currently, my (working) test looks like follows:
expect(jsonText.myText).toContain("%MY_LINK%");
expect(processedTextObject.myText).not.toContain("%MY_LINK%");
expect(processedTextObject.myText[1].$tag$).toBe("corp-link");
So far, so good. But I would
- Like to have it more flexible/generic
- Have the feeling that the typing is not ideal
- Don’t think that using the $-enclosed properties ($tag$) is a good idea
Any suggestions to improve this?
Thanks a lot! 🙂