blsmedia/bot
2
0
Fork 0
Code Activity

feat(lib): ✨ Add auto open delay for bubble embed

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-14 11:38:57 +01:00
parent 80679dfbd0
commit d6b94130cb
8 changed files with 289 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,58 @@
import * as Typebot from "../../src";
import * as Typebot from '../../src'
describe("initBubble", () => {
describe('initBubble', () => {
beforeEach(() => {
document.body.innerHTML = "";
});
document.body.innerHTML = ''
})
it("should initialize a bubble embed", () => {
expect.assertions(2);
Typebot.initBubble({ publishId: "typebot-id" });
const bubbleElement = document.getElementById("typebot-bubble");
const frame = document.getElementsByTagName("iframe")[0];
expect(frame).toBeDefined();
expect(bubbleElement).toBeDefined();
});
it('should initialize a bubble embed', () => {
expect.assertions(2)
Typebot.initBubble({ publishId: 'typebot-id' })
const bubbleElement = document.getElementById('typebot-bubble')
const frame = document.getElementsByTagName('iframe')[0]
expect(frame).toBeDefined()
expect(bubbleElement).toBeDefined()
})
it("should overwrite bubble if exists", () => {
expect.assertions(2);
it('should overwrite bubble if exists', () => {
expect.assertions(2)
Typebot.initBubble({
publishId: "typebot-id",
hiddenVariables: { var1: "test" },
});
Typebot.initBubble({ publishId: "typebot-id2" });
const frames = document.getElementsByTagName("iframe");
expect(frames).toHaveLength(1);
publishId: 'typebot-id',
hiddenVariables: { var1: 'test' },
})
Typebot.initBubble({ publishId: '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-viewer.vercel.app/typebot-id2?hn=localhost'
)
})
it('show open after the corresponding delay', async () => {
expect.assertions(3)
Typebot.initBubble({
autoOpenDelay: 1000,
publishId: 'typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('iframe-opened')).toBe(false)
await new Promise((r) => setTimeout(r, 1000))
expect(bubble.classList.contains('iframe-opened')).toBe(true)
const rememberCloseDecisionFromStorage = localStorage.getItem(
Typebot.localStorageKeys.rememberClose
)
expect(rememberCloseDecisionFromStorage).toBe('true')
})
it('should remember close decision if set to true', async () => {
expect.assertions(1)
localStorage.setItem(Typebot.localStorageKeys.rememberClose, 'true')
Typebot.initBubble({
autoOpenDelay: 1000,
publishId: 'typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
await new Promise((r) => setTimeout(r, 1500))
expect(bubble.classList.contains('iframe-opened')).toBe(false)
})
})

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

@ -1,104 +1,77 @@
import * as Typebot from "../../src";
import * as Typebot from '../../src'
beforeEach(() => {
document.body.innerHTML = "";
});
document.body.innerHTML = ''
})
it("should create the message", () => {
expect.assertions(2);
it('should create the message', () => {
expect.assertions(2)
Typebot.initBubble({
proactiveMessage: { textContent: "Hi click here!" },
publishId: "typebot-id",
});
proactiveMessage: { textContent: 'Hi click here!' },
publishId: 'typebot-id',
})
const paragraphElement = document.querySelector(
"#typebot-bubble > .proactive-message > p"
);
'#typebot-bubble > .proactive-message > p'
)
const closeButton = document.querySelector(
"#typebot-bubble > .proactive-message > .close-button"
);
expect(paragraphElement?.textContent).toBe("Hi click here!");
expect(closeButton).toBeTruthy();
});
'#typebot-bubble > .proactive-message > .close-button'
)
expect(paragraphElement?.textContent).toBe('Hi click here!')
expect(closeButton).toBeTruthy()
})
it("should have the corresponding avatar", () => {
expect.assertions(1);
it('should have the corresponding avatar', () => {
expect.assertions(1)
Typebot.initBubble({
proactiveMessage: {
textContent: "Hi click here!",
avatarUrl: "https://website.com/my-avatar.png",
textContent: 'Hi click here!',
avatarUrl: 'https://website.com/my-avatar.png',
},
publishId: "typebot-id",
});
publishId: 'typebot-id',
})
const avatarElement = document.querySelector(
"#typebot-bubble > .proactive-message > img"
) as HTMLImageElement;
expect(avatarElement.src).toBe("https://website.com/my-avatar.png");
});
'#typebot-bubble > .proactive-message > img'
) as HTMLImageElement
expect(avatarElement.src).toBe('https://website.com/my-avatar.png')
})
it("shouldn't have opened class if delay not defined", () => {
expect.assertions(1);
expect.assertions(1)
Typebot.initBubble({
proactiveMessage: {
textContent: "Hi click here!",
textContent: 'Hi click here!',
},
publishId: "typebot-id",
});
const bubble = document.querySelector("#typebot-bubble") as HTMLDivElement;
expect(bubble.classList.contains("message-opened")).toBe(false);
});
publishId: 'typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('message-opened')).toBe(false)
})
it("should show almost immediately if delay is 0", async () => {
expect.assertions(1);
it('should show almost immediately if delay is 0', async () => {
expect.assertions(1)
Typebot.initBubble({
proactiveMessage: {
textContent: "Hi click here!",
textContent: 'Hi click here!',
delay: 0,
},
publishId: "typebot-id",
});
const bubble = document.querySelector("#typebot-bubble") as HTMLDivElement;
await new Promise((r) => setTimeout(r, 1));
expect(bubble.classList.contains("message-opened")).toBe(true);
});
publishId: 'typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
await new Promise((r) => setTimeout(r, 1))
expect(bubble.classList.contains('message-opened')).toBe(true)
})
it("show after the corresponding delay", async () => {
expect.assertions(2);
it('show after the corresponding delay', async () => {
expect.assertions(2)
Typebot.initBubble({
proactiveMessage: {
textContent: "Hi click here!",
textContent: 'Hi click here!',
delay: 1000,
},
publishId: "typebot-id",
});
const bubble = document.querySelector("#typebot-bubble") as HTMLDivElement;
expect(bubble.classList.contains("message-opened")).toBe(false);
await new Promise((r) => setTimeout(r, 1000));
expect(bubble.classList.contains("message-opened")).toBe(true);
});
it("should remember close decision if set to true", () => {
expect.assertions(2);
Typebot.initBubble({
proactiveMessage: {
textContent: "Hi click here!",
delay: 1000,
},
publishId: "typebot-id",
});
const rememberCloseDecisionFromStorage = localStorage.getItem(
Typebot.localStorageKeys.rememberClose
);
expect(rememberCloseDecisionFromStorage).toBeNull();
Typebot.initBubble({
proactiveMessage: {
textContent: "Hi click here!",
delay: 1000,
rememberClose: true,
},
publishId: "typebot-id",
});
const refreshedRememberCloseDecisionFromStorage = localStorage.getItem(
Typebot.localStorageKeys.rememberClose
);
expect(refreshedRememberCloseDecisionFromStorage).toBe("true");
});
publishId: 'typebot-id',
})
const bubble = document.querySelector('#typebot-bubble') as HTMLDivElement
expect(bubble.classList.contains('message-opened')).toBe(false)
await new Promise((r) => setTimeout(r, 1000))
expect(bubble.classList.contains('message-opened')).toBe(true)
})