3 | 4 | 5 | 6 | 26 | 27 | 37 | -------------------------------------------------------------------------------- /src/components/VtTransition.vue: -------------------------------------------------------------------------------- 1 | 2 |
7 | Example component
8 |
9 | `;
10 |
11 | exports[`VtIcon renders custom components renders custom icon children 1`] = `
12 |
15 | my child
16 |
17 | `;
18 |
19 | exports[`VtIcon renders custom components renders custom icon children if empty 1`] = `
20 |
23 |
24 |
25 | `;
26 |
27 | exports[`VtIcon renders custom components renders custom icon class string 1`] = `
28 |
31 |
32 |
33 | `;
34 |
35 | exports[`VtIcon renders custom components renders custom icon tag 1`] = `
36 |
39 |
40 |
41 | `;
42 |
43 | exports[`VtIcon renders custom components renders regular icon if true 1`] = `
44 |
57 | `;
58 |
59 | exports[`VtIcon renders custom components renders string as class 1`] = `
60 |
63 |
64 |
65 | `;
66 |
67 | exports[`VtIcon snapshots matches error icon 1`] = `
68 |
81 | `;
82 |
83 | exports[`VtIcon snapshots matches info icon 1`] = `
84 |
97 | `;
98 |
99 | exports[`VtIcon snapshots matches success icon 1`] = `
100 |
113 | `;
114 |
115 | exports[`VtIcon snapshots matches warning icon 1`] = `
116 |
129 | `;
130 |
--------------------------------------------------------------------------------
/src/ts/utils.ts:
--------------------------------------------------------------------------------
1 | import { Component, defineComponent, toRaw, unref } from "vue"
2 |
3 | import type { BasePluginOptions } from "../types/plugin"
4 | import type {
5 | ToastComponent,
6 | ToastContent,
7 | RenderableToastContent,
8 | } from "../types/toast"
9 | import type { ToastContainerOptions } from "../types/toastContainer"
10 |
11 | interface DictionaryLike {
12 | [index: string]: unknown
13 | }
14 |
15 | // eslint-disable-next-line @typescript-eslint/ban-types
16 | const isFunction = (value: unknown): value is Function =>
17 | typeof value === "function"
18 |
19 | const isString = (value: unknown): value is string => typeof value === "string"
20 |
21 | const isNonEmptyString = (value: unknown): value is string =>
22 | isString(value) && value.trim().length > 0
23 |
24 | const isNumber = (value: unknown): value is number => typeof value === "number"
25 |
26 | const isUndefined = (value: unknown): value is undefined =>
27 | typeof value === "undefined"
28 |
29 | const isObject = (value: unknown): value is DictionaryLike =>
30 | typeof value === "object" && value !== null
31 |
32 | const isJSX = (obj: unknown): obj is JSX.Element =>
33 | hasProp(obj, "tag") && isNonEmptyString(obj.tag)
34 |
35 | const isTouchEvent = (event: Event): event is TouchEvent =>
36 | window.TouchEvent && event instanceof TouchEvent
37 |
38 | const isToastComponent = (obj: unknown): obj is ToastComponent =>
39 | hasProp(obj, "component") && isToastContent(obj.component)
40 |
41 | const isVueComponent = (c: unknown): c is Component =>
42 | isFunction(c) || isObject(c)
43 |
44 | const isToastContent = (obj: unknown): obj is ToastContent =>
45 | // Ignore undefined
46 | !isUndefined(obj) &&
47 | // Is a string
48 | (isString(obj) ||
49 | // Regular Vue component
50 | isVueComponent(obj) ||
51 | // Nested object
52 | isToastComponent(obj))
53 |
54 | const isDOMRect = (obj: unknown): obj is DOMRect =>
55 | isObject(obj) &&
56 | ["height", "width", "right", "left", "top", "bottom"].every(p =>
57 | isNumber(obj[p])
58 | )
59 |
60 | const hasProp =
3 |
31 |
32 |
33 |
154 |
--------------------------------------------------------------------------------
/tests/unit/ts/interface.spec.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable vue/one-component-per-file */
2 | import * as vue from "vue"
3 | import { App, nextTick } from "vue"
4 |
5 | import { isFunction } from "@vue/shared"
6 |
7 | import VtToastContainer from "../../../src/components/VtToastContainer.vue"
8 | import { EventBus } from "../../../src/index"
9 | import { EVENTS, TYPE } from "../../../src/ts/constants"
10 | import { buildInterface } from "../../../src/ts/interface"
11 |
12 | import type { PluginOptions } from "../../../src/types/plugin"
13 |
14 | describe("interface", () => {
15 | beforeEach(() => {
16 | jest.resetAllMocks()
17 | jest.restoreAllMocks()
18 | })
19 |
20 | describe("buildInterface", () => {
21 | let eventBus: EventBus
22 | let eventsEmmited: Record
5 | {{ content }}
6 |
15 |
3 |
16 |
17 |
18 |
214 |
215 |
222 |
--------------------------------------------------------------------------------
/tests/unit/ts/composables/useToast.spec.ts:
--------------------------------------------------------------------------------
1 | import { defineComponent, h } from "vue"
2 |
3 | import { mount } from "@vue/test-utils"
4 |
5 | import { EventBus, PluginOptions, ToastInterface } from "../../../../src"
6 | import * as useToast from "../../../../src/ts/composables/useToast"
7 | import { VT_NAMESPACE } from "../../../../src/ts/constants"
8 | import { globalEventBus } from "../../../../src/ts/eventBus"
9 | import * as interfaceModule from "../../../../src/ts/interface"
10 | import * as utils from "../../../../src/ts/utils"
11 |
12 | const consumerInjected = jest.fn()
13 |
14 | const Consumer = {
15 | setup() {
16 | const foo = useToast.useToast()
17 | consumerInjected(foo)
18 | return () => h("div", "hey")
19 | },
20 | }
21 |
22 | const createProvider = (options?: PluginOptions) =>
23 | defineComponent({
24 | setup() {
25 | useToast.provideToast(options)
26 | return () => h(Consumer)
27 | },
28 | })
29 |
30 | const Provider = createProvider()
31 |
32 | describe("useToast", () => {
33 | beforeEach(() => {
34 | jest.resetAllMocks()
35 | jest.restoreAllMocks()
36 | })
37 |
38 | describe("useToast", () => {
39 | it("returns existing toast interface if eventBus is provided", () => {
40 | const expected = {} as ToastInterface
41 | const createToastInstanceSpy = jest
42 | .spyOn(useToast, "createToastInstance")
43 | .mockImplementation(() => expected)
44 |
45 | expect(createToastInstanceSpy).not.toHaveBeenCalled()
46 |
47 | const eventBus = new EventBus()
48 |
49 | const actual = useToast.useToast(eventBus)
50 |
51 | expect(createToastInstanceSpy).toHaveBeenCalled()
52 | expect(actual).toBe(expected)
53 | })
54 |
55 | it("returns global toast interface if not called inside setup()", () => {
56 | const expected = {} as ToastInterface
57 | const createToastInstanceSpy = jest
58 | .spyOn(useToast, "createToastInstance")
59 | .mockImplementation(() => expected)
60 |
61 | expect(createToastInstanceSpy).not.toHaveBeenCalled()
62 |
63 | const actual = useToast.useToast()
64 |
65 | expect(createToastInstanceSpy).toHaveBeenCalledWith(globalEventBus)
66 | expect(actual).toBe(expected)
67 | })
68 |
69 | it("returns global toast interface if called in non-provided setup()", () => {
70 | const expected = {} as ToastInterface
71 | const createToastInstanceSpy = jest
72 | .spyOn(useToast, "createToastInstance")
73 | .mockImplementation(() => expected)
74 |
75 | expect(createToastInstanceSpy).not.toHaveBeenCalled()
76 | expect(consumerInjected).not.toHaveBeenCalled()
77 |
78 | mount(Consumer)
79 |
80 | expect(createToastInstanceSpy).toHaveBeenCalledWith(globalEventBus)
81 | expect(consumerInjected).toHaveBeenCalledWith(expected)
82 | })
83 |
84 | it("returns provided toast interface if called in provided setup()", () => {
85 | const expected = {} as ToastInterface
86 | const createToastInstanceSpy = jest
87 | .spyOn(useToast, "createToastInstance")
88 | .mockImplementation(() => expected)
89 |
90 | expect(createToastInstanceSpy).not.toHaveBeenCalled()
91 | expect(consumerInjected).not.toHaveBeenCalled()
92 |
93 | const options: PluginOptions = { timeout: 1000 }
94 | mount(createProvider(options))
95 |
96 | expect(createToastInstanceSpy).toHaveBeenCalledWith(options)
97 | expect(consumerInjected).toHaveBeenCalledWith(expected)
98 | })
99 | })
100 |
101 | describe("provideToast", () => {
102 | it("does nothing if not called inside setup()", () => {
103 | const createToastInstanceSpy = jest
104 | .spyOn(useToast, "createToastInstance")
105 | .mockImplementation()
106 |
107 | expect(createToastInstanceSpy).not.toHaveBeenCalled()
108 | useToast.provideToast()
109 |
110 | expect(createToastInstanceSpy).not.toHaveBeenCalled()
111 | })
112 |
113 | it("provides default if called inside setup()", () => {
114 | const expected = {} as ToastInterface
115 | const createToastInstanceSpy = jest
116 | .spyOn(useToast, "createToastInstance")
117 | .mockImplementation(() => expected)
118 |
119 | expect(createToastInstanceSpy).not.toHaveBeenCalled()
120 | expect(consumerInjected).not.toHaveBeenCalled()
121 |
122 | mount(Provider)
123 |
124 | expect(createToastInstanceSpy).toHaveBeenCalledWith(undefined)
125 | expect(consumerInjected).toHaveBeenCalledWith(expected)
126 | })
127 |
128 | it("provides with options if called inside setup()", () => {
129 | const expected = {} as ToastInterface
130 | const createToastInstanceSpy = jest
131 | .spyOn(useToast, "createToastInstance")
132 | .mockImplementation(() => expected)
133 |
134 | expect(createToastInstanceSpy).not.toHaveBeenCalled()
135 | expect(consumerInjected).not.toHaveBeenCalled()
136 |
137 | const options: PluginOptions = { timeout: 1000 }
138 | mount(createProvider(options))
139 |
140 | expect(createToastInstanceSpy).toHaveBeenCalledWith(options)
141 | expect(consumerInjected).toHaveBeenCalledWith(expected)
142 | })
143 | })
144 |
145 | describe("createToastInstance", () => {
146 | it("uses mock interface if not in browser", () => {
147 | const isBrowserSpy = jest.spyOn(utils, "isBrowser")
148 | const consoleSpy = jest.spyOn(console, "warn").mockImplementation()
149 | isBrowserSpy.mockReturnValueOnce(false)
150 |
151 | const toast = useToast.createToastInstance()
152 |
153 | expect(consoleSpy).not.toHaveBeenCalled()
154 | toast("hey")
155 | toast.success("hey")
156 | expect(consoleSpy).toHaveBeenCalledTimes(2)
157 | expect(consoleSpy).toHaveBeenCalledWith(
158 | `[${VT_NAMESPACE}] This plugin does not support SSR!`
159 | )
160 | })
161 |
162 | it("builds interface using existing eventBus if provided", () => {
163 | const eventBus = new EventBus()
164 | const expected = {} as ToastInterface
165 | const buildInterfaceSpy = jest
166 | .spyOn(interfaceModule, "buildInterface")
167 | .mockImplementation(() => expected)
168 |
169 | expect(buildInterfaceSpy).not.toHaveBeenCalled()
170 |
171 | const actual = useToast.createToastInstance(eventBus)
172 |
173 | expect(buildInterfaceSpy).toHaveBeenCalledWith({ eventBus }, false)
174 | expect(actual).toBe(expected)
175 | })
176 |
177 | it("builds new interface using options if provided", () => {
178 | const expected = {} as ToastInterface
179 | const buildInterfaceSpy = jest
180 | .spyOn(interfaceModule, "buildInterface")
181 | .mockImplementation(() => expected)
182 |
183 | expect(buildInterfaceSpy).not.toHaveBeenCalled()
184 |
185 | const options: PluginOptions = { timeout: 1000 }
186 | const actual = useToast.createToastInstance(options)
187 |
188 | expect(buildInterfaceSpy).toHaveBeenCalledWith(options, true)
189 | expect(actual).toBe(expected)
190 | })
191 |
192 | it("builds default interface if no options are provided", () => {
193 | const expected = {} as ToastInterface
194 | const buildInterfaceSpy = jest
195 | .spyOn(interfaceModule, "buildInterface")
196 | .mockImplementation(() => expected)
197 |
198 | expect(buildInterfaceSpy).not.toHaveBeenCalled()
199 |
200 | const actual = useToast.createToastInstance()
201 |
202 | expect(buildInterfaceSpy).toHaveBeenCalledWith(undefined, true)
203 | expect(actual).toBe(expected)
204 | })
205 | })
206 | })
207 |
--------------------------------------------------------------------------------
/tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`VtToastContainer snapshots with classes 1`] = `
4 |
4 |
8 |
14 |
15 |
5 |
6 |
56 | `;
57 |
58 | exports[`VtToastContainer snapshots with default value 1`] = `
59 |
7 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
28 |
29 |
30 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
42 |
43 |
44 |
45 |
46 |
47 |
50 |
51 |
52 |
53 |
54 |
55 |
60 |
61 |
111 | `;
112 |
113 | exports[`VtToastContainer snapshots with toasts 1`] = `
114 |
62 |
65 |
66 |
67 |
68 |
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
81 |
82 |
83 |
84 |
85 |
86 |
89 |
90 |
91 |
92 |
93 |
94 |
97 |
98 |
99 |
100 |
101 |
102 |
105 |
106 |
107 |
108 |
109 |
110 |
115 |
116 |
278 | `;
279 |
--------------------------------------------------------------------------------
/tests/unit/ts/composables/useDraggable.spec.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable vue/one-component-per-file */
2 |
3 | import {
4 | computed,
5 | defineComponent,
6 | h,
7 | nextTick,
8 | reactive,
9 | ref,
10 | onMounted,
11 | Ref,
12 | } from "vue"
13 |
14 | import { mount } from "@vue/test-utils"
15 |
16 | import { useDraggable } from "../../../../src/ts/composables/useDraggable"
17 |
18 | const activeText = "dragging"
19 | const inactiveText = "stopped"
20 | const completeText = "complete"
21 |
22 | type Props = Parameters
117 |
120 |
121 |
122 |
123 |
124 |
125 |
128 |
129 |
130 |
131 |
132 |
133 |
136 |
137 |
138 |
213 |
214 |
142 |
155 |
174 |
159 |
160 | info
161 |
162 |
163 |
169 |
173 |
178 |
191 |
210 |
211 |
212 |
195 |
196 | default
197 |
198 |
199 |
205 |
209 |
215 |
218 |
219 |
220 |
221 |
222 |
223 |
226 |
227 |
228 |
229 |
230 |
231 |
234 |
235 |
236 |
275 |
276 |
277 |
240 |
253 |
272 |
273 |
274 |
257 |
258 | error
259 |
260 |
261 |
267 |
271 | abc
" })).toBe(true)
151 | })
152 | })
153 |
154 | describe("getVueComponentFromObj", () => {
155 | it("gets string component", () => {
156 | const obj = "component"
157 | expect(getVueComponentFromObj(obj)).toBe(obj)
158 | })
159 | it("get defineComponent", () => {
160 | const component = defineComponent({})
161 | expect(getVueComponentFromObj(component)).toBe(component)
162 | })
163 | it("get non reactive object", () => {
164 | const component1 = reactive(defineComponent({}))
165 | expect(isProxy(component1)).toBe(true)
166 | expect(isProxy(getVueComponentFromObj(component1))).toBe(false)
167 | const component2 = ref(defineComponent({}))
168 | expect(isRef(component2)).toBe(true)
169 | expect(isRef(getVueComponentFromObj(component2))).toBe(false)
170 | })
171 | it("get functional component", () => {
172 | const component = () => h("div")
173 | expect(getVueComponentFromObj(component)).toBe(component)
174 | })
175 | it("get sfc", () => {
176 | const component = Simple
177 | expect(getVueComponentFromObj(component)).toBe(component)
178 | })
179 | it("get jsx with render", () => {
180 | const jsx = { tag: "div" } as unknown as JSX.Element
181 | const vueComp = getVueComponentFromObj(jsx) as { render(): JSX.Element }
182 | expect(vueComp.render()).toBe(jsx)
183 | })
184 | it("get toast component", () => {
185 | const component = { component: "my component string" }
186 | expect(getVueComponentFromObj(component)).toBe(component.component)
187 | })
188 | })
189 |
190 | describe("normalizeToastComponent", () => {
191 | it("normalizes regular string", () => {
192 | const component = "my component string"
193 | expect(normalizeToastComponent(component)).toBe(component)
194 | })
195 | it("normalizes shallow vue object", () => {
196 | const component = Simple
197 | expect(normalizeToastComponent(component)).toEqual({
198 | component: getVueComponentFromObj(component),
199 | props: {},
200 | listeners: {},
201 | })
202 | })
203 | it("normalizes composite vue object", () => {
204 | const component = {
205 | component: Simple,
206 | props: { myProp: "prop" },
207 | listeners: { myListener: () => ({}) },
208 | }
209 | expect(normalizeToastComponent(component)).toEqual(component)
210 | })
211 | })
212 |
213 | describe("hasProp", () => {
214 | it("gets prop from object", () => {
215 | const object = { myProp: 123 }
216 | expect(hasProp(object, "myProp")).toBe(true)
217 | })
218 | it("gets prop from function", () => {
219 | const func = () => ({})
220 | func.myProp = 123
221 | expect(hasProp(func, "myProp")).toBe(true)
222 | })
223 | it("missing prop on object", () => {
224 | const object = { myProp: 123 }
225 | expect(hasProp(object, "myOtherProp")).toBe(false)
226 | })
227 | it("missing prop on function", () => {
228 | const func = () => ({})
229 | expect(hasProp(func, "myProp")).toBe(false)
230 | })
231 | it("missing prop on primitive", () => {
232 | const primitive = "my prop"
233 | expect(hasProp(primitive, "myProp")).toBe(false)
234 | })
235 | })
236 |
237 | describe("isUndefined", () => {
238 | it("is undefined", () => {
239 | expect(isUndefined(undefined)).toBe(true)
240 | })
241 | it("is not undefined", () => {
242 | expect(isUndefined("abc")).toBe(false)
243 | })
244 | })
245 |
246 | describe("isDOMRect", () => {
247 | it("is dom rect", () => {
248 | expect(
249 | isDOMRect({
250 | width: 10,
251 | height: 10,
252 | left: 10,
253 | right: 10,
254 | top: 10,
255 | bottom: 10,
256 | })
257 | ).toBe(true)
258 | })
259 | it("missing prop", () => {
260 | expect(
261 | isDOMRect({ width: 10, height: 10, left: 10, top: 10, bottom: 10 })
262 | ).toBe(false)
263 | expect(
264 | isDOMRect({ width: 10, height: 10, right: 10, top: 10, bottom: 10 })
265 | ).toBe(false)
266 | expect(
267 | isDOMRect({ width: 10, left: 10, right: 10, top: 10, bottom: 10 })
268 | ).toBe(false)
269 | expect(
270 | isDOMRect({ height: 10, left: 10, right: 10, top: 10, bottom: 10 })
271 | ).toBe(false)
272 | expect(
273 | isDOMRect({ width: 10, height: 10, left: 10, right: 10, top: 10 })
274 | ).toBe(false)
275 | expect(
276 | isDOMRect({ width: 10, height: 10, left: 10, right: 10, bottom: 10 })
277 | ).toBe(false)
278 | })
279 | it("prop wrong type", () => {
280 | expect(
281 | isDOMRect({
282 | width: 10,
283 | height: 10,
284 | left: 10,
285 | right: 10,
286 | top: 10,
287 | bottom: "abc",
288 | })
289 | ).toBe(false)
290 | expect(
291 | isDOMRect({
292 | width: 10,
293 | height: 10,
294 | left: 10,
295 | right: 10,
296 | top: "abc",
297 | bottom: 10,
298 | })
299 | ).toBe(false)
300 | expect(
301 | isDOMRect({
302 | width: 10,
303 | height: 10,
304 | left: 10,
305 | right: "abc",
306 | top: 10,
307 | bottom: 10,
308 | })
309 | ).toBe(false)
310 | expect(
311 | isDOMRect({
312 | width: 10,
313 | height: 10,
314 | left: "abc",
315 | right: 10,
316 | top: 10,
317 | bottom: 10,
318 | })
319 | ).toBe(false)
320 | expect(
321 | isDOMRect({
322 | width: 10,
323 | height: "abc",
324 | left: 10,
325 | right: 10,
326 | top: 10,
327 | bottom: 10,
328 | })
329 | ).toBe(false)
330 | expect(
331 | isDOMRect({
332 | width: "abc",
333 | height: 10,
334 | left: 10,
335 | right: 10,
336 | top: 10,
337 | bottom: 10,
338 | })
339 | ).toBe(false)
340 | })
341 | it("not an object", () => {
342 | const func = () => ({})
343 | func.height = 10
344 | func.width = 10
345 | func.left = 10
346 | func.right = 10
347 | func.top = 10
348 | func.bottom = 10
349 | expect(isDOMRect(func)).toBe(false)
350 | })
351 | })
352 |
353 | describe("isBrowser", () => {
354 | it("window is defined", () => {
355 | expect(isBrowser()).toBe(true)
356 | })
357 | })
358 |
--------------------------------------------------------------------------------
/tests/unit/components/__snapshots__/VtToast.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`VtToast snapshots renders 1`] = `
4 |
7 |
20 |
39 | `;
40 |
41 | exports[`VtToast ui closeButton = false removes it 1`] = `
42 |
24 |
25 | content
26 |
27 |
28 |
34 |
38 |
45 |
58 |
72 | `;
73 |
74 | exports[`VtToast ui has all default sub components 1`] = `
75 |
62 |
63 | content
64 |
65 |
66 |
67 |
71 |
78 |
91 |
110 | `;
111 |
112 | exports[`VtToast ui icon = false removes it 1`] = `
113 |
95 |
96 | content
97 |
98 |
99 |
105 |
109 |
116 |
117 |
136 | `;
137 |
138 | exports[`VtToast ui renders custom aria role and button aria label 1`] = `
139 |
121 |
122 | content
123 |
124 |
125 |
131 |
135 |
142 |
155 |
174 | `;
175 |
176 | exports[`VtToast ui renders custom component 1`] = `
177 |
159 |
160 | content
161 |
162 |
163 |
169 |
173 |
180 |
193 |
214 | `;
215 |
216 | exports[`VtToast ui renders default aria role and button aria label 1`] = `
217 |
197 |
203 |
209 |
213 |
200 | Example component
201 |
202 |
220 |
233 |
252 | `;
253 |
254 | exports[`VtToast ui renders ltr by default 1`] = `
255 |
237 |
238 | content
239 |
240 |
241 |
247 |
251 |
258 |
271 |
290 | `;
291 |
292 | exports[`VtToast ui renders rtl if set 1`] = `
293 |
275 |
276 | content
277 |
278 |
279 |
285 |
289 |
296 |
309 |
328 | `;
329 |
330 | exports[`VtToast ui timeout = false removes progress bar 1`] = `
331 |
313 |
314 | content
315 |
316 |
317 |
323 |
327 |
334 |
347 |
363 | `;
364 |
--------------------------------------------------------------------------------
351 |
352 | content
353 |
354 |
355 |
361 |
362 |