【Rspec】system testで並び順をテストする

結論

正規表現を使うパターン

  describe "並び順" do
    let!(:task1) { Task.create(name: "name1", content: "content1" }
    let!(:task2) { Task.create(name: "name2", content: "content2" }
    it "作成されたタスクが作成日時の降順になっていること" do
      visit "/tasks"
      expect(page.text).to match(/#{task1.name}.*#{task2.name}/)
    end
  end

      #改行を含む場合は
      expect(page.text).to match(/#{task1.name}[\s\S]*#{task2.name}/)

上記は、task1→task2の順番で画面上に表示されていることを検証するテストです。
(/#{@task1.name}.*#{@task2.name}/)の部分で順番のチェックをしています。
ここで.や[\s\S]、*は正規表現で

記号	意味
.	任意の一文字
s	空白、タブ、フォーム フィードなどの任意の空白文字
S	空白文字以外の任意の文字
*	直前の文字を0回以上繰り返す

という意味を持ちます。

つまり、task1→任意の文字列→task2で表示されていることがテストできます。

正規表現を使わないパターン

  describe "並び順" do
    before do
      Task.create(name: "name1", content: "content1", created_at: Time.zone.now)
      Task.create(name: "name2", content: "content2", created_at: 1.day.from_now)
      Task.create(name: "name3", content: "content3", created_at: 1.day.ago)
    end
    it "作成されたタスクが作成日時の降順になっていること" do
      visit "/tasks"
      within ".tasks" do
        task_names = all(".task-name").map(&:text)
        expect(task_names).to eq %w(name2 name1 name3)
      end
    end
  end

上記はhttps://qiita.com/fujimura/items/3adbeec55db32aba396f#comment-5669403d3fa41b8d84a を参考にさせていただきました。

ここで正規表現を使うときとの変更部分は、let!ではなくbeforeを使っている点です。
RSpec/LetSetup: Do not use let! to setup objects not referenced in tests.

つまった部分

正規表現

最初は、
Capybaraで画面要素の表示順を検証するを参考にさせていただき
.*で記述していたのですが、テストが通りませんでした。
理由は、.*では改行が認識できず、実際のコードと一致しなかったためです。

もし同様の理由で、テストが通らない場合は[\s\S]で記述してみてください。

letとlet!

また、インスタンス変数でなくletを使う場合、予めtask1,2を作成しておく必要があるためlet!を使用します。
参考:使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」/遅延評価される let と事前に実行される let!