blsmedia/bot
2
0
Fork 0
Code Activity

feat(lib): 🎨 Ask for URL instead of publishId

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-14 14:57:10 +01:00
parent d6b94130cb
commit 5a2df9fe72
10 changed files with 384 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/typebot-js/package.json
View File

@ -1,6 +1,6 @@
{
"name": "typebot-js",
"version": "2.1.4",
"version": "2.2.0",
"main": "dist/index.js",
"unpkg": "dist/index.umd.min.js",
"license": "MIT",

12
packages/typebot-js/src/iframe/index.ts
View File

@ -3,18 +3,16 @@ import './style.css'
export const createIframe = ({
backgroundColor,
viewerHost = 'https://typebot-viewer.vercel.app',
isV1,
url,
...iframeParams
}: IframeParams): HTMLIFrameElement => {
const { publishId, loadWhenVisible, hiddenVariables } = iframeParams
const host = isV1 ? `https://bot.typebot.io` : viewerHost
const iframeUrl = `${host}/${publishId}${parseQueryParams(hiddenVariables)}`
const { loadWhenVisible, hiddenVariables } = iframeParams
const iframeUrl = `${url}${parseQueryParams(hiddenVariables)}`
const iframe = document.createElement('iframe')
iframe.setAttribute(loadWhenVisible ? 'data-src' : 'src', iframeUrl)
iframe.setAttribute('data-id', iframeParams.publishId)
iframe.setAttribute('data-id', url)
const randomThreeLettersId = Math.random().toString(36).substring(7)
const uniqueId = `${publishId}-${randomThreeLettersId}`
const uniqueId = `${url}-${randomThreeLettersId}`
iframe.setAttribute('id', uniqueId)
if (backgroundColor) iframe.style.backgroundColor = backgroundColor
iframe.classList.add('typebot-iframe')

4
packages/typebot-js/src/types.ts
View File

@ -1,7 +1,5 @@
export type IframeParams = {
publishId: string
isV1?: boolean
viewerHost?: string
url: string
backgroundColor?: string
hiddenVariables?: { [key: string]: string | undefined }
customDomain?: string

58
packages/typebot-js/tests/chat/button.spec.ts
View File

@ -1,40 +1,40 @@
import * as Typebot from "../../src";
import * as Typebot from '../../src'
beforeEach(() => {
document.body.innerHTML = "";
});
document.body.innerHTML = ''
})
it("should have the corresponding custom color", () => {
expect.assertions(1);
it('should have the corresponding custom color', () => {
expect.assertions(1)
Typebot.initBubble({
button: { color: "#222222" },
publishId: "typebot-id",
});
button: { color: '#222222' },
url: 'https://typebot.io/typebot-id',
})
const buttonElement = document.querySelector(
"#typebot-bubble > button"
) as HTMLElement;
expect(buttonElement.style.backgroundColor).toBe("rgb(34, 34, 34)");
});
'#typebot-bubble > button'
) as HTMLElement
expect(buttonElement.style.backgroundColor).toBe('rgb(34, 34, 34)')
})
it("should have the default svg icon", () => {
expect.assertions(1);
it('should have the default svg icon', () => {
expect.assertions(1)
Typebot.initBubble({
publishId: "typebot-id",
});
url: 'https://typebot.io/typebot-id',
})
const buttonIconElement = document.querySelector(
"#typebot-bubble > button > .icon"
) as HTMLElement;
expect(buttonIconElement.tagName).toBe("svg");
});
'#typebot-bubble > button > .icon'
) as HTMLElement
expect(buttonIconElement.tagName).toBe('svg')
})
it("should have the corresponding custom icon", () => {
expect.assertions(1);
it('should have the corresponding custom icon', () => {
expect.assertions(1)
Typebot.initBubble({
button: { iconUrl: "https://web.com/icon.png" },
publishId: "typebot-id",
});
button: { iconUrl: 'https://web.com/icon.png' },
url: 'https://typebot.io/typebot-id',
})
const buttonIconElement = document.querySelector(
"#typebot-bubble > button > .icon"
) as HTMLImageElement;
expect(buttonIconElement.src).toBe("https://web.com/icon.png");
});
'#typebot-bubble > button > .icon'
) as HTMLImageElement
expect(buttonIconElement.src).toBe('https://web.com/icon.png')
})

