2628268060

Build Type

github

Committed by GitHub

Commit Message

Merge 60ca5d311 into 51086fa02

Pull Request Pull Request #701: fix: panelsPerView not working with adaptive

Run Details

4302 of 7009 branches covered (61.38%)

Branch coverage included in aggregate %.

11 of 11 new or added lines in 3 files covered. (100.0%)

17 existing lines in 2 files now uncovered.

7771 of 8306 relevant lines covered (93.56%)

134.35 hits per line

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

95.0

/test/unit/helper/El.ts

import { parseCSSSizeValue } from "~/utils";
import { range } from "./test-util";

export const EL_CLASS = {
  VIEWPORT: "flicking-viewport",
  CAMERA: "flicking-camera",
  PANEL: "flicking-panel",
  VERTICAL: "vertical"
} as const;


// Flicking Element
class El {
  /**
   * Very basic structure of the horizontal Flicking
   * @example
   * - Viewport (width: 1000px, height: 100%)
   *   - Camera
   *     - Panel (width: 100%, height: 300px)
   *     - Panel (width: 100%, height: 300px)
   *     - Panel (width: 100%, height: 300px)
   */
  public static get DEFAULT_HORIZONTAL() {
    return El.viewport("1000px", "100%").add(
      El.camera().add(
        El.panel().setWidth("100%").setHeight(300),
        El.panel().setWidth("100%").setHeight(300),
        El.panel().setWidth("100%").setHeight(300),
      ),
    );
  }

  /**
   * Horizontal Flicking using Panels with various heights
   * @example
   * - Viewport (width: 1000px, height: 100%)
   *   - Camera
   *     - Panel (width: 100%, height: 300px)
   *     - Panel (width: 100%, height: 400px)
   *     - Panel (width: 100%, height: 500px)
   *     - Panel (width: 100%, height: 600px)
   *     - Panel (width: 100%, height: 300px)
   */
  public static get VARIOUS_HORIZONTAL() {
    return El.viewport("1000px", "100%").add(
      El.camera().add(
        El.panel().setWidth("100%").setHeight(300),
        El.panel().setWidth("100%").setHeight(400),
        El.panel().setWidth("100%").setHeight(500),
        El.panel().setWidth("100%").setHeight(600),
        El.panel().setWidth("100%").setHeight(300),
      ),
    );
  }

  /**
   * Very basic structure of the horizontal Flicking with n panels
   * @example
   * - Viewport (width: 1000px, height: 100%)
   *   - Camera
   *     - Panel (width: 100%, height: 300px) * n
   */
  public static DEFAULT_HORIZONTAL_WITH_PANELS(n: number) {
    return El.viewport("1000px", "100%").add(
      El.camera().add(
        ...range(n).map(() => El.panel().setWidth("100%").setHeight(300))
      ),
    );
  }

  /**
   * Very basic structure of the vertical Flicking
   * @example
   * - Viewport (width: 1000px, height: 1000px)
   *   - Camera
   *     - Panel (width: 100%, height: 100%)
   *     - Panel (width: 100%, height: 100%)
   *     - Panel (width: 100%, height: 100%)
   */
  public static get DEFAULT_VERTICAL() {
    return El.viewport("1000px", "1000px").addClass(EL_CLASS.VERTICAL).add(
      El.camera().add(
        El.panel("100%", "100%"),
        El.panel("100%", "100%"),
        El.panel("100%", "100%"),
      ),
    );
  }

  /**
   * Structure with no panels in it
   * @example
   * - Viewport (width: 1000px, height: 1000px)
   *   - Camera
   */
  public static get EMPTY() {
    return El.viewport("1000px", "1000px").add(
      El.camera()
    );
  }

  public static viewport(width?: string, height?: string) {
    const el = new El(EL_CLASS.VIEWPORT);
    if (width) {
      el.setWidth(width);
    }
    if (height) {
      el.setHeight(height);
    }
    return el;
  }

  public static camera(width?: string, height?: string) {
    const el = new El(EL_CLASS.CAMERA);
    if (width) {
      el.setWidth(width);
    }
    if (height) {
      el.setHeight(height);
    }
    return el;
  }

  public static panel(width?: string, height?: string) {
    const el = new El(EL_CLASS.PANEL);
    if (width) {
      el.setWidth(width);
    }
    if (height) {
      el.setHeight(height);
    }
    return el;
  }

