fix: fix tests

package.json

@@ -1,11 +1,9 @@
 {
-  "name": "retro-assembly",
   "private": true,
-  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev-test": "playwright test -c tests/e2e --headed --ui",
+    "dev:test": "playwright test -c tests/e2e --headed --ui",
     "dev": "vite",
     "lint": "eslint src",
     "prepare-test": "node ./scripts/prepare-test.js",
@@ -36,7 +34,7 @@
     "ky": "1.0.1",
     "lodash-es": "4.17.21",
     "mitt": "3.0.1",
-    "nostalgist": "0.4.0",
+    "nostalgist": "0.4.1",
     "p-queue": "7.4.1",
     "path-browserify": "1.0.1",
     "query-string": "8.1.0",
@@ -68,7 +66,7 @@
     "@types/wicg-file-system-access": "2023.10.1",
     "@vitejs/plugin-react-swc": "3.4.0",
     "autoprefixer": "10.4.16",
-    "browserfs": "^1.4.3",
+    "browserfs": "1.4.3",
     "eslint": "8.51.0",
     "is-ci": "3.0.1",
     "mkdirp": "3.0.1",

src/core/classes/emulator.ts

@@ -15,18 +15,15 @@ interface EmulatorConstructorOptions {
 }
 
 const defaultStyle = {
-  backgroundColor: 'black',
   backgroundImage:
     'repeating-linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), repeating-linear-gradient(45deg, #000 25%, #222 25%, #222 75%, #000 75%, #000)',
   backgroundPosition: '0 0,15px 15px',
   backgroundSize: '30px 30px',
   cursor: 'default',
-  display: 'block',
-  imageRendering: 'pixelated', // this boosts performance!
-  inset: '0',
-  maxHeight: '100%',
-  maxWidth: '100%',
   position: 'fixed',
+  inset: '0',
+  height: '100%',
+  width: '100%',
   zIndex: '10',
 }
 
@@ -60,14 +57,9 @@ export class Emulator {
     this.additionalFiles = additionalFiles
     this.core = core ?? ''
     this.canvas = document.createElement('canvas')
-    this.canvas.id = 'canvas'
-    this.canvas.width = 900
-    this.canvas.height = 900
     this.previousActiveElement = document.activeElement
-    this.canvas.tabIndex = 0
     this.coreConfig = coreConfig
     this.retroarchConfig = retroarchConfig
-    this.canvas.dataset.testid = 'emulator'
     this.style = { ...defaultStyle, ...style }
 
     this.resizeCanvas = this.resizeCanvas.bind(this)
@@ -92,6 +84,7 @@ export class Emulator {
 
     this.nostalgist = await Nostalgist.launch({
       style: this.style,
+      element: this.canvas,
       core: this.core,
       rom: [
         { fileName, fileContent },

tests/e2e/homepage.spec.ts

@@ -52,7 +52,7 @@ test('navigate systems', async ({ page }) => {
 
 test('launch game', async ({ page }) => {
   const gameEntryButton = page.getByTestId('game-entry-button')
-  const emulator = page.getByTestId('emulator')
+  const emulator = page.locator('#canvas')
   await expect(emulator).not.toBeAttached()
 
   await gameEntryButton.click()

tests/e2e/menu-overlay.spec.ts

@@ -33,7 +33,7 @@ test.beforeEach(async ({ page }) => {
   await expect(dialog).not.toBeVisible()
 
   await page.getByTestId('game-entry-button').click()
-  await page.getByTestId('emulator').waitFor()
+  await page.locator('#canvas').waitFor()
 })
 
 test('open and close menu overlay', async ({ page }) => {
@@ -50,7 +50,7 @@ test('open and close menu overlay', async ({ page }) => {
 
 test('resume', async ({ page }) => {
   const menuOverlay = page.getByTestId('menu-overlay')
-  const emulator = page.getByTestId('emulator')
+  const emulator = page.locator('#canvas')
 
   await page.keyboard.press('Escape')
   await expect(menuOverlay).toBeVisible()
@@ -62,7 +62,7 @@ test('resume', async ({ page }) => {
 
 test('restart', async ({ page }) => {
   const menuOverlay = page.getByTestId('menu-overlay')
-  const emulator = page.getByTestId('emulator')
+  const emulator = page.locator('#canvas')
 
   await page.keyboard.press('Escape')
   await page.getByTestId('menu-item-restart').click()
@@ -76,7 +76,7 @@ test('save state', async ({ page }) => {
   })
 
   const menuOverlay = page.getByTestId('menu-overlay')
-  const emulator = page.getByTestId('emulator')
+  const emulator = page.locator('#canvas')
   const loadingScreen = page.getByTestId('loading-screen')
 
   await expect(loadingScreen).not.toBeAttached()
@@ -93,7 +93,7 @@ test('save state', async ({ page }) => {
 
 test('load state', async ({ page }) => {
   const menuOverlay = page.getByTestId('menu-overlay')
-  const emulator = page.getByTestId('emulator')
+  const emulator = page.locator('#canvas')
 
   await page.keyboard.press('Escape')
   await page.getByTestId('menu-item-load-state').click()
@@ -108,7 +108,7 @@ test('save and exit', async ({ page }) => {
   })
 
   const menuOverlay = page.getByTestId('menu-overlay')
-  const emulator = page.getByTestId('emulator')
+  const emulator = page.locator('#canvas')
   const loadingScreen = page.getByTestId('loading-screen')
 
   await expect(loadingScreen).not.toBeAttached()

tests/e2e/single-rom.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test'
 test('play a single ROM file', async ({ page }) => {
   await page.goto('/')
 
-  const emulator = page.getByTestId('emulator')
+  const emulator = page.locator('#canvas')
   await expect(emulator).not.toBeAttached()
 
   const fileChooserPromise = page.waitForEvent('filechooser')