单元测试响应式 Javascript、Qunit 和 matchMedia

Question

我在测试和自动化条件 matchMedia 语句时遇到问题。我想创建一个可以测试多种宽度（在本例中为桌面和平板电脑宽度）的单元测试。

我可以为每个设备/媒体查询（例如 this.setForTablet()）编写一个测试，但我如何测试下面的迷你控制器？

是否有一种实用的方法来测试以下语句？重构我的代码以避免以下语句是否是更好的做法，如果是这样，如何？

        if ( window.matchMedia('(max-width: 768px)').matches  ) { // View <= tablet
            this.setForTablet();
        } else { // View > tablet
            this.setForDesktop();
        }

Answer 1

重构并返回。

重构迷你控制器以接受不同的输入/宽度并为每种情况返回已知/预期值。这些将是您的测试断言。

人们应该期望 matchMedia 能够按预期工作并且只测试用户/编码器自己的代码。