From 0a532e38e75c403369e42997de97f372d2e1b013 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Fri, 17 Mar 2023 17:05:58 +0700
Subject: [PATCH] chore: add tests for sanitization and normalzation
---
package-lock.json | 19 +++
package.json | 3 +-
src/editors/Article.tsx | 4 +
src/editors/Comment.tsx | 4 +
src/transformers/normalize.test.ts | 250 +++++++++++++++++++++++++++++
src/transformers/sanitize.test.ts | 4 +-
6 files changed, 281 insertions(+), 3 deletions(-)
create mode 100644 src/transformers/normalize.test.ts
diff --git a/package-lock.json b/package-lock.json
index ff574c3c..2205b3d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
"@tiptap/extension-heading": "^2.0.0-beta.220",
"@tiptap/extension-history": "^2.0.0-beta.220",
"@tiptap/extension-horizontal-rule": "^2.0.0-beta.220",
+ "@tiptap/extension-italic": "^2.0.0-beta.220",
"@tiptap/extension-list-item": "^2.0.0-beta.220",
"@tiptap/extension-ordered-list": "^2.0.0-beta.220",
"@tiptap/extension-paragraph": "^2.0.0-beta.220",
@@ -1680,6 +1681,18 @@
"@tiptap/pm": "^2.0.0-beta.209"
}
},
+ "node_modules/@tiptap/extension-italic": {
+ "version": "2.0.0-beta.220",
+ "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.220.tgz",
+ "integrity": "sha512-aWAgqoR8fql9fJ7T/ZrEqovkEjZXbUpvlvWEvdBDMG3id8ZTGNDpdDKdvI6J/Rl5ZGPIg1TpHJtd+UixheWQsQ==",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/ueberdosis"
+ },
+ "peerDependencies": {
+ "@tiptap/core": "^2.0.0-beta.209"
+ }
+ },
"node_modules/@tiptap/extension-list-item": {
"version": "2.0.0-beta.220",
"resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.220.tgz",
@@ -10577,6 +10590,12 @@
"integrity": "sha512-XMIs4R+4BoH5LpIxey513mZuus0XLHqjVayqtf03enmjBTLWzkixvvWLPLw4a47FJL5Q8l4REFHxjNifRzOKkg==",
"requires": {}
},
+ "@tiptap/extension-italic": {
+ "version": "2.0.0-beta.220",
+ "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.220.tgz",
+ "integrity": "sha512-aWAgqoR8fql9fJ7T/ZrEqovkEjZXbUpvlvWEvdBDMG3id8ZTGNDpdDKdvI6J/Rl5ZGPIg1TpHJtd+UixheWQsQ==",
+ "requires": {}
+ },
"@tiptap/extension-list-item": {
"version": "2.0.0-beta.220",
"resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.220.tgz",
diff --git a/package.json b/package.json
index 81d02f32..786ae4a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@matters/matters-editor",
- "version": "0.2.0-alpha.2",
+ "version": "0.2.0-alpha.3",
"description": "Editor for matters.news",
"author": "https://github.com/thematters",
"homepage": "https://github.com/thematters/matters-editor",
@@ -54,6 +54,7 @@
"@tiptap/extension-heading": "^2.0.0-beta.220",
"@tiptap/extension-history": "^2.0.0-beta.220",
"@tiptap/extension-horizontal-rule": "^2.0.0-beta.220",
+ "@tiptap/extension-italic": "^2.0.0-beta.220",
"@tiptap/extension-list-item": "^2.0.0-beta.220",
"@tiptap/extension-ordered-list": "^2.0.0-beta.220",
"@tiptap/extension-paragraph": "^2.0.0-beta.220",
diff --git a/src/editors/Article.tsx b/src/editors/Article.tsx
index ad243abd..01117dea 100644
--- a/src/editors/Article.tsx
+++ b/src/editors/Article.tsx
@@ -9,6 +9,8 @@ import Gapcursor from '@tiptap/extension-gapcursor'
import HardBreak from '@tiptap/extension-hard-break'
import Heading from '@tiptap/extension-heading'
import History from '@tiptap/extension-history'
+import Italic from '@tiptap/extension-italic'
+import Underline from '@tiptap/extension-underline'
import HorizontalRule from '@tiptap/extension-horizontal-rule'
import ListItem from '@tiptap/extension-list-item'
import OrderedList from '@tiptap/extension-ordered-list'
@@ -52,6 +54,8 @@ export const makeArticleEditorExtensions = ({
}),
Bold,
Strike,
+ Underline,
+ Italic,
Code,
CodeBlock,
Blockquote,
diff --git a/src/editors/Comment.tsx b/src/editors/Comment.tsx
index 85034e86..2540c5e2 100644
--- a/src/editors/Comment.tsx
+++ b/src/editors/Comment.tsx
@@ -7,6 +7,8 @@ import CodeBlock from '@tiptap/extension-code-block'
import Document from '@tiptap/extension-document'
import HardBreak from '@tiptap/extension-hard-break'
import History from '@tiptap/extension-history'
+import Italic from '@tiptap/extension-italic'
+import Underline from '@tiptap/extension-underline'
import HorizontalRule from '@tiptap/extension-horizontal-rule'
import ListItem from '@tiptap/extension-list-item'
import OrderedList from '@tiptap/extension-ordered-list'
@@ -39,6 +41,8 @@ export const makeCommentEditorExtensions = ({
Paragraph,
Bold,
Strike,
+ Underline,
+ Italic,
Code,
CodeBlock,
Blockquote,
diff --git a/src/transformers/normalize.test.ts b/src/transformers/normalize.test.ts
new file mode 100644
index 00000000..a6f3bc5b
--- /dev/null
+++ b/src/transformers/normalize.test.ts
@@ -0,0 +1,250 @@
+import { test, expect, describe } from 'vitest'
+import { normalizeArticleHTML } from './normalize'
+
+const expectNormalizeArticleHTML = async (input: string, output: string) => {
+ const result = normalizeArticleHTML(input)
+ expect(result.trim()).toBe(output)
+}
+
+/**
+ * Tests
+ */
+describe('Normalization', async () => {
+ test('bolds', async () => {
+ await expectNormalizeArticleHTML(
+ 'abc
',
+ 'abc
'
+ )
+
+ await expectNormalizeArticleHTML(
+ 'abc
',
+ 'abc
'
+ )
+ })
+
+ test('strikethrough', async () => {
+ await expectNormalizeArticleHTML('abc
', 'abc
')
+
+ await expectNormalizeArticleHTML(
+ 'abc
',
+ 'abc
'
+ )
+
+ await expectNormalizeArticleHTML(
+ 'abc
',
+ 'abc
'
+ )
+ })
+
+ test('italic', async () => {
+ await expectNormalizeArticleHTML(
+ 'abc
',
+ 'abc
'
+ )
+
+ await expectNormalizeArticleHTML('abc
', 'abc
')
+ })
+
+ test('figure: image', async () => {
+ // identical
+ await expectNormalizeArticleHTML(
+ '左：女反派。右：女主。 左：女反派。右：女主。 左：女反派。右：女主。 左：女反派。右：女主。 左：女反派。右：女主。 左：女反派。右：女主。 左：女反派。右：女主。 左：女反派。右：女主。
'
+ )
+ })
+
+ test('figure: audio', async () => {
+ // identical
+ await expectNormalizeArticleHTML(
+ '區塊勢 Podcast 區塊勢 Podcast 區塊勢 Podcast 區塊勢 Podcast 區塊勢 Podcast 區塊勢 Podcast 區塊勢 Podcast 區塊勢 Podcast 區塊勢 Podcast 點數經濟：讓過路客成為回頭客
區塊勢 Podcast
'
+ )
+ })
+
+ test('figure: embeds', async () => {
+ // identical
+ await expectNormalizeArticleHTML(
+ 'VIDEO
VIDEO
VIDEO
VIDEO
VIDEO
VIDEO
VIDEO
'
+ )
+ })
+
+ test('figure: embed YouTube', async () => {
+ // correct URL
+ const youtubeUrls = [
+ 'https://www.youtube.com/watch?v=Zk7DppcfaMY',
+ 'https://www.youtube.com/embed/Zk7DppcfaMY',
+ 'https://youtu.be/Zk7DppcfaMY',
+ 'https://youtu.be/Zk7DppcfaMY/',
+ 'https://youtu.be/Zk7DppcfaMY?abc=123',
+ ]
+ const youtubeTargetUrl = 'https://www.youtube.com/embed/Zk7DppcfaMY?=rel=0'
+ youtubeUrls.forEach(async (url) => {
+ await expectNormalizeArticleHTML(
+ `
\n金曲樂團百合花打造新世代抓姦神曲〈掠猴之歌〉(照片：Taiwan Beats提供) \n\n\n\n金曲樂團百合花看透現代成人愛情關係 打造新世代抓姦神曲〈掠猴之歌〉
\n\n\n\n榮獲金曲獎最佳台語專輯 的百合花樂團，近期宣布啟動海外演出計畫，即將前進新加坡、馬來西亞演出，然而許久未跟台灣樂迷互動的他們，也特別推出全新〈掠猴之歌 〉MV，搞怪奇幻色彩，宛如前世時空記憶，卻擁有千年不變的相同錯綜複雜感情議題，糾結惱人情緒，即便經過多次輪迴依舊解不開，原來「出軌」這件事，無論哪個世紀都可能存在 。百合花打趣笑說：「掠猴就是抓偷吃的意思，也是每個人感情裡最不想遇到的事情，我們用幽默手法與旋律，窺探愛情裡各種面貌。」百合花特別也為〈掠猴之歌〉打造一款線上互動遊戲「掠猴之遊戲Monkey-Catching Game」，邀請樂迷替苦主「金蕉小姐」搜集猴子老公出軌的證據！
\n\n\n\n百合花從首張大碟囊括金音獎最佳搖滾專輯、最佳新人，第二張作品贏得去年金曲獎最佳台語專輯殊榮，奠定當今獨立樂壇地位，樂團不斷嘗試以傳統樂器混搭流行旋律，透過幽默與嘲諷歌詞拼貼，企圖打造千禧世代的「後台灣新歌謠 」，也表現出略帶異色卻又充滿社會百態風情的生命之作。其中描繪當代成人複雜愛情觀的〈掠猴之歌〉，名符其實是一首「抓姦歌 」，樂團比擬歌曲如同奧斯卡大導演「柯恩兄弟
\n\n\n\nMV上演抓姦千年穿越劇 警世寓言大讚宛如百合花式「戲說台灣」！
\n\n\n\n也因為〈掠猴之歌〉散發一股獨特電影感氣息，百合花決定讓MV呈現樂團從未有過的影像風格，特別邀請曾入圍金曲最佳MV的導演林毛執導，攜手藝術家sid and geri 合力操刀，把感情裡最不想觸碰的「抓猴」議題，也能變成一場又鏗又充滿警世意味寓言遊戲。過去華語歌曲常以哀怨節奏描繪外遇、偷吃等感情失敗關係，但百合花反其道而行，改以自嘲幽默手法，讓抓姦不再只是一場社會悲劇。」樂團成員看到MV成品後大讚導演瘋狂創意，繽紛視覺加上穿越劇方式，笑稱「我們也有屬於百合花式風格的《細說台灣》了！ 」
\n\n\n\n推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據 百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出
\n\n\n\n推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據
\n\n\n\n〈掠猴之歌〉MV還埋藏樂團先前推出的線上互動遊戲「掠猴之遊戲Monkey-Catching Game 」彩蛋，邀請樂迷一邊看MV也能從中挖掘，主唱奕碩表示：「〈掠猴之歌〉的編曲散發一股電視遊樂器復古感，所以我們打造一款8bit風格小遊戲，還讓三位團員化身三種樂器人物，包含月琴、電貝斯、北管通鼓，陪伴玩家一起闖關。」 遊戲融合台灣既有街景文化特色，出現手搖杯店、小吃攤等，讓樂迷扮起偵探，協助苦主「金蕉小姐」搜集猴子老公出軌的證據。隨著MV與遊戲一併公開，百合花也宣布將啟動「2023 變猴弄」海外巡迴 ，將在4月底前進新加坡、馬來西亞，將台灣獨特音樂特色推廣到世界各地。
\n\n\n\n百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出
\n',
+ '金曲樂團百合花打造新世代抓姦神曲〈掠猴之歌〉(照片：Taiwan Beats提供)
金曲樂團百合花看透現代成人愛情關係 打造新世代抓姦神曲〈掠猴之歌〉
榮獲金曲獎最佳台語專輯 的百合花樂團，近期宣布啟動海外演出計畫，即將前進新加坡、馬來西亞演出，然而許久未跟台灣樂迷互動的他們，也特別推出全新〈掠猴之歌 〉MV，搞怪奇幻色彩，宛如前世時空記憶，卻擁有千年不變的相同錯綜複雜感情議題，糾結惱人情緒，即便經過多次輪迴依舊解不開，原來「出軌」這件事，無論哪個世紀都可能存在 。百合花打趣笑說：「掠猴就是抓偷吃的意思，也是每個人感情裡最不想遇到的事情，我們用幽默手法與旋律，窺探愛情裡各種面貌。」百合花特別也為〈掠猴之歌〉打造一款線上互動遊戲「掠猴之遊戲Monkey-Catching Game」，邀請樂迷替苦主「金蕉小姐」搜集猴子老公出軌的證據！
百合花從首張大碟囊括金音獎最佳搖滾專輯、最佳新人，第二張作品贏得去年金曲獎最佳台語專輯殊榮，奠定當今獨立樂壇地位，樂團不斷嘗試以傳統樂器混搭流行旋律，透過幽默與嘲諷歌詞拼貼，企圖打造千禧世代的「後台灣新歌謠 」，也表現出略帶異色卻又充滿社會百態風情的生命之作。其中描繪當代成人複雜愛情觀的〈掠猴之歌〉，名符其實是一首「抓姦歌 」，樂團比擬歌曲如同奧斯卡大導演「柯恩兄弟
MV上演抓姦千年穿越劇 警世寓言大讚宛如百合花式「戲說台灣」！
也因為〈掠猴之歌〉散發一股獨特電影感氣息，百合花決定讓MV呈現樂團從未有過的影像風格，特別邀請曾入圍金曲最佳MV的導演林毛執導，攜手藝術家sid and geri 合力操刀，把感情裡最不想觸碰的「抓猴」議題，也能變成一場又鏗又充滿警世意味寓言遊戲。過去華語歌曲常以哀怨節奏描繪外遇、偷吃等感情失敗關係，但百合花反其道而行，改以自嘲幽默手法，讓抓姦不再只是一場社會悲劇。」樂團成員看到MV成品後大讚導演瘋狂創意，繽紛視覺加上穿越劇方式，笑稱「我們也有屬於百合花式風格的《細說台灣》了！ 」
推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據 百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出
推出線上互動「掠猴之遊戲」 邀請樂迷一起上網協尋偷吃出軌證據
〈掠猴之歌〉MV還埋藏樂團先前推出的線上互動遊戲「掠猴之遊戲Monkey-Catching Game 」彩蛋，邀請樂迷一邊看MV也能從中挖掘，主唱奕碩表示：「〈掠猴之歌〉的編曲散發一股電視遊樂器復古感，所以我們打造一款8bit風格小遊戲，還讓三位團員化身三種樂器人物，包含月琴、電貝斯、北管通鼓，陪伴玩家一起闖關。」 遊戲融合台灣既有街景文化特色，出現手搖杯店、小吃攤等，讓樂迷扮起偵探，協助苦主「金蕉小姐」搜集猴子老公出軌的證據。隨著MV與遊戲一併公開，百合花也宣布將啟動「2023 變猴弄」海外巡迴 ，將在4月底前進新加坡、馬來西亞，將台灣獨特音樂特色推廣到世界各地。
百合花宣布啟動海外巡演計畫！ 四月底前進星馬演出
'
+ )
+ })
+})
diff --git a/src/transformers/sanitize.test.ts b/src/transformers/sanitize.test.ts
index 3ac04b9d..1fe42742 100644
--- a/src/transformers/sanitize.test.ts
+++ b/src/transformers/sanitize.test.ts
@@ -10,7 +10,7 @@ const expectSanitizeHTML = async (input: string, output: string) => {
* Tests
*/
// via https://github.com/leizongmin/js-xss/blob/master/test/test_xss.js
-describe('Basic', async () => {
+describe('Sanitization: basic', async () => {
test('unknown attributes', async () => {
await expectSanitizeHTML('pp ', 'pp ')
await expectSanitizeHTML('pp ', 'pp ')
@@ -34,7 +34,7 @@ describe('Basic', async () => {
})
// https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
-describe('XSS_Filter_Evasion_Cheat_Sheet', async () => {
+describe('Sanitization: XSS_Filter_Evasion_Cheat_Sheet', async () => {
test('scripts', async () => {
await expectSanitizeHTML(
'> 
