fix tests

.github/workflows/test.yml

@@ -16,6 +16,9 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
+      - name: Install playwright dependencies
+        run: yarn exec playwright install chromium --with-deps
+
       - name: Run tests
         run: |
           yarn test:ci

src/components/RestaurantCard/RestaurantCard.test.tsx

@@ -9,24 +9,24 @@ const { Default, Loading, New, Closed } = composeStories(stories)
 
 describe('RestaurantCard', () => {
   test('should render correctly', async () => {
-    await Default.play()
+    await Default.run()
 
     expect(screen.getByText('Burger Kingdom')).toBeInTheDocument()
   })
 
   test('should provide a loading skeleton', async () => {
-    await Loading.play()
+    await Loading.run()
     expect(screen.getByTestId('loading')).toBeInTheDocument()
   })
 
   test('should show a "new" tag', async () => {
-    await New.play()
+    await New.run()
     expect(screen.getByText('new')).toBeInTheDocument()
   })
 
   test('should not trigger onclick when restaurant is closed', async () => {
     const onClickSpy = vi.fn()
-    await Closed.play({ args: { ...Closed.args, onClick: onClickSpy } })
+    await Closed.run({ args: { ...Closed.args, onClick: onClickSpy } })
 
     // display closed message
     expect(screen.getByText('This restaurant is closed.')).toBeInTheDocument()
@@ -46,7 +46,7 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
 
 // Go through all test cases to batch test accessibility
 test.each(testCases)('%s story should be accessible', async (_storyName, Story) => {
-  await (Story as any).play()
+  await (Story as any).run()
   // @ts-ignore TODO fix Property 'toHaveNoViolations' does not exist on type 'Assertion<AxeResults>
   expect(await axe(document.body.firstChild)).toHaveNoViolations()
 })

src/pages/RestaurantDetailPage/RestaurantDetailPage.test.tsx

@@ -8,7 +8,7 @@ const { Success, Loading, Error, NotFound, WithModalOpen } = composeStories(stor
 
 describe('RestaurantDetailPage', () => {
   test('Should add an item to cart', async () => {
-    await Success.play()
+    await Success.run()
 
     const foodItem = await screen.findByText(/Cheeseburger/i)
     userEvent.click(foodItem)
@@ -20,19 +20,19 @@ describe('RestaurantDetailPage', () => {
     expect(foodQuantity.textContent).toEqual('1')
   })
   test('Should display an error screen', async () => {
-    await Error.play()
+    await Error.run()
     await waitFor(() => expect(screen.getByText('Something went wrong!')).toBeInTheDocument())
   })
   test('Should display a loading screen', async () => {
-    await Loading.play()
+    await Loading.run()
     await waitFor(() => expect(screen.getByText('Looking for some food...')).toBeInTheDocument())
   })
   test('Should display a 404 screen', async () => {
-    await NotFound.play()
+    await NotFound.run()
     await waitFor(() => expect(screen.getByText("We can't find this page")).toBeInTheDocument())
   })
   test('Should execute story tests', async () => {
-    await WithModalOpen.play()
+    await WithModalOpen.run()
   })
 })