Stencil v4 upgrade #1304
Stencil v4 upgrade #1304
Conversation
packages/web-components/package.json
Outdated
| @@ -28,7 +28,7 @@ | |||
| }, | |||
| "dependencies": { | |||
| "@department-of-veterans-affairs/css-library": "^0.8.1", | |||
| "@stencil/core": "^3.2.1", | |||
| "@stencil/core": "4.0.0", | |||
There was a problem hiding this comment.
I don't want to open pandora's box but did you happen to try to latest release of v4? It looks like they're up to v4.21 and v4.0.0 is not actively maintained.
There was a problem hiding this comment.
The later versions have issues with the piercing (>>>) selector in the e2e tests. I have checked the documentation and the how-to pages and they all say that this should still work in 4.21 but they don't. This is the error I get when running tests using 4.21:
Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 'va-select >>> select' is not a valid selector.
It results in 277 failed tests.
There was a problem hiding this comment.
Interesting. I guess that makes wonder a few more things:
- Are we ok just stopping here for now (like what does being on
v4.0.0unblock for us now?) or is stopping here just delaying us eventually needing to solve for it? - Should we create a follow-up ticket to get us onto the latest (or a more recent) version?
Glancing at their release notes, version 4.14.0 seems particularly useful for testing because they added support for deep piercing with Puppeteer. I know we've had some problems dealing with this in our tests and we had testing gaps because of not being able to do that.
There are probably other useful things too I just haven't really dug into what else they've added.
There was a problem hiding this comment.
Here is an example where we could use deep piercing but instead had to skip the test because of flakiness:
There was a problem hiding this comment.
I've been trying to get this to work locally but haven't succeeded yet. Trying to see what happens when jest is running on the latest version in addition to stencil 4.21.0. Currently getting some weird errors :\
Signed-off-by: Micah Chiang <[email protected]>
.github/workflows/chromatic.yml
Outdated
| @@ -27,7 +27,7 @@ jobs: | |||
| - run: yarn workspace @department-of-veterans-affairs/web-components run build | |||
| - run: yarn workspace @department-of-veterans-affairs/component-library run build | |||
| - name: Publish to Chromatic | |||
| uses: chromaui/action@v1 | |||
| uses: chromaui/action@latest | |||
There was a problem hiding this comment.
I think this was done just to try and get the chromatic action to work again (unrelated to the v4 upgrade itself). But I guess if it's working still maybe it can stay as it is?
There was a problem hiding this comment.
I reverted that. @latest seems a little dangerous.
| const inputEl = await page.$('pierce/[name="veteran-signature"]'); | ||
| const value = await page.evaluate(element => element.value, inputEl); | ||
|
|
||
| const value = await page.$eval('va-statement-of-truth >>> va-text-input >>> input', (comp: HTMLInputElement) => comp.value); |
There was a problem hiding this comment.
I'm so excited to have deep piercing now 🤗
Chromatic
https://stencil-v4-upgrade--65a6e2ed2314f7b8f98609d8.chromatic.com
Description
Upgrade stencil to v4
Closes 2233
QA Checklist
Screenshots
No visual changes
Acceptance criteria
Definition of done