10557177632

Committed 26 Aug 2024 09:22AM UTC coverage: 38.327% (-44.5%) from 82.855%

Build # 10557177632

Build Type

Pull #886

github

Committed by

daybrush

Commit Message

fix: recalculate camera offset

Pull Request Pull Request #886: fix: recalculate camera offset

Run Details

2039 of 7372 branches covered (27.66%)

Branch coverage included in aggregate %.

11 of 29 new or added lines in 2 files covered. (37.93%)

5575 existing lines in 46 files now uncovered.

5099 of 11252 relevant lines covered (45.32%)

10.91 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

16.37

/test/unit/renderer/Renderer.spec.ts

import { ALIGN, EVENTS } from "~/const/external";
import Panel, { PanelOptions } from "~/core/panel/Panel";
import VanillaElementProvider from "~/core/panel/provider/VanillaElementProvider";
import Renderer from "~/renderer/Renderer";
import NormalRenderingStrategy from "~/renderer/strategy/NormalRenderingStrategy";
import { getFlickingAttached, parsePanelAlign, toArray } from "~/utils";

import El from "../helper/El";
import { createFlicking, range, waitEvent } from "../helper/test-util";

class RendererImpl extends Renderer {
  public constructor(options = {}) {
    super({
      strategy: new NormalRenderingStrategy({
        providerCtor: VanillaElementProvider
      }),
      ...options
    });
  }

  public async render() { return; }
  public async forceRenderAllPanels() { return; }

  protected _collectPanels(): void {
    const flicking = getFlickingAttached(this._flicking);

    const cameraElement = flicking.camera.element;

    // Remove all text nodes in the camera element
    cameraElement.childNodes.forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        cameraElement.removeChild(node);
      }
    });

    const align = parsePanelAlign(this._align);
    const cameraChilds = toArray(cameraElement.children);

    this._panels = cameraChilds.map(
      (el: HTMLElement, index: number) => new Panel({ flicking, elementProvider: new VanillaElementProvider(el), index, align })
    );
  }

  protected _createPanel(el: any, options: PanelOptions): Panel { return new Panel({ elementProvider: new VanillaElementProvider(el), ...options }); }
}

