From a700d877ff28ff9732fd79f44a81cad16ae82b25 Mon Sep 17 00:00:00 2001
From: linearcombination <4829djaskdfj@gmail.com>
Date: Sat, 14 Dec 2024 17:44:10 -0800
Subject: [PATCH] Fix issue with next button on mobile

---
 .../src/routes/stet/settings/+page.svelte     |  5 +-
 .../routes/stet/source_languages/+page.svelte | 30 +++-----
 .../[lang0_code]/+page.svelte                 | 30 +++-----
 frontend/tests/e2e/stet_test.ts               | 68 +++++++++++++++++++
 frontend/tests/e2e/test.ts                    | 33 ---------
 5 files changed, 86 insertions(+), 80 deletions(-)
 create mode 100644 frontend/tests/e2e/stet_test.ts

diff --git a/frontend/src/routes/stet/settings/+page.svelte b/frontend/src/routes/stet/settings/+page.svelte
index 25f73f66..8cfc7ac3 100644
--- a/frontend/src/routes/stet/settings/+page.svelte
+++ b/frontend/src/routes/stet/settings/+page.svelte
@@ -22,9 +22,6 @@
   //   usfmAvailableStore
   // } from '$lib/stores/ResourceTypesStore'
   import {
-    lang0CodeAndNameStore,
-    lang1CodeAndNameStore,
-    langCodesStore,
     langCountStore
   } from '$lib/stet/stores/LanguagesStore'
   // import { bookCountStore } from '$lib/stores/BooksStore'
@@ -120,7 +117,7 @@
             />
             <rect x="0.5" y="0.5" width="55" height="47" rx="11.5" stroke="#E5E8EB" />
           </svg>
-          {#if $lang0CodeAndNameStore && $lang1CodeAndNameStore}
+          {#if $langCountStore}
             <!-- badge -->
             <div
               class="text-center absolute -top-0.5 -right-0.5
diff --git a/frontend/src/routes/stet/source_languages/+page.svelte b/frontend/src/routes/stet/source_languages/+page.svelte
index 31587642..99c63d27 100644
--- a/frontend/src/routes/stet/source_languages/+page.svelte
+++ b/frontend/src/routes/stet/source_languages/+page.svelte
@@ -13,6 +13,7 @@
   import WizardBasket from '$lib/stet/WizardBasket.svelte'
   import {
     lang0CodeAndNameStore,
+    lang1CodeAndNameStore,
     langCodesStore,
     gatewayCodeAndNamesStore,
     heartCodeAndNamesStore,
@@ -68,42 +69,29 @@
     })
     .catch((err) => console.log(err))
 
-  let nonEmptyGatewayLanguages: boolean
-  $: nonEmptyGatewayLanguages = $gatewayCodeAndNamesStore.every((item) => item.length > 0)
-
-  let nonEmptyHeartLanguages: boolean
-  $: nonEmptyHeartLanguages = $heartCodeAndNamesStore.every((item) => item.length > 0)
-
   // Set $langCountStore
   $: {
-    if (nonEmptyGatewayLanguages && nonEmptyHeartLanguages) {
+    if ($lang0CodeAndNameStore && $lang1CodeAndNameStore) {
       let codes = []
-      for (let stringTuple of $gatewayCodeAndNamesStore) {
-        codes.push(getCode(stringTuple))
-      }
-      for (let stringTuple of $heartCodeAndNamesStore) {
-        codes.push(getCode(stringTuple))
-      }
+      codes.push(getCode($lang0CodeAndNameStore))
+      codes.push(getCode($lang1CodeAndNameStore))
       $langCodesStore = codes
       $langCountStore = $langCodesStore.length
-    } else if (nonEmptyGatewayLanguages && !nonEmptyHeartLanguages) {
+    } else if ($lang0CodeAndNameStore && !$lang1CodeAndNameStore) {
       let codes = []
-      for (let stringTuple of $gatewayCodeAndNamesStore) {
-        codes.push(getCode(stringTuple))
-      }
+      codes.push(getCode($lang0CodeAndNameStore))
       $langCodesStore = codes
       $langCountStore = $langCodesStore.length
-    } else if (!nonEmptyGatewayLanguages && nonEmptyHeartLanguages) {
+    } else if (!$lang0CodeAndNameStore && $lang1CodeAndNameStore) {
       let codes = []
-      for (let stringTuple of $heartCodeAndNamesStore) {
-        codes.push(getCode(stringTuple))
-      }
+      codes.push(getCode($lang1CodeAndNameStore))
       $langCodesStore = codes
       $langCountStore = $langCodesStore.length
     } else {
       $langCountStore = 0
       $langCodesStore = []
       $lang0CodeAndNameStore = ''
+      $lang1CodeAndNameStore = ''
     }
   }
 
diff --git a/frontend/src/routes/stet/target_languages/[lang0_code]/+page.svelte b/frontend/src/routes/stet/target_languages/[lang0_code]/+page.svelte
index 90af0a52..67a11ac5 100644
--- a/frontend/src/routes/stet/target_languages/[lang0_code]/+page.svelte
+++ b/frontend/src/routes/stet/target_languages/[lang0_code]/+page.svelte
@@ -74,36 +74,22 @@
     })
     .catch((err) => console.log(err)) // FIXME Trigger toast for error
 
