assets-relative-base.spec.ts — vite Source File

Source Code

import { beforeAll, describe, expect, test } from 'vitest'
import {
  browserLogs,
  findAssetFile,
  getBg,
  getColor,
  isBuild,
  page,
} from '~utils'

const absoluteAssetMatch = isBuild
  ? /http.*\/other-assets\/asset-[-\w]{8}\.png/
  : '/nested/asset.png'

// Asset URLs in CSS are relative to the same dir, the computed
// style returns the absolute URL in the test
const cssBgAssetMatch = absoluteAssetMatch

const iconMatch = `/icon.png`

const absoluteIconMatch = isBuild
  ? /http.*\/icon-[-\w]{8}\.png/
  : '/nested/icon.png'

const absolutePublicIconMatch = isBuild ? /http.*\/icon\.png/ : '/icon.png'

test('should have no 404s', () => {
  browserLogs.forEach((msg) => {
    expect(msg).not.toMatch('404')
  })
})

describe('raw references from /public', () => {
  test('load raw js from /public', async () => {
    expect(await page.textContent('.raw-js')).toMatch('[success]')
  })

  test('load raw css from /public', async () => {
    expect(await getColor('.raw-css')).toBe('red')
  })
})

test('import-expression from simple script', async () => {
  expect(await page.textContent('.import-expression')).toMatch(
    '[success][success]',
  )
})

describe('asset imports from js', () => {
  test('relative', async () => {
    expect(await page.textContent('.asset-import-relative')).toMatch(
      cssBgAssetMatch,
    )
  })

  test('absolute', async () => {
    expect(await page.textContent('.asset-import-absolute')).toMatch(
      cssBgAssetMatch,
    )
  })
// ... (185 more lines)