Question

编写了一个简单的小应用程序，以查看使用Javascript进行显示的周期。在大多数情况下效果很好-但在某些时候，它将显示下一个周期而不是当前周期。

如何在不等待和手动检查的情况下对其进行测试？
我显然想弄清楚为什么它显示了错误的时间段

编辑：如果时间是15:06（3:06 PM），它将显示最后一个else语句，而不是倒数第二个

代码：

var now = '';

//Set Periods
//Slot 1+2 are periods - slots 3+4 are passing times inbetween periods
var periods = [
  ['Before School', 5.00, 7.59],
  ['First', 8.00, 8.49, 8.50, 8.54],
  ['Second', 8.55, 9.44, 9.45, 9.49],
  ['Third', 9.50, 10.39, 10.40, 10.44],
  ['Fourth', 10.45, 11.34, 11.35, 11.39],
  ['Fifth', 11.40, 12.29, 12.30, 12.34],
  ['Sixth', 12.35, 13.24, 13.25, 13.29],
  ['Seventh', 13.30, 14.19, 14.20, 14.24],
  ['Eighth', 14.25, 15.15]
];

//Display Period
function displayPeriod() {
  if (now >= periods[0][1] && now <= periods[0][2]) {
    document.getElementById('period').innerHTML = ('School has not started yet');
  } else if (now >= periods[1][1] && now <= periods[1][2]) {
    document.getElementById('period').innerHTML = ('1st');
  } else if (now >= periods[1][3] && now <= periods[1][4]) {
    document.getElementById('period').innerHTML = ('1st Passing');
  } else if (now >= periods[2][1] && now <= periods[2][2]) {
    document.getElementById('period').innerHTML = ('2nd');
  } else if (now >= periods[2][3] && now <= periods[2][4]) {
    document.getElementById('period').innerHTML = ('2nd Passing');
  } else if (now > periods[3][1] && now <= periods[3][2]) {
    document.getElementById('period').innerHTML = ('3rd');
  } else if (now >= periods[3][3] && now <= periods[3][4]) {
    document.getElementById('period').innerHTML = ('3rd Passing');
  } else if (now >= periods[4][1] && now <= periods[4][2]) {
    document.getElementById('period').innerHTML = ('4th');
  } else if (now >= periods[4][3] && now <= periods[4][4]) {
    document.getElementById('period').innerHTML = ('4th Passing');
  } else if (now >= periods[5][1] && now <= periods[5][2]) {
    document.getElementById('period').innerHTML = ('5th');
  } else if (now >= periods[5][3] && now <= periods[5][4]) {
    document.getElementById('period').innerHTML = ('5th Passing');
  } else if (now >= periods[6][1] && now <= periods[6][2]) {
    document.getElementById('period').innerHTML = ('6th');
  } else if (now >= periods[6][3] && now <= periods[6][4]) {
    document.getElementById('period').innerHTML = ('6th Passing');
  } else if (now >= periods[7][1] && now <= periods[7][2]) {
    document.getElementById('period').innerHTML = ('7th');
  } else if (now >= periods[7][3] && now <= periods[7][4]) {
    document.getElementById('period').innerHTML = ('7th Passing');
  } else if (now >= periods[8][1] && now <= periods[8][2]) {
    document.getElementById('period').innerHTML = ('8th');
  } else {
    document.getElementById('period').innerHTML = ('School is done for the day.');
  }
}


//Check Time
function startTime() {
  var today = new Date();
  now = today.getHours() + '.' + today.getMinutes();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);

  displayPeriod();

  var t = setTimeout(startTime, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = '0' + i
  }; // add zero in front of numbers < 10
  return i;
}

Answer 1

您可以通过startTime()函数输入当前时间来测试该函数。如果只想测试特定功能，则可以注释掉setTimeout。您也可以检查15.06的输出是否正确。

var now = '';

//Set Periods
//Slot 1+2 are periods - slots 3+4 are passing times inbetween periods
var periods = [
  ['Before School', 5.00, 7.59],
  ['First', 8.00, 8.49, 8.50, 8.54],
  ['Second', 8.55, 9.44, 9.45, 9.49],
  ['Third', 9.50, 10.39, 10.40, 10.44],
  ['Fourth', 10.45, 11.34, 11.35, 11.39],
  ['Fifth', 11.40, 12.29, 12.30, 12.34],
  ['Sixth', 12.35, 13.24, 13.25, 13.29],
  ['Seventh', 13.30, 14.19, 14.20, 14.24],
  ['Eighth', 14.25, 15.15]
];