-  let nonEmptyGatewayLanguages: boolean
-  $: nonEmptyGatewayLanguages = $gatewayCodeAndNamesStore.every((item) => item.length > 0)
-
-  let nonEmptyHeartLanguages: boolean
-  $: nonEmptyHeartLanguages = $heartCodeAndNamesStore.every((item) => item.length > 0)
-
-  // Set langCountStore
+  // Set $langCountStore
   $: {
-    if (nonEmptyGatewayLanguages && nonEmptyHeartLanguages) {
+    if ($lang0CodeAndNameStore && $lang1CodeAndNameStore) {
       let codes = []
-      for (let stringTuple of $gatewayCodeAndNamesStore) {
-        codes.push(getCode(stringTuple))
-      }
-      for (let stringTuple of $heartCodeAndNamesStore) {
-        codes.push(getCode(stringTuple))
-      }
+      codes.push(getCode($lang0CodeAndNameStore))
+      codes.push(getCode($lang1CodeAndNameStore))
       $langCodesStore = codes
       $langCountStore = $langCodesStore.length
-    } else if (nonEmptyGatewayLanguages && !nonEmptyHeartLanguages) {
+    } else if ($lang0CodeAndNameStore && !$lang1CodeAndNameStore) {
       let codes = []
-      for (let stringTuple of $gatewayCodeAndNamesStore) {
-        codes.push(getCode(stringTuple))
-      }
+      codes.push(getCode($lang0CodeAndNameStore))
       $langCodesStore = codes
       $langCountStore = $langCodesStore.length
-    } else if (!nonEmptyGatewayLanguages && nonEmptyHeartLanguages) {
+    } else if (!$lang0CodeAndNameStore && $lang1CodeAndNameStore) {
       let codes = []
-      for (let stringTuple of $heartCodeAndNamesStore) {
-        codes.push(getCode(stringTuple))
-      }
+      codes.push(getCode($lang1CodeAndNameStore))
       $langCodesStore = codes
       $langCountStore = $langCodesStore.length
     } else {
diff --git a/frontend/tests/e2e/stet_test.ts b/frontend/tests/e2e/stet_test.ts
new file mode 100644
index 00000000..af713551
--- /dev/null
+++ b/frontend/tests/e2e/stet_test.ts
@@ -0,0 +1,68 @@
+import { expect, test } from '@playwright/test'
+
+// Group tests with specific settings
+test.describe('Desktop Tests', () => {
+  test.use({
+    viewport: {
+      height: 700,
+      width: 1200,
+    },
+  })
+
+  test('test stet', async ({ page }) => {
+    await page.goto('http://localhost:8001/stet')
+    await page.getByLabel('English en').check()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByText('Cebuano').click()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByRole('button', { name: 'Generate File' }).click()
+  })
+
+  test('test stet 2', async ({ page }) => {
+    await page.goto('http://localhost:8001/stet')
+    await page.getByText('English').click()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByRole('button', { name: 'Back' }).click()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByText('Bichelamar (Bislama)').click()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByRole('link', { name: 'Target Language' }).click()
+    await page.getByRole('link', { name: 'Source Language' }).click()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByRole('button', { name: 'Back' }).click()
+    await page.getByRole('button', { name: 'Back' }).click()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByRole('button', { name: 'Edit' }).click()
+    await page.getByRole('button', { name: 'Edit' }).click()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await page.getByLabel('Email me a copy of my').check()
+    await page.getByPlaceholder('Type email address here (').click()
+    await page.getByPlaceholder('Type email address here (').fill('fake@example.com')
+    await page.getByRole('button', { name: 'Submit' }).click()
+    await page.getByRole('button', { name: 'Generate File' }).click()
+  })
+})
+
+// Separate group for mobile tests
+test.describe('Mobile Tests', () => {
+  test.use({
+    viewport: {
+      height: 600,
+      width: 300,
+    },
+  })
+
+  test('test mobile', async ({ page }) => {
+    await page.goto('http://localhost:8001/stet')
+    await page.goto('http://localhost:8001/stet/source_languages')
+    await page.getByLabel('English en').check()
+    await page.getByRole('button').nth(1).click()
+    await page.getByText('Bahasa Indonesia (Indonesian)').click()
+    await page.getByRole('button').nth(1).click()
+    await page.getByRole('button', { name: '2' }).click()
+    await page.getByRole('button', { name: 'Edit' }).nth(1).click()
+    await page.getByRole('button').nth(1).click()
+    await page.getByRole('button', { name: 'Generate File' }).click()
+  })
+})
diff --git a/frontend/tests/e2e/test.ts b/frontend/tests/e2e/test.ts
index 85b948e7..431214c4 100644
--- a/frontend/tests/e2e/test.ts
+++ b/frontend/tests/e2e/test.ts
@@ -93,36 +93,3 @@ test('test es-419 resource types', async ({ page }) => {
   await page.getByRole('button', { name: 'Generate File' }).click()
 })
 
-test('test stet', async ({ page }) => {
-  await page.goto('http://localhost:8001/stet')
-  await page.getByLabel('English en').check()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByText('Cebuano').click()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByRole('button', { name: 'Generate File' }).click()
-})
-
-test('test stet 2', async ({ page }) => {
-  await page.goto('http://localhost:8001/stet')
-  await page.getByText('English').click()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByRole('button', { name: 'Back' }).click()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByText('Bichelamar (Bislama)').click()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByRole('link', { name: 'Target Language' }).click()
-  await page.getByRole('link', { name: 'Source Language' }).click()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByRole('button', { name: 'Back' }).click()
-  await page.getByRole('button', { name: 'Back' }).click()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByRole('button', { name: 'Edit' }).click()
-  await page.getByRole('button', { name: 'Edit' }).click()
-  await page.getByRole('button', { name: 'Next' }).click()
-  await page.getByLabel('Email me a copy of my').check()
-  await page.getByPlaceholder('Type email address here (').click()
-  await page.getByPlaceholder('Type email address here (').fill('fake@example.com')
-  await page.getByRole('button', { name: 'Submit' }).click()
-  await page.getByRole('button', { name: 'Generate File' }).click()
-})