  public static imgPanel(width?: string, height?: string) {
    const el = new El(EL_CLASS.PANEL);
    if (width) {
      el.setWidth(width);
    }
    if (height) {
      el.setHeight(height);
    }

    const img = document.createElement("img");

    img.style.width = "100%";
    img.style.height = "100%";
    // use random placeholder
    img.src = `https://picsum.photos/200/200?hash=${Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)}`;

    el._el.appendChild(img);

    return el;
  }

  public get el() { return this._el; }

  private _el: HTMLElement;

  public constructor(type: string) {
    this._el = document.createElement("div");
    this._el.classList.add(type);
  }

  public add(...els: El[]) {
    els.forEach(el => {
      this._el.appendChild(el._el);
    });
    return this;
  }

  public addClass(...classNames: string[]) {
    this._el.classList.add(...classNames);
    return this;
  }

  public appendTo(element: HTMLElement) {
    element.appendChild(this._el);
    return this;
  }

  public setWidth(width: number | string) {
    this._el.style.width = parseCSSSizeValue(width);

    return this;
  }

  public setHeight(height: number | string) {
    this._el.style.height = parseCSSSizeValue(height);

    return this;
  }

  public setMargin(values: Partial<{
    top: number | string;
    left: number | string;
    bottom: number | string;
    right: number | string;
  }>) {
    Object.keys(values).forEach(key => {
      this._el.style[`margin${key.charAt(0).toUpperCase() + key.slice(1)}`] = parseCSSSizeValue(values[key]);
    });

    return this;
  }
}

export default El;

