@open-wc/testing - npm Package Compare versions

Comparing version 2.2.8 to 2.3.0

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [2.3.0](https://github.com/open-wc/open-wc/compare/@open-wc/testing@2.2.8...@open-wc/testing@2.3.0) (2019-08-18)
+
+
+### Features
+
+* **testing:** use chai instead of @bundled-es-modules/chai ([53579c2](https://github.com/open-wc/open-wc/commit/53579c2))
+* add type definition files for testing ([462a29f](https://github.com/open-wc/open-wc/commit/462a29f))
+
+
+
+
+
 ## [2.2.8](https://github.com/open-wc/open-wc/compare/@open-wc/testing@2.2.7...@open-wc/testing@2.2.8) (2019-08-07)
@@ -8,0 +20,0 @@

index-no-side-effects.js

@@ -0,1 +1,3 @@
+import 'chai/chai.js';
+
 export {
@@ -18,2 +20,3 @@ html,
 
-export { chai, expect, should, assert } from '@bundled-es-modules/chai';
+// @ts-ignore
+export const { expect, should, assert } = window.chai;

index.js

@@ -0,1 +1,2 @@
+import 'chai/chai.js';
 import './register-chai-plugins.js';
@@ -21,2 +22,3 @@
 
-export { chai, expect, should, assert } from '@bundled-es-modules/chai';
+// @ts-ignore
+export const { expect, should, assert } = window.chai;

package.json

 {
   "name": "@open-wc/testing",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "description": "Testing following open-wc recommendations",
@@ -26,12 +26,19 @@ "author": "open-wc",
   "dependencies": {
-    "@bundled-es-modules/chai": "^4.2.0",
     "@open-wc/chai-dom-equals": "^0.12.36",
-    "@open-wc/semantic-dom-diff": "^0.13.21",
-    "@open-wc/testing-helpers": "^1.1.7",
+    "@open-wc/semantic-dom-diff": "^0.14.0",
+    "@open-wc/testing-helpers": "^1.2.0",
     "@types/chai": "^4.1.7",
+    "@types/chai-dom": "^0.0.8",
     "@types/mocha": "^5.0.0",
-    "chai-a11y-axe": "^1.1.1",
-    "mocha": "^5.0.0"
+    "@types/sinon-chai": "^3.2.3",
+    "chai": "^4.2.0",
+    "chai-a11y-axe": "^1.2.0",
+    "chai-dom": "^1.8.1",
+    "mocha": "^5.0.0",
+    "sinon-chai": "^3.3.0"
   },
-  "gitHead": "a9b7a18e9e6f27acf8792faf59dcdb02db68f064"
+  "devDependencies": {
+    "sinon": "^7.4.1"
+  },
+  "gitHead": "a99bbc7dba2d29ac32127089995e0accbb6a2da5"
 }

README.md

@@ -11,86 +11,47 @@ # Testing
 
-We believe that testing is fundamental to every production-ready product.
+An opinionated package that combines and configures testing libraries to minimize the amount of ceremony required when writing tests.
 
-We recommend using [BDD](https://en.wikipedia.org/wiki/Behavior-driven_development)(Behavior Driven Development) as it seem to be easier when talking to non tech collegues. However note that this can still be a personal preference - we give this recommendation to promote unity within everyone using this recommendation.
+## Step by step guide
 
-Using:
-- System via [mocha](https://mochajs.org/)
-- Assertions via [chai](https://www.chaijs.com/)
-  - Plugin [semantic-dom-diff](https://www.npmjs.com/package/@open-wc/semantic-dom-diff)
-- Mocks via [sinon](https://sinonjs.org/)
+To help you get started with testing, we recommend [reading this article](https://dev.to/open-wc/testing-workflow-for-web-components-g73) for a great step by step guide.
 
-## Setup
-```bash
-npm init @open-wc
-# Upgrade > Testing
-```
+## Testing helpers
 
-### Manual
-```bash
-yarn add @open-wc/testing --dev
-```
+Exposes all functions of [@open-wc/testing-helpers](https://open-wc.org/testing/testing-helpers.html), so that you have a single package to import from:
 
-Add to your test:
-```js
-import { expect } from '@open-wc/testing';
+```javascript
+import { fixture, html } from '@open-wc/testing';
+
+describe('my-test', () => {
+  it('works', async () => {
+    const el = await fixture(html`
+      <my-element></my-element>
+    `);
+  });
+});
 ```
 
-This will have the following side effects:
-  - Use [semantic-dom-diff](https://www.npmjs.com/package/@open-wc/semantic-dom-diff) as a Chai plugin
-  - Enables cleanup after each test for all `fixture`s
+## Chai
 
-## Automating Tests
-Ideally, you'll want some way of automatically running all of your tests. To do that, we recommend karma via `@open-wc/testing-karma` and browserstack via `@open-wc/testing-karma-bs`.
-If you use a different test runner or a different browser grid you may skip these steps.
+Exposes chai as an es module with useful plugins pre-configured:
 
-::: tip Note
-Already part of `npm init @open-wc testing`
-::::
+[@open-wc/semantic-dom-diff](https://www.npmjs.com/package/@open-wc/semantic-dom-diff) for dom tree / snapshot testing:
 
-### Manual Install
-Read more at [testing-karma](https://open-wc.org/testing/testing-karma.html)
+```javascript
+import { expect, fixture, html } from '@open-wc/testing';
 
-## Automating Tests via Browserstack
-To make sure your project is production ready, we recommend running tests in all the browsers you want to support.
-If you do not have access to all browsers, we recommend using a service like [Browserstack](https://www.browserstack.com/) to make sure your project works as intended.
-
-The following step connects the automatic karma runner with browserstack.
-
-::: tip Note
-Already part of `npm init @open-wc testing`
-::::
-
-### Manual Install
-Read more at [testing-karma-bs](https://open-wc.org/testing/testing-karma-bs.html)
-
-## Example Tests
-
-A typical Web Component test will look something like this:
-
-```js
-/* eslint-disable no-unused-expressions */
-import {
-  html,
-  fixture,
-  expect,
-} from '@open-wc/testing';
-
-import '../src/get-result.js';
-
-describe('True Checking', () => {
-  it('is false by default', async () => {
-    const el = await fixture('<get-result></get-result>');
-    expect(el.success).to.be.false;
+describe('Plugin: semantic-dom-diff', () => {
+  it('can semantically compare full dom trees', async () => {
+    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
+    expect(el).dom.to.equal('<div><h1>Hey</h1></div>');
   });
 
-  it('false values will have a light-dom of <p>NOPE</p>', async () => {
-    const el = await fixture('<get-result></get-result>');
-    expect(el).dom.to.equal('<get-result><p>NOPE</p></get-result>');
+  it('can semantically compare lightDom trees', async () => {
+    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
+    expect(el).lightDom.to.equal('<h1>Hey</h1>');
   });
 
-  it('true values will have a light-dom of <p>YEAH</p>', async () => {
-    const foo = 1;
-    const el = await fixture(html`<get-result .success=${foo === 1}></get-result>`);
-    expect(el.success).to.be.true;
-    expect(el).dom.to.equal('<get-result><p>YEAH</p></get-result>');
+  it('can compare against a snapshot', async () => {
+    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
+    expect(el).dom.to.equalSnapshot();
   });
@@ -100,58 +61,27 @@ });
 
-If you run your tests automatically with `npm run test`, the output should look like this:
+[@open-wc/chai-a11y-axe](hhttps://www.npmjs.com/package/chai-a11y-axe) for a11y testing:
 
+```javascript
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('my-test', () => {
+  it('works', async () => {
+    const el = await fixture(html`
+      <my-element></my-element>
+    `);
+    expect(el).to.be.accessible();
+  });
+});
 ```
-> karma start demo/karma.conf.js
-START:
-Webpack bundling...
-Hash: 268cd16a4849f1191bd5
-Version: webpack 4.26.1
-Time: 1590ms
-Built at: 12/18/2018 2:01:09 PM
-             Asset       Size           Chunks             Chunk Names
-        commons.js   1.93 MiB          commons  [emitted]  commons
-get-result.test.js  337 bytes  get-result.test  [emitted]  get-result.test
-        runtime.js   14.2 KiB          runtime  [emitted]  runtime
-Entrypoint get-result.test = runtime.js commons.js get-result.test.js
-18 12 2018 14:01:10.156:INFO [karma-server]: Karma v3.1.3 server started at http://0.0.0.0:9876/
-18 12 2018 14:01:10.160:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
-18 12 2018 14:01:10.166:INFO [launcher]: Starting browser ChromeHeadless
-18 12 2018 14:01:10.833:INFO [HeadlessChrome 70.0.3538 (Windows 10.0.0)]: Connected on socket 6PnebgDwW91bPrHzAAAA with id 55371387
-  True Checking
-    ✔ is false by default
-    ✔ false values will have a light-dom of <p>NOPE</p>
-    ✔ true values will have a light-dom of <p>YEAH</p>
-Finished in 0.12 secs / 0.029 secs @ 14:01:11 GMT+0100 (GMT+01:00)
-SUMMARY:
-✔ 3 tests completed
-TOTAL: 3 SUCCESS
-=============================== Coverage summary ===============================
-Statements   : 100% ( 8/8 )
-Branches     : 100% ( 2/2 )
-Functions    : 100% ( 3/3 )
-Lines        : 100% ( 8/8 )
-================================================================================
-```
 
-::: tip Note
-Make sure you have Chrome (or Chromium) installed.
-Additionally you may need to set your CHROME_BIN env variable `export CHROME_BIN=/usr/bin/chromium-browser`.
-::::
+[chai-dom](https://www.npmjs.com/package/chai-dom) for dom testing:
 
-## Fixture Cleanup
-By default, if you import anything via `import { ... } from '@open-wc/testing-helpers';`, it will automatically register a side-effect that cleans up your fixtures.
-If you want to be in full control you can do so by using
 ```js
-import { fixture, fixtureCleanup } from '@open-wc/testing/index-no-side-effects.js';
+import { fixture, expect } from '@open-wc/testing';
 
-it('can instantiate an element with properties', async () => {
-  const el = await fixture(html`<my-el .foo=${'bar'}></my-el>`);
-  expect(el.foo).to.equal('bar');
-  fixtureCleanup();
-}
-
-// Alternatively, you can add the fixtureCleanup in the afterEach function.
-// Note that this is exactly what the automatically registered side-effect does.
-afterEach(() => {
-  fixtureCleanup();
+describe('Plugin: chai-dom', () => {
+  it('can check for an exiting css class', async () => {
+    const el = await fixture(`<div class="foo bar"></div>`);
+    expect(el).to.have.class('foo');
+  });
 });
@@ -158,0 +88,0 @@ ```

register-chai-plugins.js

@@ -1,6 +0,12 @@
-import { chai } from '@bundled-es-modules/chai';
+// non es module plugins
+import 'chai-dom';
+import 'sinon-chai';
+
+// es module plugins
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 import { chaiA11yAxe } from 'chai-a11y-axe';
 
-chai.use(chaiDomDiff);
-chai.use(chaiA11yAxe);
+// @ts-ignore
+window.chai.use(chaiDomDiff);
+// @ts-ignore
+window.chai.use(chaiA11yAxe);

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

Lines of code

50

increased by21.95%

Worsened metrics

Total package byte prevSize

35432

decreased by-6.52%

Dependency count

12

increased by50%

Dev dependency count

1

increased byInfinity%

Number of lines in readme file

99

decreased by-41.42%

Dependency changes

• + Added@types/chai-dom@^0.0.8

• + Added@types/sinon-chai@^3.2.3

• + Addedchai@^4.2.0

• + Addedchai-dom@^1.8.1

• + Addedsinon-chai@^3.3.0

• + Added@open-wc/semantic-dom-diff@0.14.3(transitive)

• + Added@sinonjs/commons@3.0.1(transitive)

• + Added@sinonjs/fake-timers@13.0.5(transitive)

• + Added@sinonjs/samsam@8.0.2(transitive)

• + Added@sinonjs/text-encoding@0.7.3(transitive)

• + Added@types/chai-dom@0.0.8(transitive)

• + Added@types/sinon@17.0.3(transitive)

• + Added@types/sinon-chai@3.2.12(transitive)

• + Added@types/sinonjs__fake-timers@8.1.5(transitive)

• + Addedassertion-error@1.1.0(transitive)

• + Addedchai@4.5.0(transitive)

• + Addedchai-dom@1.12.0(transitive)

• + Addedcheck-error@1.0.3(transitive)

• + Addeddeep-eql@4.1.4(transitive)

• + Addeddiff@7.0.0(transitive)

• + Addedget-func-name@2.0.2(transitive)

• + Addedhas-flag@4.0.0(transitive)

• + Addedjust-extend@6.2.0(transitive)

• + Addedlodash.get@4.4.2(transitive)

• + Addedloupe@2.3.7(transitive)

• + Addednise@6.1.1(transitive)

• + Addedpath-to-regexp@8.2.0(transitive)

• + Addedpathval@1.1.1(transitive)

• + Addedsinon@19.0.2(transitive)

• + Addedsinon-chai@3.7.0(transitive)

• + Addedsupports-color@7.2.0(transitive)

• + Addedtype-detect@4.0.84.1.0(transitive)

• - Removed@bundled-es-modules/chai@^4.2.0

• - Removed@bundled-es-modules/chai@4.3.7(transitive)

• Updated@open-wc/semantic-dom-diff@^0.14.0

• Updated@open-wc/testing-helpers@^1.2.0

• Updatedchai-a11y-axe@^1.2.0