test: add progress test

Author: cjw783

test/unit/state-api/state-api.spec.ts

@@ -1,7 +1,12 @@
 import { expect } from "chai";
 import Flicking from "~/Flicking";
 import { connectFlickingStateApi } from "~/state-api";
-import { cleanup, createFlicking, createSandbox, tick } from "../helper/test-util";
+import {
+  cleanup,
+  createFlicking,
+  createSandbox,
+  tick
+} from "../helper/test-util";
 import El from "../helper/El";
 
 describe("State API", () => {
@@ -33,7 +38,7 @@ describe("State API", () => {
 
   describe("State Updates", () => {
     it("should update state when moving to next panel", async () => {
-      const promise =  flicking.next();
+      const promise = flicking.next();
       tick(1000);
       await promise;
 
@@ -53,6 +58,7 @@ describe("State API", () => {
       expect(stateApi.isReachEnd).to.be.true;
       expect(stateApi.currentPanelIndex).to.equal(2);
       expect(stateApi.indexProgress).to.equal(100);
+      expect(stateApi.scrollProgress).to.equal(100);
     });
 
     it("should update state when adding panels", async () => {
@@ -78,6 +84,37 @@ describe("State API", () => {
 
       expect(stateApi.currentPanelIndex).to.equal(1);
       expect(stateApi.indexProgress).to.equal(50);
+      expect(stateApi.scrollProgress).to.equal(50);
+    });
+  });
+
+  describe("Progress", () => {
+    it("should show difference between indexProgress and scrollProgress with different panel sizes", async () => {
+      // Create flicking with panels of different sizes
+      const customFlicking = await createFlicking(
+        El.viewport("1000px", "400px").add(
+          El.camera().add(
+            El.panel("200px", "100%"), // 200px wide
+            El.panel("400px", "100%"), // 400px wide
+            El.panel("600px", "100%") // 600px wide
+          )
+        )
+      );
+      const customStateApi = connectFlickingStateApi(customFlicking);
+
+      // Move to second panel
+      const promise = customFlicking.moveTo(1);
+      tick(1000);
+      await promise;
+
+      // indexProgress is based on panel index
+      // scrollProgress is based on actual scroll position
+      // They should be different when panels have different sizes
+      expect(customStateApi.indexProgress).to.not.equal(
+        customStateApi.scrollProgress
+      );
+
+      await customStateApi.unsubscribe();
     });
   });
 });