//Display Period
function displayPeriod() {
  console.log(now)
  if (now >= periods[0][1] && now <= periods[0][2]) {
    console.log('School has not started yet');
  } else if (now >= periods[1][1] && now <= periods[1][2]) {
    console.log('1st');
  } else if (now >= periods[1][3] && now <= periods[1][4]) {
    console.log('1st Passing');
  } else if (now >= periods[2][1] && now <= periods[2][2]) {
    console.log('2nd');
  } else if (now >= periods[2][3] && now <= periods[2][4]) {
    console.log('2nd Passing');
  } else if (now > periods[3][1] && now <= periods[3][2]) {
    console.log('3rd');
  } else if (now >= periods[3][3] && now <= periods[3][4]) {
    console.log('3rd Passing');
  } else if (now >= periods[4][1] && now <= periods[4][2]) {
    console.log('4th');
  } else if (now >= periods[4][3] && now <= periods[4][4]) {
    console.log('4th Passing');
  } else if (now >= periods[5][1] && now <= periods[5][2]) {
    console.log('5th');
  } else if (now >= periods[5][3] && now <= periods[5][4]) {
    console.log('5th Passing');
  } else if (now >= periods[6][1] && now <= periods[6][2]) {
    console.log('6th');
  } else if (now >= periods[6][3] && now <= periods[6][4]) {
    console.log('6th Passing');
  } else if (now >= periods[7][1] && now <= periods[7][2]) {
    console.log('7th');
  } else if (now >= periods[7][3] && now <= periods[7][4]) {
    console.log('7th Passing');
  } else if (now >= periods[8][1] && now <= periods[8][2]) {
    console.log('8th');
  } else {
    console.log('School is done for the day.');
  }
}


//Check Time
function startTime(hours, minutes, seconds) {
    var today = new Date();
    var h = hours != null ? hours : today.getHours(); // use current time if input is empty
    var m = minutes != null ? minutes : today.getMinutes(); // use current time if input is empty
    var s = seconds != null ? seconds : today.getSeconds(); // use current time if input is empty
    m = checkTime(m);
    s = checkTime(s);
    now = h + '.' + m; // move it here to correspond with input

    displayPeriod();

    // var t = setTimeout(startTime, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = '0' + i
  }; // add zero in front of numbers < 10
  return i;
}

startTime();
startTime(15, 6, 0);

Answer 2

问题出在哪里

您的startTime函数正在这样设置now：

now = today.getHours() + '.' + today.getMinutes();

然后计算零填充的小时和分钟值，但未使用！

因此，它不是使用"9.08"将八点九分表示为"9.8"。

如何测试您的代码

您可能想了解单元测试，但这是一个太大的话题，无法在此处进行讨论。

尽管如此，一些编写可测试代码的人也可以在这里应用。

首先，通过重构DisplayPeriod函数以返回字符串值而不是修改DOM，将逻辑与更新UI（或DOM）分开：

function displayPeriod() {
  if (now >= periods[0][1] && now <= periods[0][2]) {
    return 'School has not started yet';
  } else if (now >= periods[1][1] && now <= periods[1][2]) {
    return '1st';
  } else if (now >= periods[1][3] && now <= periods[1][4]) {
    return '1st Passing';
  } else if (now >= periods[2][1] && now <= periods[2][2]) {
    return '2nd';

  // (Snip)

  } else {
    return 'School is done for the day.';
  }
}

然后该方法将由另一种更新DOM的方法使用。

第二，允许注入依赖项。例如。通过Date()构造函数，您对系统时钟有隐式依赖性。如果您将StartTime重构为接受日期，那么您的测试代码可以通过它来测试不同情况所需的日期值：

// Note that bugs in this method have not been fixed!
function startTime(today) {
  now = today.getHours() + '.' + today.getMinutes();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);

  // Commented out, as interfers with testing (should be moved to DOM setting method).
  // var t = setTimeout(startTime, 500);
}

第三，使用测试框架来运行各种方案并检查预期结果和实际结果。这是一个穷人的测试用例和测试执行脚本：

function TestCase(time, expectedResult) {
  startTime(time)
  var result = displayPeriod();
  if (result == expectedResult) {
    console.log("Passed for " + time)
  } else {
    console.log("Failed for " + time + "(" + result + ")");
  }
}

for (minute = 0; minute < 50; minute++) {
  time = new Date(2018, 11, 14, 8, minute);
  TestCase(time, "1st");
}

Answer 3

在设置现在变量之前，您应该检查时间（在数字<10前面加零）

function startTime() {
  var today = new Date();
  var h = checkTime(today.getHours());
  var m = checkTime(today.getMinutes());

  now = h + '.' + m;
  displayPeriod();

  var t = setTimeout(startTime, 500);
}

如果错误语句的语句返回True

3 个答案: