test: add some basic test cases

.gitignore

@@ -2,5 +2,5 @@ dev-dist
 dist
 node_modules
 test-results
-tests/fixtures
+tests/fixtures/roms
 vendors

package.json

@@ -61,6 +61,7 @@
     "@types/ini": "1.3.31",
     "@types/jquery": "3.5.19",
     "@types/lodash-es": "4.17.9",
+    "@types/node": "20.7.0",
     "@types/path-browserify": "1.0.0",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",

src/views/components/common/cloud-service-login-button.tsx

@@ -98,6 +98,7 @@ export function CloudServiceLoginButton({
   return (
     <div className='flex flex-col items-stretch justify-center gap-y-4 px-10'>
       <BaseButton
+        data-testid='authorize-link'
         href={authorizeUrlState.value}
         onClick={login}
         rel='noreferrer'

src/views/components/home-screen/game-entries-grid/game-entry-button.tsx

@@ -19,7 +19,7 @@ export function GameEntryButton({
   ...props
 }: GameEntryButtonProps) {
   return (
-    <button className='group relative' {...props}>
+    <button className='group relative' {...props} data-testid='game-entry-button'>
       <div
         className={clsx(
           'opacity-1 block h-full w-full bg-gray-100 text-left transition-transform group-focus:transform-gpu',

src/views/components/home-screen/index.tsx

@@ -143,7 +143,7 @@ export function HomeScreen() {
           <>
             <div className='h-full w-full' ref={gridContainerRef}>
               <GameEntryGrid
-                className='game-entry-grid absolute bottom-0 flex-1 !overflow-x-hidden'
+                className='a game-entry-grid absolute bottom-0 flex-1 !overflow-x-hidden'
                 columnCount={columnCount}
                 columnWidth={columnWidth}
                 height={gridHeight}

src/views/components/home-screen/top-bar/index.tsx

@@ -8,7 +8,10 @@ export function TopBar() {
   const systems = useAtomValue(systemsAtom)
 
   return (
-    <div className='system-navigation z-[1] flex h-16 w-full items-stretch overflow-x-auto overflow-y-hidden border-b border-black bg-rose-700 text-white'>
+    <div
+      className='system-navigation z-[1] flex h-16 w-full items-stretch overflow-x-auto overflow-y-hidden border-b border-black bg-rose-700 text-white'
+      data-testid='system-navigation'
+    >
       <Logo />
       {systems?.length ? <SystemNavigation /> : <div className='flex-1' />}
       <TopBarDropdown />

src/views/components/home-screen/top-bar/system-navigation-item.tsx

@@ -46,6 +46,7 @@ export function SystemNavigationItem({ system }: { system: any }) {
       onClick={() => setCurrentSystemName(system.name)}
       onFocus={onFocus}
       ref={button}
+      title={system.fullName}
     >
       <div className={clsx('relative z-[1] flex items-center justify-center')}>
         <div className={clsx('flex items-center justify-center')}>

src/views/components/home-screen/top-bar/top-bar-button.tsx

@@ -12,9 +12,10 @@ export const TopBarButton = forwardRef<HTMLButtonElement, TopBarButtonProps>(fun
   return (
     <button
       ref={ref}
+      type='button'
       {...props}
       className={clsx(
-        'relative h-16 text-sm  transition-[opacity,background-color]',
+        'relative h-16 text-sm transition-[opacity,background-color]',
         'after:absolute after:inset-0 after:z-0 after:transition-[background-color,border-width]',
         { 'after:bg-white': highlighted },
         highlighted ? 'hover:after:bg-white' : 'hover:after:bg-rose-900',

src/views/components/setup-wizard/cloud-service/directory-tree-node.tsx

@@ -39,7 +39,10 @@ export function DirectoryTreeNode({ node, cloudService, onSelect }: DirectoryTre
 
   return (
     <div>
-      <div className='flex items-center rounded p-2 py-1 transition-[background-color,color] hover:bg-rose-100 hover:text-rose-700'>
+      <div
+        className='flex items-center rounded p-2 py-1 transition-[background-color,color] hover:bg-rose-100 hover:text-rose-700'
+        data-testid='directory-tree-node'
+      >
         {node.isDirectory ? (
           node.expanded ? (
             <span className='icon-[mdi--folder-open] mr-2 h-6 w-6 text-rose-500' />

src/views/components/setup-wizard/onedrive-button/index.tsx

@@ -33,7 +33,7 @@ export function OnedriveButton() {
         </div>
       }
     >
-      <BaseButton styleType='primary'>
+      <BaseButton data-testid='select-onedrive-directory' styleType='primary'>
         <span className='icon-[logos--microsoft-onedrive] h-5 w-5' />
         OneDrive
       </BaseButton>

tests/e2e/homepage/homepage.spec.ts

@@ -0,0 +1,61 @@
+import { expect, test } from '@playwright/test'
+
+const isUpdatingHar = false
+const harPath = 'tests/fixtures/hars/onedrive.har/onedrive.har'
+const harUrlPattern = /1drv\.com|graph\.microsoft\.com/
+
+function setMockLocalStorage() {
+  if (!localStorage.getItem('onedrive-token')) {
+    localStorage.setItem('onedrive-token', JSON.stringify({ value: { access_token: 'test-token' } }))
+  }
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+  await page.bringToFront()
+
+  const dialog = page.getByRole('dialog')
+
+  if (isUpdatingHar) {
+    await page.routeFromHAR(harPath, { url: harUrlPattern, update: true, updateMode: 'minimal' })
+    const button = page.getByTestId('select-onedrive-directory')
+    await button.click()
+    await dialog.getByRole('link').click()
+  } else {
+    await page.evaluate(setMockLocalStorage)
+    await page.routeFromHAR(harPath, { url: harUrlPattern })
+    const button = page.getByTestId('select-onedrive-directory')
+    await button.click()
+  }
+  const node = dialog.getByTestId('directory-tree-node')
+  await node.filter({ hasText: 'games' }).click()
+  await node.filter({ hasText: 'retro-game-roms-test' }).getByRole('button').click()
+
+  await expect(dialog).not.toBeVisible()
+})
+
+test('navigate systems', async ({ page }) => {
+  const navigation = page.getByTestId('system-navigation')
+  const gbNavigationButton = navigation.getByTitle('Nintendo - Game Boy', { exact: true })
+  const gbaNavigationButton = navigation.getByTitle('Nintendo - Game Boy Advance', { exact: true })
+  const gameEntryButton = page.getByTestId('game-entry-button')
+
+  await expect(gbNavigationButton).toHaveText('Game Boy')
+  await expect(gbaNavigationButton).toBeEmpty()
+  await expect(gameEntryButton).toHaveText('Tobu Tobu Girl')
+
+  await gbaNavigationButton.click()
+
+  await expect(gbNavigationButton).toBeEmpty()
+  await expect(gbaNavigationButton).toHaveText('Game Boy Advance')
+  await expect(gameEntryButton).toHaveText('Celeste Classic')
+})
+
+test('launch game', async ({ page }) => {
+  const gameEntryButton = page.getByTestId('game-entry-button')
+  const emulator = page.getByTestId('emulator')
+  await expect(emulator).not.toBeAttached()
+
+  await gameEntryButton.click()
+  await expect(emulator).toBeVisible()
+})

tests/e2e/playwright.config.ts

@@ -1,10 +1,16 @@
+import process from 'node:process'
 import { defineConfig } from '@playwright/test'
 
 export default defineConfig({
   testDir: '.',
   snapshotDir: 'snapshots',
   snapshotPathTemplate: '{snapshotDir}/{testFilePath}/{testName}-{arg}{ext}',
-  use: { baseURL: 'http://localhost:5173', trace: 'on-first-retry' },
-  webServer: { command: 'pnpm dev', url: 'http://127.0.0.1:5173', reuseExistingServer: true },
+  timeout: 5 * 60 * 1000,
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    headless: Boolean(process.env.CI),
+  },
+  webServer: { command: 'pnpm dev', url: 'http://localhost:5173', reuseExistingServer: true },
   expect: { toHaveScreenshot: { maxDiffPixelRatio: 0.05 } },
 })

tests/e2e/setup-wizard/single-rom.spec.ts

@@ -2,13 +2,15 @@ import { expect, test } from '@playwright/test'
 
 test('play a single ROM file', async ({ page }) => {
   await page.goto('/')
+
+  const emulator = page.getByTestId('emulator')
+  await expect(emulator).not.toBeAttached()
+
   const fileChooserPromise = page.waitForEvent('filechooser')
   await page.getByTestId('select-a-rom').click()
   const fileChooser = await fileChooserPromise
   await fileChooser.setFiles('tests/fixtures/roms/nes/240p Test Suite.nes')
 
-  const emulator = page.getByTestId('emulator')
   await page.waitForLoadState('networkidle')
   await expect(emulator).toBeVisible()
-  await expect(emulator).toHaveScreenshot('240p Test Suite.png')
 })

tests/fixtures/hars/onedrive.har/1884b837b1e8d41e7bd6a618f4142be50bf84ae6.json

@@ -0,0 +1 @@
+{"@odata.context":"https://graph.microsoft.com/v1.0/$metadata#users('thefalsegodofcausality%40outlook.com')/drive/root/children","@odata.count":1,"value":[{"@microsoft.graph.downloadUrl":"https://public.dm.files.1drv.com/y4mVryF8wG87mo9s36fKBgiu_0-p-jZcC-BqwHFd5eUlIFIqqD_SBHjsLL2KVdka0duYTENt181PvfZeteQht6c0Hbi6Z7V7rUc5L5Ac6GhMPf9btYw31LJ79hkv-ug98XkpI67P74WAY2fLFxK_Ekj2eZIwZmPHmTGwgA2MyHFjfu9mLgIPLOAan0KJ-2h0LxejaO1ZfoVfS9khss4CBTGuww78Sffks5Z3GjmRuYqDJlALrVeiXQoFM1i2se_OO6wINA6b_wK5i4__1id7OlCYg","createdDateTime":"2023-09-26T04:04:10.67Z","cTag":"aYzo3Q0E5RkM2NDU5QzY1QTUhNDk4NzQuMjU3","eTag":"aN0NBOUZDNjQ1OUM2NUE1ITQ5ODc0LjA","id":"7CA9FC6459C65A5!49874","lastModifiedDateTime":"2023-09-26T04:04:10.67Z","name":"Gears of Fate.zip","size":897026,"webUrl":"https://1drv.ms/u/s!AKVlnEXGn8oHg4VS","reactions":{"commentCount":0},"createdBy":{"application":{"displayName":"MSOffice15","id":"480728c5"},"device":{"id":"18000ad422d2ee"},"user":{"displayName":"sandlot arianrhod","id":"7ca9fc6459c65a5"},"oneDriveSync":{"@odata.type":"#microsoft.graph.identity","id":"e637e788-232d-492b-ad38-ffff10000000"}},"lastModifiedBy":{"application":{"displayName":"MSOffice15","id":"480728c5"},"device":{"id":"18000ad422d2ee"},"user":{"displayName":"sandlot arianrhod","id":"7ca9fc6459c65a5"},"oneDriveSync":{"@odata.type":"#microsoft.graph.identity","id":"e637e788-232d-492b-ad38-ffff10000000"}},"parentReference":{"driveId":"7ca9fc6459c65a5","driveType":"personal","id":"7CA9FC6459C65A5!49860","name":"ngp","path":"/drive/root:/games/retro-game-roms-test/ngp"},"file":{"mimeType":"application/zip","hashes":{"quickXorHash":"3l8H5o5lA3H75WOKu63fVCJ388I=","sha1Hash":"47492099B2BC2E55D76B84110897202D492AD7E5","sha256Hash":"3FC32EE151CFD241D7E2EE26AA7D6AF26BCD3E91E1977BDB11591055605B8653"}},"fileSystemInfo":{"createdDateTime":"2023-09-26T04:04:10.67Z","lastModifiedDateTime":"2023-09-25T13:28:58Z"}}]}

tests/fixtures/hars/onedrive.har/196200c1e526f3f0d8047c4df9b0cf6106a5e5d3.json

@@ -0,0 +1 @@
+{"@odata.context":"https://graph.microsoft.com/v1.0/$metadata#users('thefalsegodofcausality%40outlook.com')/drive/root/children","@odata.count":6,"@odata.nextLink":"https://graph.microsoft.com/v1.0/me/drive/root/children?$top=1&$skiptoken=Mg","value":[{"createdDateTime":"2021-02-07T12:29:44.827Z","cTag":"adDo3Q0E5RkM2NDU5QzY1QTUhMzkwNjkuNjM4MzEzMDQ0NTc1MTMwMDAw","eTag":"aN0NBOUZDNjQ1OUM2NUE1ITM5MDY5Ljgy","id":"7CA9FC6459C65A5!39069","lastModifiedDateTime":"2023-09-26T05:54:17.513Z","name":"apps","size":990020,"webUrl":"https://1drv.ms/f/s!AKVlnEXGn8oHgrEd","reactions":{"commentCount":0},"createdBy":{"application":{"displayName":"Tampermonkey","id":"4c1a3122"},"user":{"displayName":"sandlot arianrhod","id":"7ca9fc6459c65a5"}},"lastModifiedBy":{"application":{"displayName":"MSOffice15","id":"480728c5"},"device":{"id":"18000ad422d2ee"},"user":{"displayName":"sandlot arianrhod","id":"7ca9fc6459c65a5"},"oneDriveSync":{"@odata.type":"#microsoft.graph.identity","id":"e637e788-232d-492b-ad38-ffff20000000"}},"parentReference":{"driveId":"7ca9fc6459c65a5","driveType":"personal","id":"7CA9FC6459C65A5!103","path":"/drive/root:"},"fileSystemInfo":{"createdDateTime":"2021-02-07T12:29:48Z","lastModifiedDateTime":"2022-11-05T16:15:25Z"},"folder":{"childCount":2,"view":{"viewType":"thumbnails","sortBy":"name","sortOrder":"ascending"}},"specialFolder":{"name":"apps"}}]}

tests/fixtures/hars/onedrive.har/1bcaf0724db8d494c9ee11087bd35ea5434bc22d.json

@@ -0,0 +1,16 @@
+{
+  "items": [
+    {
+      "name": "Tobu Tobu Girl.zip",
+      "relativePath": "gb/Tobu Tobu Girl.zip",
+      "lastPlayedDate": 1695778960544,
+      "playedTimes": 2
+    },
+    {
+      "name": "240p Test Suite.nes",
+      "relativePath": "nes/240p Test Suite.nes",
+      "lastPlayedDate": 1695709479100,
+      "playedTimes": 2
+    }
+  ]
+}

tests/fixtures/hars/onedrive.har/2d47be3d19cbb0ce38a9ec1ebf2a249e79b46179.json

@@ -0,0 +1 @@
+{"@odata.context":"https://graph.microsoft.com/v1.0/$metadata#users('thefalsegodofcausality%40outlook.com')/drive/root/children","@odata.count":1,"value":[{"@microsoft.graph.downloadUrl":"https://public.dm.files.1drv.com/y4moez7_pPTfzPCFYCezDHz4hE76AbLnPSKTgRbuecH_iGtaB5yHbFcTT27nlqLX3vHIC8O8BWNFE_PoXG7c12EZak-B069XVax6d552DXSb4VF_0Ln0pEnBm8wpnzedIO9s2SCHrDLz2tppgcFbcHIKHUSJ2VJ4xMwIdqo6uExdHQuctPH9UNH6yx4wPWaLOtPRMtdgpVz2LVcNCZCIsYEmCzN-Y6PEWH_pU6kWvxUb_IjBh9ZdmGqRtPxKsnHdr085EzNcpCrjfdgRGgOJ9Ozrg","createdDateTime":"2023-09-26T04:04:09.403Z","cTag":"aYzo3Q0E5RkM2NDU5QzY1QTUhNDk4NjguMjU3","eTag":"aN0NBOUZDNjQ1OUM2NUE1ITQ5ODY4LjA","id":"7CA9FC6459C65A5!49868","lastModifiedDateTime":"2023-09-26T04:04:09.403Z","name":"240p Test Suite.nes","size":65552,"webUrl":"https://1drv.ms/u/s!AKVlnEXGn8oHg4VM","reactions":{"commentCount":0},"createdBy":{"application":{"displayName":"MSOffice15","id":"480728c5"},"device":{"id":"18000ad422d2ee"},"user":{"displayName":"sandlot arianrhod","id":"7ca9fc6459c65a5"},"oneDriveSync":{"@odata.type":"#microsoft.graph.identity","id":"e637e788-232d-492b-ad38-ffff0f000000"}},"lastModifiedBy":{"application":{"displayName":"MSOffice15","id":"480728c5"},"device":{"id":"18000ad422d2ee"},"user":{"displayName":"sandlot arianrhod","id":"7ca9fc6459c65a5"},"oneDriveSync":{"@odata.type":"#microsoft.graph.identity","id":"e637e788-232d-492b-ad38-ffff0f000000"}},"parentReference":{"driveId":"7ca9fc6459c65a5","driveType":"personal","id":"7CA9FC6459C65A5!49859","name":"nes","path":"/drive/root:/games/retro-game-roms-test/nes"},"file":{"mimeType":"application/octet-stream","hashes":{"quickXorHash":"v8xhgyr/opQLCrK3wtNzEjjS38o=","sha1Hash":"518C832DFFF078FBA019DEDF581CF280BD7482AA","sha256Hash":"20419DB6B8C1A36B3FA63AD47B525DE2E1C4DD84A92CE5C0E25C35CB379E78F5"}},"fileSystemInfo":{"createdDateTime":"2023-09-26T04:04:09.403Z","lastModifiedDateTime":"2023-09-25T13:28:44Z"}}]}

tests/fixtures/hars/onedrive.har/3a6d129d46adb832a7d9973b2b63274ca1ee9938.json

@@ -0,0 +1 @@
+{"@odata.context":"https://graph.microsoft.com/v1.0/$metadata#users('thefalsegodofcausality%40outlook.com')/drive/root/$entity","@microsoft.graph.downloadUrl":"https://public.dm.files.1drv.com/y4mO_u2OS9V1rL9o7ysArJrRgP9H3EvytxOTwaSRBkKLICI_D70KieIse5AVAlY_mjdKShxKQKbRZ8t7hqj024K7JD7QN0Q-V7a2HM80w5pr1L74WPitSbsxxOzPimQwVvKOn6DTA8Kcxz1lj7Tl90g21mTEZ46Gi8ZpHs_CZGEg1IQ3J-_W43neiSj53SfSbKvRA_DxRPu0HzMf1DCWFf4ScR6cDUvmCJE4Fc_LefAwVGOmENb3Kewm6f4VILC5PJgfxrH5X0fVA-FB48_qAOafQ","createdDateTime":"2023-09-27T01:52:19.83Z","cTag":"aYzo3Q0E5RkM2NDU5QzY1QTUhNDk4OTguMjU3","eTag":"aN0NBOUZDNjQ1OUM2NUE1ITQ5ODk4LjA","id":"7CA9FC6459C65A5!49898","lastModifiedDateTime":"2023-09-27T01:52:19.83Z","name":"20230927095219084.png","size":1903,"webUrl":"https://1drv.ms/i/s!AKVlnEXGn8oHg4Vq","reactions":{"commentCount":0},"createdBy":{"application":{"displayName":"Retro Assembly","id":"4ce4669e"},"user":{"displayName":"sandlot arianrhod","id":"7ca9fc6459c65a5"}},"lastModifiedBy":{"application":{"displayName":"Retro Assembly","id":"4ce4669e"},"user":{"displayName":"sandlot arianrhod","id":"7ca9fc6459c65a5"}},"parentReference":{"driveId":"7ca9fc6459c65a5","driveType":"personal","id":"7CA9FC6459C65A5!49894","name":"Tobu Tobu Girl.zip","path":"/drive/root:/games/retro-game-roms-test/retro-assembly/states/mgba/Tobu%20Tobu%20Girl.zip"},"file":{"mimeType":"image/png","processingMetadata":true,"hashes":{"quickXorHash":"uVApMCUV/J5CKcAXuH4r4FU557E=","sha1Hash":"7F83D5909D8D963148B00A340BA9AAA45DB2328E","sha256Hash":"AF0DA643DB8D80C486B71B12BD34433BEC13E8A5BE330492A5810ADD32695A19"}},"fileSystemInfo":{"createdDateTime":"2023-09-27T01:52:19.83Z","lastModifiedDateTime":"2023-09-27T01:52:19.83Z"},"photo":{}}