add tests

tests/kid.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect, Page } from '@playwright/test';
+
+async function loginAs(page: Page, username: string) {
+  await page.goto('/login');
+  await page.getByTestId('username').fill(username);
+  await page.getByTestId('password').fill('password');
+  await page.getByTestId('login-submit').click();
+  await page.waitForLoadState('networkidle');
+}
+
+test.beforeEach(async ({ page }) => {
+  await loginAs(page, 'student1');
+});
+
+test('homepage is in kid mode', async ({ page }) => {
+  await expect(page.locator('body')).toHaveClass(/kid/);
+  await expect(page.getByTestId('site-title')).toContainText(':)');
+});
+
+test('pages are blocked', async ({ page }) => {
+  const blockedPaths = ['/forum', '/streamer'];
+
+  for (const path of blockedPaths) {
+    const response = await page.goto(path);
+    expect(response?.status()).toBe(404);
+  }
+});
+
+test('only Lichess blog', async ({ page }) => {
+  await page.goto('/blog');
+  await expect(page).toHaveURL('/@/Lichess/blog');
+});

tests/kidmode.spec.ts

@@ -1,20 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-  await page.getByTestId('login').click();
-  await page.getByTestId('username').fill('student1');
-  await page.getByTestId('password').fill('password');
-  await page.getByTestId('login-submit').click();
-  await page.waitForLoadState('networkidle'); 
-});
-
-test('login to kidmode', async ({ page }) => {
-  await expect(page.locator('body')).toHaveClass(/kid/);
-  await expect(page.getByTestId('site-title')).toContainText(':)');
-});
-
-test('cannot message another student', async ({ page }) => {
-  await page.goto('/inbox/Student2');
-  await expect(page.getByText('Student2 doesn\'t accept new messages')).toBeVisible();
-});

tests/school-mode.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('normal request is not in kid mode', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('body')).not.toHaveClass(/kid/);
+});
+
+test('request with X-School-Mode header is in kid mode', async ({ browser }) => {
+  const context = await browser.newContext({
+    extraHTTPHeaders: { 'X-School-Mode': 'true' },
+  });
+  const page = await context.newPage();
+  await page.goto('/');
+  await expect(page.locator('body')).toHaveClass(/kid/);
+  await context.close();
+});

tests/teacher.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect, Page } from '@playwright/test';
+
+async function loginAs(page: Page, username: string) {
+  await page.goto('/login');
+  await page.getByTestId('username').fill(username);
+  await page.getByTestId('password').fill('password');
+  await page.getByTestId('login-submit').click();
+  await page.waitForLoadState('networkidle');
+}
+
+test.beforeEach(async ({ page }) => {
+  await loginAs(page, 'teacher');
+});
+
+test('can message their student', async ({ page }) => {
+  await page.goto('/inbox/student1');
+
+  await page.getByTestId('msg-textarea').fill('hi');
+  await page.getByTestId('msg-send-button').click();
+});
+
+test('cannot message a kid who is not their student', async ({ page }) => {
+  await page.goto('/inbox/kid');
+  await expect(page.getByText("Kid doesn't accept new messages")).toBeVisible();
+});

ui/lib/src/view/snabbdom.ts

@@ -65,6 +65,8 @@ export const dataIcon = (icon: LiconType): Attrs => ({
   'data-icon': icon,
 });
 
+export const testId = (id: string): Attrs => (site.debug ? { 'data-testid': id } : {});
+
 export const iconTag = (icon: LiconType, attrs?: Attrs & { cls?: string }): VNode => {
   let sel = 'icon';
   if (attrs?.cls) {

ui/msg/src/view/interact.ts

@@ -3,7 +3,7 @@ import { h, type VNode } from 'snabbdom';
 import { blurIfEscape } from 'lib';
 import { throttle } from 'lib/async';
 import * as licon from 'lib/licon';
-import { bindSubmit, alert } from 'lib/view';
+import { bindSubmit, alert, testId } from 'lib/view';
 
 import type MsgCtrl from '../ctrl';
 import type { User } from '../interfaces';
@@ -25,7 +25,12 @@ export default function renderInteract(ctrl: MsgCtrl, user: User): VNode {
       renderTextarea(ctrl, user),
       h('button.msg-app__convo__post__submit.button', {
         class: { connected },
-        attrs: { type: 'submit', 'data-icon': licon.PlayTriangle, disabled: !connected },
+        attrs: {
+          type: 'submit',
+          'data-icon': licon.PlayTriangle,
+          disabled: !connected,
+          ...testId('msg-send-button'),
+        },
       }),
     ],
   );
@@ -33,7 +38,7 @@ export default function renderInteract(ctrl: MsgCtrl, user: User): VNode {
 
 function renderTextarea(ctrl: MsgCtrl, user: User): VNode {
   return h('textarea.msg-app__convo__post__text', {
-    attrs: { rows: 1, enterkeyhint: 'send' },
+    attrs: { rows: 1, enterkeyhint: 'send', ...testId('msg-textarea') },
     hook: {
       insert(vnode) {
         setupTextarea(vnode.elm as HTMLTextAreaElement, user.id, ctrl);