Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@open-wc/semantic-dom-diff
Advanced tools
@open-wc/semantic-dom-diff - npm Package Compare versions
Comparing version 0.19.5-next.0 to 0.19.5-next.1
| # Change Log | ||
| ## 0.19.5-next.1 | ||
| ### Patch Changes | ||
| - b6e868d5: Use latest dependencies | ||
| ## 0.19.5-next.0 | ||
@@ -4,0 +10,0 @@ |
| { | ||
| "name": "@open-wc/semantic-dom-diff", | ||
| "version": "0.19.5-next.0", | ||
| "version": "0.19.5-next.1", | ||
| "publishConfig": { | ||
@@ -18,5 +18,5 @@ "access": "public" | ||
| "scripts": { | ||
| "debug": "cd ../../ && yarn debug --group testing-helpers", | ||
| "debug": "cd ../../ && yarn debug --group semantic-dom-diff", | ||
| "prepublishOnly": "publish-docs --github-url https://github.com/open-wc/open-wc/ --git-root-dir ../../", | ||
| "test": "cd ../../ && yarn test:web --group testing-helpers" | ||
| "test": "cd ../../ && yarn test:web --group semantic-dom-diff" | ||
| }, | ||
@@ -36,4 +36,4 @@ "files": [ | ||
| "@types/chai": "^4.2.11", | ||
| "@web/test-runner-commands": "^0.5.3" | ||
| "@web/test-runner-commands": "^0.5.7" | ||
| } | ||
| } |
112
README.md
@@ -119,5 +119,5 @@ # Testing >> Semantic Dom Diff ||40 | ||
| The most powerful feature of `semantic-dom-diff` is the ability to test and manage snapshots of your web components. | ||
| `semantic-dom-diff` supports managing snapshots of your components. Snapshot testing is supported in `@web/test-runner` with mocha, or karma with `karma-snapshot` and `karma-mocha-snapshot`. | ||
| > If you are not using `@open-wc/testing-karma`, you need to manually install [karma-snapshot](https://www.npmjs.com/package/karma-snapshot) and [karma-mocha-snapshot](https://www.npmjs.com/package/karma-mocha-snapshot). | ||
| When using Web Test Runner, snapshot tests are async and the assertion must be awaited. | ||
@@ -137,3 +137,3 @@ #### Setting up a snapshot | ||
| expect(element).shadowDom.to.equalSnapshot(); | ||
| await expect(element).shadowDom.to.equalSnapshot(); | ||
| }); | ||
@@ -146,3 +146,3 @@ | ||
| expect(element).shadowDom.to.equalSnapshot(); | ||
| await expect(element).shadowDom.to.equalSnapshot(); | ||
| }); | ||
@@ -155,3 +155,3 @@ | ||
| expect(element).shadowDom.to.equalSnapshot(); | ||
| await expect(element).shadowDom.to.equalSnapshot(); | ||
| }); | ||
@@ -164,3 +164,3 @@ | ||
| expect(element).lightDom.to.equalSnapshot(); | ||
| await expect(element).lightDom.to.equalSnapshot(); | ||
| }); | ||
@@ -170,8 +170,4 @@ }); | ||
| Snapshots are stored in the `__snapshots__` folder in your project, using the most top-level `describe` as the name for your snapshots file. | ||
| #### Updating a snapshot | ||
| > If you are not using the standard `@open-wc/testing-karma` configuration, see the documentation of `karma-snapshot` how to pass the update/prune flags. | ||
| When your tests run for the first time the snapshot files are generated. On subsequent test runs your element is compared with the stored snapshots. If the element and the snapshots differ the test fails. | ||
@@ -181,6 +177,2 @@ | ||
| #### Cleaning up unused snapshots | ||
| After refactoring, there might be unused and leftover snapshot files. You can run karma with the `--prune-snapshots` flag to clean these up. | ||
| **Ignoring tags and attributes** | ||
@@ -198,7 +190,7 @@ | ||
| expect(el).dom.to.equal('<div>Hey</div>', { | ||
| await expect(el).dom.to.equal('<div>Hey</div>', { | ||
| ignoreAttributes: ['my-random-attribute'], | ||
| }); | ||
| expect(el).dom.to.equalSnapshot({ | ||
| await expect(el).dom.to.equalSnapshot({ | ||
| ignoreAttributes: ['my-random-attribute'], | ||
@@ -220,7 +212,7 @@ }); | ||
| // ignore id attributes on input elements | ||
| expect(el).dom.to.equal('<div>Hey</div>', { | ||
| await expect(el).dom.to.equal('<div>Hey</div>', { | ||
| ignoreAttributes: [{ tags: ['input'], attributes: ['id'] }], | ||
| }); | ||
| expect(el).dom.to.equalSnapshot({ | ||
| await expect(el).dom.to.equalSnapshot({ | ||
| ignoreAttributes: [{ tags: ['input'], attributes: ['id'] }], | ||
@@ -245,7 +237,7 @@ }); | ||
| // ignore id attributes on input elements | ||
| expect(el).dom.to.equal('<div>Hey</div>', { | ||
| await expect(el).dom.to.equal('<div>Hey</div>', { | ||
| ignoreTags: ['my-custom-element'], | ||
| }); | ||
| expect(el).dom.to.equalSnapshot({ | ||
| await expect(el).dom.to.equalSnapshot({ | ||
| ignoreTags: ['my-custom-element'], | ||
@@ -275,3 +267,3 @@ }); | ||
| // ignore id attributes on input elements | ||
| expect(el).dom.to.equal( | ||
| await expect(el).dom.to.equal( | ||
| ` | ||
@@ -286,3 +278,3 @@ <div> | ||
| expect(el).dom.to.equalSnapshot({ | ||
| await expect(el).dom.to.equalSnapshot({ | ||
| ignoreChildren: ['my-custom-input'], | ||
@@ -292,77 +284,1 @@ }); | ||
| ``` | ||
| **[Scoped elements](https://open-wc.org/scoped-elements/)** | ||
| You might want to ignore scoped elements when working with _Shadow DOM snapshots_, like so: | ||
| ```js | ||
| import { MyButton } from '@somewhere/my-button'; | ||
| class MyElement extends ScopedElementsMixin(LitElement) { | ||
| static get scopedElements() { | ||
| return { | ||
| 'my-button': MyButton, | ||
| }; | ||
| } | ||
| render() { | ||
| return html` | ||
| <p>Here's my button</p> | ||
| <my-button>Hey!</my-button> | ||
| `; | ||
| } | ||
| } | ||
| window.customElements.define('my-element', MyElement); | ||
| it('renders correctly', async () => { | ||
| const el = await fixture(` | ||
| <my-custom-element> | ||
| </my-custom-element> | ||
| `); | ||
| expect(el).shadowDom.to.equalSnapshot({ | ||
| ignoreTags: [el.constructor.getScopedTagName('my-button', el.constructor.scopedElements)], | ||
| }); | ||
| }); | ||
| ``` | ||
| This example will save the following snapshot: | ||
| ```html | ||
| <my-custom-element> | ||
| <p>Here's my button</p> | ||
| </my-custom-element> | ||
| ``` | ||
| However, what if you actually care about testing what goes into scoped elements? | ||
| In that case, scoped elements should not be ignored, but diffed in snapshots correctly with their original tag name instead. Our differ will take that into account when making Shadow DOM snapshots, by default. Following the previous example: | ||
| ```js | ||
| it('renders correctly', async () => { | ||
| const el = await fixture(` | ||
| <my-custom-element> | ||
| </my-custom-element> | ||
| `); | ||
| expect(el).shadowDom.to.equalSnapshot(); | ||
| }); | ||
| ``` | ||
| This example will save this snapshot: | ||
| ```html | ||
| <my-custom-element> | ||
| <p>Here's my button</p> | ||
| <my-button data-tag-name="my-button"> Hey! </my-button> | ||
| </my-custom-element> | ||
| ``` | ||
| With the actual implementation of scoped elements, without ignoring its tags or if our differ wouldn't check them by default, the test snapshot would be produced with scoped element tags with different random numbers _every time_: | ||
| ```html | ||
| <my-custom-element> | ||
| <p>Here's my button</p> | ||
| <my-button-23443 data-tag-name="my-button"> Hey! </my-button-23443> | ||
| </my-custom-element> | ||
| ``` |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-3.46%
66366
- Number of lines in readme file
- decreased by-23.6%
272