用玩笑测试pickadate答案

【问题标题】：Testing pickadate with jest用玩笑测试pickadate
【发布时间】：2021-02-10 11:44:14
【问题描述】：

在 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）。

【问题讨论】：

这里的正确解决方案是停止使用execute_script 与您的页面进行交互，而是像用户一样在pickadate 小部件中选择日期
是的。那会更好。呃... :D

标签： javascript ruby-on-rails capybara pickadate luxon

【解决方案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

【讨论】：

【解决方案2】：

您还可以查看<%= form.date_field :date_attribute %> - 它将使用所有主流浏览器都支持的本机日期选择器。

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

【讨论】：

遗憾的是，产品所有者比原生界面更喜欢pickadate的界面，这就是我们在这条船上的原因。但很好的呼吁。