From 4a1378988a0ea2d7ba4a880cd234b62abea38db3 Mon Sep 17 00:00:00 2001 From: riggraz Date: Tue, 3 Sep 2019 18:37:27 +0200 Subject: [PATCH] Add integration test for Board component --- app/javascript/components/Board/NewPost.tsx | 4 +- .../components/Board/PostStatusListItem.tsx | 2 +- app/javascript/components/Board/index.tsx | 4 +- spec/factories/posts.rb | 2 +- spec/system/board_spec.rb | 145 ++++++++++++++++++ 5 files changed, 151 insertions(+), 6 deletions(-) create mode 100644 spec/system/board_spec.rb diff --git a/app/javascript/components/Board/NewPost.tsx b/app/javascript/components/Board/NewPost.tsx index 6fe820f8..05e60b51 100644 --- a/app/javascript/components/Board/NewPost.tsx +++ b/app/javascript/components/Board/NewPost.tsx @@ -85,7 +85,7 @@ class NewPost extends React.Component { } 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 { { showForm ? 'Cancel' : 'Submit feedback' } : - + Log in / Sign up } diff --git a/app/javascript/components/Board/PostStatusListItem.tsx b/app/javascript/components/Board/PostStatusListItem.tsx index 64964f40..7b051d78 100644 --- a/app/javascript/components/Board/PostStatusListItem.tsx +++ b/app/javascript/components/Board/PostStatusListItem.tsx @@ -16,7 +16,7 @@ const PostStatusListItem = ({ isCurrentFilter, handleResetFilter, }: Props) => ( -
+
diff --git a/app/javascript/components/Board/index.tsx b/app/javascript/components/Board/index.tsx index ab36ce09..d4f0438f 100644 --- a/app/javascript/components/Board/index.tsx +++ b/app/javascript/components/Board/index.tsx @@ -74,7 +74,7 @@ class Board extends React.Component { 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 { }); try { - let res = await fetch('http://localhost:3000/post_statuses'); + let res = await fetch('/post_statuses'); let data = await res.json(); this.setState({ diff --git a/spec/factories/posts.rb b/spec/factories/posts.rb index 9c20f7ca..9cf154d5 100644 --- a/spec/factories/posts.rb +++ b/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 diff --git a/spec/system/board_spec.rb b/spec/system/board_spec.rb new file mode 100644 index 00000000..9fed143a --- /dev/null +++ b/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 \ No newline at end of file