138
packages/typebot-js/tests/chat/commands.spec.ts
View File

@ -1,91 +1,91 @@
import * as Typebot from "../../src";
import * as Typebot from '../../src'
beforeEach(() => {
document.body.innerHTML = "";
});
document.body.innerHTML = ''
})
describe("openBubble", () => {
it("should add the opened bubble", () => {
expect.assertions(3);
describe('openBubble', () => {
it('should add the opened bubble', () => {
expect.assertions(3)
const { open } = Typebot.initBubble({
publishId: "typebot-id",
});
const bubble = document.getElementById("typebot-bubble") as HTMLDivElement;
expect(bubble.classList.contains("iframe-opened")).toBe(false);
open();
expect(bubble.classList.contains("iframe-opened")).toBe(true);
expect(open).not.toThrow();
});
url: 'https://typebot.io/typebot-id',
})
const bubble = document.getElementById('typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('iframe-opened')).toBe(false)
open()
expect(bubble.classList.contains('iframe-opened')).toBe(true)
expect(open).not.toThrow()
})
it("should hide the proactive message", () => {
expect.assertions(2);
it('should hide the proactive message', () => {
expect.assertions(2)
const { open, openProactiveMessage } = Typebot.initBubble({
publishId: "typebot-id",
url: 'https://typebot.io/typebot-id',
proactiveMessage: {
textContent: "Hi click here!",
avatarUrl: "https://website.com/my-avatar.png",
textContent: 'Hi click here!',
avatarUrl: 'https://website.com/my-avatar.png',
},
});
const bubble = document.getElementById("typebot-bubble") as HTMLDivElement;
if (openProactiveMessage) openProactiveMessage();
expect(bubble.classList.contains("message-opened")).toBe(true);
open();
expect(bubble.classList.contains("message-opened")).toBe(false);
});
});
})
const bubble = document.getElementById('typebot-bubble') as HTMLDivElement
if (openProactiveMessage) openProactiveMessage()
expect(bubble.classList.contains('message-opened')).toBe(true)
open()
expect(bubble.classList.contains('message-opened')).toBe(false)
})
})
describe("closeBubble", () => {
it("should remove the corresponding class", () => {
expect.assertions(2);
describe('closeBubble', () => {
it('should remove the corresponding class', () => {
expect.assertions(2)
const { close, open } = Typebot.initBubble({
publishId: "typebot-id",
});
open();
const bubble = document.getElementById("typebot-bubble") as HTMLDivElement;
expect(bubble.classList.contains("iframe-opened")).toBe(true);
close();
expect(bubble.classList.contains("iframe-opened")).toBe(false);
});
});
url: 'https://typebot.io/typebot-id',
})
open()
const bubble = document.getElementById('typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('iframe-opened')).toBe(true)
close()
expect(bubble.classList.contains('iframe-opened')).toBe(false)
})
})
describe("openProactiveMessage", () => {
it("should add the opened className", () => {
expect.assertions(1);
describe('openProactiveMessage', () => {
it('should add the opened className', () => {
expect.assertions(1)
const { openProactiveMessage } = Typebot.initBubble({
proactiveMessage: {
textContent: "Hi click here!",
textContent: 'Hi click here!',
},
publishId: "typebot-id",
});
const bubble = document.getElementById("typebot-bubble") as HTMLDivElement;
if (openProactiveMessage) openProactiveMessage();
expect(bubble.classList.contains("message-opened")).toBe(true);
});
url: 'https://typebot.io/typebot-id',
})
const bubble = document.getElementById('typebot-bubble') as HTMLDivElement
if (openProactiveMessage) openProactiveMessage()
expect(bubble.classList.contains('message-opened')).toBe(true)
})
it("shouldn't be returned if no message", () => {
expect.assertions(1);
expect.assertions(1)
const { openProactiveMessage } = Typebot.initBubble({
publishId: "typebot-id",
});
expect(openProactiveMessage).toBeUndefined();
});
});
url: 'typebot-id',
})
expect(openProactiveMessage).toBeUndefined()
})
})
describe("Request commands afterwards", () => {
it("should return defined commands", () => {
describe('Request commands afterwards', () => {
it('should return defined commands', () => {
Typebot.initBubble({
proactiveMessage: {
textContent: "Hi click here!",
textContent: 'Hi click here!',
},
publishId: "typebot-id",
});
url: 'https://typebot.io/typebot-id',
})
const { close, open, openProactiveMessage } = Typebot.getBubbleActions();
expect(close).toBeDefined();
expect(open).toBeDefined();
expect(openProactiveMessage).toBeDefined();
open();
const bubble = document.getElementById("typebot-bubble") as HTMLDivElement;
expect(bubble.classList.contains("iframe-opened")).toBe(true);
});
});
const { close, open, openProactiveMessage } = Typebot.getBubbleActions()
expect(close).toBeDefined()
expect(open).toBeDefined()
expect(openProactiveMessage).toBeDefined()
open()
const bubble = document.getElementById('typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('iframe-opened')).toBe(true)
})
})

