[QT-148] Wrote the app creation case.

frontend/express/public/core/app-management/templates/app-management.html

@@ -216,21 +216,21 @@ <h2 class="bu-mb-4" data-test-id="selected-app-name-title"> {{apps[selectedApp]
                                     <template v-slot:main>
                                         <div class="bu-mr-0 bu-is-flex bu-is-justify-content-flex-end bu-is-align-items-center cly-vue-user-selected" style="height: 100%;">
                                             <span class="selected-count-blue bu-pl-1 text-medium">
-                                                <span style="background-color:#0166D6; color:white; padding:3px 7px; border-radius:4px;">{{compare(formScope.editedObject,apps[selectedApp]).length}}</span>
-                                                <span v-if="compare(formScope.editedObject,apps[selectedApp]).length>1" class="bu-is-lowercase text-medium color-cool-gray-50 bu-pl-1">{{ i18n("common.diff-helper.changes-made") }}</span>
+                                                <span data-test-id="number-of-changes" style="background-color:#0166D6; color:white; padding:3px 7px; border-radius:4px;">{{compare(formScope.editedObject,apps[selectedApp]).length}}</span>
+                                                <span v-if="compare(formScope.editedObject,apps[selectedApp]).length>1" data-test-id="changes-has-been-made-label" class="bu-is-lowercase text-medium color-cool-gray-50 bu-pl-1">{{ i18n("common.diff-helper.changes-made") }}</span>
                                                 <span v-else class="bu-is-lowercase text-medium color-cool-gray-50 bu-pl-1">{{ i18n("common.diff-helper.changes-made-single") }}</span>
-                                                <span v-if="compare(formScope.editedObject,apps[selectedApp]).length>1" class="text-medium color-cool-gray-50">{{ i18n("common.diff-helper.keep") }}</span>
+                                                <span v-if="compare(formScope.editedObject,apps[selectedApp]).length>1"  data-test-id="do-you-wanna-keep-label" class="text-medium color-cool-gray-50">{{ i18n("common.diff-helper.keep") }}</span>
                                                 <span v-else class="text-medium color-cool-gray-50">{{ i18n("common.diff-helper.keep-single") }}</span>
                                             </span>
                                             <span class="vertical-divider bu-mr-4 bu-ml-4"></span>
-                                            <el-button skin="red" class="bu-mr-2" size="small" type="default" @click="save(formScope.editedObject)">
+                                            <el-button data-test-id="save-changes-button" skin="red" class="bu-mr-2" size="small" type="default" @click="save(formScope.editedObject)">
                                                 <i class="cly-io-16 cly-io cly-io-save-disc" style="font-size: larger;"></i>
                                                 <span class="bu-ml-1">
                                                     {{ i18n('dashboards.save-changes') }}
                                                 </span>
                                             </el-button>
                                             <el-button class="x-button" @click="discardForm">
-                                                <i class="cly-io-16 cly-io cly-io-x color-cool-gray-50"></i>
+                                                <i data-test-id="close-button" class="cly-io-16 cly-io cly-io-x color-cool-gray-50"></i>
                                             </el-button>
                                         </div>
                                     </template>

frontend/express/public/javascripts/countly/vue/components/input.js

@@ -328,7 +328,7 @@
                                 @keyup.enter="!option.group && handleItemClick(option)"\
                                 @click.stop="!option.group && handleItemClick(option)"\
                                 v-for="(option, idx) in searchedOptions">\
-                                <div class="cly-vue-listbox__item-content">\
+                                <div class="cly-vue-listbox__item-content" :data-test-id="testId + \'-\' + \'item\'">\
                                     <div class="bu-level">\
                                         <div class="bu-level-left">\
                                             <div v-if="!!$scopedSlots[\'option-prefix\']" class="cly-vue-listbox__item-prefix bu-mr-1">\

ui-tests/cypress/e2e/dashboard/manage/apps/apps.cy.js

@@ -0,0 +1,104 @@
+import user from '../../../../fixtures/user.json';
+const navigationHelpers = require('../../../../support/navigations');
+const loginHelpers = require('../../../../lib/login/login');
+const appHelper = require('../../../../lib/dashboard/manage/apps/apps');
+const { generateAppsFixture } = require('../../../../fixtures/generators/apps');
+const { APP_TYPE } = require('../../../../support/constants');
+
+describe('Create apps with different types such as Desktop, Mobile, and Web. ', () => {
+    beforeEach(function() {
+        navigationHelpers.goToLoginPage();
+        loginHelpers.login(user.username, user.password);
+        navigationHelpers.goToApplicationsPage();
+    });
+
+    it('Create a mobile type app with icon.', function() {
+
+        const app = generateAppsFixture();
+        appHelper.clickAddNewAppButton();
+        appHelper.typeAppName(app.appName);
+        appHelper.selectAppType(APP_TYPE.MOBILE);
+        appHelper.selectCountry("Turkey");
+        appHelper.clickCreateButton();
+
+        appHelper.searchApp(app.appName);
+        appHelper.selectAppFromList();
+
+        appHelper.verifyCretedApp({
+            appName: app.appName,
+            appType: APP_TYPE.MOBILE,
+            country: "TR",
+            timeZone: "Europe/Istanbul"
+        });
+
+        //add icon case
+        appHelper.uploadAppIcon(app.logoPath);
+    });
+
+    it('Create a desktop type app without icon and update the name and app type.', function() {
+
+        const app = generateAppsFixture();
+        appHelper.clickAddNewAppButton();
+        appHelper.typeAppName(app.appName);
+        appHelper.selectAppType(APP_TYPE.DESKTOP);
+        appHelper.selectCountry("Turkey");
+        appHelper.clickCreateButton();
+
+        appHelper.searchApp(app.appName);
+        appHelper.verifyCretedApp({
+            appName: app.appName,
+            appType: APP_TYPE.DESKTOP,
+            country: "TR",
+            timeZone: "Europe/Istanbul"
+        });
+
+        //update app case
+        const updatedName = generateAppsFixture();
+
+        appHelper.clickEditButton();
+        appHelper.typeAppName(updatedName.appName);
+        appHelper.selectAppType(APP_TYPE.MOBILE);
+        appHelper.selectCountry("United Kingdom");
+        appHelper.verifyEditPopupElements();
+        appHelper.clickSaveChangesButton();
+
+        appHelper.searchApp(updatedName.appName);
+        appHelper.selectAppFromList();
+
+        appHelper.verifyCretedApp({
+            appName: updatedName.appName,
+            appType: APP_TYPE.MOBILE,
+            country: "GB",
+            timeZone: "Europe/Istanbul"
+        });
+
+        appHelper.verifyCahangesShouldBeMade();
+    });
+
+    it('Create a web type app without icon and delete it.', function() {
+
+        const app = generateAppsFixture();
+        appHelper.clickAddNewAppButton();
+        appHelper.typeAppName(app.appName);
+        appHelper.selectAppType(APP_TYPE.WEB);
+        appHelper.selectCountry("Turkey");
+        appHelper.clickCreateButton();
+
+        appHelper.searchApp(app.appName);
+        appHelper.verifyCretedApp({
+            appName: app.appName,
+            appType: APP_TYPE.WEB,
+            country: "TR",
+            timeZone: "Europe/Istanbul"
+        });
+
+        //delete app case
+        appHelper.clickmoreOptionsButton();
+        appHelper.clickDeleteAppOption();
+        appHelper.verifyDeleteAppPopupElements();
+        appHelper.clickYesDeleteButton();
+        appHelper.searchApp(app.appName);
+        appHelper.verifyAppShouldBeDleted();
+
+    });
+});

ui-tests/cypress/fixtures/generators/apps/index.js

@@ -0,0 +1,18 @@
+const { faker } = require('@faker-js/faker');
+
+const generator = () => {
+
+    const appName = faker.lorem.words({ min: 1, max: 3 });
+    const logoPath = 'testFiles/lowSizeTestImage.png';
+
+    return {
+        appName,
+        logoPath,
+    };
+};
+
+module.exports = {
+    generateAppsFixture: () => {
+        return generator();
+    },
+};

ui-tests/cypress/fixtures/generators/generateFixtures.js

@@ -5,6 +5,8 @@ const { generateWidgetFixture } = require('./widgets');
 const { generateWidgetsRatesFixture } = require('./widgetsRates');
 const { generateAlertFixture } = require('./alerts');
 const { generateUsersFixture } = require('./users');
+const { generateAppsFixture } = require('./apps');
+
 
 const BASE_DIR = path.join(__dirname, '../generated');
 
@@ -16,6 +18,7 @@ const setupFolders = () => {
     fs.mkdirSync(path.join(BASE_DIR, 'widgetsRates'), { recursive: true });
     fs.mkdirSync(path.join(BASE_DIR, 'alerts'), { recursive: true });
     fs.mkdirSync(path.join(BASE_DIR, 'users'), { recursive: true });
+    fs.mkdirSync(path.join(BASE_DIR, 'apps'), { recursive: true });
 };
 
 const writeJson = (filePath, data) => {
@@ -31,6 +34,7 @@ const writeJson = (filePath, data) => {
     writeJson('/widgetsRates/widgetsRate.json', generateWidgetsRatesFixture());
     writeJson('/alerts/alert.json', generateAlertFixture());
     writeJson('/users/user.json', generateUsersFixture());
+    writeJson('/apps/app.json', generateAppsFixture());
 })();
 
 // node ./cypress/fixtures/generators/generateFixtures.js

ui-tests/cypress/lib/dashboard/feedback/ratings/widgets.js

@@ -541,7 +541,7 @@ const clickDontUseLogoRadioButton = () => {
 };
 
 const uploadLogo = (logoPath) => {
-    cy.uploadFile(feedbackRatingWidgetsPageElements.UPLOAD_FILE_DROPZONE, logoPath);
+    cy.dragAndDropFile(feedbackRatingWidgetsPageElements.UPLOAD_FILE_DROPZONE, logoPath);
 };
 
 const selectMainColor = (colorCode) => {