test(query-devtools/utils): add tests for 'setupStyleSheet'

Author: sukvvon

packages/query-devtools/src/__tests__/utils.test.ts

@@ -6,6 +6,7 @@ import {
   getMutationStatusColor,
   getQueryStatusColorByLabel,
   getSidedProp,
+  setupStyleSheet,
   updateNestedDataByPath,
 } from '../utils'
 import type { MutationStatus } from '@tanstack/query-core'
@@ -887,4 +888,79 @@ describe('Utils tests', () => {
       expect(convertRemToPixels(1)).toBe(15.5)
     })
   })
+
+  describe('setupStyleSheet', () => {
+    afterEach(() => {
+      document.head.querySelector('#_goober')?.remove()
+    })
+
+    it('should not insert any style tag when "nonce" is missing', () => {
+      setupStyleSheet()
+
+      expect(document.head.querySelector('#_goober')).toBeNull()
+    })
+
+    it('should not insert any style tag when "nonce" is an empty string', () => {
+      setupStyleSheet('')
+
+      expect(document.head.querySelector('#_goober')).toBeNull()
+    })
+
+    it('should append a style tag with id "_goober" to "document.head"', () => {
+      setupStyleSheet('test-nonce')
+
+      const styleTag = document.head.querySelector('#_goober')
+      expect(styleTag).not.toBeNull()
+      expect(styleTag?.tagName).toBe('STYLE')
+    })
+
+    it('should set the "nonce" attribute on the inserted style tag', () => {
+      setupStyleSheet('test-nonce')
+
+      expect(
+        document.head.querySelector('#_goober')?.getAttribute('nonce'),
+      ).toBe('test-nonce')
+    })
+
+    it('should not insert a duplicate style tag when "document.head" already has one', () => {
+      setupStyleSheet('first-nonce')
+      setupStyleSheet('second-nonce')
+
+      const styleTags = document.head.querySelectorAll('#_goober')
+      expect(styleTags).toHaveLength(1)
+      expect(styleTags[0]?.getAttribute('nonce')).toBe('first-nonce')
+    })
+
+    it('should append the style tag to the provided "ShadowRoot" target', () => {
+      const host = document.createElement('div')
+      const shadow = host.attachShadow({ mode: 'open' })
+
+      setupStyleSheet('test-nonce', shadow)
+
+      expect(shadow.querySelector('#_goober')).not.toBeNull()
+      expect(document.head.querySelector('#_goober')).toBeNull()
+    })
+
+    it('should not insert a duplicate style tag when the target already has one', () => {
+      const host = document.createElement('div')
+      const shadow = host.attachShadow({ mode: 'open' })
+
+      setupStyleSheet('first-nonce', shadow)
+      setupStyleSheet('second-nonce', shadow)
+
+      const styleTags = shadow.querySelectorAll('#_goober')
+      expect(styleTags).toHaveLength(1)
+      expect(styleTags[0]?.getAttribute('nonce')).toBe('first-nonce')
+    })
+
+    it('should not insert into the target when "document.head" already has a style tag', () => {
+      const host = document.createElement('div')
+      const shadow = host.attachShadow({ mode: 'open' })
+
+      setupStyleSheet('first-nonce')
+      setupStyleSheet('second-nonce', shadow)
+
+      expect(shadow.querySelector('#_goober')).toBeNull()
+    })
+  })
 })