describe("Renderer", () => {
  describe("Properties", () => {
    it("has empty array as a default panels", () => {
      expect(new RendererImpl().panels).to.deep.equal([]);
    });

    it("has 0 as a default panelCount", () => {
      expect(new RendererImpl().panelCount).to.equal(0);
    });
  });

  describe("Options", () => {
    it(`has ${ALIGN.CENTER} as a default align value`, () => {
      expect(new RendererImpl().align).to.equal(ALIGN.CENTER);
    });

    it("should have the same align value in constructor", () => {
      expect(new RendererImpl({ align: ALIGN.NEXT }).align).equals(ALIGN.NEXT);
    });

    it("can be changed anytime", () => {
      const renderer = new RendererImpl({ align: ALIGN.PREV });

      renderer.align = "300px";

      expect(renderer.align).to.equal("300px");
    });
  });

  describe("Methods", () => {
    describe("getPanel", () => {
      it("should return panel which has same index to given index", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);

        expect(renderer.getPanel(0).index).to.equal(0);
        expect(renderer.getPanel(1).index).to.equal(1);
        expect(renderer.getPanel(2).index).to.equal(2);
      });
    });

    describe("updatePanelSize", () => {
      it("should update panel sizes", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const prevSizes = flicking.panels.map(panel => panel.size);

        flicking.panels.forEach(panel => {
          panel.setSize({ width: 9999 });
        });
        renderer.updatePanelSize();

        const newSizes = flicking.panels.map(panel => panel.size);

        expect(prevSizes.every(size => size !== 9999)).to.be.true;
        expect(newSizes.every(size => size === 9999)).to.be.true;
      });
    });

    describe("batchInsert", () => {
      it("should insert new panels at given position", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const prevPanelCount = renderer.panelCount;
        const element = El.panel().el;

        renderer.batchInsert({ index: 2, elements: [element], hasDOMInElements: true });

        expect(renderer.panels.length).to.equal(prevPanelCount + 1);
        expect(renderer.panels[2].element).to.equal(element);
      });

      it("should return inserted panels as array", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const elements = range(5).map(() => El.panel().el);

        const returnVal = renderer.batchInsert({ index: 2, elements, hasDOMInElements: true });

        expect(returnVal.map(panel => panel.element)).to.deep.equal(elements);
      });

      it("should increase pushed panel's indexes", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const element = El.panel().el;
        const notPushed = renderer.panels[0];
        const shouldPushed = renderer.panels.slice(1);
        const prevIndexes = shouldPushed.map(panel => panel.index);

        renderer.batchInsert({ index: 1, elements: [element], hasDOMInElements: true });

        expect(shouldPushed.every((panel, idx) => panel.index === prevIndexes[idx] + 1)).to.be.true;
        // Panel 0 is not pushed
        expect(notPushed.index).to.equal(0);
      });

      it("should trigger panelChange event with the panels added", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const element = El.panel().el;
        const panelChangeSpy = sinon.spy();

        flicking.on(EVENTS.PANEL_CHANGE, panelChangeSpy);
        renderer.batchInsert({ index: 1, elements: [element], hasDOMInElements: true });

        expect(panelChangeSpy.calledOnce).to.be.true;
        expect(panelChangeSpy.firstCall.args[0].added.length).to.equal(1);
        expect(panelChangeSpy.firstCall.args[0].added[0].element).to.equal(element);
        expect(panelChangeSpy.firstCall.args[0].removed.length).to.equal(0);
      });

      it("should put proper indexes to added panels", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const elements = range(5).map(() => El.panel().el);

        const newPanels = renderer.batchInsert({ index: 1, elements: elements, hasDOMInElements: true });

        expect(newPanels.every((panel, idx) => panel.index === 1 + idx)).to.be.true;
      });

      it("should check panel contents for added panels", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = flicking.renderer;
        const elements = range(5).map(() => El.imgPanel().el);
        const checkPanelContentsReadySpy = sinon.spy(renderer, "checkPanelContentsReady");

        const newPanels = renderer.batchInsert({ index: 1, elements: elements, hasDOMInElements: true });

        expect(checkPanelContentsReadySpy.calledOnceWith(newPanels));
      });
    });

    describe("batchRemove", () => {
      it("should remove panels at the given index", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const prevPanels = [...renderer.panels];
        const prevPanelCount = renderer.panelCount;

        renderer.batchRemove({ index: 1, deleteCount: 2, hasDOMInElements: true });

        expect(renderer.panels.length).to.equal(prevPanelCount - 2);
        expect(renderer.panels[0]).to.equal(prevPanels[0]);
      });

      it("should return removed panels as array", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const prevPanels = [...renderer.panels];

        const returnVal = renderer.batchRemove({ index: 2, deleteCount: 1, hasDOMInElements: true });

        expect(returnVal.length).to.equal(1);
        expect(returnVal[0]).to.deep.equal(prevPanels[2]);
      });

      it("should decrease pulled panel's indexes", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const shouldPulled = renderer.panels[2];
        const prevIndex = shouldPulled.index;

        renderer.batchRemove({ index: 0, deleteCount: 2, hasDOMInElements: true });

        expect(prevIndex).to.equal(2);
        expect(shouldPulled.index).to.equal(0);
      });

      it("should trigger panelChange event with the panels removed", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
        const renderer = new RendererImpl().init(flicking);
        const prevPanels = [...renderer.panels];
        const panelChangeSpy = sinon.spy();

        flicking.on(EVENTS.PANEL_CHANGE, panelChangeSpy);
        renderer.batchRemove({ index: 1, deleteCount: 1, hasDOMInElements: true });

        expect(panelChangeSpy.calledOnce).to.be.true;
        expect(panelChangeSpy.firstCall.args[0].added.length).to.equal(0);
        expect(panelChangeSpy.firstCall.args[0].removed.length).to.equal(1);
        expect(panelChangeSpy.firstCall.args[0].removed[0]).to.deep.equal(prevPanels[1]);
      });
    });

    describe("updatePanelSize", () => {
      it("should call resize of every panels with no argument", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: -1 });
        const renderer = new RendererImpl().init(flicking);
        const resizeSpies = renderer.panels.map(panel => sinon.spy(panel, "resize"));

        renderer.updatePanelSize();

        expect(resizeSpies.every(spy => spy.calledOnceWith(undefined)));
      });

      it("should update panel sizes to match the panel sizes to match viewport size when panelsPerView is 1", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 1 });
        const renderer = new RendererImpl().init(flicking);
        const panels = flicking.panels;
        const viewportSize = flicking.camera.size;

        panels.forEach(panel => panel.element.style.width = "100px");
        renderer.updatePanelSize();

        expect(viewportSize).not.equal(100);
        expect(panels.every(panel => panel.size === viewportSize)).to.be.true;
        expect(panels.every(panel => panel.element.style.width === `${viewportSize}px`)).to.be.true;
      });

      it("should set panel sizes to match the panel sizes to match viewport size when panelsPerView is 1 and margin is applied to the panels", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 1 });
        const renderer = new RendererImpl().init(flicking);
        const panels = flicking.panels;
        const viewportSize = flicking.camera.size;

        panels.forEach(panel => panel.element.style.width = "100px");
        panels.forEach(panel => panel.element.style.marginLeft = "15px");
        panels.forEach(panel => panel.element.style.marginRight = "15px");
        renderer.updatePanelSize();

        expect(viewportSize).not.equal(100);
        expect(panels.every(panel => panel.size === viewportSize)).to.be.true;
        expect(panels.every(panel => panel.element.style.width === `${viewportSize}px`)).to.be.true;
      });

      it("should update panel sizes to match the panel sizes to match 'viewport size / panelsPerView'", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 4 });
        const renderer = new RendererImpl().init(flicking);
        const panels = flicking.panels;
        const expectedSize = flicking.camera.size / 4;

        panels.forEach(panel => panel.element.style.width = "100px");
        renderer.updatePanelSize();

        expect(expectedSize).not.equal(100);
        expect(panels.every(panel => panel.size === expectedSize)).to.be.true;
        expect(panels.every(panel => panel.element.style.width === `${expectedSize}px`)).to.be.true;
      });

      it("should update panel sizes to match the panel sizes to match '(viewport size - first panel's margin sum * (panelsPerSize - 1)) / panelsPerView'", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 4 });
        const renderer = new RendererImpl().init(flicking);
        const panels = flicking.panels;
        const firstPanel = panels[0];
        // (viewport size - first panel's margin sum * (panelsPerSize - 1)) / panelsPerView
        const expectedSize = (flicking.camera.size - 20 * 3) / 4;

        panels.forEach(panel => panel.element.style.width = "100px");
        firstPanel.element.style.marginLeft = "15px";
        firstPanel.element.style.marginRight = "5px";
        renderer.updatePanelSize();

        expect(expectedSize).not.equal(100);
        expect(panels.every(panel => panel.size === expectedSize)).to.be.true;
        expect(panels.every(panel => panel.element.style.width === `${expectedSize}px`)).to.be.true;
      });

      it("should not update panel CSS if noPanelStyleOverride is true", async () => {
        const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 1, noPanelStyleOverride: true });
        const renderer = new RendererImpl().init(flicking);
        const panels = flicking.panels;
        const viewportSize = flicking.camera.size;

        panels.forEach(panel => panel.element.style.width = "100px");
        renderer.updatePanelSize();

        expect(viewportSize).not.equal(100);
        expect(panels.every(panel => panel.size === viewportSize)).to.be.true;
        expect(panels.every(panel => panel.element.style.width === "100px")).to.be.true;
      });

      it("should not update the height of the horizontal panel by panelsPerView.", async () => {
        const flicking = await createFlicking(El.VARIOUS_HORIZONTAL, { panelsPerView: 2 });
        const renderer = new RendererImpl().init(flicking);
        const panels = flicking.panels;
        const expectedHeight = parseInt(flicking.panels[2].element.style.height, 10);

        renderer.updatePanelSize();

        expect(panels[2].height === expectedHeight).to.be.true;
      });
    });
  });

  describe("updateRenderingPanels", () => {
    it("should always make all panels visible if renderOnlyVisible is false", async () => {
      const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { renderOnlyVisible: false });
      const renderer = new RendererImpl().init(flicking);

      flicking.panels.forEach(panel => panel.markForHide());
      renderer.strategy.updateRenderingPanels(flicking);

      expect(flicking.panels.every(panel => panel.rendered)).to.be.true;
    });

    it("should make only visible panels to be visible if renderOnlyVisible is true", async () => {
      const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { renderOnlyVisible: true });
      const renderer = new RendererImpl().init(flicking);

      flicking.panels.forEach(panel => panel.markForHide());
      renderer.strategy.updateRenderingPanels(flicking);

      const nonVisible = flicking.panels.filter(panel => !flicking.visiblePanels.includes(panel));
      expect(nonVisible.length).to.be.greaterThan(0);
      expect(flicking.visiblePanels.every(panel => panel.rendered)).to.be.true;
      expect(nonVisible.every(panel => !panel.rendered)).to.be.true;
    });

    it("should not remove panels that are currently loading its contents", async () => {
      const flicking = await createFlicking(
        El.viewport("200px", "200px").add(
          El.camera().add(
            El.imgPanel("100%", "100%"),
            El.imgPanel("100%", "100%"),
            El.imgPanel("100%", "100%")
          )
        ), { renderOnlyVisible: true, resizeOnContentsReady: true }
      );
      const renderer = new RendererImpl().init(flicking);

      flicking.panels.forEach(panel => panel.markForHide());
      renderer.strategy.updateRenderingPanels(flicking);

      const nonVisibleButLoading = flicking.panels.filter(panel => !flicking.visiblePanels.includes(panel));
      expect(nonVisibleButLoading.length).to.be.greaterThan(0);
      expect(flicking.visiblePanels.every(panel => panel.rendered)).to.be.true;
      expect(nonVisibleButLoading.every(panel => panel.loading)).to.be.true;
      expect(nonVisibleButLoading.every(panel => panel.rendered)).to.be.true;
    });
  });

  describe("checkPanelContentsReady", () => {
    let renderer: RendererImpl | null = null;

    afterEach(() => {
      renderer?.destroy();
      renderer = null;
    });

    it("should set all panels with image as loading if resizeOnContentsReady is true", async () => {
      const flicking = await createFlicking(El.viewport("200px", "200px").add(
        El.camera().add(
          El.imgPanel("100%", "100%"),
          El.imgPanel("100%", "100%"),
          El.imgPanel("100%", "100%")
        )
      ), { resizeOnContentsReady: true });
      renderer = new RendererImpl().init(flicking);
      const panels = renderer.panels;

      panels.forEach(panel => panel.loading = false);
      expect(panels.every(panel => !panel.loading)).to.be.true;

      renderer.checkPanelContentsReady(panels);
      expect(panels.every(panel => panel.loading)).to.be.true;
    });

    it("should not set all panels with image as loading if resizeOnContentsReady is false", async () => {
      const flicking = await createFlicking(El.viewport("200px", "200px").add(
        El.camera().add(
          El.imgPanel("100%", "100%"),
          El.imgPanel("100%", "100%"),
          El.imgPanel("100%", "100%")
        )
      ), { resizeOnContentsReady: false });
      renderer = new RendererImpl().init(flicking);
      const panels = renderer.panels;

      panels.forEach(panel => panel.loading = false);
      expect(panels.every(panel => !panel.loading)).to.be.true;

      renderer.checkPanelContentsReady(panels);
      expect(panels.every(panel => !panel.loading)).to.be.true;
    });

    it("should resize the panel with image when it's loaded", async () => {
      const flicking = await createFlicking(El.viewport("200px", "200px").add(
        El.camera().add(
          El.imgPanel("100%", "100%")
        )
      ), { resizeOnContentsReady: true });
      const panel = flicking.panels[0];
      const image = panel.element.querySelector("img");
      const resizeSpy = sinon.spy(panel, "resize");

      await waitEvent(image, "load");

      expect(resizeSpy.calledOnce).to.be.true;
    });

    it("should update the camera range after the image's loaded", async () => {
      const flicking = await createFlicking(El.viewport("200px", "200px").add(
        El.camera().add(
          El.imgPanel("100%", "100%")
        )
      ), { resizeOnContentsReady: true });
      const image = flicking.panels[0].element.querySelector("img");
      const resizeSpy = sinon.spy(flicking.camera, "updateRange");

      await waitEvent(image, "load");

      expect(resizeSpy.calledOnce).to.be.true;
    });
  });
});

