Comments (3)
I can't say much about e2e tools that not support Shadow DOM yet. I think they will eventually, as there is no other way. However, if you want to do unit tests between custom elements, you can create them in your test code and easily access Shadow DOM by shadowRoot
property of the element.
In the hybrids I wrote tests for factories using that pattern - you can find a helper in tests/helpers.js
file:
https://github.com/hybridsjs/hybrids/blob/master/test/helpers.js#L1
As I wrote in #20, I am working on new docs, so I think I will add some information about testing there too (but it may take some time).
Feel free to re-open if you have other questions about it.
from hybrids.
I'm testing hybrids with Karma. Since jsdom doesn't support shadow dom, the only way is running in a browser.
Due to Hybrids' shadow dom asynchronicity, in every test I have to set a timeout;
import './ongsList';
import { expect } from 'chai';
describe('OngsList', () => {
it('should render ongsList', (done) => {
const el = document.createElement('x-ongs-list');
document.body.appendChild(el);
const timer = setTimeout(() => {
const xOngsList = document.body.querySelector('x-ongs-list');
const xOngsListShadowRoot = xOngsList.shadowRoot;
const titleEl = xOngsListShadowRoot.querySelector('h1');
const titleValue = titleEl.innerText;
expect(titleValue).to.equal('Help My.ONG');
done();
}, 200);
});
});
from hybrids.
Test environment does not have to support Shadow DOM. If you want to create unit tests for your custom element - use the advantage, which hybrids architecture gives you. Your render definition is just a function. html
function of the hybrids returns update function: update(host, target)
.
You can test your render function in the isolation, and fully synchronously. You can do it just like this:
import { html } from 'hybrids';
const MyElement = {
a: 0,
b: 1,
render: ({ a, b }) => html`
<div>${a}</div>
<div>${b}</div>
`,
};
// Tests
describe('<my-element> unit tests', () => {
let container;
beforeEach(() => {
container = document.createElement('div');
});
it('should render a and b properties', () => {
const host = { a: 1, b: 2 };
const update = MyElement.render(host);
// This renders your template into the conatiner, first argument could be an empty
// object here, as in this example render is not using it
update(host, container);
expect(container.children[0].textContent).toBe('1');
expect(container.children[1].textContent).toBe('2');
});
});
However, if you want to create what I would call intergration tests and create your custom element, it is required to use RAF to wait for the result of the render. You can find examples in hybrids tests for that pattern.
One more thing - really try to forget what you know about common patterns. Hybrids is different, you don't have to test if the library works and renders eventually your template - it is already tested. What you should test is if your render function is correct and create correct DOM for specific input values.
from hybrids.
Related Issues (20)
- Add a helper for assigning component properties HOT 3
- Dynamic columns not showing when render a html table HOT 4
- '"hybrids"' has no exported member named 'property'. Did you mean 'Property'? HOT 8
- Add support for "TypeScript v5" HOT 3
- I can't create an arbitrary number of nested forms: HOT 6
- Small Type Inferencing Issue with Property<E, V> HOT 6
- Cannot pass an object to the API via the "list" method HOT 7
- version 8.2.17 backwards compatibility is broken! HOT 9
- Expand the functionality of drafts
- sync() with nested models is broken HOT 4
- Allow storing an object in a component property HOT 4
- Add partial loading of model data HOT 3
- Why do you remove the lastValue? HOT 2
- The store logs a lot of errors HOT 4
- Convert a Whole Component to Web Component HOT 8
- Scoped CSS HOT 6
- lagging update glitch HOT 2
- Component properties cannot be setted until they are observed HOT 2
- `store.set()` is very slow HOT 5
- Store loads items data when iterating the list of items HOT 2
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 hybrids.