1	import { parseCSSSizeValue } from "~/utils";	1✔
2	import { range } from "./test-util";	1✔
3		1✔
4	export const EL_CLASS = {	1✔
5	VIEWPORT: "flicking-viewport",	1✔
6	CAMERA: "flicking-camera",	1✔
7	PANEL: "flicking-panel",
8	VERTICAL: "vertical"
9	} as const;
10
11
12	// Flicking Element
13	class El {	1✔
14	/**
15	* Very basic structure of the horizontal Flicking	1,966✔
16	* @example	1,966✔
17	* - Viewport (width: 1000px, height: 100%)
18	* - Camera	1✔
19	* - Panel (width: 100%, height: 300px)
20	* - Panel (width: 100%, height: 300px)
21	* - Panel (width: 100%, height: 300px)
22	*/
23	public static get DEFAULT_HORIZONTAL() {
24	return El.viewport("1000px", "100%").add(
25	El.camera().add(
26	El.panel().setWidth("100%").setHeight(300),
27	El.panel().setWidth("100%").setHeight(300),
28	El.panel().setWidth("100%").setHeight(300),
29	),	284✔
30	);
31	}
32
33	/**
34	* Horizontal Flicking using Panels with various heights	1✔
35	* @example
36	* - Viewport (width: 1000px, height: 100%)
37	* - Camera
38	* - Panel (width: 100%, height: 300px)
39	* - Panel (width: 100%, height: 400px)
40	* - Panel (width: 100%, height: 500px)
41	* - Panel (width: 100%, height: 600px)
42	* - Panel (width: 100%, height: 300px)
43	*/
44	public static get VARIOUS_HORIZONTAL() {
45	return El.viewport("1000px", "100%").add(
46	El.camera().add(
47	El.panel().setWidth("100%").setHeight(300),	1✔
48	El.panel().setWidth("100%").setHeight(400),
49	El.panel().setWidth("100%").setHeight(500),
50	El.panel().setWidth("100%").setHeight(600),
51	El.panel().setWidth("100%").setHeight(300),
52	),
53	);
54	}
55
56	/**
57	* Very basic structure of the horizontal Flicking with n panels
58	* @example
59	* - Viewport (width: 1000px, height: 100%)	1✔
60	* - Camera
61	* - Panel (width: 100%, height: 300px) * n	23✔
62	*/
63	public static DEFAULT_HORIZONTAL_WITH_PANELS(n: number) {	1✔
64	return El.viewport("1000px", "100%").add(
65	El.camera().add(
66	...range(n).map(() => El.panel().setWidth("100%").setHeight(300))
67	),
68	);
69	}
70
71	/**
72	* Very basic structure of the vertical Flicking
73	* @example
74	* - Viewport (width: 1000px, height: 1000px)	1✔
75	* - Camera
76	* - Panel (width: 100%, height: 100%)
77	* - Panel (width: 100%, height: 100%)
78	* - Panel (width: 100%, height: 100%)
79	*/	1✔
80	public static get DEFAULT_VERTICAL() {
81	return El.viewport("1000px", "1000px").addClass(EL_CLASS.VERTICAL).add(
82	El.camera().add(
83	El.panel("100%", "100%"),
84	El.panel("100%", "100%"),
85	El.panel("100%", "100%"),
86	),
UNCOV 87	);	×
88	}
89
90	/**
91	* Structure with no panels in it
92	* @example	1✔
93	* - Viewport (width: 1000px, height: 1000px)	427✔
94	* - Camera	427✔
95	*/	328✔
96	public static get EMPTY() {
97	return El.viewport("1000px", "1000px").add(	427✔
98	El.camera()	328✔
99	);
100	}	427✔
101
102	public static viewport(width?: string, height?: string) {	1✔
103	const el = new El(EL_CLASS.VIEWPORT);	425✔
104	if (width) {	425!
UNCOV 105	el.setWidth(width);	×
106	}
107	if (height) {	425!
UNCOV 108	el.setHeight(height);	×
109	}
110	return el;	425✔
111	}
112		1✔
113	public static camera(width?: string, height?: string) {	1,091✔
114	const el = new El(EL_CLASS.CAMERA);	1,091✔
115	if (width) {	71✔
116	el.setWidth(width);
117	}	1,091✔
118	if (height) {	53✔
119	el.setHeight(height);
120	}	1,091✔
121	return el;
122	}	1✔
123		19✔
124	public static panel(width?: string, height?: string) {	19✔
125	const el = new El(EL_CLASS.PANEL);	14✔
126	if (width) {
127	el.setWidth(width);	19✔
128	}	14✔
129	if (height) {
130	el.setHeight(height);	19✔
131	}	19✔
132	return el;	19✔
133	}
134		19✔
135	public static imgPanel(width?: string, height?: string) {	19✔
136	const el = new El(EL_CLASS.PANEL);	19✔
137	if (width) {
138	el.setWidth(width);	1✔
139	}	1,037✔
140	if (height) {
141	el.setHeight(height);
142	}
143		1✔
144	const img = document.createElement("img");	767✔
145		767✔
146	img.style.width = "100%";	767✔
147	img.style.height = "100%";	1,432✔
148	// use random placeholder
149	img.src = `https://picsum.photos/200/200?hash=${Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)}`;	767✔
150		1,432✔
151	el._el.appendChild(img);
152		767✔
153	return el;
154	}	1✔
155
156	public get el() { return this._el; }	1✔
157		1✔
158	private _el: HTMLElement;	1✔
159
160	public constructor(type: string) {	1✔
161	this._el = document.createElement("div");	1✔
162	this._el.classList.add(type);
163	}	1✔
164		4✔
165	public add(...els: El[]) {	4✔
166	els.forEach(el => {
167	this._el.appendChild(el._el);	1✔
168	});	1,380✔
169	return this;	1,380✔
170	}
171		1✔
172	public addClass(...classNames: string[]) {	1,345✔
173	this._el.classList.add(...classNames);	1,345✔
174	return this;
175	}	1✔
176		20✔
177	public appendTo(element: HTMLElement) {	20✔
178	element.appendChild(this._el);	52✔
179	return this;
180	}	20✔
181
182	public setWidth(width: number \| string) {	1✔
183	this._el.style.width = parseCSSSizeValue(width);
184		1✔
185	return this;
186	}
187
188	public setHeight(height: number \| string) {
189	this._el.style.height = parseCSSSizeValue(height);
190
191	return this;
192	}
193
194	public setMargin(values: Partial<{
195	top: number \| string;
196	left: number \| string;
197	bottom: number \| string;
198	right: number \| string;
199	}>) {
200	Object.keys(values).forEach(key => {
201	this._el.style[`margin${key.charAt(0).toUpperCase() + key.slice(1)}`] = parseCSSSizeValue(values[key]);
202	});
203
204	return this;
205	}
206	}
207
208	export default El;

naver / egjs-flicking / 2628268060

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