awing-library 2.1.2-dev.99 → 2.1.2-stable.2

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/ViewInfo.test.js

@@ -0,0 +1,224 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable testing-library/no-wait-for-side-effects */
+var react_1 = require("@testing-library/react");
+var ViewInfo_1 = __importDefault(require("./ViewInfo"));
+require("@testing-library/jest-dom");
+var Constant_1 = require("../../../../ACM-AXN/Page/Constant");
+var templateTypes = [
+    {
+        id: 1,
+        name: 'Banner',
+        templateTypeCode: 'lgn',
+    },
+    {
+        id: 17,
+        name: 'Customize',
+        templateTypeCode: 'lgn',
+    },
+    {
+        id: 7,
+        name: 'Customize',
+        templateTypeCode: 'wlc',
+    },
+];
+var directories = [
+    {
+        description: null,
+        directoryId: '4711650767517730267',
+        directoryPath: '.0.99.4711650767517730267.',
+        isFile: false,
+        isSystem: true,
+        level: 2,
+        name: 'SYSTEM TEMPLATE',
+        objectTypeCode: 'template',
+        order: 0,
+        parentDirectoryId: '99',
+    },
+    {
+        description: null,
+        directoryId: '5084661221099431199',
+        directoryPath: '.0.99.4711650767517730267.5084661221099431199.',
+        isFile: false,
+        isSystem: false,
+        level: 3,
+        name: 'Beta template',
+        objectTypeCode: 'template',
+        order: 0,
+        parentDirectoryId: '4711650767517730267',
+    },
+];
+var templates = [
+    {
+        autoField: '',
+        description: '07.[DEFAULT] Data Collection 1 Page_v1.0',
+        directoryId: '5183679953246990989',
+        directoryPath: '.0.99.4711650767517730267.5183679953246990989.4619609303918768290.',
+        id: '4619609303918768290',
+        layoutId: '0',
+        name: '',
+        pageCode: 'lgn',
+        templateHtml: '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>\r\n<link href="/static/Files/template/5246961620307474338/template_cpa_v1_0.css?432" rel="stylesheet" />\r\n<div id="cpa-container" style="width:100%">\r\n  <img id="background_img_1" src="{cpa_1_banner_1}">\r\n  <div class="box-wrapper-2">\r\n    <table class="form_table formtable-fix form_table_text" id="cpa_field_list">\r\n    </table>\r\n    <table class="form_table btn-form-label form_table_text form-paddingtop">\r\n      <tr>\r\n        <td>\r\n          <button class="btn_action  btn_left btn_form_2" onclick="nextView();">\r\n          <strong id="btn_left_text2">KẾT NỐI<br/>INTERNET NGAY</strong>\r\n          <br/>\r\n          <small class="smallen">(ACCESS INTERNET)</small>\r\n        </button>\r\n        </td>\r\n        <td>\r\n          <button class="btn_action btn_right btn_form_2"  onclick="doSubmit()">\r\n            <strong id="btn_right_text2">ĐĂNG KÝ<br/>& KẾT NỐI INTERNET</strong>\r\n            <br/>\r\n            <small class="smallen">(REGISTER & ACCESS INTERNET)</small>\r\n          </button>\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  </div>\r\n</div>\r\n<textarea id="textLeftButtonBanner2" style="display: none;">{cpa_1_banner_2}</textarea>\r\n<textarea id="textRightButtonBanner2" style="display: none;">{cpa_1_banner_3}</textarea>\r\n<div id="continue_scroll" style="display: none;">\r\n  <a id="continue_text"><span></span>Còn tiếp</a>\r\n</div>\r\n<script>\r\nvar textLeftButtonBanner2 = $("#textLeftButtonBanner2").text().replace(/(?:\\r\\n|\\r|\\n)/g, \'<br/>\');\r\nvar textRightButtonBanner2 = $("#textRightButtonBanner2").text().replace(/(?:\\r\\n|\\r|\\n)/g, \'<br/>\');\r\nvar colorCodeLeftButton = "#"+"{cpa_1_banner_4}";\r\nvar colorCodeRightButton = "#"+"{cpa_1_banner_5}";\r\nvar colorTextLeftButton = "#"+"{cpa_1_banner_6}";\r\nvar colorTextRightButton = "#"+"{cpa_1_banner_7}";\r\nvar fieldList = [];\r\nvar nameFieldCheckbox = "{cpa_1_banner_8}" == "true" ? fieldList.push("name") : "";\r\nvar phoneFieldCheckbox = "{cpa_1_banner_9}" == "true" ? fieldList.push("phone") : "";\r\nvar emailFieldCheckbox = "{cpa_1_banner_10}" == "true" ? fieldList.push("email") : "";\r\nvar textFieldBackGroundColor = "{cpa_1_banner_11}";\r\nvar textFieldBorderColor = "#"+"{cpa_1_banner_12}";\r\n\r\nfieldList.forEach(function(item){\r\n  if(item == "name"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'text\' id=\'name\' name=\'name\' placeholder=\'Họ và tên\' class=\'input-text input-box-2 input-text-name\'></input><span class=\'tooltiptext\' id=\'tooltipname\'>Họ và tên không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n  if(item == "phone"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'number\' id = \'phone\' placeholder=\'Số điện thoại\' class=\'input-text input-box-2 input-text-phone\'></input><span class=\'tooltiptext\' id=\'tooltipphone\'>Số điện thoại không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n  if(item == "email"){\r\n    $("#cpa_field_list").append("<tr><td colspan=\'2\' class=\'tooltip\'><input type=\'text\' id=\'email\' placeholder=\'Email\' class=\'input-text input-box-2 input-text-email\' /><span class=\'tooltiptext\' id=\'tooltipemail\'>Email không đúng, xin vui lòng nhập lại!</span></td></tr>");\r\n  }\r\n});\r\nif(fieldList.length == 3) {\r\n  $(".box-wrapper-2").addClass("three-field-form");\r\n}\r\nvar mInfo = detectDeviceInfo();\r\nvar windowheight = window.innerHeight;\r\nvar browserLang = navigator.language || navigator.userLanguage;\r\nif(browserLang !="vi-VN"){\r\n  $("#continue_text").html("<span></span>More</a>");\r\n  // $(".wa-button-maxview").addClass("wa-button-en");\r\n  $("#continue_scroll").addClass("continue-en");\r\n}\r\nif(textLeftButtonBanner2.length > 0) { $("#btn_left_text2").html(textLeftButtonBanner2); }\r\nif(textRightButtonBanner2.length > 0) { $("#btn_right_text2").html(textRightButtonBanner2); }\r\n$(".btn_left").css({\r\n  "background-color": colorCodeLeftButton,\r\n  "color": colorTextLeftButton\r\n});\r\n$(".btn_right").css({\r\n  "background-color": colorCodeRightButton,\r\n  "color": colorTextRightButton\r\n});\r\nif(textFieldBackGroundColor.toLowerCase() == "màu xám") {\r\n  $("td > .input-box-2").css("background-color", "#d9d9d9");\r\n}\r\n$("td > .input-box-2").css("border",\'1px solid \' + textFieldBorderColor);\r\n\r\nif(mInfo.os == "iOS" || mInfo.os == "Android"){\r\n  $(\'#continue_text\').css(\'color\', colorCodeLeftButton);\r\n  $(\'#continue_text span\').css({\r\n    "border-left":"5px solid " + colorCodeLeftButton,\r\n    "border-bottom": "5px solid " + colorCodeLeftButton\r\n  });\r\n}\r\n\r\n$("#continue_scroll").hide();\r\nfunction startAnimation(){\r\n  $(\'#layoutHeader\').hide();\r\n  if(mInfo.os == "iOS" || mInfo.os == "Android"){\r\n    $(window).off(\'scroll\');\r\n    // var footerHeight = ($(\'#wa_hotline\').outerHeight() > 0 ) ? $(\'#wa_hotline\').outerHeight() : 32.4;\r\n    // $(\'#cpa-container\').css(\'min-height\', windowheight - footerHeight);\r\n    // $(\'#cpa-container\').css(\'background\', colorCodeBody);\r\n    setTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));}, 750);\r\n    $(document).on(\'touchend\', function() {\r\n      setTimeout(function()\r\n      {\r\n        continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));\r\n      }, 750);\r\n    });\r\n  }\r\n  else {\r\n    window.onresize = function(event) {\r\n      var rightContinue = ($(window).width() - $("#background_img_1").width())/2 - $("#continue_scroll").width() + 3;\r\n      $("#continue_scroll").css(\'right\', rightContinue);\r\n      $("#continue_scroll.continue-en").css(\'right\', rightContinue+5);\r\n    };\r\n    setTimeout(function(){\r\n      var rightContinue = ($(window).width() - $("#background_img_1").width())/2 - $("#continue_scroll").width() + 5;\r\n      $("#continue_scroll").css(\'right\', rightContinue);\r\n      $("#continue_scroll.continue-en").css(\'right\', rightContinue+10);\r\n      continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll\'));\r\n    }, 750);\r\n  }\r\n}\r\n$(".input-text").focus(function(){\r\n  $("#tooltipphone").hide();\r\n  $("#tooltipname").hide();\r\n  $("#tooltipemail").hide();\r\n  remove_error($(\'.input-text\'));\r\n});\r\nfunction goToForm(){\r\n  $(\'.box-wrapper\').hide();\r\n  $(\'.box-wrapper-2\').show();\r\n  $(\'#background_img\').hide();\r\n  $(\'#background_img_1\').show();\r\n}\r\nfunction doSubmit(){\r\n  var phone = $(\'#phone\').val();\r\n  var name = $(\'#name\').val();\r\n  var email = $(\'#email\').val();\r\n  var valObject = {name: name, phone: phone, email: email};\r\n  if (validateDataCustomer(name,phone,email)){\r\n    var eventObject = {};\r\n    fieldList.forEach(function(item) {\r\n      eventObject[item] = valObject[item];\r\n    });\r\n    postAnalyticEvent("eventcpa",JSON.stringify(eventObject));\r\n    nextView();\r\n  }\r\n}\r\nfunction validateDataCustomer(name,phone,email){\r\n  var validate = true;\r\n  if(fieldList.indexOf("name") !== -1){\r\n    if ((!name)||(ContainNum(name))){\r\n      set_error($(\'#name\'));\r\n      set_errortooltip($(\'#tooltipname\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  if(fieldList.indexOf("phone") !== -1){\r\n    phone = phone.replace(\'(+84)\', \'0\');\r\n    phone = phone.replace(\'+84\', \'0\');\r\n    phone = phone.replace(\'0084\', \'0\');\r\n    phone = phone.replace(/ /g, \'\');\r\n    if (phone != \'\') {\r\n      var firstNumber = phone.substring(0, 2);\r\n      if ((firstNumber == \'03\' || firstNumber == \'05\' || firstNumber == \'07\' || firstNumber == \'08\' || firstNumber == \'09\') && phone.length == 10) {\r\n        if (phone.match(/^\\d{10}/)) {}\r\n      } else if (firstNumber == \'01\' && phone.length == 11) {\r\n        if (phone.match(/^\\d{11}/)) {}\r\n      }\r\n      else{\r\n        set_error($(\'#phone\'));\r\n        set_errortooltip($(\'#tooltipphone\'));\r\n        validate = false;\r\n      }\r\n    }\r\n    else{\r\n      set_error($(\'#phone\'));\r\n      set_errortooltip($(\'#tooltipphone\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  if(fieldList.indexOf("email") !== -1){\r\n    if (email != \'\') {\r\n      if (!isEmail(email)){\r\n        set_error($(\'#email\'));\r\n        set_errortooltip($(\'#tooltipemail\'));\r\n        validate = false;\r\n      }\r\n    }\r\n    else {\r\n      set_error($(\'#email\'));\r\n      set_errortooltip($(\'#tooltipemail\'));\r\n      validate = false;\r\n    }\r\n  }\r\n  return validate;\r\n}\r\nfunction isEmail(email) {\r\n  var regex = /^([a-zA-Z0-9_.+-])+\\@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$/;\r\n  return regex.test(email);\r\n}\r\nfunction ContainNum(t)\r\n{\r\n  var regex = /\\d/g;\r\n  return regex.test(t);\r\n}\r\nfunction set_error(element){\r\n  element.addClass(\'_error\');\r\n}\r\nfunction set_errortooltip(element){\r\n  element.show();\r\n}\r\nfunction remove_error(element){\r\n  element.removeClass(\'_error\');\r\n}\r\nfunction continueScrollHandle(elm, scroll){\r\n  if(checkVisible(elm)) {$(\'#continue_scroll\').hide();}\r\n  else {$(\'#continue_scroll\').show();}\r\n}\r\nfunction checkVisible(elm){\r\n  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);\r\n  if(elm != "" && elm != undefined){\r\n    var rect = elm.getBoundingClientRect();\r\n    return !(rect.bottom == 0 || rect.top - viewHeight >= -(rect.height - 12));\r\n  }else{\r\n    return true;\r\n  }\r\n}\r\n</script>',
+        templateTypeId: 17,
+        validation: '',
+    },
+    {
+        autoField: '',
+        description: '08.[DEFAULT] Horizontal Video_v1.1',
+        directoryId: '5183679953246990989',
+        directoryPath: '.0.99.4711650767517730267.5183679953246990989.4631090508536728844.',
+        id: '4631090508536728844',
+        layoutId: '0',
+        name: '',
+        pageCode: 'lgn',
+        templateHtml: '<link href="/static/Files/template/4631090508536728844/video_horizontal_v1.1.css?01" rel="stylesheet" />\r\n<div id="horizontal-video-container" class="frame1">\r\n\t<div class="video">\r\n\t\t<div class="wpvideo">\r\n\t\t\t<video style="width: 100%" src="{video_1}" playsinline id="mVideo" poster="" preload="auto"></video>   \r\n\t\t\t<img src="{video_3}" id="mImg" style="display:none;margin: 0px auto;">\r\n\t\t\t<div class="connection-container">\r\n\t\t\t\t<button id="connectToInternet" class="wa-button wa-button-view blur btn-bif wa-button-video" style="margin-top:0.5em;">BỎ QUA VIDEO TRONG <small class="smallen">(SKIP AD)</small><i id="countdowntimer" style="padding-left: 3px"  class="countdown">6S</i></button>\r\n\t\t\t\t<a id="user-not-interest" class="class-user-interest" title="Cảm ơn, tôi muốn kết nối Internet ngay/ No thanks, just take me online" onclick="nextView()" style="display: none;">Cảm ơn, tôi muốn kết nối Internet ngay/ No thanks, just take me online </a>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n<div id="continue_scroll_video" style="display: none;">\r\n\t<a id="continue_text_video"><span></span>Còn tiếp</a>\r\n</div>\r\n<script>\r\nvar browserLang = navigator.language || navigator.userLanguage;\r\nif(browserLang !="vi-VN"){\r\n\t$("#continue_text_video").html("<span></span>More</a>");\r\n\t$("#continue_scroll_video").addClass("continue-en");\r\n}\r\nvar mInfo = detectDeviceInfo();\r\nvar isShowBanner="{video_2}" == "true";banner="{video_3}";timeSkipAd = "{video_4}" == "" ? 6 : "{video_4}";colorButton = "#"+"{video_5}";colorTextButton = "#"+"{video_6}";textButton = "{video_7}";colorCodeBackgroundBanner = "#"+"{video_8}";isShowUserInterest = "{video_9}" == "true";\r\nif(Number(timeSkipAd) <= 0){\r\n\t$(\'#connectToInternet\').removeClass(\'blur\').html(\'BỎ QUA VIDEO <small class="smallen">(SKIP AD)</small>\').click(function () {\r\n\t\t\tdocument.body.style.backgroundColor = "#f5f5f5";\r\n\t\t\t\tif(isShowBanner){ showBanner();} else{connectToWifi();}\r\n\t});\r\n}\r\nif(Number(timeSkipAd) > 0){$(\'#countdowntimer\').html(timeSkipAd+"S");}\r\nif(mInfo.os == "iOS" || mInfo.os == "Android"){ \r\n\t$(\'.wa-button-video\').css({"background-color": colorButton,"color": colorTextButton});\r\n\t$(\'#continue_text_video\').css(\'color\', colorButton);\r\n\t$(\'#continue_text_video span\').css({\r\n\t\t"border-left":"5px solid " + colorButton,\r\n\t\t"border-bottom": "5px solid " + colorButton\r\n\t});\r\n}\r\nif(textButton =="") textButton ="KẾT NỐI INTERNET";\r\nif(banner == "") {\r\n\t$("#mImg").attr("src", "/static/Files/template/4631090508536728844/default_banner.png");\r\n}\r\nfunction startAnimation() {\r\n\t$(\'#layoutFooter\').hide();\r\n\t$(\'#layoutHeader\').hide();var videoId = document.getElementById(\'mVideo\');\r\n\tplayVideo();\r\n\t$(\'#mVideo\').on(\'pause\', function () {showBanner();});\r\n\t$(\'#mVideo\').on(\'play\', function () {\r\n\t\tdocument.body.style.backgroundColor = "rgb(33, 31, 31)";\r\n\t\tpostAnalyticEvent("View(Video)",JSON.stringify({}));\r\n\t\tif (mInfo.os == "iOS" && mInfo.os_value < 113) {\r\n\t\t\t\tdocument.body.style.backgroundColor = "#F5F5F5";\r\n\t\t} else {\r\n\t\t\t\t$("#connectToInternet").show();\r\n\t\t}\r\n\t\tsetTimeout(function () {if(Number(timeSkipAd) > 0) countDown(); }, 100);\r\n\t});\r\n\t$(\'#mVideo\').on(\'ended\', function () {\r\n\t\tpostAnalyticEvent("Completed_View(Video)",JSON.stringify({}));\r\n\t\tnextView();\r\n\t});\r\n\tfunction playVideo() { mVideo.play(); }\r\n\tif(mInfo.os !== "iOS" || mInfo.os !== "Android"){\r\n\t\t$(window).off(\'scroll\');\r\n\t\tsetTimeout(function(){\r\n\t\t\tvar rightContinue = ($(window).width() - $("#mVideo").width())/2 - $("#continue_scroll_video").width() + 5;\r\n\t\t\t$("#continue_scroll_video").css(\'right\', rightContinue);\r\n\t\t\t$("#continue_scroll_video.continue-en").css(\'right\', rightContinue+10);\r\n\t\t\tcontinueScrollHandle($("#connectToInternet")[0], $(\'#continue_scroll_video\'));\r\n\t\t}, 750);\r\n\t\t$(document).on(\'scroll\', function() {\r\n\t\t\tif($("#wa_hotline").height() > 0) {\r\n\t\t\t\tsetTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll_video\'));}, 750);\r\n\t\t\t}\r\n\t\t\telse \r\n\t\t\t\tsetTimeout(function(){continueScrollHandle($("#connectToInternet")[0], $(\'#continue_scroll_video\'));}, 750);\r\n\t\t});\r\n\t}\r\n}\r\nfunction countDown() {\r\n\t\tvar timeleft = 6;\r\n\t\tif(Number(timeSkipAd) > 0) timeleft = Number(timeSkipAd);\r\n\t\tvar downloadTimer = setInterval(function () {\r\n\t\t\t\ttimeleft--;\r\n\t\t\t\tvar x = document.getElementById("countdowntimer");\r\n\t\t\t\tx.textContent = timeleft + "S";\r\n\t\t\t\tif (timeleft <= 0) {\r\n\t\t\t\t\t\tclearInterval(downloadTimer);\r\n\t\t\t\t\t\t$(\'#connectToInternet\').removeClass(\'blur\').html(\'BỎ QUA VIDEO <small class="smallen">(SKIP AD)</small>\').click(function () {\r\n\t\t\t\t\t\t\t\tdocument.body.style.backgroundColor = "#F5F5F5";\r\n\t\t\t\t\t\t\t\t\tif(isShowBanner){   showBanner();} else{connectToWifi();}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t}, 1000);\r\n} \r\nfunction showBanner() {\r\n\t$(\'#layoutFooter\').show();\r\n\tmVideo.pause();\r\n\tdocument.body.style.backgroundColor = "#F5F5F5";\r\n\tcloseFullscreen();\r\n\tdocument.getElementById("mImg").style.display = "block";\r\n\t$("#mVideo").hide();\r\n\t$(\'#mImg\').click(function () { connectToWifi() });\r\n\t$(\'#connectToInternet\').removeClass(\'blur\');\r\n    $(\'#connectToInternet\').unbind(\'click\');\r\n\t$(\'#connectToInternet\').addClass(\'connectInternet\').html(textButton+\'<BR/><small class="smallen">(ACCESS INTERNET)</small>\').click(function () {\r\n    connectToWifi();\r\n\t});\r\n\tif(isShowUserInterest) $(\'#user-not-interest\').show();\r\n\tif(mInfo.os == "iOS" || mInfo.os == "Android"){\r\n\t\t$(window).off(\'scroll\');\r\n\t\tvar windowheight = window.innerHeight;\r\n\t\tif(windowheight < 700) {\r\n\t\t\t$("#connectToInternet").addClass("wa-button-video-continue");\r\n\t\t}\r\n    \thandleFullscreenVideoBanner();\r\n\t\tif(isShowUserInterest){$("#connectToInternet").addClass("wa-button-video-continue-userInterest");}\r\n\t\tvar rightContinue = ($(window).width() - $(".wa-button-video").width())/2 - $("#continue_scroll_video").width();\r\n\t\t$("#continue_scroll_video").css(\'right\', rightContinue-1);\r\n\t\t$("#continue_scroll_video.continue-en").css(\'right\', rightContinue-1);\r\n\t\tsetTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll_video\'));}, 750);\r\n\t\t$(document).on(\'touchend\', function() {\r\n\t\t\tsetTimeout(function(){continueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll_video\'));}, 750);\r\n\t\t});\r\n\t}\r\n\telse {\r\n\t\twindow.onresize = function(event) {\r\n\t\t\tvar rightContinue = ($(window).width() - $("#mImg").width())/2 - $("#continue_scroll_video").width() + 3;\r\n\t\t\t$("#continue_scroll_video").css(\'right\', rightContinue);\r\n\t\t\t$("#continue_scroll_video.continue-en").css(\'right\', rightContinue+5);\r\n\t\t};\r\n\t\tsetTimeout(function(){\r\n\t\t\tvar rightContinue = ($(window).width() - $("#mImg").width())/2 - $("#continue_scroll_video").width() + 5;\r\n\t\t\t$("#continue_scroll_video").css(\'right\', rightContinue);\r\n\t\t\t$("#continue_scroll_video.continue-en").css(\'right\', rightContinue+10);\r\n\t\t\tcontinueScrollHandle($("#wa_hotline")[0], $(\'#continue_scroll_video\'));\r\n\t\t}, 750);\r\n\t}\r\n}\r\nfunction handleFullscreenVideoBanner() {\r\n  var footerHeight = ($(\'#wa_hotline\').outerHeight() > 0 ) ? $(\'#wa_hotline\').outerHeight() : 32.4;\r\n  $(\'#horizontal-video-container\').css(\'min-height\', window.innerHeight - footerHeight);\r\n  $(\'#horizontal-video-container\').css(\'background\', colorCodeBackgroundBanner);\r\n}\r\nfunction connectToWifi(){\r\n\tif(isShowUserInterest) {postAnalyticEvent("user_interest",JSON.stringify({}));}\r\n\tnextView();\r\n}\r\nfunction continueScrollHandle(elm, scroll){\r\n\tif(checkVisible(elm)) { scroll.hide(); }\r\n\telse { scroll.show(); }\r\n}\r\nfunction checkVisible(elm) {\r\n\tvar viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);\r\n\tif(elm != "" && elm != undefined){\r\n\t\tvar rect = elm.getBoundingClientRect();\r\n\t\treturn !(rect.bottom == 0 || rect.top - viewHeight >= -(rect.height - 12));\r\n\t}else{\r\n\t\treturn true;\r\n\t}\r\n}\r\nfunction closeFullscreen() {\r\n\tif (document.getElementById(\'mVideo\').exitFullscreen) {\r\n\t\tdocument.getElementById(\'mVideo\').exitFullscreen();\r\n\t} else if (document.getElementById(\'mVideo\').mozCancelFullScreen) { /* Firefox */\r\n\t\tdocument.getElementById(\'mVideo\').mozCancelFullScreen();\r\n\t} else if (document.getElementById(\'mVideo\').webkitExitFullscreen) { /* Chrome, Safari and Opera */\r\n\t\tdocument.getElementById(\'mVideo\').webkitExitFullscreen();\r\n\t} else if (document.getElementById(\'mVideo\').msExitFullscreen) { /* IE/Edge */\r\n\t\tdocument.getElementById(\'mVideo\').msExitFullscreen();\r\n\t}\r\n}\r\n</script>',
+        templateTypeId: 18,
+        validation: '',
+    },
+];
+var clientMethod = {
+    templatesGetByDirectoryId: function (_id) {
+        return Promise.resolve(templates);
+    },
+};
+jest.mock('../../Context', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        service: {
+            templatesGetByDirectoryId: jest.fn(clientMethod.templatesGetByDirectoryId),
+        },
+        pageCode: 1,
+        domainId: 'dat0910jqka',
+        configs: {
+            CAPTIVE_DOMAIN: 'CAPTIVE_DOMAIN',
+            PAGE_LOGIN_PREVIEW: 'PAGE_LOGIN_PREVIEW',
+        },
+    }); },
+}); });
+// Mock DataForm
+jest.mock('../../../../AWING', function () { return ({
+    DataForm: function (props) {
+        props.fields.forEach(function (element) {
+            if (element === null || element === void 0 ? void 0 : element.onValidate) {
+                element === null || element === void 0 ? void 0 : element.onValidate();
+            }
+        });
+        return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "DataForm", children: [(0, jsx_runtime_1.jsx)("p", { children: JSON.stringify(props.oldValue) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "onUpdate", onClick: function () {
+                        props.onUpdate({}, true, 'templateTypeId');
+                        props.onUpdate({
+                            templateTypeId: 17,
+                        }, true, 'templateTypeId');
+                        props.onUpdate({
+                            directoryId: '1122333',
+                        }, true, 'directoryId');
+                    } })] }));
+    },
+}); });
+var defaultProps = {
+    templateTypes: templateTypes,
+    directories: directories,
+    onChange: function () {
+        var params = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            params[_i] = arguments[_i];
+        }
+    },
+    viewInfoData: __assign({}, Constant_1.defaultView),
+};
+var renderUi = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(ViewInfo_1.default, __assign({}, props)));
+};
+describe('Tab File component', function () {
+    it('render without crash', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText(JSON.stringify(__assign(__assign({}, Constant_1.defaultView), { templateTypeId: 0 })))).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('get template view', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi(__assign(__assign({}, defaultProps), { viewInfoData: __assign(__assign({}, defaultProps.viewInfoData), { directoryId: '112233' }) }));
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            react_1.fireEvent.click(react_1.screen.getByTestId('onUpdate'));
+                            expect(react_1.screen.getByText(JSON.stringify(__assign(__assign({}, defaultProps.viewInfoData), { directoryId: '112233', templateTypeId: 0 })))).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    // it('trigger onChange add view', async () => {
+    //     renderUi()
+    //     await waitFor(() => {
+    //         fireEvent.click(screen.getByTestId('viewContentOnChange'))
+    //         fireEvent.click(screen.getByTestId('onChangeView'))
+    //         fireEvent.click(screen.getByTestId('viewContentOnChange'))
+    //         fireEvent.click(screen.getByTestId('addView'))
+    //         fireEvent.click(screen.getByTestId('addView'))
+    //         expect(screen.getByText('pageCount: 3')).toBeInTheDocument()
+    //     })
+    // })
+});

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const TabView: React.FC<{
+    isCreate?: Boolean;
+}>;
+export default TabView;

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/index.js

@@ -0,0 +1,152 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Helpers_1 = require("../../../../Utils/Helpers");
+var immer_1 = require("immer");
+var lodash_1 = require("lodash");
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var recoil_1 = require("recoil");
+var Context_1 = require("../../../../Context");
+var Constant_1 = require("../../Constant");
+var Context_2 = __importDefault(require("../../Context"));
+var enums_1 = require("../../enums");
+var Recoil_1 = require("../Recoil");
+var Utils_1 = require("../Utils");
+var Panel_1 = __importDefault(require("./Components/Panel"));
+var ViewList_1 = __importDefault(require("./Components/ViewList"));
+var ViewContent_1 = __importDefault(require("./ViewContent"));
+var ViewInfo_1 = __importDefault(require("./ViewInfo"));
+var TabView = function (_a) {
+    var isCreate = _a.isCreate;
+    var _b = (0, recoil_1.useRecoilState)((0, Recoil_1.pageState)('views')), _c = _b[0], views = _c.views, page = _c.page, setView = _b[1];
+    var _d = react_1.default.useState(0), activeViewIndex = _d[0], setActiveViewIndex = _d[1];
+    var _e = (0, recoil_1.useRecoilState)(Recoil_1.templateDirectoriesState), directories = _e[0], setDirectories = _e[1];
+    var _f = (0, recoil_1.useRecoilState)(Recoil_1.templateTypeState), templateTypes = _f[0], setTemplateTypes = _f[1];
+    var _g = (0, Context_2.default)(), service = _g.service, pageCode = _g.pageCode;
+    var appHelper = (0, Context_1.useAwing)().appHelper;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    react_1.default.useEffect(function () {
+        fetchData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var fetchData = function () {
+        Promise.all([
+            !directories.length ? service.templatesGetDirectories() : Promise.resolve(directories),
+            !templateTypes.length ? service.templateTypesGet() : Promise.resolve(templateTypes),
+        ]).then(function (_a) {
+            var resDir = _a[0], resTemplateTypes = _a[1];
+            setDirectories(function (prev) { return (0, lodash_1.isEqual)(prev, resDir) ? prev : resDir; });
+            setTemplateTypes(function (prev) {
+                if ((0, lodash_1.isEqual)(prev, resTemplateTypes))
+                    return prev;
+                var result = resTemplateTypes.filter(function (item) {
+                    return item.templateTypeCode ===
+                        (pageCode === enums_1.PageCode.Lgn ? 'lgn' : 'wlc');
+                });
+                result.unshift({
+                    id: 0,
+                    name: t('Template.TemplateTypeAll'),
+                    templateTypeCode: '',
+                });
+                return result;
+            });
+        });
+    };
+    var addPageView = function () {
+        setView((0, immer_1.produce)(function (draft) {
+            var _a;
+            var viewsValid = !views
+                .map(function (viewStatus) { return viewStatus.validStatus; })
+                .includes(false);
+            if (viewsValid) {
+                draft.views.push(__assign(__assign({}, Constant_1.defaultView), { viewId: crypto.randomUUID(), isChanged: true, viewNumber: (((_a = (0, lodash_1.maxBy)(draft.views, 'viewNumber')) === null || _a === void 0 ? void 0 : _a.viewNumber) || 0) + 1 }));
+                setActiveViewIndex(draft.views.length - 1);
+            }
+            else {
+                draft.views.map(function (view) {
+                    return (view.verifiedStatus =
+                        enums_1.VERIFIED_STATUS.VERIFIED_ERROR);
+                });
+                appHelper.snackbar('error', t('Page.RequiredFields'));
+            }
+        }));
+    };
+    var deletePageView = function (tabID) {
+        setView((0, immer_1.produce)(function (draft) {
+            if (draft.views.length === 1)
+                return;
+            draft.views = draft.views
+                .filter(function (value, index) { return (index !== tabID ? value : ''); })
+                .map(function (x, idx) { return (__assign(__assign({}, x), { viewNumber: idx + 1, isChanged: true })); });
+            setActiveViewIndex(draft.views.length - 1);
+        }));
+    };
+    var onChange = function (keys, value) {
+        // console.log("keys", keys, "value", value, views, activeViewIndex)
+        if (keys.includes('activeViewIndex')) {
+            setActiveViewIndex(Number(value));
+            return;
+        }
+        setView((0, immer_1.produce)(function (draft) {
+            if (draft.views.length < Number(keys[1] || 0) + 1)
+                return;
+            (0, Helpers_1.setObject)(draft, keys, value);
+        }));
+    };
+    var handleChange = function (key) {
+        if (key === void 0) { key = []; }
+        return (0, Utils_1.composeKey)(onChange, (0, Utils_1.concatKey)(key));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var handleChangeView = react_1.default.useMemo(function () { return handleChange(['views', String(activeViewIndex)]); }, [activeViewIndex]);
+    return ((0, jsx_runtime_1.jsx)(ViewList_1.default, { isDisableTabHeader: false, activeViewIndex: activeViewIndex, viewCount: views.length, onChangeView: handleChange(), addView: addPageView, deleteView: deletePageView, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { value: activeViewIndex, index: activeViewIndex, children: views.map(function (view, index) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: activeViewIndex === index && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ViewInfo_1.default, { onChange: handleChangeView, templateTypes: templateTypes, viewInfoData: view, viewNumber: index + 1 }), (0, jsx_runtime_1.jsx)(ViewContent_1.default, { viewInfoData: view, pageId: page.pageId, viewNumber: index + 1, onChange: handleChangeView, isCreate: Boolean(isCreate) })] })) }, index)); }) }) }));
+};
+exports.default = TabView;

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/index.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/index.test.js

