Brainstorm a list of critical full-stack system tests we should add

[jywarren]

Once #4888 is merged (done!), we'll have system tests running in Travis! This means we can test a full running application on each PR, including javascript, ruby, and everything. We've had some recurring and difficult-to-test issues come up over the past few years, and this is a chance to monitor those delicate and highly integrated scenarios with tests!

Here's our initial test, which is passing, using documentation from https://guides.rubyonrails.org/testing.html#implementing-a-system-test :

plots2/test/system/search_test.rb

Lines 1 to 13 in e8cfcd4

	require "application_system_test_case"
	# https://guides.rubyonrails.org/testing.html#implementing-a-system-test
	class SearchTest < ApplicationSystemTestCase
	test 'searching an item from the homepage' do
	visit '/'
	fill_in("searchform_input", with: "Canon")
	find('button.btn-default').click
	assert_selector('h2', text: 'Results for Canon')
	end
	end

Based on this template, we can do things like interact with Javascript-driven features, click on things, etc. Let's brainstorm a list of the most critical things we should protect first with this powerful new testing system!

• the basic login sequence -- ensuring that the login modal appears, accepts inputs, and logs us in Dashboard system test #5682
• posting a new note Create post_test.rb to test posting at /post #5605
• loading the dashboard Dashboard system test #5682
• using typeahead search in the navbar try system test to count navbar typeahead results in dropdown #5525
• using /search try creating a system test and running in Travis #4888
• signup

  plots2/test/system/screenshots_test.rb

  Line 18 in 25d7e11

  test 'signup modal form validation' do

• commenting on a post ADD: Comment image upload system test #7255
• uploading an image to a comment: Try system testing image upload in comments #5526
• drag-to-upload an image in a comment System test for drag to upload image in comment form #5655
• editing a wiki ADD: Wiki editor image upload system test #7270
• uploading an image to a wiki: Dragging image into wiki pages is broken #5650 ADD: Wiki editor image upload system test #7270
• adding a tag Brainstorm a list of critical full-stack system tests we should add #5316
• liking ADD: Like button system test #7252

What else has broken recently?

(Note: there is also a means for system tests to take screenshots and upload them as 'artifacts' in Travis... 😮 📸 so if anyone wants to try opening a PR for that we'd love to see it tried out - but maybe best open a new issue for it! -- update: testing here: #5320)

[grvsachdeva]

This seems awesome @jywarren! I will go through the ruby on rails guide first as I haven't written any system test till now 🙈

[jywarren]

😄

Example test:

require 'application_system_test_case'

class Users::CreateTest < ApplicationSystemTestCase
  test "adding a new user" do
    visit users_path
    click_on 'New User'

    fill_in 'Name', with: 'Arya'
    click_on 'Create User'

    assert_text 'Arya'
  end
end

[GettyOrawo]

Nice 🛩️ So every test will have it's own test file under plots2/test/system/ ?

[jywarren]

Hi, @GettyOrawo -- i think we can put multiple tests in each file!

[jywarren]

Also, i believe it's possible to use anything from Capybara's DSL (domain specific language?) -- https://github.com/teamcapybara/capybara#the-dsl

It mentions attaching files: https://github.com/teamcapybara/capybara#interacting-with-forms

attach_file('Image', '/path/to/image.jpg')

And evaluating javascript functions: https://github.com/teamcapybara/capybara#scripting

result = page.evaluate_script('4 + 4');

I'm not /sure/ these will work, but for testing things like image upload, I'd love to try it!

[jywarren]

Attempted to use a JS function in #5525!

[jywarren]

And tried using attach_file here to test comment image upload! #5526

[jywarren]

I found this great Capybara cheatsheet!!! https://gist.github.com/zhengjia/428105

[jywarren]

And, I seem to see a chrome plugin that can generate -- even "record" capybara tests based on your interactions!

https://github.com/polarblau/capycorder/

We could use this to quickly generate tests.

[namangupta01]

This seems interesting, I also want to contribute on this one.

[jywarren]

OK! With help from Capycorder, I completed a system test of posting at /post -- it's really cool, and goes through the steps of:

1. logging in
2. filling out the posting form
3. pressing Publish
4. confirming that the page now shows the post

See it here:

plots2/test/system/post_test.rb

Lines 10 to 34 in e190eae

	test 'posting from the editor' do
	visit '/'
	click_on 'Login'
	fill_in("username-login", with: "Bob")
	fill_in("password-signup", with: "secretive")
	click_on "Log in"
	visit '/post'
	fill_in("Title", with: "My new post")
	el = find(".wk-wysiwyg") # rich text input
	el.set("All about this interesting stuff")
	assert_page_reloads do
	find('.ple-publish').click
	assert_selector('h1', text: "My new post")
	assert_selector('#content', text: "All about this interesting stuff")
	assert_selector('.alert-success', text: "×\nSuccess! Thank you for contributing open research, and thanks for your patience while your post is approved by community moderators and we'll email you when it is published. In the meantime, if you have more to contribute, feel free to do so.")
	end
	end

We can use this as an example to make more system tests, like for #5526