test: use getBg and getColor (#20205)

Author: sapphi-red

playground/assets/__tests__/assets.spec.ts

@@ -438,10 +438,7 @@ describe('svg fragments', () => {
   })
 
   test('via css url()', async () => {
-    const bg = await page.evaluate(() => {
-      return getComputedStyle(document.querySelector('.icon')).backgroundImage
-    })
-    expect(bg).toMatch(/svg#icon-clock-view"\)$/)
+    expect(await getBg('.icon')).toMatch(/svg#icon-clock-view"\)$/)
   })
 
   test('from js import', async () => {

playground/assets/__tests__/encoded-base/assets-encoded-base.spec.ts

@@ -163,10 +163,7 @@ describe('svg fragments', () => {
   })
 
   test('via css url()', async () => {
-    const bg = await page.evaluate(
-      () => getComputedStyle(document.querySelector('.icon')).backgroundImage,
-    )
-    expect(bg).toMatch(/svg#icon-clock-view"\)$/)
+    expect(await getBg('.icon')).toMatch(/svg#icon-clock-view"\)$/)
   })
 
   test('from js import', async () => {

playground/assets/__tests__/relative-base/assets-relative-base.spec.ts

@@ -176,10 +176,7 @@ describe('svg fragments', () => {
   })
 
   test('via css url()', async () => {
-    const bg = await page.evaluate(() => {
-      return getComputedStyle(document.querySelector('.icon')).backgroundImage
-    })
-    expect(bg).toMatch(/svg#icon-clock-view"\)$/)
+    expect(await getBg('.icon')).toMatch(/svg#icon-clock-view"\)$/)
   })
 
   test('from js import', async () => {

playground/assets/__tests__/runtime-base/assets-runtime-base.spec.ts

@@ -171,10 +171,7 @@ describe('svg fragments', () => {
   })
 
   test('via css url()', async () => {
-    const bg = await page.evaluate(() => {
-      return getComputedStyle(document.querySelector('.icon')).backgroundImage
-    })
-    expect(bg).toMatch(/svg#icon-clock-view"\)$/)
+    expect(await getBg('.icon')).toMatch(/svg#icon-clock-view"\)$/)
   })
 
   test('from js import', async () => {

playground/assets/__tests__/url-base/assets-url-base.spec.ts

@@ -165,10 +165,7 @@ describe('svg fragments', () => {
   })
 
   test('via css url()', async () => {
-    const bg = await page.evaluate(
-      () => getComputedStyle(document.querySelector('.icon')).backgroundImage,
-    )
-    expect(bg).toMatch(/svg#icon-clock-view"\)$/)
+    expect(await getBg('.icon')).toMatch(/svg#icon-clock-view"\)$/)
   })
 
   test('from js import', async () => {

playground/dynamic-import/__tests__/dynamic-import.spec.ts

@@ -62,10 +62,7 @@ test('should load dynamic import with vars', async () => {
 // dynamic import css
 test('should load dynamic import with css', async () => {
   await page.click('.css')
-  await untilUpdated(
-    () => page.$eval('.view', (node) => window.getComputedStyle(node).color),
-    'rgb(255, 0, 0)',
-  )
+  await untilUpdated(() => getColor('.view'), 'red')
 })
 
 test('should load dynamic import with vars', async () => {