@open-wc/testing-helpers - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.4.1](https://github.com/open-wc/open-wc/tree/master/packages/testing-helpers/compare/@open-wc/testing-helpers@0.4.0...@open-wc/testing-helpers@0.4.1) (2018-11-30)
+
+
+### Bug Fixes
+
+* move documentation to READMEs of packages ([b4a0426](https://github.com/open-wc/open-wc/tree/master/packages/testing-helpers/commit/b4a0426))
+
+
+
+
+
 # [0.4.0](https://github.com/open-wc/open-wc/tree/master/packages/testing-helpers/compare/@open-wc/testing-helpers@0.3.0...@open-wc/testing-helpers@0.4.0) (2018-11-26)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@open-wc/testing-helpers",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Testing Helpers following open-wc recommendations",
@@ -21,9 +21,9 @@ "author": "open-wc",
     "@bundled-es-modules/chai": "^4.2.0",
-    "@open-wc/testing-karma": "^0.2.0",
-    "@open-wc/testing-karma-bs": "^0.1.0",
-    "@open-wc/testing-wallaby": "^0.1.3",
+    "@open-wc/testing-karma": "^0.2.1",
+    "@open-wc/testing-karma-bs": "^0.1.1",
+    "@open-wc/testing-wallaby": "^0.1.4",
     "lit-html": "^0.12.0",
     "mocha": "^5.0.0"
   },
-  "gitHead": "91d6d70f98a9dbf142623768b7c97dce9c9db090"
+  "gitHead": "66a2109658155192522ed92f365a2652029c3ce0"
 }

README.md

@@ -1,6 +0,6 @@
-# Open Web Component Recommendations testing helpers
+# Testing Helpers
 
-> Part of Open Web Component Recommendations [open-wc](https://github.com/open-wc/open-wc/)
+> Part of Open Web Component Recommendation [open-wc](https://github.com/open-wc/open-wc/)
 
-We want to provide a good set of default on how to vasilitate your web component.
+We want to provide a good set of defaults on how to facilitate your web component.
 
@@ -10,1 +10,79 @@ [![CircleCI](https://circleci.com/gh/open-wc/open-wc.svg?style=shield)](https://circleci.com/gh/open-wc/open-wc)
 [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)
+
+In order to efficient test webcomponent you will need some helpers to register and instantiate them.
+
+::: tip Info
+This is part of the default [open-wc](https://open-wc.org/) recommendation
+:::
+
+## Test a custom element
+```js
+import { fixture } from '@open-wc/testing-helpers';
+
+it('can instantiate an element', async () => {
+  const el = await fixture('<my-el foo="bar"></my-el>');
+  expect(el.getAttribute('foo')).to.equal('bar');
+}
+```
+
+## Test a custom element with properties
+```js
+import { html, litFixture } from '@open-wc/testing-helpers';
+
+it('can instantiate an element with properties', async () => {
+  const el = await litFixture(html`<my-el .foo=${'bar'}></my-el>`);
+  expect(el.foo).to.equal('bar');
+}
+```
+
+## Test a custom class
+If you test a mixin or you have multiple base classes that offer a various set of options you will find yourself in the situation of needing multiple custom element names in your tests.
+This is rather dangerous as custom elements are global so you do not want to have overlapping names in your tests.
+Therefore we recommend using a special function for it.
+```js
+import { fixture, defineCE } from '@open-wc/testing-helpers';
+
+const tag = defineCE(class extends MyMixin(HTMLElement) {
+  constructor() {
+    super();
+    this.foo = true;
+  }
+});
+const el = fixture(`<${tag}></${tag}>`);
+expect(el.foo).to.be.true;
+```
+
+## Test a custom class with properties
+For lit-html it's a little tougher as it does not support dynamic tag names by default.  
+This is using a "workaround" which is not performant for rerenders.
+As this is usually not a problem for tests it's ok here but do NOT use it in production code.
+
+```js
+import { html, litFixture, defineCE, unsafeStatic } from '@open-wc/testing-helpers';
+
+const tagName = defineCE(class extends MyMixin(HTMLElement) {
+  constructor() {
+    super();
+    this.foo = true;
+  }
+});
+const tag = unsafeStatic(tagName);
+const el = litFixture(html`<${tag} .bar=${'baz'}></${tag}>`);
+expect(el.bar).to.equal('baz');
+```
+
+## Timings
+If you need to wait for multiple elements to update you can use flush.  
+By default it will be a timeout of 2ms but it will use a `window.flush` method if set.
+
+```js
+import { flush, aTimeout, html, litFixture } from '@open-wc/testing-helpers';
+
+const el = await litFixture(html`<my-el .foo=${'bar'}></my-el>`);
+expect(el.foo).to.equal('bar');
+el.foo = 'baz';
+await flush();
+// or as an alternative us timeout
+// await aTimeout(10); // would wait 10ms
+expect(el.shadowRoot.querySelector('#foo').innerText).to.equal('baz');
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15772

increased by21.96%

Number of lines in readme file

88

increased by780%

No dependency changes