@@ -0,0 +1,232 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable testing-library/no-wait-for-side-effects */
+var react_1 = require("@testing-library/react");
+var _1 = __importDefault(require("."));
+var recoil_1 = require("recoil");
+require("@testing-library/jest-dom");
+var Recoil_1 = require("../Recoil");
+var Constant_1 = require("../../../../ACM-AXN/Page/Constant");
+var templateTypes = [
+    {
+        id: 1,
+        name: 'Banner',
+        templateTypeCode: 'lgn',
+    },
+    {
+        id: 5,
+        name: 'Customize',
+        templateTypeCode: 'lgn',
+    },
+    {
+        id: 7,
+        name: 'Customize',
+        templateTypeCode: 'wlc',
+    },
+];
+var directories = [
+    {
+        description: null,
+        directoryId: '4711650767517730267',
+        directoryPath: '.0.99.4711650767517730267.',
+        isFile: false,
+        isSystem: true,
+        level: 2,
+        name: 'SYSTEM TEMPLATE',
+        objectTypeCode: 'template',
+        order: 0,
+        parentDirectoryId: '99',
+    },
+    {
+        description: null,
+        directoryId: '5084661221099431199',
+        directoryPath: '.0.99.4711650767517730267.5084661221099431199.',
+        isFile: false,
+        isSystem: false,
+        level: 3,
+        name: 'Beta template',
+        objectTypeCode: 'template',
+        order: 0,
+        parentDirectoryId: '4711650767517730267',
+    },
+];
+var clientMethod = {
+    templatesGetDirectories: function () {
+        var params = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            params[_i] = arguments[_i];
+        }
+        return Promise.resolve(directories);
+    },
+    templateTypesGet: function () {
+        var params = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            params[_i] = arguments[_i];
+        }
+        return Promise.resolve(templateTypes);
+    },
+};
+jest.mock('../../Context', function () { return ({
+    __esModule: true,
+    default: function () { return ({
+        service: {
+            templatesGetDirectories: jest.fn(clientMethod.templatesGetDirectories),
+            templateTypesGet: jest.fn(clientMethod.templateTypesGet),
+        },
+        pageCode: 1,
+        domainId: 'dat0910jqka',
+        configs: {
+            CAPTIVE_DOMAIN: 'CAPTIVE_DOMAIN',
+            PAGE_LOGIN_PREVIEW: 'PAGE_LOGIN_PREVIEW',
+        },
+    }); },
+}); });
+// import PageTabPanel from './Components/Panel'
+// import TabViewList from './Components/ViewList'
+// import ViewContent from './ViewContent'
+// import ViewInfo from './ViewInfo'
+// Mock PageTabPanel
+jest.mock('./Components/Panel', function () { return function (props) {
+    return (0, jsx_runtime_1.jsx)("div", { "data-testid": "PageTabPanel", children: props.children });
+}; });
+jest.mock('./Components/ViewList', function () { return function (props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "TabViewList", children: [props.children, (0, jsx_runtime_1.jsxs)("p", { children: ["pageCount: ", props.viewCount] }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "deleteView", onClick: function () {
+                    props.deleteView(1);
+                }, children: "deletePageView" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "addView", onClick: function () {
+                    props.addView();
+                }, children: "deletePageView" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "onChangeView", onClick: function () {
+                    props.onChangeView("activeViewIndex", 1);
+                }, children: "deletePageView" })] }));
+}; });
+jest.mock('./ViewContent', function () { return function (props) {
+    return (0, jsx_runtime_1.jsxs)("div", { "data-testid": "ViewContent", children: ["ViewContent", (0, jsx_runtime_1.jsx)("button", { "data-testid": "viewContentOnChange", onClick: function () {
+                    props.onChange(['validStatus'], true);
+                }, children: "onChange" })] });
+}; });
+jest.mock('./ViewInfo', function () { return function (props) {
+    return (0, jsx_runtime_1.jsx)("div", { "data-testid": "ViewInfo", children: "ViewInfo" });
+}; });
+jest.mock('../../../../Context', function () { return ({
+    __esModule: true,
+    useAwing: function () { return ({
+        appHelper: {
+            confirm: jest.fn(function (ok) { return ok(); }),
+            snackbar: jest.fn(function (str) { }),
+        },
+    }); },
+}); });
+var renderUi = function () {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(recoil_1.RecoilRoot, { initializeState: function (_a) {
+            var set = _a.set;
+            set(Recoil_1.pageRootState, {
+                page: {
+                    pageId: '',
+                    directoryId: '',
+                    pageCode: '',
+                    title: '',
+                    layoutId: '0',
+                    transitionId: 0,
+                    commonHtml: '',
+                    directoryPath: '',
+                    createdDate: {
+                        seconds: 0,
+                        nanos: 0,
+                    },
+                },
+                commonHtml: '',
+                views: [Constant_1.defaultView, Constant_1.defaultView],
+                viewEvents: [],
+            });
+        }, children: (0, jsx_runtime_1.jsx)(_1.default, {}) }));
+};
+describe('Tab File component', function () {
+    it('render without crash', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            expect(react_1.screen.getByText('pageCount: 2')).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('trigger delete view', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            react_1.fireEvent.click(react_1.screen.getByTestId('deleteView'));
+                            react_1.fireEvent.click(react_1.screen.getByTestId('deleteView'));
+                            expect(react_1.screen.getByText('pageCount: 1')).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('trigger onChange add view', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderUi();
+                    return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                            react_1.fireEvent.click(react_1.screen.getByTestId('viewContentOnChange'));
+                            react_1.fireEvent.click(react_1.screen.getByTestId('onChangeView'));
+                            react_1.fireEvent.click(react_1.screen.getByTestId('viewContentOnChange'));
+                            react_1.fireEvent.click(react_1.screen.getByTestId('addView'));
+                            react_1.fireEvent.click(react_1.screen.getByTestId('addView'));
+                            expect(react_1.screen.getByText('pageCount: 3')).toBeInTheDocument();
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});