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

Comparing version 2.1.4 to 2.2.0

index.js

@@ -12,2 +12,3 @@ import { html, unsafeStatic } from 'lit/static-html.js';
   oneEvent,
+  oneDefaultPreventedEvent,
   triggerBlurFor,
@@ -14,0 +15,0 @@ triggerFocusFor,

package.json

 {
   "name": "@open-wc/testing-helpers",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "publishConfig": {
@@ -5,0 +5,0 @@ "access": "public"

README.md

@@ -272,2 +272,21 @@ # Testing >> Helpers || 20
 
+### Events with preventDefault()
+
+If you want to test events that have a default behavior, like a forms `submit` event, some testing tools can be interrupted if `event.preventDefault()` is not called on the event handler. For example, a form's `submit` event's default behavior is to navigate to the `action` of the form (or reload the page if no `action` is set). If the "page" gets reloaded in a test environment, tests can't easily recover/continue. Use the `oneDefaultPreventedEvent` function and `event.preventDefault()` will be called on the event handler and your tests can continue normally.
+
+```js
+it('can await an event and prevent the default', async () => {
+  const form = await fixture(`<form>
+    <input type="text" />
+    <button>Submit button</button>
+  </form>`);
+
+  form.querySelector('button').click();
+
+  const { detail } = await oneDefaultPreventedEvent(el, 'submit');
+
+  expect(detail).to.be.true;
+});
+```
+
 ## Testing Focus & Blur on IE11
@@ -274,0 +293,0 @@

src/helpers.js

@@ -139,2 +139,27 @@ let defineCECounter = 0;
 /**
+ * Listens for one event, calls `event.preventDefault()` and resolves with this event object after it was fired.
+ *
+ * @example
+ * const form = document.querySelector('form);
+ * form.querySelector('button[type="submit"]).click();
+ * const payload = await oneDefaultPreventedEvent(form, 'submit');
+ * expect(payload).to.be.true;
+ *
+ * @param eventTarget Target of the event, usually an Element
+ * @param eventName Name of the event
+ * @returns Promise to await until the event has been fired
+ * @type {import("./types").OneEventFn}
+ */
+export function oneDefaultPreventedEvent(eventTarget, eventName) {
+  return new Promise(resolve => {
+    function listener(ev) {
+      ev.preventDefault();
+      resolve(ev);
+      eventTarget.removeEventListener(eventName, listener);
+    }
+    eventTarget.addEventListener(eventName, listener);
+  });
+}
+
+/**
  * Waits until the given predicate returns a truthy value. Calls and awaits the predicate
@@ -141,0 +166,0 @@ * function at the given interval time. Can be used to poll until a certain condition is true.

src/types.d.ts

 
 export type OneEventFn =
-  <TEvent extends Event = CustomEvent>(eventTarget: EventTarget, eventName: string)=> Promise<TEvent>
+  <TEvent extends Event = CustomEvent>(eventTarget: EventTarget, eventName: string, preventDefault: boolean)=> Promise<TEvent>

types/index-no-side-effects.d.ts

@@ -5,5 +5,3 @@ export { elementUpdated } from "./src/elementUpdated.js";
 /** @deprecated please do import { unsafeStatic } from 'lit/static-html.js'; */
-declare const deprecatedUnsafeStatic: (value: string) => {
-    _$litStatic$: string;
-};
+declare const deprecatedUnsafeStatic: (value: string) => import("lit-html/static").StaticValue;
 export { deprecatedHtml as html, deprecatedUnsafeStatic as unsafeStatic };
@@ -10,0 +8,0 @@ export { fixture, fixtureSync } from "./src/fixture-no-side-effect.js";

types/index.d.ts

@@ -7,5 +7,5 @@ export { elementUpdated } from "./src/elementUpdated.js";
 export { cachedWrappers, fixtureCleanup, fixtureWrapper } from "./src/fixtureWrapper.js";
-export { aTimeout, defineCE, isIE, nextFrame, oneEvent, triggerBlurFor, triggerFocusFor, waitUntil } from "./src/helpers.js";
+export { aTimeout, defineCE, isIE, nextFrame, oneEvent, oneDefaultPreventedEvent, triggerBlurFor, triggerFocusFor, waitUntil } from "./src/helpers.js";
 export { litFixture, litFixtureSync } from "./src/litFixture.js";
 export { stringFixture, stringFixtureSync } from "./src/stringFixture.js";
 //# sourceMappingURL=index.d.ts.map

types/src/helpers.d.ts

@@ -85,2 +85,17 @@ /**
 /**
+ * Listens for one event, calls `event.preventDefault()` and resolves with this event object after it was fired.
+ *
+ * @example
+ * const form = document.querySelector('form);
+ * form.querySelector('button[type="submit"]).click();
+ * const payload = await oneDefaultPreventedEvent(form, 'submit');
+ * expect(payload).to.be.true;
+ *
+ * @param eventTarget Target of the event, usually an Element
+ * @param eventName Name of the event
+ * @returns Promise to await until the event has been fired
+ * @type {import("./types").OneEventFn}
+ */
+export function oneDefaultPreventedEvent(eventTarget: EventTarget, eventName: string): Promise<any>;
+/**
  * Waits until the given predicate returns a truthy value. Calls and awaits the predicate
@@ -87,0 +102,0 @@ * function at the given interval time. Can be used to poll until a certain condition is true.

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

81461

increased by3.28%

Lines of code

919

increased by4.31%

Number of lines in readme file

329

increased by6.13%

No dependency changes