test: 添加测试，测试utils/time.js的computeDurationText

4 years ago · e758010845
5 changed files with 106 additions and 88 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -48,49 +48,6 @@
 - | 项目api url设置 | 6cd5245
 - | 项目列表, 项目url | 32e005b
 - | 首页项目样式改变 | 8514c85
- calendar, tall.js | 上下滑动切换日历的模式,tall.js中domain根据环境变量切换 | [364e25d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/364e25d)
- - | db store | [6414c4f](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6414c4f)
- default plugin | 添加默认插件;项目列表;全局项目最大高度设置 | [ed1d87b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ed1d87b)
- - | indexedDB | [687394e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/687394e)
- pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/de01343)
- plugin | 插件添加了token及param参数 | [aeb0292](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aeb0292)
- - | post 封装 | [da52e94](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/da52e94)
- - | tall插件封装 | [1bcb920](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/1bcb920)
- task status | 任务状态切换未完 | [7ffd135](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7ffd135)
- - | ws storage | [21b3a06](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/21b3a06)
- - | 上传逻辑变化 | [3ff1dc2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3ff1dc2)
- - | 全局插件及默认插件位置修改 | [6c80d08](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6c80d08)
- - | 向右箭头图标变化 | [8e9ca55](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8e9ca55)
- - | 字体大小更改 | [82cfdd4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/82cfdd4)
- - | 存token | [b8a178d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b8a178d)
- - | 定期任务面板骨架屏添加 | [b2698c0](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b2698c0)
- 富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ed3d644)
- - | 导入wbs | [1224fcb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/1224fcb)
- - | 导入项目,更新项目 | [5e06adf](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5e06adf)
- - | 导入项目后提示并打开项目详情页 | [410f527](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/410f527)
- - | 引入dayjs | [29b8b93](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/29b8b93)
- - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/9cbe411)
- - | 插件参数处理调整 | [a3e68d3](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a3e68d3)
- - | 插件数据获取 | [5b91bdc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5b91bdc)
- - | 日历定位;合并 | [ea3f937](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ea3f937)
- - | 日常任务插件调整 | [c1881f9](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c1881f9)
- - | 时间基准线，默认插件 | [a33ba1e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a33ba1e)
- - | 时间轴修改状态时提示框增加 | [e841392](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e841392)
- - | 时间轴界面 | [33927e9](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/33927e9)
- - | 标题栏变化 | [3898cfe](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3898cfe)
- - | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c0fcd9d)
- - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0500cb4)
- - | 模拟接口测试 | [69e7931](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/69e7931)
- - | 添加时间轴上下滚动 | [2b81bbc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/2b81bbc)
- - | 点击日历日期查询项目列表 | [c458385](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c458385)
- - | 角色栏实现 | [94cd671](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/94cd671)
- - | 设置小红点 | [9316bcb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/9316bcb)
- - | 距调整pc端 | [5069aa1](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5069aa1)
- - | 配置默认插件接口 | [f0c177d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/f0c177d)
- - | 面变化首页变化 | [5e860f1](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5e860f1)
- - | 项目api url设置 | [6cd5245](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6cd5245)
- - | 项目列表, 项目url | [32e005b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/32e005b)
- - | 首页项目样式改变 | [8514c85](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8514c85)


 ### 🎨 代码样式
@ -131,9 +88,11 @@
 - | 下拉加载定期任务传参，时间格式化修改 | 0b95a0e
 - | 任务开始时间延迟插件 | 992a313
 - | 修改main | 749ae9a
+ - | 修改小红点传参 | 87b20fd
 - | 修改报错 | 531c14d
 - | 修改接口路径 | df6acf2
 - | 修改角色栏组件 | a54c601
+ - | 切换到默认项目角色没有激活状态的bug | 438d448
 - | 切换日历时查询小红点 | 7091789
 - | 定期任务接口 | aa4981c
 - | 定期任务插件 | 92b3254
@ -220,3 +179,4 @@
 - | style:index | 978f272
 - | !2 基础模板v1.1.0 | f5e61dd
 - | init | c0f1deb
+
--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
    "build": "npm run build:h5",
    "lint": "vue-cli-service lint",
    "fix": "vue-cli-service lint --fix",
+    "test": "npm run test:h5",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode development",
    "dev:h5-pro": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode production",
    "build:h5-test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode development",
@ -89,6 +90,7 @@
    "postcss-class-rename": "^1.0.1",
    "postcss-comment": "^2.0.0",
    "prettier": "^2.2.1",
+    "puppeteer": "^10.2.0",
    "right-pad": "^1.0.1",
    "sass-loader": "^8.0.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
