From dfa7d3dc210a8465972a225deb8351763b1a7184 Mon Sep 17 00:00:00 2001
From: Yunus <yunus.rectangle951@silomails.com>
Date: Tue, 3 Dec 2024 23:13:24 +0700
Subject: [PATCH] [test] Add org and app test

---
 components/CreateAppDialog.vue | 10 +++++-----
 tests-e2e/apps.test.mts        | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 tests-e2e/apps.test.mts

diff --git a/components/CreateAppDialog.vue b/components/CreateAppDialog.vue
index 4dd87da..b67afd7 100644
--- a/components/CreateAppDialog.vue
+++ b/components/CreateAppDialog.vue
@@ -51,7 +51,7 @@ const {
 </script>
 
 <template>
-    <form @submit.prevent="saveApp">
+    <form data-testid="createAppDialogForm" @submit.prevent="saveApp">
         <div class="flex flex-col gap-3">
             <div class="flex flex-col gap-2">
                 <label>Organization</label>
@@ -59,8 +59,8 @@ const {
                     :disabled="disableOrg" placeholder="Select organization">
                     <template #footer>
                         <div class="px-2 pb-2">
-                            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus"
-                                @click="() => addOrgVisible = true" />
+                            <Button data-testid="addNewOrgbtn" label="Add New" fluid severity="secondary" text
+                                size="small" icon="pi pi-plus" @click="() => addOrgVisible = true" />
                         </div>
                     </template>
                 </Select>
@@ -71,7 +71,7 @@ const {
             </div>
             <div class="flex flex-col gap-2">
                 <label>App Name</label>
-                <InputText v-model="appName"></InputText>
+                <InputText data-testid="inputAppName" v-model="appName"></InputText>
             </div>
             <Button label="Save" class="mt-3" :loading="isPending" type="submit" />
         </div>
@@ -81,7 +81,7 @@ const {
         <form @submit.prevent="saveOrg">
             <div class="flex flex-col gap-3 w-25rem">
                 <InputText data-testid="orgname" name="name" v-model="orgNameRef"></InputText>
-                <Button label="Save" type="submit" :loading="isPendingOrg"></Button>
+                <Button data-testid="orgsavebtn" label="Save" type="submit" :loading="isPendingOrg"></Button>
             </div>
         </form>
     </Dialog>
diff --git a/tests-e2e/apps.test.mts b/tests-e2e/apps.test.mts
new file mode 100644
index 0000000..f4ff214
--- /dev/null
+++ b/tests-e2e/apps.test.mts
@@ -0,0 +1,34 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+import { uuidv4 } from 'uuidv7'
+
+test('Apps test', async ({ page, goto, context }) => {
+    const orgName = `Org Test ${uuidv4().slice(0, 8)}`
+
+    await test.step('User can create organization', async () => {
+        await goto('/apps')
+        await page.getByText('Add app').click()
+        await page.getByText('Select organization').click()
+        await page.getByTestId('addNewOrgbtn').click()
+        await page.getByTestId('orgname').fill(orgName)
+        await page.getByTestId('orgsavebtn').click()
+        await page.getByText('Select organization').click()
+        await expect(page.getByText(orgName)).toHaveCount(2)
+    })
+
+    const osTestTypes = ['Android', 'iOS']
+    for (const osTestType of osTestTypes) {
+        const appName = `Habit Tool - ${osTestType}`
+        await test.step(`User can create new app ${osTestType} from newly created org`, async () => {
+            await page.getByText('Select organization').click()
+            await page.getByLabel(orgName).getByText(orgName).click()
+            await page.getByText('Select OS Type').click()
+            await page.getByLabel(osTestType).click()
+            await page.getByTestId('inputAppName').fill(appName)
+            await page.getByText('Save').click()
+            await expect(page.getByText(appName)).toHaveCount(1)
+            await expect(page.getByTestId('createAppDialogForm')).toBeHidden()
+            await page.getByText('Add app').click()
+        })
+    }
+    await page.keyboard.press('Escape')
+})