chore: add test for file in nested folder

Author: Nemikolh

e2e/src/content/tutorial/tests/filesystem-sync/happy-path/_files/a/b/baz.txt

@@ -0,0 +1 @@
+Baz

e2e/src/content/tutorial/tests/filesystem-sync/happy-path/content.mdx

@@ -9,3 +9,4 @@ import { ButtonWriteToFile } from '@components/ButtonWriteToFile';
 # Happy path filesystem test
 
 <ButtonWriteToFile client:load filePath="/bar.txt" newContent='Something else' useWebcontainer />
+<ButtonWriteToFile client:load filePath="/a/b/baz.txt" newContent='Foo' useWebcontainer testId='write-to-file-in-subfolder' />

e2e/test/filesystem-sync.test.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 
 const BASE_URL = '/tests/filesystem-sync';
 
-test('editor should reflect changes made in webcontainer', async ({ page }) => {
+test('editor should reflect changes made from webcontainer', async ({ page }) => {
   const testCase = 'happy-path';
   await page.goto(`${BASE_URL}/${testCase}`);
 
@@ -16,3 +16,20 @@ test('editor should reflect changes made in webcontainer', async ({ page }) => {
     useInnerText: true,
   });
 });
+
+test('editor should reflect changes made from webcontainer in file in nested folder', async ({ page }) => {
+  const testCase = 'happy-path';
+  await page.goto(`${BASE_URL}/${testCase}`);
+
+  await page.getByRole('button', { name: 'baz.txt' }).click();
+
+  await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText('Baz', {
+    useInnerText: true,
+  });
+
+  await page.getByTestId('write-to-file-in-subfolder').click();
+
+  await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText('Foo', {
+    useInnerText: true,
+  });
+});