Comments (5)
marksy
commented on May 27, 2024
1
Ah yes, you're right! Thanks, I missed that part in the docs.
from stencil.
christian-bromann
commented on May 27, 2024
1
@marksy thanks for clarifying! I caught the problem: when you run unit tests, make sure to include all components that are used in your component in the components list. As ComposedComponent uses TestComponent you have to import and add TestComponent here too. Here is the patch that will make the test pass:
diff --git a/src/components/composed-component/test/composed-component.spec.tsx b/src/components/composed-component/test/composed-component.spec.tsx
index 0bb30f1..3cd9d09 100644
--- a/src/components/composed-component/test/composed-component.spec.tsx
+++ b/src/components/composed-component/test/composed-component.spec.tsx
@@ -1,17 +1,27 @@
import { newSpecPage } from '@stencil/core/testing';
-import { ComposedComponent} from '../composed-component';
+import { ComposedComponent } from '../composed-component';
+import { TestComponent } from '../../test-component/test-component';
describe('composed-component', () => {
it('renders', async () => {
const page = await newSpecPage({
- components: [ComposedComponent],
+ components: [ComposedComponent, TestComponent],
html: `<composed-component></composed-component>`,
});
expect(page.root).toEqualHtml(`
<composed-component>
<mock:shadow-root>
<p>Composed Component</p>
- <test-component data-testid="example"></test-component>
+ <test-component>
+ <mock:shadow-root>
+ <p>
+ Test Component
+ </p>
+ <div data-testid="example">
+ hi there!
+ </div>
+ </mock:shadow-root>
+ </test-component>
</mock:shadow-root>
</composed-component>
`);Note: you can totally exclude the component from our unit test if you don't care about how it is being rendered. In this case though Stencil doesn't know about it and just represents it in the same way you defined it in the render function which is <test-component dataTestid="example"></test-component>.
Let me know if this clears things up!
from stencil.
christian-bromann
commented on May 27, 2024
Hey @marksy 👋 thanks for raising the issue!
I looked into your reproducible example and wasn't quite able to reproduce the problem. If TestComponent defines a prop with the name dataTestid, then it should be used as following:
<test-component dataTestid="example"></test-component>in a JSX file and<test-component data-testid="example"></test-component>in a html file.
After fixing it, and adding a www output target I get a correctly rendered component:
The changes I made for this were as follows:
diff --git a/.gitignore b/.gitignore
index fa25637..2854b38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,5 @@ src/**/*.generated.*
!.yarn/releases
!.yarn/sdks
!.yarn/versions
+
+www
\ No newline at end of file
diff --git a/src/components/composed-component/composed-component.tsx b/src/components/composed-component/composed-component.tsx
index b176127..38f483b 100644
--- a/src/components/composed-component/composed-component.tsx
+++ b/src/components/composed-component/composed-component.tsx
@@ -10,7 +10,7 @@ export class ComposedComponent {
return (
<Host>
<p>Composed Component</p>
- <test-component data-testid="example"></test-component>
+ <test-component dataTestid="example"></test-component>
</Host>
);
}
diff --git a/src/index.html b/src/index.html
index c81244d..fe97c8e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -39,8 +39,11 @@
onErrorChange();
}, false);
</script>
+ <script type="module" src="/build/tui.esm.js"></script>
+
</head>
<body>
+ <composed-component></composed-component>
<!-- This file is intentionally empty. Components are rendered by stories, this index.html is only used to host the Stencil dev server error modal. -->
</body>
</html>
diff --git a/stencil.config.ts b/stencil.config.ts
index 0ed5add..83d1a5e 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -44,6 +44,9 @@ export const config: Config = {
type: 'docs-json',
file: `${distDirs.stencil}/components.json`,
},
+ {
+ type: 'www',
+ },
reactOutputTarget({
componentCorePackage: '../types',
proxiesFile: `${distDirs.stencil}/react/index.ts`,I expect the required camelCased prop (e.g.,
dataTestid) to be used as a kebab-cased prop
The Stencil documentation says it as such:
kebab-cases only in html files and camelCased in JSX files.
from stencil.
marksy
commented on May 27, 2024
Sorry for re-opening this issue.
I got confused - as I was trying thing to fix the original issue of the test not working correctly, which resulted in my trying to fix it and seeing the typescript issue.
The actual issue I'm encountering is when I run the test, it fails by not parsing the kebab-cased prop.
I've updated my example repo.
Unless I should be camelCasing in the test too (i doubt it because it's html syntax)?
from stencil.
marksy
commented on May 27, 2024
Ah awesome thanks that makes sense now.
from stencil.
Related Issues (20)
- bug: Adding Storybook with Vite options fails HOT 1
- feat: Solidjs output adapter HOT 1
- bug: E2EElement.triggerEvent omits event details functions HOT 1
- feat: support prop casing for SVG attributes HOT 1
- bug: events with `dispatchEvent()` do not reach a parent's event handler that was added with `addEventListener()` in a Spec Page HOT 2
- bug: dist-custom-elements with customElementsExportBehavior: "single-export-module" does not execute globalScript HOT 4
- bug: cannot get value of inherited custom CSS prop in a shadow DOM element via `E2EElement` APIs HOT 2
- cannot identified the prompts.js as a function？？ HOT 17
- bug: generated filename is too long HOT 3
- bug: missing root element's scope id as classname in nested child HOT 4
- bug: Failing to load a nested component hides all parents HOT 1
- bug: child input element is receiving un-wanted props HOT 11
- bug: watchIgnoredRegex is not respected during `stencil build --watch`
- bug: puppeteer: piercing on level 1 breaks HOT 8
- bug: `autofocus` prop/attr is defined on other HTML attribute types instead of `HTMLAttributes` HOT 2
- bug: HOT 6
- bug: missing root element's scope id as classname in user provided children HOT 2
- Attribute ping is missing on AnchorHTMLAttributes HOT 3
- bug: Cannot read properties of undefined (reading 'isProxied') HOT 2
- bug: Stencil v4.18.1 breaks support for Jest v26 HOT 10
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.