JS不靠谱系列: 写一个验证过期时间的函数,包含jest单元测试

简介: 我们经常用到的token还是cookie,都默认有一个过期时间我们做鉴权的时候,很依赖这个,所以捣鼓下能不能再严谨点因为之前都是以后台固定的格式,直接拿到值做一个简单的判断;那,假如后台传过来的日期格式变了呢!!有兴趣的瞧瞧。


前言


我们经常用到的token还是cookie,都默认有一个过期时间


我们做鉴权的时候,很依赖这个,所以捣鼓下能不能再严谨点


因为之前都是以后台固定的格式,直接拿到值做一个简单的判断;


那,假如后台传过来的日期格式变了呢!!有兴趣的瞧瞧。


前置基础


  • jest : 这个测试框架非常不错,Facebook 出品
  • ES5&&ES6
  • Typescript


我们不讲配置,也不讲其他琐碎,只说实现过程


思路分析


重心其实就是围绕传参来执行


  • 判断参数的类型,只考虑两种情况
  • 数字: 验证是否为一个正确的时间戳!!!!
  • 字符串: 验证是否是一个datetime格式,亦或者可以转换成识别的格式(比如 2018/08/01)
  • 类型的转换及比较
  • 最后返回布尔值,来确定该值是否有效


效果图



代码实现


代码不多,只涵盖了这么几种情况,具体看测试的文字描述


js 版本


isDate.js , 暴露isDate函数,接收一个参数


function checkDateTime(d) {
  const _date = new Date(d);
  const Now = new Date().getTime();
  const DiffTime = _date.getTime() - Now;
  if (
    _date.getFullYear() === 1970 ||
    _date.getFullYear() < new Date().getFullYear()
  ) {
    // 若是传入的时间转换成1970年...那肯定不是我们后台要传的时间
    // 小于这个年份的也必然不是,谁的后台token过期时间超过一年的...
    return false;
  }
  if (DiffTime > 60000) {
    // 过期结束时间必须大于传入时间
    // 当过期时间还大于一分钟的时候,
    return true;
  } else {
    // 否则返回false,从外部调用这个函数拿到返回值,
    // 做二步处理,续期还是强制退出什么鬼的
    return false;
  }
}
/**
 * @description 判断是否为正确的日期
 * @param {*} d
 */
export const isDate = d => {
  // 任何不能给Date识别的参数,子函数调用的返回值为NaN
  return isNaN(new Date(d).getTime()) || new Date(d).getTime() === 0
    ? false
    : checkDateTime(d);
};


ts版本


在vscode会有提示错误


DateConstructor: Argument of type 'string | number' is not assignable to parameter of type 'string'.


大体上说日期类型没法赋值字符串类型的值,这个问题似乎等待修复,我在Github上找了,

github.com/Microsoft/T…,


有人提交了PR,不知道有没有合并进去..


github.com/Microsoft/T…


function checkDateTime(d: number | string): boolean {
  const _date: Date = new Date(d);
  const Now: number = new Date().getTime();
  const DiffTime: number = _date.getTime() - Now;
  if (
    _date.getFullYear() === 1970 ||
    _date.getFullYear() < new Date().getFullYear()
  ) {
    // 若是传入的时间转换成1970年...那肯定不是我们后台要传的时间
    // 小于这个年份的也必然不是,谁的后台token过期时间超过一年的...
    return false;
  }
  if (DiffTime > 60000) {
    // 当过期时间还大于一分钟的时候,
    return true;
  } else {
    // 否则返回false,从外部调用这个函数拿到返回值,
    // 做二步处理,续期还是强制退出什么鬼的
    return false;
  }
}
/**
 * @description 判断是否为正确的日期
 * @param {*} d
 */
export const isDate = (d: string | number) => {
  // 任何不能给Date识别的参数,子函数调用的返回值为NaN
  return isNaN(new Date(d).getTime()) || new Date(d).getTime() === 0
    ? false
    : checkDateTime(d);
};


测试代码


