@spectrum-web-components/slider - npm Package Compare versions

Comparing version 0.39.2 to 0.39.3

package.json

 {
     "name": "@spectrum-web-components/slider",
-    "version": "0.39.2",
+    "version": "0.39.3",
     "publishConfig": {
@@ -78,8 +78,8 @@ "access": "public"
         "@lit-labs/observers": "^2.0.0",
-        "@spectrum-web-components/base": "^0.39.2",
-        "@spectrum-web-components/field-label": "^0.39.2",
-        "@spectrum-web-components/number-field": "^0.39.2",
-        "@spectrum-web-components/reactive-controllers": "^0.39.2",
-        "@spectrum-web-components/shared": "^0.39.2",
-        "@spectrum-web-components/theme": "^0.39.2"
+        "@spectrum-web-components/base": "^0.39.3",
+        "@spectrum-web-components/field-label": "^0.39.3",
+        "@spectrum-web-components/number-field": "^0.39.3",
+        "@spectrum-web-components/reactive-controllers": "^0.39.3",
+        "@spectrum-web-components/shared": "^0.39.3",
+        "@spectrum-web-components/theme": "^0.39.3"
     },
@@ -96,3 +96,3 @@ "devDependencies": {
     ],
-    "gitHead": "23d7b50761ce6de28a82a7626632d3bbc88924fb"
+    "gitHead": "d7840b3a9b99db4de62c44e3fb91b69dec7319af"
 }

test/index.js

@@ -7,6 +7,11 @@ "use strict";
 } from "../stories/slider.stories.js";
-import { elementUpdated, expect, fixture } from "@open-wc/testing";
+import { elementUpdated, expect, nextFrame } from "@open-wc/testing";
+import { html } from "@spectrum-web-components/base";
 import { sendKeys } from "@web/test-runner-commands";
 import { spy } from "sinon";
-import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import {
+  fixture,
+  testForLitDevWarnings
+} from "../../../test/testing-helpers.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
 async function sliderFromFixture(sliderFixture) {
@@ -66,2 +71,78 @@ const el = await fixture(sliderFixture({}));
     });
+    it("dispatches `input` of the animation frame", async () => {
+      const inputSpy = spy();
+      const changeSpy = spy();
+      const el = await fixture(
+        html`
+                    <sp-slider
+                        editable
+                        hide-stepper
+                        min="1"
+                        max="100"
+                        step="1"
+                        label="Slider label"
+                        @input=${(event) => {
+          inputSpy(event.target.value);
+        }}
+                        @change=${(event) => {
+          changeSpy(event.target.value);
+        }}
+                    ></sp-slider>
+                `
+      );
+      await elementUpdated(el);
+      expect(el.value).to.equal(50.5);
+      expect(inputSpy.callCount, "start clean").to.equal(0);
+      expect(changeSpy.callCount, "start clean").to.equal(0);
+      const handle = el.shadowRoot.querySelector(
+        ".handle"
+      );
+      const rect = handle.getBoundingClientRect();
+      let frames = 0;
+      let shouldCountFrames = true;
+      const countFrames = () => {
+        if (!shouldCountFrames)
+          return;
+        frames += 1;
+        requestAnimationFrame(countFrames);
+      };
+      countFrames();
+      const toRight = [...Array(51).keys()].map((i) => ({
+        type: "move",
+        position: [
+          rect.left + rect.width / 2 + i,
+          rect.top + rect.height / 2
+        ]
+      }));
+      const toLeft = toRight.slice(0, -1).reverse();
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rect.left + rect.width / 2,
+              rect.top + rect.height / 2
+            ]
+          },
+          {
+            type: "down"
+          },
+          ...toRight,
+          ...toLeft,
+          {
+            type: "up"
+          }
+        ]
+      });
+      shouldCountFrames = false;
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+      expect(el.value).to.gt(50.5);
+      expect(
+        inputSpy.callCount,
+        'should not have more "input"s than frames'
+      ).to.lte(frames);
+      expect(changeSpy.callCount, "only one change").to.equal(1);
+    });
     it("edits via the `<sp-number-field>`", async () => {
@@ -68,0 +149,0 @@ var _a, _b, _c, _d;

test/slider.test.js

@@ -320,2 +320,3 @@ "use strict";
     const inputSpy = spy();
+    const changeSpy = spy();
     const el = await fixture(
@@ -326,3 +327,8 @@ html`
                     style="width: 100px"
-                    @input=${({ target }) => inputSpy(target.value)}
+                    @input=${(event) => {
+        inputSpy(event.target.value);
+      }}
+                    @change=${(event) => {
+        changeSpy(event.target.value);
+      }}
                 ></sp-slider>
@@ -332,2 +338,4 @@ `
     await elementUpdated(el);
+    expect(inputSpy.callCount, "start clean").to.equal(0);
+    expect(changeSpy.callCount, "start clean").to.equal(0);
     let frames = 0;
@@ -368,2 +376,3 @@ let shouldCountFrames = true;
     ).to.lte(frames);
+    expect(changeSpy.callCount, "only one change").to.equal(1);
   });
@@ -370,0 +379,0 @@ it("manages RTL when min != 0", async () => {

No alert changes

Improved metrics

Total package byte prevSize

726708

increased by1.1%

Lines of code

7490

increased by1.22%

Dependency changes

• Updated@spectrum-web-components/base@^0.39.3

• Updated@spectrum-web-components/field-label@^0.39.3

• Updated@spectrum-web-components/number-field@^0.39.3

• Updated@spectrum-web-components/reactive-controllers@^0.39.3

• Updated@spectrum-web-components/shared@^0.39.3

• Updated@spectrum-web-components/theme@^0.39.3