Comments (8)
tanner-reits
commented on May 27, 2024
1
@mlechler I confirmed that the generated screenshots do not have the same dimensions as what is being set in the Stencil config. I'll get this ingested in our backlog for someone to take a look at.
from stencil.
tanner-reits
commented on May 27, 2024
1
@mlechler I don't have a definitive timeline right now. I spent some more time playing around with a fix, but we uncovered some additional discrepancies in the generated output. The team needs to dig in deeper to the screenshot testing process so we're confident in the change(s) we make. This is an experimental feature in Stencil after all, so there are many kinks and nuances we need to work through.
from stencil.
christian-bromann
commented on May 27, 2024
1
The fix has been released with Stencil 🚞 v4.13.0
from stencil.
mlechler
commented on May 27, 2024
Hi @tanner-reits, what is the time horizon on this issue?
from stencil.
christian-bromann
commented on May 27, 2024
@mlechler thanks to @tanner-reits work we were able to publish a dev release with a fix for this bug. You can install it in your project via:
npm i @stencil/[email protected]Can you verify that this resolves the issue?
from stencil.
mlechler
commented on May 27, 2024
Hi @christian-bromann, the viewport works great now! 🥳
I just found one more problem in our use case, which worked earlier.
We are using the userAgent property of the emulateConfig to emulate different themes (color & spacing), e.g.
{ userAgent: 'Dark', viewport: { width: 600, height: 600, } }
Afterwards we are setting different attributes to the root <html> based on the userAgent to emulate light/dark themes etc.
In our tests I can see that the userAgent property is not used, as the userAgent of the test is Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/116.0.5814.0 Safari/537.36 instead of Dark.
Is this an additional bug or is it intended to work like that? If it is intended: How can we emulate different themes (color & spacing) in our screenshot tests?
from stencil.
christian-bromann
commented on May 27, 2024
the viewport works great now! 🥳
Awesome, I will go ahead and close the issue.
Is this an additional bug or is it intended to work like that? If it is intended: How can we emulate different themes (color & spacing) in our screenshot tests?
Mind raising a new issue for this?
from stencil.
mlechler
commented on May 27, 2024
Great thanks @christian-bromann!
I opened #5459 for the new issue.
from stencil.
Related Issues (20)
- bug: Stencil Components: Nested Slots insert new children before last child if children components are added dynamically at run time. HOT 2
- bug: Nonce not being added to styles HOT 1
- bug: Boolean property not removing corresponding attribute when set to false programmatically HOT 5
- feat: Allow to specify in CustomOuputTarget if the output have to be re-executed on each build HOT 4
- bug: v4.12.2 breaks E2E tests HOT 4
- feat: node.eventListeners/getEventListeners(node) alternative to conditionally render internal elements, when an @Event has listeners. HOT 2
- bug: `emulate.viewport` crops the screenshot in E2E Screenshot tests HOT 1
- bug: Copy task runs in parallel to build tasks creating a race condition HOT 5
- bug: instance is undefined when consuming dist-custom-elements bundle HOT 4
- bug: SCSS doesn't rebuild when path is outside stencil directory HOT 8
- feat: Support providing custom TypeScript transformers HOT 3
- bug: Attr missing from docs where prop define it as global type like HTMLElement HOT 1
- bug: Errors when using testing-library/dom HOT 2
- bug: generated documentation does not display custom properties when included in loud comments HOT 1
- dist/collection does not resolve json import path. When one Stencil distribution imports another: HOT 3
- bug: Building for Vite doesn't work even with `enableImportInjection: true` HOT 6
- bug: `E2EPage.find()` throws error when using piercing selector targeting a non-existing element HOT 2
- bug: Unit test --watchAll argument parsed incorrectly HOT 2
- feat: dark mode support for dev server
- feat: Remove mutable props concept
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stencil.