Skip to content

Commit b40163c

Browse files
ElMassimoElMassimo
authored
test: coverage to settings related with backend integrations (#3081)
1 parent 978d991 commit b40163c

File tree

8 files changed

+190
-0
lines changed

8 files changed

+190
-0
lines changed

‎packages/playground/backend-integration/__tests__/backend-integration.spec.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { isBuild, readManifest } from '../../testUtils'
2+
3+
const outerAssetMatch = isBuild
4+
? /\/dev\/assets\/logo\.\w{8}\.png/
5+
: /\/dev\/@fs\/.+?\/images\/logo\.png/
6+
7+
test('should have no 404s', () => {
8+
browserLogs.forEach((msg) => {
9+
expect(msg).not.toMatch('404')
10+
})
11+
})
12+
13+
describe('asset imports from js', () => {
14+
test('file outside root', async () => {
15+
expect(
16+
await page.textContent('.asset-reference.outside-root .asset-url')
17+
).toMatch(outerAssetMatch)
18+
})
19+
})
20+
21+
if (isBuild) {
22+
test('manifest', async () => {
23+
const manifest = readManifest('dev')
24+
const htmlEntry = manifest['index.html']
25+
expect(htmlEntry.css.length).toEqual(1)
26+
expect(htmlEntry.assets.length).toEqual(1)
27+
})
28+
}

‎packages/playground/backend-integration/frontend/entrypoints/global.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@import '~/styles/background.css';
2+
@import '../../references.css';
3+
4+
html, body {
5+
font-family: sans-serif;
6+
line-height: 2.4rem;
7+
}
8+
9+
body {
10+
margin: 4vh auto;
11+
max-width: 800px;
12+
padding: 0 4vw;
13+
}
14+
15+
ul {
16+
padding: 0 .4em;
17+
margin: 0;
18+
}
19+
20+
li {
21+
display: flex;
22+
align-items: center;
23+
}
24+
25+
img {
26+
height: 32px;
27+
width: 32px;
28+
}

‎packages/playground/backend-integration/frontend/entrypoints/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
3+
<link rel="stylesheet" href="/global.css" />
4+
5+
<h1>Backend Integration</h1>
6+
7+
<p>
8+
This test configures the <code>root</code> to simulate a Laravel/Rails setup.
9+
</p>
10+
11+
<h2>JS Asset References</h2>
12+
13+
<ul>
14+
<li class="asset-reference outside-root">Asset Outside Root</li>
15+
</ul>
16+
17+
<h2>CSS Asset References</h2>
18+
19+
<ul>
20+
<li>
21+
Background URL with Alias:
22+
<div class="background-asset outside-root--aliased"></div>
23+
</li>
24+
<li>
25+
Background URL with Relative Path:
26+
<div class="background-asset outside-root--relative"></div>
27+
</li>
28+
</ul>
29+
30+
<script type="module">
31+
import './global.css'
32+
33+
// Importing a file outside the `root` should provide an @fs path.
34+
import outsideRootUrl from '~/images/logo.png'
35+
setAssetReference('.outside-root', outsideRootUrl)
36+
37+
// Helper: Allows to test the URL content as well as the request being served.
38+
function setAssetReference(elSelector, url) {
39+
const text = document.createElement('code')
40+
text.classList.add('asset-url')
41+
text.textContent = url
42+
43+
const img = document.createElement('img')
44+
img.classList.add('asset-preview')
45+
img.src = url
46+
47+
const el = document.querySelector(`.asset-reference${elSelector}`)
48+
el.appendChild(img)
49+
el.appendChild(text)
50+
}
51+
</script>

‎packages/playground/backend-integration/frontend/images/logo.png‎

12.5 KB
Loading

‎packages/playground/backend-integration/frontend/styles/background.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.background-asset {
2+
background-repeat: no-repeat;
3+
background-size: 100%;
4+
display: inline-block;
5+
height: 32px;
6+
width: 32px;
7+
}
8+
9+
.outside-root--aliased {
10+
background-image: url('~/images/logo.png');
11+
}
12+
13+
.outside-root--relative {
14+
background-image: url('../images/logo.png');
15+
}

‎packages/playground/backend-integration/package.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "test-backend-integration",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"debug": "node --inspect-brk ../../vite/bin/vite",
9+
"serve": "vite preview"
10+
}
11+
}

‎packages/playground/backend-integration/references.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.asset-reference {
2+
display: grid;
3+
grid-template-areas:
4+
"summary preview ."
5+
"url url url";
6+
}
7+
8+
.asset-url {
9+
grid-area: url;
10+
white-space: nowrap;
11+
}

‎packages/playground/backend-integration/vite.config.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const path = require('path')
2+
const glob = require('fast-glob')
3+
const normalizePath = require('vite').normalizePath
4+
5+
/**
6+
* @returns {import('vite').Plugin}
7+
*/
8+
function BackendIntegrationExample() {
9+
return {
10+
name: 'backend-integration',
11+
config() {
12+
const projectRoot = __dirname
13+
const sourceCodeDir = path.join(projectRoot, 'frontend')
14+
const root = path.join(sourceCodeDir, 'entrypoints')
15+
const outDir = path.relative(root, path.join(projectRoot, 'dist/dev'))
16+
17+
const entrypoints = glob
18+
.sync(`${normalizePath(root)}/**/*`, { onlyFiles: true })
19+
.map((filename) => [path.relative(root, filename), filename])
20+
21+
return {
22+
build: {
23+
manifest: true,
24+
outDir,
25+
rollupOptions: {
26+
input: Object.fromEntries(entrypoints)
27+
}
28+
},
29+
root,
30+
resolve: {
31+
alias: {
32+
'~': sourceCodeDir
33+
}
34+
}
35+
}
36+
}
37+
}
38+
}
39+
40+
/**
41+
* @returns {import('vite').UserConfig}
42+
*/
43+
module.exports = {
44+
base: '/dev/',
45+
plugins: [BackendIntegrationExample()]
46+
}

0 commit comments

Comments
 (0)
⚡