1	import { ALIGN, EVENTS } from "~/const/external";	1✔
2	import Panel, { PanelOptions } from "~/core/panel/Panel";	1✔
3	import VanillaElementProvider from "~/core/panel/provider/VanillaElementProvider";	1✔
4	import Renderer from "~/renderer/Renderer";	1!
5	import NormalRenderingStrategy from "~/renderer/strategy/NormalRenderingStrategy";	×
6	import { getFlickingAttached, parsePanelAlign, toArray } from "~/utils";	×
7		1✔
8	import El from "../helper/El";
9	import { createFlicking, range, waitEvent } from "../helper/test-util";	1✔
10		1!
11	class RendererImpl extends Renderer {	×
12	public constructor(options = {}) {	1✔
13	super({	1✔
14	strategy: new NormalRenderingStrategy({	1!
15	providerCtor: VanillaElementProvider
16	}),
17	...options	1✔
UNCOV 18	});	×
19	}	×
20		×
21	public async render() { return; }	×
22	public async forceRenderAllPanels() { return; }	×
23
24	protected _collectPanels(): void {	×
25	const flicking = getFlickingAttached(this._flicking);
UNCOV 26		×
27	const cameraElement = flicking.camera.element;
28		1✔
UNCOV 29	// Remove all text nodes in the camera element	×
UNCOV 30	cameraElement.childNodes.forEach(node => {	×
UNCOV 31	if (node.nodeType === Node.TEXT_NODE) {	×
32	cameraElement.removeChild(node);	×
UNCOV 33	}	×
UNCOV 34	});	×
35
36	const align = parsePanelAlign(this._align);
37	const cameraChilds = toArray(cameraElement.children);	1✔
UNCOV 38		×
UNCOV 39	this._panels = cameraChilds.map(	×
UNCOV 40	(el: HTMLElement, index: number) => new Panel({ flicking, elementProvider: new VanillaElementProvider(el), index, align })	×
41	);
UNCOV 42	}	×
UNCOV 43		×
UNCOV 44	protected _createPanel(el: any, options: PanelOptions): Panel { return new Panel({ elementProvider: new VanillaElementProvider(el), ...options }); }	×
UNCOV 45	}	×
UNCOV 46		×
UNCOV 47	describe("Renderer", () => {	×
UNCOV 48	describe("Properties", () => {	×
49	it("has empty array as a default panels", () => {	×
50	expect(new RendererImpl().panels).to.deep.equal([]);	×
51	});
UNCOV 52		×
53	it("has 0 as a default panelCount", () => {	×
54	expect(new RendererImpl().panelCount).to.equal(0);	×
55	});	×
56	});	×
57		×
58	describe("Options", () => {
UNCOV 59	it(`has ${ALIGN.CENTER} as a default align value`, () => {	×
UNCOV 60	expect(new RendererImpl().align).to.equal(ALIGN.CENTER);	×
UNCOV 61	});	×
62
63	it("should have the same align value in constructor", () => {
64	expect(new RendererImpl({ align: ALIGN.NEXT }).align).equals(ALIGN.NEXT);	1✔
UNCOV 65	});	×
UNCOV 66		×
67	it("can be changed anytime", () => {	×
68	const renderer = new RendererImpl({ align: ALIGN.PREV });	×
69
70	renderer.align = "300px";
UNCOV 71		×
72	expect(renderer.align).to.equal("300px");
73	});	1✔
74	});	5!
75
76	describe("Methods", () => {	1✔
77	describe("getPanel", () => {	1✔
78	it("should return panel which has same index to given index", async () => {	1✔
79	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	1✔
80	const renderer = new RendererImpl().init(flicking);	1✔
81		1✔
82	expect(renderer.getPanel(0).index).to.equal(0);	1✔
83	expect(renderer.getPanel(1).index).to.equal(1);	1✔
84	expect(renderer.getPanel(2).index).to.equal(2);	1✔
85	});	1✔
86	});	1✔
87
UNCOV 88	describe("updatePanelSize", () => {	×
UNCOV 89	it("should update panel sizes", async () => {	×
90	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
91	const renderer = new RendererImpl().init(flicking);
92	const prevSizes = flicking.panels.map(panel => panel.size);
93		1✔
UNCOV 94	flicking.panels.forEach(panel => {	×
UNCOV 95	panel.setSize({ width: 9999 });	×
96	});
97	renderer.updatePanelSize();
98		1✔
99	const newSizes = flicking.panels.map(panel => panel.size);	×
100		×
101	expect(prevSizes.every(size => size !== 9999)).to.be.true;
102	expect(newSizes.every(size => size === 9999)).to.be.true;
103	});	1✔
UNCOV 104	});	×
UNCOV 105		×
106	describe("batchInsert", () => {
UNCOV 107	it("should insert new panels at given position", async () => {	×
UNCOV 108	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	×
109	const renderer = new RendererImpl().init(flicking);	×
110	const prevPanelCount = renderer.panelCount;
111	const element = El.panel().el;
UNCOV 112		×
UNCOV 113	renderer.batchInsert({ index: 2, elements: [element], hasDOMInElements: true });	×
UNCOV 114		×
115	expect(renderer.panels.length).to.equal(prevPanelCount + 1);
116	expect(renderer.panels[2].element).to.equal(element);	1✔
117	});	1✔
118
119	it("should return inserted panels as array", async () => {	1✔
120	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	1✔
121	const renderer = new RendererImpl().init(flicking);	1✔
UNCOV 122	const elements = range(5).map(() => El.panel().el);	×
123
124	const returnVal = renderer.batchInsert({ index: 2, elements, hasDOMInElements: true });	1✔
UNCOV 125		×
126	expect(returnVal.map(panel => panel.element)).to.deep.equal(elements);
127	});
128		1✔
129	it("should increase pushed panel's indexes", async () => {	1✔
UNCOV 130	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	×
131	const renderer = new RendererImpl().init(flicking);
132	const element = El.panel().el;	1✔
UNCOV 133	const notPushed = renderer.panels[0];	×
134	const shouldPushed = renderer.panels.slice(1);
135	const prevIndexes = shouldPushed.map(panel => panel.index);	1✔
UNCOV 136		×
UNCOV 137	renderer.batchInsert({ index: 1, elements: [element], hasDOMInElements: true });	×
UNCOV 138		×
139	expect(shouldPushed.every((panel, idx) => panel.index === prevIndexes[idx] + 1)).to.be.true;
140	// Panel 0 is not pushed
141	expect(notPushed.index).to.equal(0);	1✔
142	});	1✔
143		1✔
144	it("should trigger panelChange event with the panels added", async () => {
UNCOV 145	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	×
UNCOV 146	const renderer = new RendererImpl().init(flicking);	×
UNCOV 147	const element = El.panel().el;	×
148	const panelChangeSpy = sinon.spy();
UNCOV 149		×
UNCOV 150	flicking.on(EVENTS.PANEL_CHANGE, panelChangeSpy);	×
UNCOV 151	renderer.batchInsert({ index: 1, elements: [element], hasDOMInElements: true });	×
UNCOV 152		×
UNCOV 153	expect(panelChangeSpy.calledOnce).to.be.true;	×
UNCOV 154	expect(panelChangeSpy.firstCall.args[0].added.length).to.equal(1);	×
155	expect(panelChangeSpy.firstCall.args[0].added[0].element).to.equal(element);
156	expect(panelChangeSpy.firstCall.args[0].removed.length).to.equal(0);
157	});
158
159	it("should put proper indexes to added panels", async () => {	1✔
160	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	1✔
161	const renderer = new RendererImpl().init(flicking);
UNCOV 162	const elements = range(5).map(() => El.panel().el);	×
UNCOV 163		×
UNCOV 164	const newPanels = renderer.batchInsert({ index: 1, elements: elements, hasDOMInElements: true });	×
165
UNCOV 166	expect(newPanels.every((panel, idx) => panel.index === 1 + idx)).to.be.true;	×
UNCOV 167	});	×
UNCOV 168		×
UNCOV 169	it("should check panel contents for added panels", async () => {	×
UNCOV 170	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	×
171	const renderer = flicking.renderer;
UNCOV 172	const elements = range(5).map(() => El.imgPanel().el);	×
UNCOV 173	const checkPanelContentsReadySpy = sinon.spy(renderer, "checkPanelContentsReady");	×
UNCOV 174		×
UNCOV 175	const newPanels = renderer.batchInsert({ index: 1, elements: elements, hasDOMInElements: true });	×
UNCOV 176		×
177	expect(checkPanelContentsReadySpy.calledOnceWith(newPanels));
178	});
179	});
180
181	describe("batchRemove", () => {	1✔
182	it("should remove panels at the given index", async () => {	1✔
183	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);
UNCOV 184	const renderer = new RendererImpl().init(flicking);	×
UNCOV 185	const prevPanels = [...renderer.panels];	×
UNCOV 186	const prevPanelCount = renderer.panelCount;	×
187
UNCOV 188	renderer.batchRemove({ index: 1, deleteCount: 2, hasDOMInElements: true });	×
UNCOV 189		×
UNCOV 190	expect(renderer.panels.length).to.equal(prevPanelCount - 2);	×
UNCOV 191	expect(renderer.panels[0]).to.equal(prevPanels[0]);	×
UNCOV 192	});	×
UNCOV 193		×
UNCOV 194	it("should return removed panels as array", async () => {	×
UNCOV 195	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	×
196	const renderer = new RendererImpl().init(flicking);
197	const prevPanels = [...renderer.panels];
198
199	const returnVal = renderer.batchRemove({ index: 2, deleteCount: 1, hasDOMInElements: true });	1✔
200
UNCOV 201	expect(returnVal.length).to.equal(1);	×
UNCOV 202	expect(returnVal[0]).to.deep.equal(prevPanels[2]);	×
UNCOV 203	});	×
204
UNCOV 205	it("should decrease pulled panel's indexes", async () => {	×
UNCOV 206	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	×
UNCOV 207	const renderer = new RendererImpl().init(flicking);	×
UNCOV 208	const shouldPulled = renderer.panels[2];	×
UNCOV 209	const prevIndex = shouldPulled.index;	×
UNCOV 210		×
211	renderer.batchRemove({ index: 0, deleteCount: 2, hasDOMInElements: true });
212
213	expect(prevIndex).to.equal(2);
214	expect(shouldPulled.index).to.equal(0);	1✔
215	});
UNCOV 216		×
UNCOV 217	it("should trigger panelChange event with the panels removed", async () => {	×
UNCOV 218	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL);	×
219	const renderer = new RendererImpl().init(flicking);
UNCOV 220	const prevPanels = [...renderer.panels];	×
UNCOV 221	const panelChangeSpy = sinon.spy();	×
UNCOV 222		×
UNCOV 223	flicking.on(EVENTS.PANEL_CHANGE, panelChangeSpy);	×
UNCOV 224	renderer.batchRemove({ index: 1, deleteCount: 1, hasDOMInElements: true });	×
UNCOV 225		×
UNCOV 226	expect(panelChangeSpy.calledOnce).to.be.true;	×
UNCOV 227	expect(panelChangeSpy.firstCall.args[0].added.length).to.equal(0);	×
228	expect(panelChangeSpy.firstCall.args[0].removed.length).to.equal(1);
UNCOV 229	expect(panelChangeSpy.firstCall.args[0].removed[0]).to.deep.equal(prevPanels[1]);	×
UNCOV 230	});	×
231	});
232
233	describe("updatePanelSize", () => {
234	it("should call resize of every panels with no argument", async () => {	1✔
235	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: -1 });
UNCOV 236	const renderer = new RendererImpl().init(flicking);	×
UNCOV 237	const resizeSpies = renderer.panels.map(panel => sinon.spy(panel, "resize"));	×
UNCOV 238		×
239	renderer.updatePanelSize();
UNCOV 240		×
UNCOV 241	expect(resizeSpies.every(spy => spy.calledOnceWith(undefined)));	×
UNCOV 242	});	×
UNCOV 243		×
UNCOV 244	it("should update panel sizes to match the panel sizes to match viewport size when panelsPerView is 1", async () => {	×
UNCOV 245	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 1 });	×
UNCOV 246	const renderer = new RendererImpl().init(flicking);	×
UNCOV 247	const panels = flicking.panels;	×
UNCOV 248	const viewportSize = flicking.camera.size;	×
UNCOV 249		×
UNCOV 250	panels.forEach(panel => panel.element.style.width = "100px");	×
251	renderer.updatePanelSize();
252
253	expect(viewportSize).not.equal(100);
254	expect(panels.every(panel => panel.size === viewportSize)).to.be.true;	1✔
255	expect(panels.every(panel => panel.element.style.width === `${viewportSize}px`)).to.be.true;
UNCOV 256	});	×
UNCOV 257		×
UNCOV 258	it("should set panel sizes to match the panel sizes to match viewport size when panelsPerView is 1 and margin is applied to the panels", async () => {	×
259	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 1 });
UNCOV 260	const renderer = new RendererImpl().init(flicking);	×
UNCOV 261	const panels = flicking.panels;	×
UNCOV 262	const viewportSize = flicking.camera.size;	×
UNCOV 263		×
UNCOV 264	panels.forEach(panel => panel.element.style.width = "100px");	×
UNCOV 265	panels.forEach(panel => panel.element.style.marginLeft = "15px");	×
266	panels.forEach(panel => panel.element.style.marginRight = "15px");
267	renderer.updatePanelSize();
268
269	expect(viewportSize).not.equal(100);	1✔
270	expect(panels.every(panel => panel.size === viewportSize)).to.be.true;
UNCOV 271	expect(panels.every(panel => panel.element.style.width === `${viewportSize}px`)).to.be.true;	×
UNCOV 272	});	×
UNCOV 273		×
274	it("should update panel sizes to match the panel sizes to match 'viewport size / panelsPerView'", async () => {
UNCOV 275	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 4 });	×
UNCOV 276	const renderer = new RendererImpl().init(flicking);	×
UNCOV 277	const panels = flicking.panels;	×
UNCOV 278	const expectedSize = flicking.camera.size / 4;	×
UNCOV 279		×
UNCOV 280	panels.forEach(panel => panel.element.style.width = "100px");	×
UNCOV 281	renderer.updatePanelSize();	×
282
283	expect(expectedSize).not.equal(100);
284	expect(panels.every(panel => panel.size === expectedSize)).to.be.true;
285	expect(panels.every(panel => panel.element.style.width === `${expectedSize}px`)).to.be.true;
286	});	1✔
287		1✔
288	it("should update panel sizes to match the panel sizes to match '(viewport size - first panel's margin sum * (panelsPerSize - 1)) / panelsPerView'", async () => {
UNCOV 289	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 4 });	×
UNCOV 290	const renderer = new RendererImpl().init(flicking);	×
UNCOV 291	const panels = flicking.panels;	×
292	const firstPanel = panels[0];
UNCOV 293	// (viewport size - first panel's margin sum * (panelsPerSize - 1)) / panelsPerView	×
UNCOV 294	const expectedSize = (flicking.camera.size - 20 * 3) / 4;	×
UNCOV 295		×
UNCOV 296	panels.forEach(panel => panel.element.style.width = "100px");	×
UNCOV 297	firstPanel.element.style.marginLeft = "15px";	×
UNCOV 298	firstPanel.element.style.marginRight = "5px";	×
UNCOV 299	renderer.updatePanelSize();	×
UNCOV 300		×
301	expect(expectedSize).not.equal(100);
302	expect(panels.every(panel => panel.size === expectedSize)).to.be.true;
303	expect(panels.every(panel => panel.element.style.width === `${expectedSize}px`)).to.be.true;
304	});	1✔
305
UNCOV 306	it("should not update panel CSS if noPanelStyleOverride is true", async () => {	×
UNCOV 307	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { panelsPerView: 1, noPanelStyleOverride: true });	×
UNCOV 308	const renderer = new RendererImpl().init(flicking);	×
309	const panels = flicking.panels;
UNCOV 310	const viewportSize = flicking.camera.size;	×
UNCOV 311		×
UNCOV 312	panels.forEach(panel => panel.element.style.width = "100px");	×
UNCOV 313	renderer.updatePanelSize();	×
UNCOV 314		×
UNCOV 315	expect(viewportSize).not.equal(100);	×
UNCOV 316	expect(panels.every(panel => panel.size === viewportSize)).to.be.true;	×
317	expect(panels.every(panel => panel.element.style.width === "100px")).to.be.true;
318	});
319
320	it("should not update the height of the horizontal panel by panelsPerView.", async () => {	1✔
321	const flicking = await createFlicking(El.VARIOUS_HORIZONTAL, { panelsPerView: 2 });
UNCOV 322	const renderer = new RendererImpl().init(flicking);	×
UNCOV 323	const panels = flicking.panels;	×
UNCOV 324	const expectedHeight = parseInt(flicking.panels[2].element.style.height, 10);	×
325
UNCOV 326	renderer.updatePanelSize();	×
UNCOV 327		×
UNCOV 328	expect(panels[2].height === expectedHeight).to.be.true;	×
UNCOV 329	});	×
UNCOV 330	});	×
UNCOV 331	});	×
UNCOV 332		×
UNCOV 333	describe("updateRenderingPanels", () => {	×
334	it("should always make all panels visible if renderOnlyVisible is false", async () => {
335	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { renderOnlyVisible: false });
336	const renderer = new RendererImpl().init(flicking);
337		1✔
338	flicking.panels.forEach(panel => panel.markForHide());
UNCOV 339	renderer.strategy.updateRenderingPanels(flicking);	×
UNCOV 340		×
UNCOV 341	expect(flicking.panels.every(panel => panel.rendered)).to.be.true;	×
342	});
UNCOV 343		×
UNCOV 344	it("should make only visible panels to be visible if renderOnlyVisible is true", async () => {	×
UNCOV 345	const flicking = await createFlicking(El.DEFAULT_HORIZONTAL, { renderOnlyVisible: true });	×
UNCOV 346	const renderer = new RendererImpl().init(flicking);	×
UNCOV 347		×
UNCOV 348	flicking.panels.forEach(panel => panel.markForHide());	×
UNCOV 349	renderer.strategy.updateRenderingPanels(flicking);	×
UNCOV 350		×
UNCOV 351	const nonVisible = flicking.panels.filter(panel => !flicking.visiblePanels.includes(panel));	×
UNCOV 352	expect(nonVisible.length).to.be.greaterThan(0);	×
UNCOV 353	expect(flicking.visiblePanels.every(panel => panel.rendered)).to.be.true;	×
354	expect(nonVisible.every(panel => !panel.rendered)).to.be.true;
355	});
356
357	it("should not remove panels that are currently loading its contents", async () => {
358	const flicking = await createFlicking(	1✔
359	El.viewport("200px", "200px").add(	1✔
360	El.camera().add(
UNCOV 361	El.imgPanel("100%", "100%"),	×
UNCOV 362	El.imgPanel("100%", "100%"),	×
UNCOV 363	El.imgPanel("100%", "100%")	×
364	)
UNCOV 365	), { renderOnlyVisible: true, resizeOnContentsReady: true }	×
UNCOV 366	);	×
UNCOV 367	const renderer = new RendererImpl().init(flicking);	×
UNCOV 368		×
UNCOV 369	flicking.panels.forEach(panel => panel.markForHide());	×
UNCOV 370	renderer.strategy.updateRenderingPanels(flicking);	×
371
372	const nonVisibleButLoading = flicking.panels.filter(panel => !flicking.visiblePanels.includes(panel));
373	expect(nonVisibleButLoading.length).to.be.greaterThan(0);
374	expect(flicking.visiblePanels.every(panel => panel.rendered)).to.be.true;	1✔
375	expect(nonVisibleButLoading.every(panel => panel.loading)).to.be.true;
UNCOV 376	expect(nonVisibleButLoading.every(panel => panel.rendered)).to.be.true;	×
UNCOV 377	});	×
UNCOV 378	});	×
379
UNCOV 380	describe("checkPanelContentsReady", () => {	×
UNCOV 381	let renderer: RendererImpl \| null = null;	×
UNCOV 382		×
UNCOV 383	afterEach(() => {	×
UNCOV 384	renderer?.destroy();	×
UNCOV 385	renderer = null;	×
UNCOV 386	});	×
UNCOV 387		×
UNCOV 388	it("should set all panels with image as loading if resizeOnContentsReady is true", async () => {	×
UNCOV 389	const flicking = await createFlicking(El.viewport("200px", "200px").add(	×
390	El.camera().add(
391	El.imgPanel("100%", "100%"),
392	El.imgPanel("100%", "100%"),
393	El.imgPanel("100%", "100%")	1✔
394	)
UNCOV 395	), { resizeOnContentsReady: true });	×
UNCOV 396	renderer = new RendererImpl().init(flicking);	×
UNCOV 397	const panels = renderer.panels;	×
398
UNCOV 399	panels.forEach(panel => panel.loading = false);	×
UNCOV 400	expect(panels.every(panel => !panel.loading)).to.be.true;	×
UNCOV 401		×
UNCOV 402	renderer.checkPanelContentsReady(panels);	×
UNCOV 403	expect(panels.every(panel => panel.loading)).to.be.true;	×
UNCOV 404	});	×
UNCOV 405		×
UNCOV 406	it("should not set all panels with image as loading if resizeOnContentsReady is false", async () => {	×
UNCOV 407	const flicking = await createFlicking(El.viewport("200px", "200px").add(	×
UNCOV 408	El.camera().add(	×
UNCOV 409	El.imgPanel("100%", "100%"),	×
UNCOV 410	El.imgPanel("100%", "100%"),	×
411	El.imgPanel("100%", "100%")
412	)
413	), { resizeOnContentsReady: false });
414	renderer = new RendererImpl().init(flicking);	1✔
415	const panels = renderer.panels;
UNCOV 416		×
UNCOV 417	panels.forEach(panel => panel.loading = false);	×
UNCOV 418	expect(panels.every(panel => !panel.loading)).to.be.true;	×
419
UNCOV 420	renderer.checkPanelContentsReady(panels);	×
UNCOV 421	expect(panels.every(panel => !panel.loading)).to.be.true;	×
UNCOV 422	});	×
UNCOV 423		×
UNCOV 424	it("should resize the panel with image when it's loaded", async () => {	×
UNCOV 425	const flicking = await createFlicking(El.viewport("200px", "200px").add(	×
UNCOV 426	El.camera().add(	×
UNCOV 427	El.imgPanel("100%", "100%")	×
UNCOV 428	)	×
UNCOV 429	), { resizeOnContentsReady: true });	×
430	const panel = flicking.panels[0];
431	const image = panel.element.querySelector("img");
432	const resizeSpy = sinon.spy(panel, "resize");
433		1✔
434	await waitEvent(image, "load");
UNCOV 435		×
UNCOV 436	expect(resizeSpy.calledOnce).to.be.true;	×
UNCOV 437	});	×
438
UNCOV 439	it("should update the camera range after the image's loaded", async () => {	×
UNCOV 440	const flicking = await createFlicking(El.viewport("200px", "200px").add(	×
UNCOV 441	El.camera().add(	×
UNCOV 442	El.imgPanel("100%", "100%")	×
UNCOV 443	)	×
UNCOV 444	), { resizeOnContentsReady: true });	×
UNCOV 445	const image = flicking.panels[0].element.querySelector("img");	×
UNCOV 446	const resizeSpy = sinon.spy(flicking.camera, "updateRange");	×
UNCOV 447		×
UNCOV 448	await waitEvent(image, "load");	×
UNCOV 449		×
UNCOV 450	expect(resizeSpy.calledOnce).to.be.true;	×
UNCOV 451	});	×
452	});
453	});

naver / egjs-flicking / 10557177632

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous