removed @Scoped tags

eric2788 · Mar 12, 2024 · 54cf4c4 · 54cf4c4
1 parent ebc302d
commit 54cf4c4
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 11 deletions.
diff --git a/src/components/DraggableFloatingButton.tsx b/src/components/DraggableFloatingButton.tsx
@@ -78,7 +78,7 @@ function DraggableFloatingButton(props: DraggableFloatingButtonProps): JSX.Eleme
                     height: 25,
                 }}
             >
-                <div className="w-full h-full rounded-full bg-white flex justify-center items-center">
+                <div playwright-test="draggable" className="w-full h-full rounded-full bg-white flex justify-center items-center">
                     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x={0} y={0}
                         viewBox="0 0 18 18" enableBackground="new 0 0 18 18" xmlSpace="preserve">
                         <path fill="#ffffff" d="M9,1L1,9l5.2,5.2L9,17l8-8L9,1z M7,12H6v-1h1V12z M7,7H6V6h1V7z M12,12h-1v-1h1V12z M11,6h1v1h-1V6z" />

diff --git a/src/components/TailwindScope.tsx b/src/components/TailwindScope.tsx
@@ -7,14 +7,18 @@ import ReactShadowRoot from 'react-shadow-root';
  * @param {Object} props - The component props.
  * @param {React.ReactNode} props.children - The children to be rendered within the Tailwind scope.
  * @param {boolean} [props.dark] - Optional. Specifies whether the dark mode should be applied.
+ * @param {string[]} [props.styles] - Optional. Additional styles to be applied within the Tailwind scope.
  * @returns {JSX.Element} The rendered TailwindScope component.
  */
-function TailwindScope({ children, dark }: { children: React.ReactNode, dark?: boolean }): JSX.Element {
+function TailwindScope({ children, dark, styles }: { children: React.ReactNode, dark?: boolean, styles?: string[] }): JSX.Element {
     return (
         <div className={dark === true ? `dark` : ''}>
             <ReactShadowRoot>
-                <style>{styleText}</style>
-                {children}
+                <style key="tailwind">{styleText}</style>
+                {styles?.map((style, i) => <style key={i}>{style}</style>)}
+                <div className="relative z-[3000]">
+                    {children}
+                </div>
             </ReactShadowRoot>
         </div>
     )

diff --git a/src/features/jimaku/components/JimakuLine.tsx b/src/features/jimaku/components/JimakuLine.tsx
@@ -24,7 +24,7 @@ function JimakuLine({ item, show, index, observer }: JimakuLineProps): JSX.Eleme
     const ref = useRowOptimizer<HTMLParagraphElement>(observer)
 
     return (
-        <p ref={ref} onContextMenu={show} jimaku-hash={item.hash} jimaku-uid={item.uid} jimaku-index={index}>
+        <p ref={ref} onContextMenu={show} jimaku-hash={item.hash} jimaku-index={index}>
             {item.text}
         </p>
     )

diff --git a/tests/content.spec.ts b/tests/content.spec.ts
@@ -11,9 +11,9 @@ test('測試主元素是否存在', async ({ content }) => {
     await expect(csui.locator('#bjf-root')).toBeAttached()
 })
 
-test('测试扩展CSS有否影响到外围', { tag: '@scoped' }, async ({ content, room }) => {
+test('测试扩展CSS有否影响到外围', async ({ content, room, isThemeRoom }) => {
 
-    test.skip(await room.isThemePage(), '此測試不適用於大海報房間')
+    test.skip(isThemeRoom, '此測試不適用於大海報房間')
 
     logger.info('正在測試 CSS 有否外溢...')
 

diff --git a/tests/features/jimaku.spec.ts b/tests/features/jimaku.spec.ts
@@ -277,7 +277,7 @@ test('测试添加同传用户名单/黑名单', async ({ content, context, tabU
     }
 })
 
-test('測試右鍵同傳字幕來屏蔽同傳發送者', { tag: "@scoped" }, async ({ content, room, page }) => {
+test('測試右鍵同傳字幕來屏蔽同傳發送者', async ({ content, room, page }) => {
 
     await content.locator('#subtitle-list').waitFor({ state: 'visible' })
 
@@ -308,9 +308,9 @@ test('測試右鍵同傳字幕來屏蔽同傳發送者', { tag: "@scoped" }, asy
 
 })
 
-test('測試全屏時字幕區塊是否存在 + 顯示切換', async ({ content: p, room }) => {
+test('測試全屏時字幕區塊是否存在 + 顯示切換', async ({ content: p, room, isThemeRoom }) => {
 
-    test.skip(await room.isThemePage(), '此測試不適用於大海報房間')
+    test.skip(isThemeRoom, '此測試不適用於大海報房間')
 
     const area = p.locator('#jimaku-area div#subtitle-list')
     await expect(area).toBeAttached()

diff --git a/tests/features/superchat.spec.ts b/tests/features/superchat.spec.ts
@@ -86,7 +86,7 @@ test('測試寫入醒目留言和醒目留言按鈕 (插入/刪除/下載)', asy
 
 test('測試拖拽按鈕', async ({ content }) => {
 
-    const dragPoint = content.locator('bjf-csui section#bjf-feature-superchat > div > div')
+    const dragPoint = content.locator('bjf-csui section#bjf-feature-superchat [playwright-test="draggable"]')
     const p1 = content.locator('#rank-list-ctnr-box')
     const p2 = content.locator('#head-info-vm')