import { isDate } from "../../src/utils/isDate";
describe("isDate函数测试集合组", () => {
  test("這種非標準的時間戳只會轉成1970這種,已經過期", () => {
    expect(isDate(21312445)).toBe(false);
  });
  test("已經過期", () => {
    expect(isDate(1533097116565)).toBe(false);
  });
  test("已經過期", () => {
    expect(isDate(1514764800000)).toBe(false);
  });
  test("传入undefined为false,不传参就是undefined", () => {
    expect(isDate(undefined)).toBe(false);
  });
  test("传入null虽然返回0,但也是false", () => {
    expect(isDate(null)).toBe(false);
  });
  test("標準格式的返回true", () => {
    expect(isDate("2018-12-01")).toBe(true);
  });
  test("標準格式的返回true", () => {
    expect(isDate("2018/8/09")).toBe(true);
  });
  test("歷史悠久的也是錯的", () => {
    expect(isDate("1988-10-21")).toBe(false);
  });
  test("非標準格式的返回false", () => {
    expect(isDate("1970-13-51")).toBe(false);
  });
  test("非標準的日期也是false", () => {
    expect(isDate("s2018ww-13-51")).toBe(false);
  });
  test("普通字符串會返回fasle", () => {
    expect(isDate("safdaserw")).toBe(false);
  });
});


目录
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
5天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
29天前
|
机器学习/深度学习 JSON 算法
实例分割笔记(一): 使用YOLOv5-Seg对图像进行分割检测完整版(从自定义数据集到测试验证的完整流程)
本文详细介绍了使用YOLOv5-Seg模型进行图像分割的完整流程,包括图像分割的基础知识、YOLOv5-Seg模型的特点、环境搭建、数据集准备、模型训练、验证、测试以及评价指标。通过实例代码,指导读者从自定义数据集开始,直至模型的测试验证,适合深度学习领域的研究者和开发者参考。
265 2
实例分割笔记(一): 使用YOLOv5-Seg对图像进行分割检测完整版(从自定义数据集到测试验证的完整流程)
|
10天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
22 2
|
10天前
|
JavaScript 测试技术 API
Jest进阶:测试 Vue 组件
Jest进阶:测试 Vue 组件
|
11天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
24 2
|
13天前
|
前端开发 JavaScript 测试技术
React 模拟测试与 Jest
【10月更文挑战第21天】本文介绍了如何使用 Jest 进行 React 组件的单元测试和模拟测试,涵盖了基础概念、常见问题及解决方案,并提供了实践案例。通过学习本文,你将掌握如何有效地使用 Jest 提高代码质量和稳定性。
25 1
|
29天前
|
机器学习/深度学习 JSON 算法
语义分割笔记(二):DeepLab V3对图像进行分割(自定义数据集从零到一进行训练、验证和测试)
本文介绍了DeepLab V3在语义分割中的应用,包括数据集准备、模型训练、测试和评估,提供了代码和资源链接。
155 0
语义分割笔记(二):DeepLab V3对图像进行分割(自定义数据集从零到一进行训练、验证和测试)
|
29天前
|
机器学习/深度学习 算法 PyTorch
目标检测实战(五): 使用YOLOv5-7.0版本对图像进行目标检测完整版(从自定义数据集到测试验证的完整流程)
本文详细介绍了使用YOLOv5-7.0版本进行目标检测的完整流程,包括算法介绍、环境搭建、数据集准备、模型训练、验证、测试以及评价指标。YOLOv5以其高精度、快速度和模型小尺寸在计算机视觉领域受到广泛应用。
298 0
目标检测实战(五): 使用YOLOv5-7.0版本对图像进行目标检测完整版(从自定义数据集到测试验证的完整流程)
|
29天前
|
缓存 数据挖掘 测试技术
目标检测实战(三):YOLO-Nano训练、测试、验证详细步骤
本文介绍了YOLO-Nano在目标检测中的训练、测试及验证步骤。YOLO-Nano是一个轻量级目标检测模型,使用ShuffleNet-v2作为主干网络,结合FPN+PAN特征金字塔和NanoDet的检测头。文章详细说明了训练前的准备、源代码下载、数据集准备、参数调整、模型测试、FPS测试、VOC-map测试、模型训练、模型测试和验证等步骤,旨在帮助开发者高效实现目标检测任务。
40 0
目标检测实战(三):YOLO-Nano训练、测试、验证详细步骤
下一篇
无影云桌面