-
Notifications
You must be signed in to change notification settings - Fork 4
/
masonry.test.ts
98 lines (77 loc) · 2.64 KB
/
masonry.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import Masonry from '$lib'
import { tick } from 'svelte'
import { beforeEach, describe, expect, test, vi } from 'vitest'
const n_items = 30
const indices = [...Array(n_items).keys()]
beforeEach(() => {
document.body.innerHTML = ``
})
describe(`Masonry`, () => {
test.each([[true], [false]])(
`renders items with animate=%s`,
async (animate) => {
new Masonry({
target: document.body,
props: { items: indices, animate },
})
const items = document.querySelectorAll(`div.masonry > div.col > *`)
expect(items.length).toBe(n_items)
},
)
test(`attaches class props correctly`, async () => {
new Masonry({
target: document.body,
props: { items: indices, class: `foo`, columnClass: `bar` },
})
const items = document.querySelectorAll(
`div.masonry.foo > div.col.bar > div`,
)
expect(items.length).toBe(n_items)
})
test(`applies style prop correctly`, async () => {
const bg_color = `background-color: darkblue;`
new Masonry({
target: document.body,
props: { items: indices, style: bg_color },
})
const outer_masonry_div = document.querySelector(`div.masonry`)
expect(outer_masonry_div?.getAttribute(`style`)).toContain(bg_color)
})
test(`sets maxColWidth and gap correctly as style attribute`, async () => {
const [maxColWidth, gap] = [100, 10]
new Masonry({
target: document.body,
props: { items: indices, maxColWidth, gap },
})
await tick()
const outer_masonry_div = document.querySelector(`div.masonry > div.col`)
expect(outer_masonry_div?.getAttribute(`style`)).toContain(
`gap: ${gap}px; max-width: ${maxColWidth}px;`,
)
})
test(`calculates correct number of columns based masonryWidth, minColWidth, gap`, () => {
const masonryWidth = 370
const minColWidth = 50
const gap = 10
// floor((370 + 10) / (50 + 10)) = 6 columns
const expected_cols = Math.floor((masonryWidth + gap) / (minColWidth + gap))
const masonry = new Masonry({
target: document.body,
props: { items: indices, masonryWidth, minColWidth, gap },
})
expect(masonry.calcCols(masonryWidth, minColWidth, gap)).toBe(expected_cols)
})
test(`warns if maxColWidth is less than minColWidth`, () => {
const minColWidth = 50
const maxColWidth = 40
console.warn = vi.fn()
new Masonry({
target: document.body,
props: { items: indices, minColWidth, maxColWidth },
})
expect(console.warn).toHaveBeenCalledWith(
`svelte-bricks: maxColWidth (${maxColWidth}) < minColWidth (${minColWidth}).`,
)
expect(console.warn).toHaveBeenCalledTimes(1)
})
})