add tests and fix npm build, make frontend tests work @ mobile view

Reviewed-on: #224

frontend/main.ts

@@ -107,6 +107,7 @@ interface ChoiceBoatEvent extends Event{
 	amount_seats: number,
 	owner: number,
 	default_destination: string,
+	boat_in_ottensheim: boolean,
     }
   };
 }
@@ -277,6 +278,7 @@ interface ChoiceEvent extends Event{
 	is_cox: boolean,
 	steers: boolean,
 	cox_on_boat: boolean,
+	is_racing: boolean,
     }
   };
 }
@@ -323,7 +325,7 @@ function initNewChoice(select: HTMLInputElement) {
     },
       callbackOnInit: function() {
               this._currentState.items.forEach(function(obj){
-	if (boat_in_ottensheim) {
+	if (boat_in_ottensheim && obj.customProperties) {
 	if (obj.customProperties.is_racing) {
         		const coxSelect = <HTMLSelectElement>document.querySelector('#shipmaster-' + select.id + 'js');
         		var new_option = new Option(obj.label, obj.value);
@@ -359,7 +361,7 @@ function initNewChoice(select: HTMLInputElement) {
 	const user_id = event.detail.value;
 	const name = event.detail.label;
 
-	if (boat_in_ottensheim) {
+	if (boat_in_ottensheim && event.detail.customProperties.is_racing) {
 	if (event.detail.customProperties.is_racing) {
 		const coxSelect = <HTMLSelectElement>document.querySelector('#shipmaster-' + select.id + 'js');
 		if (coxSelect){

frontend/playwright.config.ts

@@ -10,6 +10,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  timeout: 180000,
   testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,

frontend/tests/log.spec.ts

@@ -0,0 +1,69 @@
+import { test, expect } from '@playwright/test';
+
+test('Cox can start and cancel trip', async ({ page }, testInfo) => {
+  await page.goto('http://localhost:8000/auth');
+  await page.getByPlaceholder('Name').click();
+  await page.getByPlaceholder('Name').fill('cox2');
+  await page.getByPlaceholder('Name').press('Tab');
+  await page.getByPlaceholder('Passwort').fill('cox');
+  await page.getByPlaceholder('Passwort').press('Enter');
+
+  await page.goto('http://localhost:8000/');
+  await page.getByRole('link', { name: 'Ausfahrt eintragen' }).click();
+  if (testInfo.project.name.includes('Mobile')) { // No left boat selector on mobile views
+    await page.getByText('Kaputtes Boot :-( (7 x)').nth(1).click();
+    await page.getByRole('option', { name: 'Joe' }).click();
+  } else{
+    await page.getByText('Joe', { exact: true }).click();
+  }
+  await page.getByPlaceholder('Ruderer auswählen').click();
+  await page.getByRole('option', { name: 'rower2' }).click();
+  await page.getByRole('option', { name: 'cox2' }).click();
+  await expect(page.getByRole('listbox')).toContainText('Nur 2 Ruderer können hinzugefügt werden');
+  await expect(page.locator('#shipmaster-newrowerjs')).toContainText('cox');
+  await expect(page.locator('#steering_person-newrowerjs')).toContainText('rower2 cox');
+  await page.getByRole('button', { name: 'Ausfahrt eintragen' }).click();
+  await expect(page.locator('body')).toContainText('Ausfahrt erfolgreich hinzugefügt');
+  await expect(page.locator('body')).toContainText('Joe');
+
+  await page.getByRole('link', { name: 'Joe' }).click();
+  page.once('dialog', dialog => {
+    dialog.accept().catch(() => {});
+  });
+  await page.getByRole('link', { name: 'Löschen' }).click();
+});
+
+test('Cox can start and finish trip', async ({ page }, testInfo) => {
+  await page.goto('http://localhost:8000/auth');
+  await page.getByPlaceholder('Name').click();
+  await page.getByPlaceholder('Name').fill('cox2');
+  await page.getByPlaceholder('Name').press('Tab');
+  await page.getByPlaceholder('Passwort').fill('cox');
+  await page.getByPlaceholder('Passwort').press('Enter');
+
+  await page.goto('http://localhost:8000/');
+  await page.getByRole('link', { name: 'Ausfahrt eintragen' }).click();
+  if (testInfo.project.name.includes('Mobile')) { // No left boat selector on mobile views
+    await page.getByText('Kaputtes Boot :-( (7 x)').nth(1).click();
+    await page.getByRole('option', { name: 'Joe' }).click();
+  } else{
+    await page.getByText('Joe', { exact: true }).click();
+  }
+  await page.getByPlaceholder('Ruderer auswählen').click();
+  await page.getByRole('option', { name: 'rower2' }).click();
+  await page.getByRole('option', { name: 'cox2' }).click();
+  await expect(page.getByRole('listbox')).toContainText('Nur 2 Ruderer können hinzugefügt werden');
+  await expect(page.locator('#shipmaster-newrowerjs')).toContainText('cox');
+  await expect(page.locator('#steering_person-newrowerjs')).toContainText('rower2 cox');
+  await page.getByRole('button', { name: 'Ausfahrt eintragen' }).click();
+  await expect(page.locator('body')).toContainText('Ausfahrt erfolgreich hinzugefügt');
+  await expect(page.locator('body')).toContainText('Joe');
+
+  await page.goto('http://localhost:8000/log');
+  await page.waitForTimeout(60000);
+  await page.locator('div:nth-child(2) > .border-0').click();
+  await page.getByRole('combobox', { name: 'Destination' }).click();
+  await page.getByRole('combobox', { name: 'Destination' }).fill('Ottensheim');
+  await page.getByRole('button', { name: 'Ausfahrt beenden' }).click();
+  await expect(page.locator('body')).toContainText('Ausfahrt korrekt eingetragen');
+});