test(e2e): add e2e test

Author: SoonIter

examples/preact-component-bundle-false/src/assets/logo.svg

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from 'preact';
+import logo from '../../assets/logo.svg';
 import styles from './index.module.scss';
 
 interface CounterButtonProps {
@@ -10,7 +11,12 @@ export const CounterButton: FunctionComponent<CounterButtonProps> = ({
   onClick,
   label,
 }) => (
-  <button type="button" className={styles.button} onClick={onClick}>
+  <button
+    type="button"
+    className={`${styles.button} counter-button`}
+    onClick={onClick}
+  >
+    <img src={logo} alt="react" />
     {label}
   </button>
 );

examples/preact-component-bundle-false/src/components/CounterButton/index.tsx

@@ -2,3 +2,8 @@ declare module '*.module.scss' {
   const classes: { [key: string]: string };
   export default classes;
 }
+
+declare module '*.svg' {
+  const url: string;
+  export default url;
+}

examples/preact-component-bundle-false/src/env.d.ts

@@ -1,3 +1,10 @@
+.counter-title {
+  width: 100px;
+  height: 100px;
+  background: no-repeat url('./assets/logo.svg');
+  background-size: cover;
+}
+
 .counter-text {
   font-size: 50px;
 }

examples/preact-component-bundle-false/src/index.scss

@@ -1,3 +1,3 @@
 .button {
-  background: url('../../assets/logo.svg') no-repeat;
+  background: yellow;
 }

examples/react-component-bundle-false/src/components/CounterButton/index.module.scss

@@ -11,7 +11,11 @@ export const CounterButton: React.FC<CounterButtonProps> = ({
   onClick,
   label,
 }) => (
-  <button type="button" className={styles.button} onClick={onClick}>
+  <button
+    type="button"
+    className={`${styles.button} counter-button`}
+    onClick={onClick}
+  >
     <img src={logo} alt="react" />
     {label}
   </button>

examples/react-component-bundle-false/src/components/CounterButton/index.tsx

@@ -1,3 +1,3 @@
 .button {
-  background: url('../../assets/logo.svg') no-repeat;
+  background: yellow;
 }

examples/react-component-bundle/src/components/CounterButton/index.module.scss

@@ -11,7 +11,11 @@ export const CounterButton: React.FC<CounterButtonProps> = ({
   onClick,
   label,
 }) => (
-  <button type="button" className={styles.button} onClick={onClick}>
+  <button
+    type="button"
+    className={`${styles.button} counter-button`}
+    onClick={onClick}
+  >
     <img src={logo} alt="react" />
     {label}
   </button>

examples/react-component-bundle/src/components/CounterButton/index.tsx

@@ -40,7 +40,15 @@ async function assetShouldWork(page: Page) {
   assert(h1El);
   expect(h1El).toHaveCSS('background', /static\/svg\/logo/);
 
-  // TODO: asset in js
+  // asset by import url from './assets/logo.svg'
+  const imgEls = await page.$$('.counter-button>img');
+  expect(imgEls).toHaveLength(2);
+  const srcList = await Promise.all(
+    imgEls.map((imgEl) => imgEl.getAttribute('src')),
+  )
+  for (const src of srcList) {
+    expect(src).toMatch(/static\/svg\/logo/);
+  }
 }
 
 test('should render example "react-component-bundle" successfully', async ({