refactor(core): CORE-12 type template resources and verify bundled notices

test/browser/template-resources.spec.js

@@ -0,0 +1,139 @@
+import { expect, test } from './fixtures.js'
+
+for (const core of ['published', 'candidate']) {
+  test(`${core}: native fullscreen uses a real gesture when the engine supports it`, async ({ page }, testInfo) => {
+    await page.goto(`/test/player.html?core=${core}&chapter=published`)
+    await page.evaluate(() => window.createPlayer('/test/pattern.mp4'))
+    await expect.poll(() => page.evaluate(() => window.art.isReady)).toBe(true)
+    const capability = await page.evaluate(() => ({
+      native: Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled),
+      video: Boolean(window.art.video.webkitSupportsFullscreen),
+    }))
+    await testInfo.attach('native-fullscreen-capability', { contentType: 'application/json', body: JSON.stringify(capability) })
+    if (!capability.native) {
+      expect(await page.evaluate(() => Boolean(document.fullscreenElement || document.webkitFullscreenElement))).toBe(false)
+      return
+    }
+    await page.evaluate(() => {
+      window.fullscreenEvents = []
+      window.art.on('fullscreen', value => window.fullscreenEvents.push(value))
+      document.querySelector('#play').onclick = () => {
+        window.art.fullscreen = true
+      }
+    })
+    await page.click('#play')
+    await expect.poll(() => page.evaluate(() => {
+      const art = window.art
+      return art.fullscreen && (document.fullscreenElement || document.webkitFullscreenElement) === art.template.$player && art.template.$player.classList.contains('art-fullscreen')
+    })).toBe(true)
+    await page.evaluate(() => {
+      window.art.fullscreen = false
+    })
+    await expect.poll(() => page.evaluate(() => !window.art.fullscreen && !window.art.template.$player.classList.contains('art-fullscreen'))).toBe(true)
+    expect(await page.evaluate(() => window.fullscreenEvents)).toEqual([true, false])
+    await page.evaluate(() => window.art.destroy())
+  })
+
+  test(`${core}: SSR mounting preserves nodes, listeners, selectors and style ownership`, async ({ page }) => {
+    await page.goto(`/test/player.html?core=${core}&chapter=published`)
+    const result = await page.evaluate(() => {
+      const container = document.querySelector('.player')
+      container.innerHTML = window.Artplayer.html
+      const original = Array.from(container.querySelectorAll('*'))
+      const video = container.querySelector('video')
+      const player = container.firstElementChild
+      let clicks = 0
+      player.addEventListener('contract', () => clicks++)
+      const style = document.getElementById('artplayer-style')
+      const art = new window.Artplayer({ container, url: '', useSSR: true, backdrop: true })
+      const { query } = art.template
+      player.dispatchEvent(new Event('contract'))
+      const mounted = {
+        retained: original.every(node => container.contains(node)),
+        media: art.video === video,
+        query: query('.art-video') === video && query('.absent') === null,
+        backdrop: player.classList.contains('art-backdrop'),
+        track: art.template.$track === video.querySelector('track'),
+        clicks,
+        style: style.textContent === window.Artplayer.STYLE,
+      }
+      art.destroy(false)
+      return { ...mounted, retainedOnDestroy: container.contains(player), destroyed: player.classList.contains('art-destroy'), styleRetained: document.getElementById('artplayer-style') === style }
+    })
+    expect(result).toEqual({ retained: true, media: true, query: true, backdrop: true, track: true, clicks: 1, style: true, retainedOnDestroy: true, destroyed: true, styleRetained: true })
+  })
+
+  test(`${core}: proxy replacement preserves callback and node identity`, async ({ page }) => {
+    await page.goto(`/test/player.html?core=${core}&chapter=published`)
+    const result = await page.evaluate(() => {
+      const container = document.querySelector('.player')
+      container.innerHTML = window.Artplayer.html
+      const track = container.querySelector('track')
+      const originalVideo = container.querySelector('video')
+      const video = document.createElement('video')
+      video.className = 'before'
+      let callback
+      let context
+      let count
+      const art = new window.Artplayer({ container, url: '', useSSR: true, proxy(art) {
+        callback = art
+        context = this
+        count = arguments.length
+        return video
+      } })
+      const result = { callback: callback === art && context === art, count, media: art.video === video, className: video.className, retainedTrack: art.template.$track === track, detachedTrack: !container.contains(track), detachedVideo: !container.contains(originalVideo) }
+      art.destroy()
+      return { ...result, empty: container.innerHTML === '' }
+    })
+    expect(result).toEqual({ callback: true, count: 1, media: true, className: 'art-video', retainedTrack: true, detachedTrack: true, detachedVideo: true, empty: true })
+  })
+
+  test(`${core}: icon access preserves descriptors and moves custom DOM into fresh wrappers`, async ({ page }) => {
+    await page.goto(`/test/player.html?core=${core}&chapter=published`)
+    const result = await page.evaluate(() => {
+      const node = document.createElement('b')
+      node.textContent = 'custom'
+      const art = new window.Artplayer({ container: '.player', url: '', icons: { custom: node, markup: '<em>markup</em>' } })
+      const first = art.icons.custom
+      const second = art.icons.custom
+      const builtin = art.icons.play
+      const descriptor = Object.getOwnPropertyDescriptor(art.icons, 'custom')
+      const result = { tag: second.tagName, fresh: first !== second, moved: first.childNodes.length === 0 && second.firstChild === node, classes: second.className, markup: art.icons.markup.innerHTML, builtins: builtin !== art.icons.play, flags: [descriptor.enumerable, descriptor.configurable, descriptor.set === undefined], alias: window['artplayer-i18n-zh-cn'].Play }
+      art.destroy()
+      return result
+    })
+    expect(result).toEqual({ tag: 'I', fresh: true, moved: true, classes: 'art-icon art-icon-custom', markup: '<em>markup</em>', builtins: true, flags: [false, false, true], alias: '播放' })
+  })
+
+  test(`${core}: i18n prototype fallback difference and custom keys are explicit`, async ({ page }) => {
+    await page.goto(`/test/player.html?core=${core}&chapter=published`)
+    const result = await page.evaluate(() => {
+      const art = new window.Artplayer({ container: '.player', url: '', lang: 'en' })
+      const inherited = typeof art.i18n.get('constructor')
+      art.i18n.update({ en: { constructor: 'custom', Play: '' } })
+      const result = { inherited, custom: art.i18n.get('constructor'), empty: art.i18n.get('Play'), missing: art.i18n.get('Not translated') }
+      art.destroy()
+      return result
+    })
+    expect(result).toEqual({ inherited: core === 'candidate' ? 'string' : 'function', custom: 'custom', empty: 'Play', missing: 'Not translated' })
+  })
+
+  test(`${core}: fullscreen web retains DOM and CSS hooks through entry and exit`, async ({ page }) => {
+    await page.goto(`/test/player.html?core=${core}&chapter=published`)
+    const result = await page.evaluate(() => {
+      const art = new window.Artplayer({ container: '.player', url: '' })
+      const player = art.template.$player
+      const parent = player.parentNode
+      const events = []
+      art.on('fullscreenWeb', value => events.push(value))
+      art.fullscreenWeb = true
+      const entered = art.fullscreenWeb && player.classList.contains('art-fullscreen-web')
+      art.fullscreenWeb = false
+      const exited = !art.fullscreenWeb && !player.classList.contains('art-fullscreen-web')
+      const identity = art.template.$player === player && player.parentNode === parent
+      art.destroy()
+      return { entered, exited, identity, events }
+    })
+    expect(result).toEqual({ entered: true, exited: true, identity: true, events: [true, false] })
+  })
+}