--- a/src/components/TimeLine/component/TimeStatus.vue
+++ b/src/components/TimeLine/component/TimeStatus.vue
@ -134,52 +134,21 @@ export default {
    // 剩余时间 = 预计结束时间 - 当前时间
    // 剩余时间 = realStart + planDuration - Date.now()
    computeDurationText() {
-      try {
-        if (this.timer) {
-          clearTimeout(this.timer);
-          this.timer = null;
-        }
-        const { realStart, planDuration } = this.task;
-        const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间
-        if (leftTime < 0) return 0;
-        const { years, months, days, hours, minutes, seconds, milliseconds } = this.$moment.duration(leftTime);
-        let num = 0;
-        let time = 1000;
-
-        if (years > 0) {
-          num = years;
-          time = 60 * 60 * 1000; // 按小时
-        } else if (months > 0) {
-          num = months;
-          time = 60 * 60 * 1000; // 按小时
-        } else if (days > 0) {
-          num = days;
-          time = 60 * 60 * 1000; // 按小时
-        } else if (hours > 0) {
-          num = hours;
-        } else if (minutes > 0) {
-          num = minutes;
-        } else if (seconds > 0) {
-          num = seconds;
-        } else if (milliseconds > 0) {
-          num = milliseconds;
-          time = 16;
-        } else {
-          time = null;
-        }
-        console.log('time', time); // DEBUG:
-        this.$nextTick(() => {
-          if (!time) return;
-          this.timer = setTimeout(() => {
-            this.computeDurationText();
-          }, time);
-        });
-
-        return num;
-      } catch (error) {
-        console.error('🚀 ~ file: TimeStatus.vue ~ line 174 ~ computeDurationText ~ error', error);
-        return 0;
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
      }
+      const { realStart, planDuration } = this.task;
+      const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间
+      const { num, time } = this.$t.time.computeDurationText(leftTime);
+      console.log('time', time); // DEBUG:
+      this.$nextTick(() => {
+        if (!time) return;
+        this.timer = setTimeout(() => {
+          this.computeDurationText();
+        }, time);
+      });
+      return num;
    },
  },
 };
--- a/src/test/util/time.test.js
+++ b/src/test/util/time.test.js
@ -0,0 +1,46 @@
+import Time from '../../utils/time.js';
+
+// 测试计算进行中剩余时长显示数值
+describe('utils/time.js computeDurationText function', () => {
+  const { computeDurationText } = Time;
+  // const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间
+  it ('leftTime is 60ms, num=60, time=16', () => {
+    expect(computeDurationText(60)).toEqual({ num: 60, time: 16 })
+  })
+
+  it ('leftTime is 300ms, num=300, time=16', () => {
+    expect(computeDurationText(300)).toEqual({ num: 300, time: 16 })
+  })
+
+  it ('leftTime is 10s20ms, num=10, time=1000', () => {
+    expect(computeDurationText(10*1000 + 20)).toEqual({ num: 10, time: 1000 })
+  })
+
+  it ('leftTime is 8分钟10s20ms, num=8, time=1000', () => {
+    expect(computeDurationText(8*60*1000 + 10*1000 + 20)).toEqual({ num: 8, time: 1000 })
+  })
+
+  it ('leftTime is 3小时8分钟10s20ms, num=3, time=1000', () => {
+    expect(computeDurationText(3*60*60*1000 + 8*60*1000 + 10*1000 + 20)).toEqual({ num: 3, time: 1000 })
+  })
+
+  it ('leftTime is 11天3小时8分钟10s20ms, num=11, time=60 * 60 * 1000', () => {
+    expect(computeDurationText(11*24*60*60*1000 + 3*60*60*1000 + 8*60*1000 + 10*1000 + 20)).toEqual({ num: 11, time: 60 * 60 * 1000 })
+  })
+
+  it ('leftTime is 2个月11天3小时8分钟10s20ms, num=2, time=60 * 60 * 1000', () => {
+    expect(computeDurationText(2*30*24*60*60*1000 + 11*24*60*60*1000 + 3*60*60*1000 + 8*60*1000 + 10*1000 + 20)).toEqual({ num: 2, time: 60 * 60 * 1000 })
+  })
+
+  it ('leftTime is 7年2个月11天3小时8分钟10s20ms, num=7, time=60 * 60 * 1000', () => {
+    expect(computeDurationText(7*12*30*24*60*60*1000 + 2*30*24*60*60*1000 + 11*24*60*60*1000 + 3*60*60*1000 + 8*60*1000 + 10*1000 + 20)).toEqual({ num: 7, time: 60 * 60 * 1000 })
+  })
+
+  it ('leftTime <=0, num=0, time=null', () => {
+    expect(computeDurationText(-10)).toEqual({ num: 0, time: null })
+  })
+
+  it ('leftTime 不是数字, num=0, time=null', () => {
+    expect(computeDurationText('abc')).toEqual({ num: 0, time: null })
+  })
+})
--- a/src/utils/time.js
+++ b/src/utils/time.js
@ -297,6 +297,46 @@ const formatStartTimeToCycleTime = (cycle, time) => {
  return result;
 };

+/**
+ * 计算进行中状态剩余时间 显示数字
+ * @param {number} leftTime 剩余时间ms
+ * @returns { num: 显示的数字, time: 演示器演示时长 }
+ */
+const computeDurationText = leftTime => {
+  try {
+    if (leftTime < 0) return { num: 0, time: null };
+    const { years, months, days, hours, minutes, seconds, milliseconds } = dayjs.duration(leftTime).$d;
+    let num = 0;
+    let time = 1000;
+
+    if (years > 0) {
+      num = years;
+      time = 60 * 60 * 1000; // 按小时
+    } else if (months > 0) {
+      num = months;
+      time = 60 * 60 * 1000; // 按小时
+    } else if (days > 0) {
+      num = days;
+      time = 60 * 60 * 1000; // 按小时
+    } else if (hours > 0) {
+      num = hours;
+    } else if (minutes > 0) {
+      num = minutes;
+    } else if (seconds > 0) {
+      num = seconds;
+    } else if (milliseconds > 0) {
+      num = milliseconds;
+      time = 16;
+    } else {
+      time = null;
+    }
+    return { num, time };
+  } catch (error) {
+    console.log('🚀 ~ file: time.js ~ line 335 ~ computeDurationText ~ error', error);
+    return { num: 0, time: null };
+  }
+};
+
 export default {
  formatNumber,
  formatTime,
@ -310,4 +350,5 @@ export default {
  formatObjectTimeToMs,
  computeCycle,
  formatStartTimeToCycleTime,
+  computeDurationText,
 };