Add integration test for Board component

app/javascript/components/Board/NewPost.tsx

@@ -85,7 +85,7 @@ class NewPost extends React.Component<Props, State> {
     }
 
     try {
-      let res = await fetch('http://localhost:3000/posts', {
+      let res = await fetch('/posts', {
         method: 'POST',
         headers: {
           Accept: 'application/json',
@@ -139,7 +139,7 @@ class NewPost extends React.Component<Props, State> {
               { showForm ? 'Cancel' : 'Submit feedback' }
             </button>
           :
-            <a href="http://localhost:3000/users/sign_in" className="btn btn-dark">
+            <a href="/users/sign_in" className="btn btn-dark">
               Log in / Sign up
             </a>
         }

app/javascript/components/Board/PostStatusListItem.tsx

@@ -16,7 +16,7 @@ const PostStatusListItem = ({
   isCurrentFilter,
   handleResetFilter,
 }: Props) => (
-  <div className="postStatusListItemContainer">
+  <div className={"postStatusListItemContainer " + `postStatus${name.replace(/ /g, '')}`}>
     <a onClick={handleClick} className="postStatusListItemLink">
       <div className="postStatusListItem">
         <div className="dot" style={{backgroundColor: color}}></div>

app/javascript/components/Board/index.tsx

@@ -74,7 +74,7 @@ class Board extends React.Component<Props, State> {
     if (byPostStatus) params += `&post_status_id=${byPostStatus}`;
 
     try {
-      let res = await fetch(`http://localhost:3000/posts?board_id=${boardId}${params}`);
+      let res = await fetch(`/posts?board_id=${boardId}${params}`);
       let data = await res.json();
 
       this.setState({
@@ -110,7 +110,7 @@ class Board extends React.Component<Props, State> {
     });
 
     try {
-      let res = await fetch('http://localhost:3000/post_statuses');
+      let res = await fetch('/post_statuses');
       let data = await res.json();
 
       this.setState({

spec/factories/posts.rb

@@ -1,7 +1,7 @@
 FactoryBot.define do
   factory :post do
     sequence(:title) { |n| "Post #{n}" }
-    description { 'Post Description' }
+    sequence(:description) { |n| "Post #{n} description" }
     board
     user
     post_status

spec/system/board_spec.rb

@@ -0,0 +1,145 @@
+require 'rails_helper'
+
+feature 'board', type: :system, js: true do
+  let(:board) { FactoryBot.create(:board) }
+  let(:other_board) { FactoryBot.create(:board) }
+
+  let(:post_status1) { FactoryBot.create(:post_status) }
+  let(:post_status2) { FactoryBot.create(:post_status) }
+
+  let(:post1) { FactoryBot.create(:post, post_status: post_status1, board: board) }
+  let(:post2) { FactoryBot.create(:post, post_status: post_status2, board: board) }
+  let(:post3) { FactoryBot.create(:post, board: board) }
+  let(:post4) { FactoryBot.create(:post, board: other_board) }
+
+  let(:user) { FactoryBot.create(:user) }
+
+  let(:board_container) { '.boardContainer' }
+  let(:post_link) { '.postLink' }
+  let(:sidebar) { '.sidebar' }
+  let(:new_post_form) { '.newPostForm' }
+  let(:reset_filter) { '.resetFilter' }
+
+  before(:each) {
+    board
+    other_board
+    post_status1
+    post_status2
+    post1
+    post2
+    post3
+    post4
+  }
+
+  it 'renders correctly' do
+    visit board_path(board)
+
+    expect(page).to have_content(/#{board.name}/i)
+    expect(page).to have_selector(board_container, count: 1)
+    expect(page).to have_selector(sidebar)
+  end
+
+  it 'renders posts of that board' do
+    visit board_path(board)
+
+    within board_container do
+      expect(page).to have_selector(post_link, count: 3)
+      expect(page).to have_content(/#{post1.title}/i)
+      expect(page).to have_content(/#{post1.description}/i)
+      expect(page).to have_no_content(/#{post4.title}/i)
+      expect(page).to have_no_content(/#{post4.description}/i)
+    end
+  end
+
+  it 'renders all post statuses in the sidebar' do
+    visit board_path(board)
+
+    within sidebar do
+      expect(page).to have_content(/#{post_status1.name}/i)
+      expect(page).to have_content(/#{post_status2.name}/i)
+    end
+  end
+
+  it 'renders a log in button if not logged in' do
+    visit board_path(board)
+
+    within sidebar do
+      expect(page).to have_content(/Log in \/ Sign up/i)
+      click_link 'Log in / Sign up'
+      expect(page).to have_current_path(new_user_session_path)
+    end
+  end
+
+  it 'renders a submit feedback button that shows a form if logged in' do
+    user.confirm
+    sign_in user
+    visit board_path(board)
+
+    within sidebar do
+      expect(page).to have_content(/Submit feedback/i)
+      expect(page).to have_no_selector(new_post_form)
+      
+      click_button 'Submit feedback' # open submit form
+
+      expect(page).to have_selector(new_post_form)
+      expect(page).to have_content(/Title/i)
+      expect(page).to have_content(/Description/i)
+    end
+  end
+
+  it 'enables logged in users to submit posts to that board' do
+    user.confirm
+    sign_in user
+
+    post_title = 'Post created from test suite'
+    post_description = 'Yes, thats true'
+
+    visit board_path(board)
+
+    post_count = Post.count
+
+    within sidebar do
+      click_button 'Submit feedback' # open submit form
+
+      fill_in 'Title', with: post_title
+      fill_in 'Description (optional)', with: post_description
+      click_button 'Submit feedback' # submit
+
+      expect(page).to have_selector('.success')
+    end
+
+    visit board_path(board)
+
+    expect(Post.count).to eq(post_count + 1)
+
+
+    expect(page).to have_content(/#{post_title}/i)
+    expect(page).to have_content(/#{post_description}/i)
+  end
+
+  it 'enables users to filter posts by post status' do
+    visit board_path(board)
+
+    expect(page).to have_content(/#{post1.title}/i)
+    expect(page).to have_content(/#{post2.title}/i)
+    expect(page).to have_content(/#{post3.title}/i)
+
+    within sidebar do
+      selector = ".postStatus#{post_status1.name.gsub(' ', '')}"
+      find(selector).click
+    end
+
+    expect(page).to have_content(/#{post1.title}/i)
+    expect(page).to have_no_content(/#{post2.title}/i)
+    expect(page).to have_no_content(/#{post3.title}/i)
+
+    # you can also clear the filter
+    within sidebar do
+      find(reset_filter).click
+    end
+
+    expect(page).to have_content(/#{post1.title}/i)
+    expect(page).to have_content(/#{post2.title}/i)
+    expect(page).to have_content(/#{post3.title}/i)
+  end
+end