1- import { test } from './setup/coverage.js'
1+ import { test , expect } from './setup/coverage.js'
22import { fixtureData } from './fixtures/index.js'
3+ import { files } from './setup/locators.js'
34import all from 'it-all'
45import filesize from 'filesize'
56import * as kuboRpcModule from 'kubo-rpc-client'
@@ -9,62 +10,64 @@ test.describe('Files screen', () => {
910 await page . goto ( '/#/files' )
1011 } )
1112
12- const button = 'button[id="import-button"]'
13-
1413 test ( 'should have the active Add menu' , async ( { page } ) => {
15- await page . locator ( button ) . waitFor ( { state : 'visible' } )
16- await page . locator ( button ) . click ( )
17- await page . locator ( '#add-file' ) . waitFor ( { state : 'visible' } )
18- await page . locator ( 'button#add-file' ) . waitFor ( )
19- await page . locator ( 'button#add-folder' ) . waitFor ( )
20- await page . locator ( 'button#add-by-path' ) . waitFor ( )
21- await page . locator ( 'button#add-new-folder' ) . waitFor ( )
14+ const importButton = files . importButton ( page )
15+ await expect ( importButton ) . toBeVisible ( )
16+ await importButton . click ( )
17+
18+ await expect ( files . addFileOption ( page ) ) . toBeVisible ( )
19+ await expect ( files . addFolderOption ( page ) ) . toBeVisible ( )
20+ await expect ( files . addByPathOption ( page ) ) . toBeVisible ( )
21+ await expect ( files . addNewFolderOption ( page ) ) . toBeVisible ( )
22+
2223 // close menu with Escape key
2324 await page . keyboard . press ( 'Escape' )
2425 } )
2526
2627 test ( 'should allow for a successful import of two files' , async ( { page } ) => {
27- await page . locator ( button ) . waitFor ( { state : 'visible' } )
28- await page . locator ( button ) . click ( )
29- await page . locator ( '#add-file' ) . waitFor ( { state : 'visible' } )
28+ const importButton = files . importButton ( page )
29+ await expect ( importButton ) . toBeVisible ( )
30+ await importButton . click ( )
31+
32+ await expect ( files . addFileOption ( page ) ) . toBeVisible ( )
3033
3134 const [ fileChooser ] = await Promise . all ( [
3235 page . waitForEvent ( 'filechooser' ) ,
33- page . locator ( 'button[id="add-file"]' ) . click ( ) // menu button that triggers file selection
36+ files . addFileOption ( page ) . click ( )
3437 ] )
3538
36- // select a single static text file via fileChooser
39+ // select static text files via fileChooser
3740 const file1 = fixtureData ( 'file.txt' )
3841 const file2 = fixtureData ( 'file2.txt' )
3942 await fileChooser . setFiles ( [ file1 . path , file2 . path ] )
4043
41- // expect file with matching filename to be added to the file list
42- await page . locator ( '.File' ) . first ( ) . waitFor ( )
43- await page . locator ( '.File:has-text("file.txt")' ) . waitFor ( )
44- await page . locator ( '.File:has-text("file2.txt")' ) . waitFor ( )
44+ // expect files to be added to the file list
45+ const fileRow1 = page . getByTestId ( 'file-row' ) . filter ( { hasText : 'file.txt' } )
46+ const fileRow2 = page . getByTestId ( 'file-row' ) . filter ( { hasText : 'file2.txt' } )
47+ await expect ( fileRow1 ) . toBeVisible ( )
48+ await expect ( fileRow2 ) . toBeVisible ( )
4549
4650 // expect valid CID to be present on the page
4751 const ipfs = kuboRpcModule . create ( process . env . IPFS_RPC_ADDR )
4852 const [ result1 , result2 ] = await all ( ipfs . addAll ( [ file1 . data , file2 . data ] ) )
49- await page . locator ( `text= ${ result1 . cid . toString ( ) } ` ) . first ( ) . waitFor ( )
50- await page . locator ( `text= ${ result2 . cid . toString ( ) } ` ) . first ( ) . waitFor ( )
53+ await expect ( page . getByText ( result1 . cid . toString ( ) ) . first ( ) ) . toBeVisible ( )
54+ await expect ( page . getByText ( result2 . cid . toString ( ) ) . first ( ) ) . toBeVisible ( )
5155
5256 // expect human readable sizes in format from ./src/lib/files.js#humanSize
53- // this ensures metadata was correctly read for each item in the MFS
5457 const human = ( b ) => ( b
5558 ? filesize ( b , {
5659 standard : 'iec' ,
5760 base : 2 ,
5861 round : b >= 1073741824 ? 1 : 0
5962 } )
6063 : '-' )
61- // only check the files we just uploaded (not all MFS files, which may include files from other tests)
64+
65+ // only check the files we just uploaded
6266 for ( const fileName of [ 'file.txt' , 'file2.txt' ] ) {
6367 const stat = await ipfs . files . stat ( `/${ fileName } )
64- // verify file row exists and shows the correct size
65- const fileRow = page . locator ( `.File:has-text("${ fileName } )
66- await fileRow . waitFor ( )
67- await fileRow . locator ( `text=${ human ( stat . size ) } ) . waitFor ( )
68+ const fileRow = page . getByTestId ( 'file-row' ) . filter ( { hasText : fileName } )
69+ await expect ( fileRow ) . toBeVisible ( )
70+ await expect ( fileRow . getByText ( human ( stat . size ) ) ) . toBeVisible ( )
6871 }
6972 } )
7073
@@ -73,30 +76,39 @@ test.describe('Files screen', () => {
7376 const testFilename = 'explorer-context-menu-test.txt'
7477 const testCid = 'bafkqaddjnzzxazldoqwxizltoq'
7578
76- // first: create a test file
77- const button = 'button[id="import-button"]'
78- await page . locator ( button ) . waitFor ( { state : 'visible' } )
79- await page . locator ( button ) . click ( )
80- await page . locator ( '#add-by-path' ) . waitFor ( { state : 'visible' } )
81- await page . locator ( 'button[id="add-by-path"]' ) . click ( )
82- await page . locator ( 'div[role="dialog"] input[name="name"]' ) . waitFor ( )
83- await page . locator ( 'div[role="dialog"] input[name="path"]' ) . fill ( `/ipfs/${ testCid } )
84- await page . locator ( 'div[role="dialog"] input[name="name"]' ) . fill ( testFilename )
79+ // first: create a test file via "Add by path"
80+ const importButton = files . importButton ( page )
81+ await expect ( importButton ) . toBeVisible ( )
82+ await importButton . click ( )
83+
84+ await expect ( files . addByPathOption ( page ) ) . toBeVisible ( )
85+ await files . addByPathOption ( page ) . click ( )
86+
87+ // wait for dialog inputs to be visible (dialog may have animation)
88+ const pathInput = files . dialogInput ( page , 'path' )
89+ await expect ( pathInput ) . toBeVisible ( )
90+
91+ await pathInput . fill ( `/ipfs/${ testCid } )
92+ await files . dialogInput ( page , 'name' ) . fill ( testFilename )
8593 await page . keyboard . press ( 'Enter' )
94+
8695 // expect file with matching filename to be added to the file list
87- await page . locator ( `.File:has-text("${ testFilename } ) . waitFor ( )
96+ const fileRow = page . getByTestId ( 'file-row' ) . filter ( { hasText : testFilename } )
97+ await expect ( fileRow ) . toBeVisible ( )
8898
8999 // open context menu
90- const cbutton = `button[aria-label="View more options for ${ testFilename }
91- await page . locator ( cbutton ) . waitFor ( { state : 'visible' } )
92- await page . locator ( cbutton ) . click ( )
93- await page . locator ( 'button[role="menuitem"]:has-text("Inspect")' ) . waitFor ( { state : 'visible' } )
100+ const contextButton = files . contextMenuButton ( page , testFilename )
101+ await expect ( contextButton ) . toBeVisible ( )
102+ await contextButton . click ( )
103+
104+ const inspectMenuItem = files . contextMenuItem ( page , 'Inspect' )
105+ await expect ( inspectMenuItem ) . toBeVisible ( )
94106
95107 // click on Inspect option
96- await page . locator ( 'button[role="menuitem"]:has-text("Inspect")' ) . click ( )
108+ await inspectMenuItem . click ( )
97109
98110 // confirm Explore screen was opened with correct CID
99111 await page . waitForURL ( `/#/explore/${ testCid } )
100- await page . locator ( 'text=" CID info"' ) . waitFor ( )
112+ await expect ( page . getByText ( ' CID info' ) ) . toBeVisible ( )
101113 } )
102114} )
0 commit comments