12
packages/typebot-js/tests/chat/index.spec.ts
View File

@ -7,7 +7,7 @@ describe('initBubble', () => {
it('should initialize a bubble embed', () => {
expect.assertions(2)
Typebot.initBubble({ publishId: 'typebot-id' })
Typebot.initBubble({ url: 'https://typebot.io/typebot-id' })
const bubbleElement = document.getElementById('typebot-bubble')
const frame = document.getElementsByTagName('iframe')[0]
expect(frame).toBeDefined()
@ -17,14 +17,14 @@ describe('initBubble', () => {
it('should overwrite bubble if exists', () => {
expect.assertions(2)
Typebot.initBubble({
publishId: 'typebot-id',
url: 'https://typebot.io/typebot-id',
hiddenVariables: { var1: 'test' },
})
Typebot.initBubble({ publishId: 'typebot-id2' })
Typebot.initBubble({ url: 'https://typebot.io/typebot-id2' })
const frames = document.getElementsByTagName('iframe')
expect(frames).toHaveLength(1)
expect(frames[0].dataset.src).toBe(
'https://typebot-viewer.vercel.app/typebot-id2?hn=localhost'
'https://typebot.io/typebot-id2?hn=localhost'
)
})
@ -32,7 +32,7 @@ describe('initBubble', () => {
expect.assertions(3)
Typebot.initBubble({
autoOpenDelay: 1000,
publishId: 'typebot-id',
url: 'https://typebot.io/typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('iframe-opened')).toBe(false)
@ -49,7 +49,7 @@ describe('initBubble', () => {
localStorage.setItem(Typebot.localStorageKeys.rememberClose, 'true')
Typebot.initBubble({
autoOpenDelay: 1000,
publishId: 'typebot-id',
url: 'https://typebot.io/typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
await new Promise((r) => setTimeout(r, 1500))

10
packages/typebot-js/tests/chat/proactiveMessage.spec.ts
View File

@ -8,7 +8,7 @@ it('should create the message', () => {
expect.assertions(2)
Typebot.initBubble({
proactiveMessage: { textContent: 'Hi click here!' },
publishId: 'typebot-id',
url: 'https://typebot.io/typebot-id',
})
const paragraphElement = document.querySelector(
'#typebot-bubble > .proactive-message > p'
@ -27,7 +27,7 @@ it('should have the corresponding avatar', () => {
textContent: 'Hi click here!',
avatarUrl: 'https://website.com/my-avatar.png',
},
publishId: 'typebot-id',
url: 'https://typebot.io/typebot-id',
})
const avatarElement = document.querySelector(
'#typebot-bubble > .proactive-message > img'
@ -41,7 +41,7 @@ it("shouldn't have opened class if delay not defined", () => {
proactiveMessage: {
textContent: 'Hi click here!',
},
publishId: 'typebot-id',
url: 'https://typebot.io/typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('message-opened')).toBe(false)
@ -54,7 +54,7 @@ it('should show almost immediately if delay is 0', async () => {
textContent: 'Hi click here!',
delay: 0,
},
publishId: 'typebot-id',
url: 'https://typebot.io/typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
await new Promise((r) => setTimeout(r, 1))
@ -68,7 +68,7 @@ it('show after the corresponding delay', async () => {
textContent: 'Hi click here!',
delay: 1000,
},
publishId: 'typebot-id',
url: 'https://typebot.io/typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('message-opened')).toBe(false)

148
packages/typebot-js/tests/container.spec.ts
View File

@ -1,86 +1,94 @@
import { initContainer } from "../src/embedTypes/container";
import { initContainer } from '../src/embedTypes/container'
const observe = jest.fn();
const unobserve = jest.fn();
const observe = jest.fn()
const unobserve = jest.fn()
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
window.IntersectionObserver = jest.fn(() => ({
observe,
unobserve,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
})) as any;
})) as any
describe("initContainer", () => {
beforeEach(() => (document.body.innerHTML = ``));
describe('initContainer', () => {
beforeEach(() => (document.body.innerHTML = ``))
it("should initialize a valid typebot container", () => {
expect.assertions(3);
const containerId = "container-id";
document.body.innerHTML = `<div id="${containerId}"></div>`;
const iframe = initContainer(containerId, { publishId: "typebot-id" });
const container = document.getElementById(containerId);
expect(container?.children).toHaveLength(1);
expect(container?.children[0].tagName).toBe("IFRAME");
expect(iframe).toBeDefined();
});
it('should initialize a valid typebot container', () => {
expect.assertions(3)
const containerId = 'container-id'
document.body.innerHTML = `<div id="${containerId}"></div>`
const iframe = initContainer(containerId, {
url: 'https://typebot.io/typebot-id',
})
const container = document.getElementById(containerId)
expect(container?.children).toHaveLength(1)
expect(container?.children[0].tagName).toBe('IFRAME')
expect(iframe).toBeDefined()
})
it("should return undefined if container doesn't exist", () => {
expect.assertions(1);
const containerId = "container-id";
const iframe = initContainer(containerId, { publishId: "typebot-id" });
expect(iframe).toBeUndefined();
});
it("should return exisiting container", () => {
expect.assertions(1);
const containerId = "container-id";
document.body.innerHTML = `<div id="${containerId}"></div>`;
const iframe1 = initContainer(containerId, { publishId: "typebot-id" });
const iframe2 = initContainer(containerId, { publishId: "typebot-id" });
expect(iframe1?.id).toBe(iframe2?.id);
});
it("should create multiple containers correctly", () => {
expect.assertions(5);
const firstId = "container-1";
const secondId = "container-2";
document.body.innerHTML = `<div id="${firstId}"></div><div id="${secondId}"></div>`;
const firstIframeElement = initContainer(firstId, {
publishId: "typebot-id",
});
const secondIframeElement = initContainer(firstId, {
publishId: "typebot-id",
});
const thirdIframeElement = initContainer(secondId, {
publishId: "typebot-id",
});
expect(firstIframeElement).toBeDefined();
expect(secondIframeElement).toBeDefined();
expect(thirdIframeElement).toBeDefined();
expect(firstIframeElement?.id).toBe(secondIframeElement?.id);
expect(firstIframeElement?.id).not.toBe(thirdIframeElement?.id);
});
it("should be lazy loading by default", () => {
expect.assertions(2);
const containerId = "container";
document.body.innerHTML = `<div id="${containerId}"></div>`;
expect.assertions(1)
const containerId = 'container-id'
const iframe = initContainer(containerId, {
publishId: "typebot-id",
}) as HTMLIFrameElement;
expect(iframe.dataset.src).toBeDefined();
expect(iframe.src).toBeFalsy();
});
url: 'https://typebot.io/typebot-id',
})
expect(iframe).toBeUndefined()
})
it('should return exisiting container', () => {
expect.assertions(1)
const containerId = 'container-id'
document.body.innerHTML = `<div id="${containerId}"></div>`
const iframe1 = initContainer(containerId, {
url: 'https://typebot.io/typebot-id',
})
const iframe2 = initContainer(containerId, {
url: 'https://typebot.io/typebot-id',
})
expect(iframe1?.id).toBe(iframe2?.id)
})
it('should create multiple containers correctly', () => {
expect.assertions(5)
const firstId = 'container-1'
const secondId = 'container-2'
document.body.innerHTML = `<div id="${firstId}"></div><div id="${secondId}"></div>`
const firstIframeElement = initContainer(firstId, {
url: 'https://typebot.io/typebot-id',
})
const secondIframeElement = initContainer(firstId, {
url: 'https://typebot.io/typebot-id',
})
const thirdIframeElement = initContainer(secondId, {
url: 'https://typebot.io/typebot-id',
})
expect(firstIframeElement).toBeDefined()
expect(secondIframeElement).toBeDefined()
expect(thirdIframeElement).toBeDefined()
expect(firstIframeElement?.id).toBe(secondIframeElement?.id)
expect(firstIframeElement?.id).not.toBe(thirdIframeElement?.id)
})
it('should be lazy loading by default', () => {
expect.assertions(2)
const containerId = 'container'
document.body.innerHTML = `<div id="${containerId}"></div>`
const iframe = initContainer(containerId, {
url: 'https://typebot.io/typebot-id',
}) as HTMLIFrameElement
expect(iframe.dataset.src).toBeDefined()
expect(iframe.src).toBeFalsy()
})
it("shouldn't be lazy if setting param to false", () => {
expect.assertions(2);
const containerId = "container";
document.body.innerHTML = `<div id="${containerId}"></div>`;
expect.assertions(2)
const containerId = 'container'
document.body.innerHTML = `<div id="${containerId}"></div>`
const iframe = initContainer(containerId, {
publishId: "typebot-id",
url: 'https://typebot.io/typebot-id',
loadWhenVisible: false,
}) as HTMLIFrameElement;
expect(iframe.dataset.src).toBeUndefined();
expect(iframe.src).toBeTruthy();
});
});
}) as HTMLIFrameElement
expect(iframe.dataset.src).toBeUndefined()
expect(iframe.src).toBeTruthy()
})
})

188
packages/typebot-js/tests/iframe.spec.ts
View File

@ -1,132 +1,134 @@
import { createIframe } from "../src/iframe";
import { createIframe } from '../src/iframe'
describe("createIframe", () => {
it("should create a valid iframe element", () => {
expect.assertions(3);
describe('createIframe', () => {
it('should create a valid iframe element', () => {
expect.assertions(3)
const iframeElement = createIframe({
publishId: "typebot-id",
});
expect(iframeElement.tagName).toBe("IFRAME");
expect(iframeElement.getAttribute("data-id")).toBe("typebot-id");
expect(iframeElement.getAttribute("src")).toBe(
"https://typebot-viewer.vercel.app/typebot-id?hn=localhost"
);
});
url: 'https://typebot.io/typebot-id',
})
expect(iframeElement.tagName).toBe('IFRAME')
expect(iframeElement.getAttribute('data-id')).toBe(
'https://typebot.io/typebot-id'
)
expect(iframeElement.getAttribute('src')).toBe(
'https://typebot.io/typebot-id?hn=localhost'
)
})
it("should parse the right src prop if custom domain and starterVariables", () => {
expect.assertions(1);
it('should parse the right src prop if custom domain and starterVariables', () => {
expect.assertions(1)
const iframes = [
createIframe({
publishId: "typebot-id",
hiddenVariables: { var1: "value1", var2: "value2", var3: undefined },
url: 'https://typebot.io/typebot-id',
hiddenVariables: { var1: 'value1', var2: 'value2', var3: undefined },
}),
];
expect(iframes[0].getAttribute("src")).toBe(
"https://typebot-viewer.vercel.app/typebot-id?hn=localhost&var1=value1&var2=value2"
);
});
]
expect(iframes[0].getAttribute('src')).toBe(
'https://typebot.io/typebot-id?hn=localhost&var1=value1&var2=value2'
)
})
it("should have a custom background color if defined", () => {
expect.assertions(1);
it('should have a custom background color if defined', () => {
expect.assertions(1)
const iframeElement = createIframe({
publishId: "typebot-id",
backgroundColor: "green",
});
expect(iframeElement.style.backgroundColor).toBe("green");
});
url: 'https://typebot.io/typebot-id',
backgroundColor: 'green',
})
expect(iframeElement.style.backgroundColor).toBe('green')
})
it("should have a lazy loading behavior if defined", () => {
expect.assertions(2);
it('should have a lazy loading behavior if defined', () => {
expect.assertions(2)
const iframeElement = createIframe({
publishId: "typebot-id",
url: 'https://typebot.io/typebot-id',
loadWhenVisible: true,
});
expect(iframeElement.getAttribute("data-src")).toBe(
"https://typebot-viewer.vercel.app/typebot-id?hn=localhost"
);
expect(iframeElement.getAttribute("src")).toBeFalsy();
});
})
expect(iframeElement.getAttribute('data-src')).toBe(
'https://typebot.io/typebot-id?hn=localhost'
)
expect(iframeElement.getAttribute('src')).toBeFalsy()
})
it("should redirect on event", async () => {
expect.assertions(1);
it('should redirect on event', async () => {
expect.assertions(1)
createIframe({
publishId: "typebot-id",
});
window.open = jest.fn();
url: 'https://typebot.io/typebot-id',
})
window.open = jest.fn()
window.postMessage(
{
from: "typebot",
redirectUrl: "https://google.fr",
from: 'typebot',
redirectUrl: 'https://google.fr',
},
"*"
);
await new Promise((r) => setTimeout(r, 1));
expect(window.open).toHaveBeenCalledWith("https://google.fr");
});
'*'
)
await new Promise((r) => setTimeout(r, 1))
expect(window.open).toHaveBeenCalledWith('https://google.fr')
})
it("should trigger var callback on var event", async () => {
expect.assertions(2);
let n, v;
it('should trigger var callback on var event', async () => {
expect.assertions(2)
let n, v
createIframe({
publishId: "typebot-id",
url: 'https://typebot.io/typebot-id',
onNewVariableValue: ({ name, value }) => {
v = value;
n = name;
v = value
n = name
},
});
})
window.postMessage(
{
from: "typebot",
newVariableValue: { name: "varName", value: "varValue" },
from: 'typebot',
newVariableValue: { name: 'varName', value: 'varValue' },
},
"*"
);
await new Promise((r) => setTimeout(r, 1));
expect(n).toBe("varName");
expect(v).toBe("varValue");
});
'*'
)
await new Promise((r) => setTimeout(r, 1))
expect(n).toBe('varName')
expect(v).toBe('varValue')
})
it("should notify when video played", async () => {
expect.assertions(1);
let hit = false;
it('should notify when video played', async () => {
expect.assertions(1)
let hit = false
createIframe({
publishId: "typebot-id",
url: 'https://typebot.io/typebot-id',
onVideoPlayed: () => {
hit = true;
hit = true
},
});
})
window.postMessage(
{
from: "typebot",
from: 'typebot',
videoPlayed: true,
},
"*"
);
await new Promise((r) => setTimeout(r, 1));
expect(hit).toBe(true);
});
'*'
)
await new Promise((r) => setTimeout(r, 1))
expect(hit).toBe(true)
})
it("shouldn't execute callbacks if event from other than typebot", async () => {
expect.assertions(3);
let n, v;
expect.assertions(3)
let n, v
createIframe({
publishId: "typebot-id",
url: 'https://typebot.io/typebot-id',
onNewVariableValue: ({ name, value }) => {
v = value;
n = name;
v = value
n = name
},
});
window.open = jest.fn();
})
window.open = jest.fn()
window.postMessage(
{
redirectUrl: "https://google.fr",
newVariableValue: { name: "varName", value: "varValue" },
redirectUrl: 'https://google.fr',
newVariableValue: { name: 'varName', value: 'varValue' },
},
"*"
);
await new Promise((r) => setTimeout(r, 1));
expect(window.open).not.toHaveBeenCalled();
expect(n).toBeUndefined();
expect(v).toBeUndefined();
});
});
'*'
)
await new Promise((r) => setTimeout(r, 1))
expect(window.open).not.toHaveBeenCalled()
expect(n).toBeUndefined()
expect(v).toBeUndefined()
})
})

