|
| 1 | +const assert = require("assert"); |
| 2 | +const fs = require("fs"); |
| 3 | +const path = require("path"); |
| 4 | +const { chromium } = require("playwright"); |
| 5 | + |
| 6 | +const root = path.resolve(__dirname, ".."); |
| 7 | +const source = fs.readFileSync(path.join(root, "sources", "flextv.js"), "utf8"); |
| 8 | +const soakIterations = Number(process.env.FLEXTV_SOAK_ITERATIONS || 30); |
| 9 | + |
| 10 | +function waitForMessageCount(page, expected, timeout = 7000) { |
| 11 | + return page.waitForFunction( |
| 12 | + (count) => window.__flextvMessages && window.__flextvMessages.length === count, |
| 13 | + expected, |
| 14 | + { timeout } |
| 15 | + ); |
| 16 | +} |
| 17 | + |
| 18 | +(async () => { |
| 19 | + const browser = await chromium.launch({ headless: true }); |
| 20 | + const page = await browser.newPage(); |
| 21 | + |
| 22 | + await page.setContent(` |
| 23 | + <!doctype html> |
| 24 | + <html> |
| 25 | + <body> |
| 26 | + <div class="chat-content relative!"> |
| 27 | + <div class="chat-list overscroll-none touch-scroll-y" style="display: flex; flex-direction: column-reverse;"> |
| 28 | + <div id="chat-feed" style="display: block; z-index: 1; zoom: 1;"> |
| 29 | + <div id="message-root"></div> |
| 30 | + </div> |
| 31 | + </div> |
| 32 | + </div> |
| 33 | + </body> |
| 34 | + </html> |
| 35 | + `); |
| 36 | + |
| 37 | + await page.addScriptTag({ |
| 38 | + content: ` |
| 39 | + window.__flextvMessages = []; |
| 40 | + window.__memberId = 970221; |
| 41 | + window.chrome = { |
| 42 | + runtime: { |
| 43 | + id: "test-extension", |
| 44 | + lastError: null, |
| 45 | + sendMessage: function (id, payload, callback) { |
| 46 | + if (payload && payload.getSettings) { |
| 47 | + if (callback) { |
| 48 | + callback({ settings: { textonlymode: false } }); |
| 49 | + } |
| 50 | + return; |
| 51 | + } |
| 52 | + if (payload && payload.message) { |
| 53 | + window.__flextvMessages.push(payload.message); |
| 54 | + } |
| 55 | + if (callback) { |
| 56 | + callback({}); |
| 57 | + } |
| 58 | + }, |
| 59 | + onMessage: { |
| 60 | + addListener: function () {} |
| 61 | + } |
| 62 | + } |
| 63 | + }; |
| 64 | +
|
| 65 | + window.__addFlexMessage = function (id, name, messageHtml, options) { |
| 66 | + options = options || {}; |
| 67 | + var member = { |
| 68 | + id: options.userId || window.__memberId++, |
| 69 | + channelId: options.channelId || 708210, |
| 70 | + loginId: options.loginId || "sh5712", |
| 71 | + nickname: name, |
| 72 | + gender: "M", |
| 73 | + level: options.level || 0, |
| 74 | + month: 0, |
| 75 | + role: { app: "V", channel: "V" }, |
| 76 | + isIdentify: true, |
| 77 | + ranking: typeof options.ranking === "number" ? options.ranking : -1, |
| 78 | + isDumb: false |
| 79 | + }; |
| 80 | +
|
| 81 | + var wrapper = document.createElement("div"); |
| 82 | + var item = document.createElement("div"); |
| 83 | + item.className = "chat-item"; |
| 84 | + item.id = id; |
| 85 | +
|
| 86 | + var bg = document.createElement("div"); |
| 87 | + bg.className = "bg"; |
| 88 | + bg.style.paddingLeft = "0px"; |
| 89 | +
|
| 90 | + var emojiWrap = document.createElement("div"); |
| 91 | + emojiWrap.className = "emoji-wrap "; |
| 92 | +
|
| 93 | + var txtWrap = document.createElement("div"); |
| 94 | + txtWrap.className = "txt-wrap"; |
| 95 | + txtWrap.style.marginBottom = "0px"; |
| 96 | +
|
| 97 | + var header = document.createElement("div"); |
| 98 | + header.className = "flex items-center gap-[6px]"; |
| 99 | +
|
| 100 | + var badge = document.createElement("img"); |
| 101 | + badge.className = "h-[20px] sm:h-[24px] object-contain"; |
| 102 | + badge.src = options.badge || "https://static.flextv.co.kr/20240802/ico_user_normal_81685e8c4b.png"; |
| 103 | + header.appendChild(badge); |
| 104 | +
|
| 105 | + var nameWrapper = document.createElement("span"); |
| 106 | + nameWrapper.className = "chat-user-name cursor-pointer flex items-center"; |
| 107 | + nameWrapper.style.color = options.nameColor || "rgb(0, 0, 0)"; |
| 108 | + nameWrapper.style.textShadow = "none"; |
| 109 | +
|
| 110 | + var nameSpan = document.createElement("span"); |
| 111 | + nameSpan.className = "inline-block"; |
| 112 | + nameSpan.dataset.member = JSON.stringify(member); |
| 113 | + nameSpan.textContent = name; |
| 114 | + nameWrapper.appendChild(nameSpan); |
| 115 | +
|
| 116 | + var gender = document.createElement("img"); |
| 117 | + gender.alt = "gender"; |
| 118 | + gender.className = "w-[8px] h-[10px] object-contain ml-1"; |
| 119 | + gender.src = "/svg/ico_man.svg"; |
| 120 | + nameWrapper.appendChild(gender); |
| 121 | + header.appendChild(nameWrapper); |
| 122 | +
|
| 123 | + var body = document.createElement("div"); |
| 124 | + body.className = "flex flex-col"; |
| 125 | + var chat = document.createElement("div"); |
| 126 | + chat.className = "chat ml-[30px]!"; |
| 127 | + chat.style.color = "rgb(0, 0, 0)"; |
| 128 | + chat.style.textShadow = "none"; |
| 129 | + var chatInner = document.createElement("div"); |
| 130 | + chatInner.innerHTML = messageHtml; |
| 131 | + chat.appendChild(chatInner); |
| 132 | + body.appendChild(chat); |
| 133 | +
|
| 134 | + txtWrap.appendChild(header); |
| 135 | + txtWrap.appendChild(body); |
| 136 | + bg.appendChild(emojiWrap); |
| 137 | + bg.appendChild(txtWrap); |
| 138 | + item.appendChild(bg); |
| 139 | + wrapper.appendChild(item); |
| 140 | + document.getElementById("message-root").appendChild(wrapper); |
| 141 | + return id; |
| 142 | + }; |
| 143 | +
|
| 144 | + window.__updateFlexMessageText = function (id, message) { |
| 145 | + var span = document.querySelector("#" + id + " .chat span"); |
| 146 | + if (!span) { |
| 147 | + return false; |
| 148 | + } |
| 149 | + if (span.firstChild) { |
| 150 | + span.firstChild.nodeValue = message; |
| 151 | + } else { |
| 152 | + span.textContent = message; |
| 153 | + } |
| 154 | + return true; |
| 155 | + }; |
| 156 | + ` |
| 157 | + }); |
| 158 | + |
| 159 | + await page.evaluate(() => { |
| 160 | + window.__addFlexMessage("backlog-1", "\uD604\uC774:)", "<span>\uC774\uC804</span>", { userId: 970221 }); |
| 161 | + }); |
| 162 | + |
| 163 | + await page.addScriptTag({ content: source }); |
| 164 | + await page.waitForFunction(() => document.querySelector("#backlog-1")?.dataset.ssnLastMessageSignature); |
| 165 | + assert.strictEqual(await page.evaluate(() => window.__flextvMessages.length), 0, "initial backlog should not send"); |
| 166 | + |
| 167 | + await page.evaluate(() => { |
| 168 | + window.__addFlexMessage("pending-1", "\uB290\uB9B0\uC0AC\uC6A9\uC790", "<span></span>", { userId: 970223 }); |
| 169 | + }); |
| 170 | + await page.waitForTimeout(1300); |
| 171 | + assert.strictEqual(await page.evaluate(() => window.__flextvMessages.length), 0, "empty pending row should not send"); |
| 172 | + |
| 173 | + await page.evaluate(() => window.__updateFlexMessageText("pending-1", "\uB2A6\uAC8C \uB4E4\uC5B4\uC628 \uCC44\uD305")); |
| 174 | + await waitForMessageCount(page, 1); |
| 175 | + assert.strictEqual(await page.evaluate(() => window.__flextvMessages[0].chatmessage), "\uB2A6\uAC8C \uB4E4\uC5B4\uC628 \uCC44\uD305"); |
| 176 | + |
| 177 | + await page.evaluate(() => { |
| 178 | + window.__addFlexMessage("live-1", "\uD604\uC774:)", "<span>\u3145\u3145\u3145</span>", { |
| 179 | + userId: 970222, |
| 180 | + badge: "https://static.flextv.co.kr/fanIcon/202507/fd6d7f343c6eed67.png", |
| 181 | + nameColor: "rgb(255, 2, 74)", |
| 182 | + ranking: 2 |
| 183 | + }); |
| 184 | + }); |
| 185 | + await waitForMessageCount(page, 2); |
| 186 | + |
| 187 | + const first = await page.evaluate(() => window.__flextvMessages[1]); |
| 188 | + assert.strictEqual(first.type, "flextv"); |
| 189 | + assert.strictEqual(first.chatname, "\uD604\uC774:)"); |
| 190 | + assert.strictEqual(first.chatmessage, "\u3145\u3145\u3145"); |
| 191 | + assert.strictEqual(first.userid, "970222", JSON.stringify(first)); |
| 192 | + assert.strictEqual(first.meta.userId, 970222); |
| 193 | + assert.strictEqual(first.meta.ranking, 2); |
| 194 | + assert.deepStrictEqual(first.chatbadges, ["https://static.flextv.co.kr/fanIcon/202507/fd6d7f343c6eed67.png"]); |
| 195 | + assert.ok(first.nameColor.indexOf("255") !== -1, "name color should be preserved"); |
| 196 | + |
| 197 | + await page.waitForTimeout(1300); |
| 198 | + assert.strictEqual(await page.evaluate(() => window.__flextvMessages.length), 2, "idle scan should not duplicate"); |
| 199 | + |
| 200 | + await page.evaluate(() => window.__updateFlexMessageText("live-1", "\uBCC0\uACBD\uB41C \uCC44\uD305")); |
| 201 | + await waitForMessageCount(page, 3); |
| 202 | + assert.strictEqual(await page.evaluate(() => window.__flextvMessages[2].chatmessage), "\uBCC0\uACBD\uB41C \uCC44\uD305"); |
| 203 | + |
| 204 | + await page.evaluate(async (count) => { |
| 205 | + for (var i = 0; i < count; i++) { |
| 206 | + window.__addFlexMessage("soak-" + i, "soak-user-" + i, "<span>soak message " + i + "</span>", { |
| 207 | + userId: 980000 + i |
| 208 | + }); |
| 209 | + await new Promise((resolve) => setTimeout(resolve, 3)); |
| 210 | + } |
| 211 | + }, soakIterations); |
| 212 | + await waitForMessageCount(page, 3 + soakIterations, 15000); |
| 213 | + |
| 214 | + const reuseIterations = Math.max(5, Math.floor(soakIterations / 5)); |
| 215 | + await page.evaluate(async (count) => { |
| 216 | + for (var i = 0; i < count; i++) { |
| 217 | + window.__updateFlexMessageText("live-1", "reuse message " + i); |
| 218 | + await new Promise((resolve) => setTimeout(resolve, 20)); |
| 219 | + } |
| 220 | + }, reuseIterations); |
| 221 | + await waitForMessageCount(page, 3 + soakIterations + reuseIterations, 15000); |
| 222 | + |
| 223 | + await page.waitForTimeout(1700); |
| 224 | + assert.strictEqual( |
| 225 | + await page.evaluate(() => window.__flextvMessages.length), |
| 226 | + 3 + soakIterations + reuseIterations, |
| 227 | + "post-soak idle scan should not duplicate" |
| 228 | + ); |
| 229 | + |
| 230 | + await browser.close(); |
| 231 | + console.log(`FLEX TV source passed (${soakIterations} appended, ${reuseIterations} reused).`); |
| 232 | +})().catch(async (error) => { |
| 233 | + console.error(error); |
| 234 | + process.exit(1); |
| 235 | +}); |
0 commit comments