Add e2e tests (#163)

Author: wwwillchen

mesop/components/input/e2e/input_test.ts

@@ -1,9 +1,7 @@
-import {test} from '@playwright/test';
+import {test, expect} from '@playwright/test';
 
-test('test', async ({page}) => {
+test('test input interactivity works', async ({page}) => {
   await page.goto('/components/input/e2e/input_app');
-  // TODO: write test.
-  // expect(await page.getByText('Hello, world!').textContent()).toContain(
-  //   'Hello, world!',
-  // );
+  await page.getByLabel('Basic input').fill('hi');
+  expect(await page.getByText('hi').textContent()).toEqual('hi');
 });

mesop/examples/generator.py

@@ -7,6 +7,8 @@ def generate_str():
   yield "foo"
   sleep(1)
   yield "bar"
+  sleep(10)
+  yield "waited10seconds"
 
 
 @me.stateclass

mesop/examples/playground.py

@@ -36,7 +36,7 @@ def header():
     )
   ):
     me.text(
-      "Playground",
+      "Playground Page",
       type="headline-5",
       style=me.Style(margin=me.Margin(top=0, right=0, bottom=0, left=0)),
     )

mesop/tests/e2e/buttons_test.ts

@@ -0,0 +1,8 @@
+import {test, expect} from '@playwright/test';
+
+test('buttons', async ({page}) => {
+  await page.goto('/buttons');
+  expect(await page.getByText('0 clicks').textContent()).toEqual('0 clicks');
+  await page.getByRole('button', {name: 'primary color button'}).click();
+  expect(await page.getByText('1 clicks').textContent()).toEqual('1 clicks');
+});

mesop/tests/e2e/conditional_event_handler_test.ts

@@ -2,7 +2,6 @@ import {test, expect} from '@playwright/test';
 
 test('test conditional event handler', async ({page}) => {
   await page.goto('/testing/conditional_event_handler');
-  await page.goto('http://localhost:32123/testing/conditional_event_handler');
   await page.getByLabel('first checkbox').check();
   await page.getByLabel('second checkbox').check();
   expect(

mesop/tests/e2e/generator_test.ts

@@ -0,0 +1,11 @@
+import {test, expect} from '@playwright/test';
+
+test('generator', async ({page}) => {
+  await page.goto('/generator');
+  await page.getByRole('button', {name: 'click'}).click();
+  // Asserting that some of the text has been yielded.
+  // We don't assert the first chunk "foo" to avoid a race condition.
+  // The last chunk is delayed by 10 seconds so the chance of a race
+  // condition should be low.
+  expect(await page.getByText('foobar').textContent()).toEqual('foobar');
+});

mesop/tests/e2e/navigation_test.ts

@@ -0,0 +1,18 @@
+import {test, expect} from '@playwright/test';
+
+test('navigation', async ({page}) => {
+  await page.goto('/');
+
+  // Check the text that we're on the home page.
+  expect(
+    await page.getByRole('heading', {name: 'Welcome'}).textContent(),
+  ).toEqual('Welcome');
+
+  // Trigger a navigation by clicking on the nav menu button.
+  await page.getByRole('button', {name: 'Playground', exact: true}).click();
+
+  // Check the text has changed which means navigation succeeded.
+  expect(await page.getByText('Playground Page').textContent()).toEqual(
+    'Playground Page',
+  );
+});