使用jest测试pickadate

Question

在Rails项目中，我们有一个使用pickadate v3.6.2的日期选择器。测试已经工作了一段时间，但随着最近从moment.js转移到luxon.js，一些功能规范正在失败。IRL，功能运行良好。我认为这是关于我们如何设置日期输入的问题。我正在尝试获得正确的函数来驱动capybara设置日期输入。

日期输入在表单元素中，该元素已初始化为

$("#the_date_input").pickadate()

和消费脚本工作(IRL)如下所示：

const startDateField = this.element.find(this.opts.the_date_inputs_field);
const datePicker = startDateField.pickadate('picker');
if (datePicker) {
  // this logs the correct value in the browser console
  console.log(datePicker.get('select', 'yyyy-mm-dd'));
  ...
}

浏览器中的日期格式看起来像12, October, 2020 -长的可呈现日期格式。

我们的capybara代码尝试设置Rails默认to_date字符串格式的值，我认为它是YYYY-MM-DD。

  page.execute_script("$('#the_date_input').val('#{start_date.to_date}');")

是否需要将val格式化为长英文日期字符串？或者，是否有更好的方法使用pickadate在这些测试中直接注入值或设置值(使用JS)。

Answer 1

虽然一个更好的解决方案是构建一些代码来与日期选择器交互(就像一个普通用户一样--就像@Thomas Walpole上面提到的那样)，但以编程方式与日期选择器模式进行交互是很棘手的。

我找到了一个解决方案--可能不是很理想--但是您可以使用pickadate select方法来指定日期。这将通过pickdate代码来正确设置输入值和幕后发生的任何事情。

这是我的水豚助手方法：

def set_pickadate_date(pickadate_selector, date)
  page.execute_script("$('#{pickadate_selector}').pickadate('picker').set('select', [#{date.year}, #{date.month - 1}, #{date.day}]);")
end

我在pickadate文档中找到了这个：https://amsul.ca/pickadate.js/api/#method-set-select

Answer 2

你也可以看看<%= form.date_field :date_attribute %> --它将使用所有主流浏览器都支持的原生日期选择器。

请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date