187
packages/typebot-js/tests/popup.spec.ts
View File

@ -1,111 +1,114 @@
import { getPopupActions, initPopup } from "../src/embedTypes/popup";
import { getPopupActions, initPopup } from '../src/embedTypes/popup'
describe("initPopup", () => {
describe('initPopup', () => {
beforeEach(() => {
document.body.innerHTML = "";
});
document.body.innerHTML = ''
})
it("should return the popupElement with lazy iframe", () => {
expect.assertions(2);
initPopup({ publishId: "typebot-id" });
const popupElement = document.getElementById("typebot-popup");
const iframeElement = popupElement?.children[0] as HTMLIFrameElement;
expect(popupElement).toBeTruthy();
expect(iframeElement.dataset.src).toBeDefined();
});
it('should return the popupElement with lazy iframe', () => {
expect.assertions(2)
initPopup({ url: 'https://typebot.io/typebot-id' })
const popupElement = document.getElementById('typebot-popup')
const iframeElement = popupElement?.children[0] as HTMLIFrameElement
expect(popupElement).toBeTruthy()
expect(iframeElement.dataset.src).toBeDefined()
})
it("should overwrite if exists", () => {
expect.assertions(2);
initPopup({ publishId: "typebot-id", hiddenVariables: { test1: "yo" } });
initPopup({ publishId: "typebot-id2" });
const elements = document.getElementsByTagName("iframe");
expect(elements).toHaveLength(1);
it('should overwrite if exists', () => {
expect.assertions(2)
initPopup({
url: 'https://typebot.io/typebot-id',
hiddenVariables: { test1: 'yo' },
})
initPopup({ url: 'https://typebot.io/typebot-id2' })
const elements = document.getElementsByTagName('iframe')
expect(elements).toHaveLength(1)
expect(elements[0].dataset.src).toBe(
"https://typebot-viewer.vercel.app/typebot-id2?hn=localhost"
);
});
'https://typebot.io/typebot-id2?hn=localhost'
)
})
it("shouldn't have opened classname if no delay", () => {
expect.assertions(1);
initPopup({ publishId: "typebot-id" });
const popupElement = document.getElementById("typebot-popup");
expect(popupElement?.classList.contains("opened")).toBe(false);
});
expect.assertions(1)
initPopup({ url: 'https://typebot.io/typebot-id' })
const popupElement = document.getElementById('typebot-popup')
expect(popupElement?.classList.contains('opened')).toBe(false)
})
it("should have the opened classname after the delay", async () => {
expect.assertions(2);
initPopup({ delay: 500, publishId: "typebot-id" });
const popupElement = document.getElementById("typebot-popup");
expect(popupElement?.classList.contains("opened")).toBe(false);
await new Promise((r) => setTimeout(r, 1000));
expect(popupElement?.classList.contains("opened")).toBe(true);
});
});
it('should have the opened classname after the delay', async () => {
expect.assertions(2)
initPopup({ delay: 500, url: 'https://typebot.io/typebot-id' })
const popupElement = document.getElementById('typebot-popup')
expect(popupElement?.classList.contains('opened')).toBe(false)
await new Promise((r) => setTimeout(r, 1000))
expect(popupElement?.classList.contains('opened')).toBe(true)
})
})
describe("openPopup", () => {
describe('openPopup', () => {
beforeEach(() => {
document.body.innerHTML = "";
});
document.body.innerHTML = ''
})
it("should add opened className and lazy load", () => {
expect.assertions(5);
const { open } = initPopup({ publishId: "typebot-id" });
const popupElement = document.getElementById("typebot-popup");
expect(popupElement?.children[0].getAttribute("data-src")).toBeTruthy();
open();
expect(popupElement?.classList.contains("opened")).toBe(true);
expect(document.body.style.overflowY).toBe("hidden");
expect(popupElement?.children[0].getAttribute("data-src")).toBeFalsy();
expect(open).not.toThrow();
});
it('should add opened className and lazy load', () => {
expect.assertions(5)
const { open } = initPopup({ url: 'https://typebot.io/typebot-id' })
const popupElement = document.getElementById('typebot-popup')
expect(popupElement?.children[0].getAttribute('data-src')).toBeTruthy()
open()
expect(popupElement?.classList.contains('opened')).toBe(true)
expect(document.body.style.overflowY).toBe('hidden')
expect(popupElement?.children[0].getAttribute('data-src')).toBeFalsy()
expect(open).not.toThrow()
})
it("should still work if initializing a second time", () => {
expect.assertions(2);
initPopup({ publishId: "typebot-id" });
const { open } = initPopup({ publishId: "typebot-id" });
const popupElement = document.getElementById("typebot-popup");
open();
expect(popupElement?.classList.contains("opened")).toBe(true);
expect(document.body.style.overflowY).toBe("hidden");
});
});
it('should still work if initializing a second time', () => {
expect.assertions(2)
initPopup({ url: 'https://typebot.io/typebot-id' })
const { open } = initPopup({ url: 'https://typebot.io/typebot-id' })
const popupElement = document.getElementById('typebot-popup')
open()
expect(popupElement?.classList.contains('opened')).toBe(true)
expect(document.body.style.overflowY).toBe('hidden')
})
})
describe("closePopup", () => {
describe('closePopup', () => {
beforeEach(() => {
document.body.innerHTML = "";
});
document.body.innerHTML = ''
})
it("shouldn remove opened className", () => {
expect.assertions(2);
const { close } = initPopup({ publishId: "typebot-id" });
const popupElement = document.getElementById("typebot-popup");
close();
expect(popupElement?.classList.contains("opened")).toBe(false);
expect(document.body.style.overflowY).toBe("auto");
});
it('shouldn remove opened className', () => {
expect.assertions(2)
const { close } = initPopup({ url: 'https://typebot.io/typebot-id' })
const popupElement = document.getElementById('typebot-popup')
close()
expect(popupElement?.classList.contains('opened')).toBe(false)
expect(document.body.style.overflowY).toBe('auto')
})
it("should still work if initializing a second time", () => {
expect.assertions(2);
initPopup({ publishId: "typebot-id" });
const { close } = initPopup({ publishId: "typebot-id" });
const popupElement = document.getElementById("typebot-popup");
close();
expect(popupElement?.classList.contains("opened")).toBe(false);
expect(document.body.style.overflowY).toBe("auto");
});
});
it('should still work if initializing a second time', () => {
expect.assertions(2)
initPopup({ url: 'https://typebot.io/typebot-id' })
const { close } = initPopup({ url: 'https://typebot.io/typebot-id' })
const popupElement = document.getElementById('typebot-popup')
close()
expect(popupElement?.classList.contains('opened')).toBe(false)
expect(document.body.style.overflowY).toBe('auto')
})
})
describe("Request commands afterwards", () => {
it("should return defined commands", () => {
describe('Request commands afterwards', () => {
it('should return defined commands', () => {
initPopup({
publishId: "typebot-id",
});
url: 'https://typebot.io/typebot-id',
})
const { close, open } = getPopupActions();
expect(close).toBeDefined();
expect(open).toBeDefined();
open();
const popup = document.getElementById("typebot-popup") as HTMLDivElement;
expect(popup.classList.contains("opened")).toBe(true);
});
});
const { close, open } = getPopupActions()
expect(close).toBeDefined()
expect(open).toBeDefined()
open()
const popup = document.getElementById('typebot-popup') as HTMLDivElement
expect(popup.classList.contains('opened')).toBe(true)
})
})