fix: some improvements

Author: kobenguyent

lib/api/get-config.js

@@ -11,6 +11,6 @@ module.exports = (req, res) => {
     file: codeceptjsFactory.getConfigFile(),
     config: config.get(),
   };
-  
+
   res.json(currentConfig);
 };

package-lock.json

@@ -1,9 +1,9 @@
 {
   "name": "@codeceptjs/ui",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "license": "MIT",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve --host localhost",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint --fix && vue-cli-service lint lib/** --fix",
     "app": "node bin/codecept-ui.js --app -c node_modules/@codeceptjs/examples",
@@ -23,66 +23,66 @@
     "build"
   ],
   "dependencies": {
-    "@codeceptjs/configure": "^0.8.0",
-    "axios": "^0.24.0",
-    "body-parser": "^1.20.1",
-    "cheerio": "^1.0.0-rc.12",
-    "chokidar": "^3.5.3",
-    "commander": "^8.3.0",
+    "@codeceptjs/configure": "0.8.0",
+    "axios": "1.6.7",
+    "body-parser": "1.20.1",
+    "cheerio": "1.0.0-rc.12",
+    "chokidar": "3.5.3",
+    "commander": "8.3.0",
     "core-js": "2.6.12",
-    "debug": "^4.3.4",
-    "electron": "^15.5.5",
-    "express": "^4.18.2",
-    "lodash.clonedeep": "^4.5.0",
-    "nanoid": "^3.3.4",
-    "socket.io": "^2.3.0",
-    "socket.io-client": "^2.3.0"
+    "dayjs": "1.11.10",
+    "debug": "4.3.4",
+    "electron": "15.5.5",
+    "express": "4.18.2",
+    "lodash.clonedeep": "4.5.0",
+    "nanoid": "3.3.4",
+    "socket.io": "2.3.0",
+    "socket.io-client": "2.3.0"
   },
   "devDependencies": {
-    "@codeceptjs/examples": "^1.2.1",
-    "@medv/finder": "^1.1.3",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "ansi-to-html": "^0.7.2",
-    "ava": "^3.15.0",
-    "babel-eslint": "^10.1.0",
-    "buefy": "^0.9.13",
-    "codeceptjs": "^3.4.0",
-    "contributor-faces": "^1.1.0",
-    "copy-text-to-clipboard": "^3.0.1",
-    "electron-icon-builder": "^2.0.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^7.20.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^11.2.6",
-    "moment": "^2.29.4",
-    "playwright": "^1.29",
-    "prismjs": "^1.29.0",
-    "puppeteer": "^10.4.0",
-    "qrcode-terminal": "^0.12.0",
-    "sass": "^1.57.1",
-    "sass-loader": "^10.2.0",
-    "tailwindcss": "^1.9.6",
-    "testcafe": "^1.20.1",
-    "uuid": "^8.3.2",
-    "vue": "^2.6.14",
+    "@codeceptjs/examples": "1.2.1",
+    "@medv/finder": "1.1.3",
+    "@vue/cli-plugin-babel": "3.12.1",
+    "@vue/cli-plugin-eslint": "3.12.1",
+    "@vue/cli-service": "3.12.1",
+    "@vue/eslint-config-prettier": "6.0.0",
+    "ansi-to-html": "0.7.2",
+    "ava": "3.15.0",
+    "babel-eslint": "10.1.0",
+    "buefy": "0.9.13",
+    "codeceptjs": "3.4.0",
+    "contributor-faces": "1.1.0",
+    "copy-text-to-clipboard": "3.0.1",
+    "electron-icon-builder": "2.0.1",
+    "eslint": "7.32.0",
+    "eslint-plugin-vue": "7.20.0",
+    "husky": "7.0.4",
+    "lint-staged": "11.2.6",
+    "playwright": "1.29",
+    "prismjs": "1.29.0",
+    "puppeteer": "10.4.0",
+    "qrcode-terminal": "0.12.0",
+    "sass": "1.57.1",
+    "sass-loader": "10.2.0",
+    "tailwindcss": "1.9.6",
+    "testcafe": "1.20.1",
+    "uuid": "8.3.2",
+    "vue": "2.6.14",
     "vue-cli-plugin-electron-builder": "~2.1.1",
-    "vue-highlightjs": "^1.3.3",
-    "vue-monaco": "^1.2.2",
-    "vue-prism-editor": "^1.3.0",
-    "vue-router": "^3.5.3",
-    "vue-socket.io": "^3.0.10",
+    "vue-highlightjs": "1.3.3",
+    "vue-monaco": "1.2.2",
+    "vue-prism-editor": "1.3.0",
+    "vue-router": "3.5.3",
+    "vue-socket.io": "3.0.10",
     "vue-template-compiler": "2.6.14",
-    "vuex": "^3.6.2",
-    "webdriverio": "^7.24.0"
+    "vuex": "3.6.2",
+    "webdriverio": "7.24.0"
   },
   "resolutions": {
     "sumchecker": "3.0.1"
   },
   "peerDependencies": {
-    "codeceptjs": "^3.2.2"
+    "codeceptjs": "3.5.12"
   },
   "eslintConfig": {
     "root": true,

package.json

@@ -47,9 +47,11 @@
 
 <script>
 import axios from 'axios';
-import moment from 'moment';
 import EditorNotFound from './EditorNotFound';
 import Scenario from './Scenario';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
 
 export default {
   name: 'Feature',
@@ -69,7 +71,7 @@ export default {
   },
   methods: {
     humanize(ts) {
-      return moment.unix(ts / 1000).fromNow();
+      return dayjs(ts).fromNow();
     },
 
     openInEditor(file) {

src/components/Feature.vue

@@ -63,7 +63,9 @@
 </template>
 
 <script>
-import moment from 'moment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime);
 
 export default {
   name: 'Scenario',
@@ -115,7 +117,7 @@ export default {
   },
   methods: {
     humanize(ts) {
-      return moment.unix(ts / 1000).fromNow();
+      return dayjs(ts).fromNow();
     },
 
     selectScenario(scenario) {

src/components/Scenario.vue

@@ -18,7 +18,7 @@
           class="fa-md fas fa-edit text-red-500 mr-2  fa-inverse"
           v-if="!editor"
         />
-      </b-tooltip>    
+      </b-tooltip>
       <b-tooltip
         label="Window Mode Enabled"
         position="is-left"
@@ -153,7 +153,7 @@
             <a
               class="is-small"
               @click="gotoSettingsPage()"
-            >Show Config</a> &nbsp; {{ config.file }}
+            >Show CodeceptJS Config</a>
           </footer>
         </div>
       </form>

src/components/SettingsMenu.vue

@@ -92,7 +92,7 @@ export default {
       return (
         this.$refs.contentDocument ||
         (this.$refs.source.contentWindow &&
-        this.$refs.source.contentWindow.document)
+          this.$refs.source.contentWindow.document)
       );
     },
 
@@ -105,7 +105,7 @@ export default {
       return (        
         this.$refs.source.contentWindow &&
         (this.$props.snapshot.scrollPosition.x > 0 ||
-        this.$props.snapshot.scrollPosition.y > 0)
+          this.$props.snapshot.scrollPosition.y > 0)
       );
     },
 

src/components/SnapshotSource.vue

@@ -103,11 +103,13 @@
 </template>
 
 <script>
-import moment from 'moment';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import Pause from './Pause';
 import Step from './Step';
 import ScenarioSource from './ScenarioSource';
 import TestResult from './TestResult';
+import dayjs from 'dayjs';
+dayjs.extend(relativeTime);
 
 export default {
   name: 'Test',
@@ -137,7 +139,7 @@ export default {
 
   methods: {
     humanize(ts) {
-      return moment.unix(ts / 1000).fromNow();
+      return dayjs(ts).fromNow();
     },
 
     indentLevel(step) {

src/components/Test.vue

@@ -5,13 +5,13 @@
       @run="runScenario(scenario)"
     />
     <aside class="Sidebar">
-      <MonacoEditor 
+      <MonacoEditor
         class="editor"
-        v-model="code" 
+        v-model="code"
         @editorDidMount="editorDidMount"
-        language="javascript" 
+        language="javascript"
       />
-      
+
       <button
         v-if="!isRunning"
         @click="runScenario(scenario)"
@@ -55,7 +55,7 @@
             <a @click="enableWindowMode()">Force Window mode <i class="fas fa-window-maximize settings" /></a> to see the execution in actual browser
           </li>
           <li :class="{ 'line-through': isSingleSession }">
-            <a @click="enableSingleSession()">Enable Singleton Browser Session</a> to reuse one window accross test runs
+            <a @click="enableSingleSession()">Enable Singleton Browser Session</a> to reuse one window across test runs
           </li>
           <li :class="{ 'line-through': isRunning }">
             Write the inital code and click <a @click="runScenario()">Launch Test</a>
@@ -109,7 +109,7 @@ export default {
   created: async function () {
     this.$store.dispatch('testRuns/clearTests');
     if (localStorage.getItem('newTestCommand') !== null) {
-      this.code = localStorage.getItem('newTestCommand');  
+      this.code = localStorage.getItem('newTestCommand');
     }
   },
   beforeDestroy: function() {

src/components/pages/NewTestPage.vue

@@ -15,9 +15,7 @@
           <SettingsMenu />
         </b-navbar-item>
       </template>
-      <template slot="start">
-
-      </template>
+      <template slot="start" />
 
       <template slot="end">
         <b-navbar-item class="is-hidden-touch">
@@ -31,20 +29,27 @@
     >
       <aside class="Sidebar">
         <div>
-          <h1 class="title is-size-4 has-text-grey-dark">Page Objects</h1>
-          <br />
+          <h1 class="title is-size-4 has-text-grey-dark">
+            Page Objects
+          </h1>
+          <br>
         </div>
         <ul style="overflow-y: scroll;">
           <li v-for="(value,name) in pageObject">
-            <a class="Scenario-detailLink" @click="loadPageObjectSource(value.source)">{{ name }}
-            <i class="fas fa-angle-right"></i>
+            <a
+              class="Scenario-detailLink"
+              @click="loadPageObjectSource(value.source)"
+            >{{ name }}
+              <i class="fas fa-angle-right" />
             </a>
           </li>
         </ul>
-
       </aside>
-      <div class="Content" style="overflow-y: scroll;">
-        <pre v-highlightjs="pageObjectSource"><code class="javascript"/></pre>
+      <div
+        class="Content"
+        style="overflow-y: scroll;"
+      >
+        <pre v-highlightjs="pageObjectSource"><code class="javascript" /></pre>
       </div>
     </section>
   </div>