new system test fails due to probably timing issue

[jywarren]

plots2/test/system/tag_test.rb

Lines 27 to 46 in 3c02733

	test 'adding a tag via javascript with url only' do
	visit '/'
	click_on 'Login'
	fill_in("username-login", with: "jeff")
	fill_in("password-signup", with: "secretive")
	click_on "Log in"
	visit "/wiki/wiki-page-path"
	# run the javascript function
	page.evaluate_script("addTag('roses', '/tag/create/11')")
	visit "/wiki/wiki-page-path" # refresh page
	# check that the tag showed up on the page
	assert_selector('.tags-list .card-body h5', text: 'roses')
	end

These lines seem to fail - esp assert_selector('.tags-list .card-body h5', text: 'roses'), in what I think is just a timing failure - that we should wait longer for it to complete, as it's an AJAX request.

I've seen a failure for this on #6758 (which I restarted) and on #6858 (comment) (which resolved on restart, but the error output is there):

 FAIL["test_adding_a_tag_via_javascript_with_url_only", #<Minitest::Reporters::Suite:0x00007fc289832e00 @name="TagTest">, 116.16007206999996]
 test_adding_a_tag_via_javascript_with_url_only#TagTest (116.16s)
        expected to find css ".tags-list .card-body h5" but there were no matches
        test/system/tag_test.rb:44:in `block in <class:TagTest>'
[Screenshot]: tmp/screenshots/test_viewing_the_dropdown_menu.png
[Screenshot]: tmp/screenshots/test_viewing_the_dropdown_menu.png
[Screenshot]: tmp/screenshots/test_viewing_the_settings_page.png
  43/43: [=================================] 100% Time: 00:03:05, Time: 00:03:05

We could lengthen Capybara.default_max_wait_time = 60 but there are other subtle ways to fix timings. Oddly, one is to add an assert_select as it is supposed to naturally keep looking for up to 60 seconds for stuff to appear on the page when looking for specific CSS/HTML with that method. Here, that doesn't seem to be working.

Referencing some previous timing-related issues which don't seem so helpful, but maybe:

#5683 and #6179 (maybe?)

This is an odd one! I wonder what's going on, @nstjean !? Stumped!

[nstjean]

Hmmm, I'm not sure! I'll google and see if I can find any other tricks to getting it to process faster.

[nstjean]

One thing I'm finding is that some people have implemented a method wait_for_ajax which checks and waits while there are Ajax calls still completing.
https://medium.com/doctolib/hunting-flaky-tests-2-waiting-for-ajax-bd76d79d9ee9

The other option is addressing the addTag function specifically.

When a tag gets added via the form in 'adding a tag via javascript' the tag is automatically added to the page in the ajax success call:

plots2/app/assets/javascripts/submit_form_ajax.js

Lines 11 to 19 in 6824509

	$.ajax({
	url: url,
	data: dataObj,
	success: (event, success) => {
	if (url !== submitTo) {
	$(submitTo).trigger('ajax:success', event);
	}
	}
	});

plots2/app/assets/javascripts/tagging.js

Lines 43 to 64 in 6824509

	el.bind('ajax:success', function(e, response){
	if (typeof response == "string") response = JSON.parse(response)
	$.each(response['saved'], function(i,tag) {
	var tag_name = tag[0];
	var tag_id = tag[1];
	$('.tags-list:first').append("<p id='tag_"+tag_id+"' class='badge badge-primary'> \
	<a class='tag-name' style='color:white;' href='/tag/"+tag_name+"'>"+tag_name+"</a> <a class='tag-delete' \
	data-remote='true' href='"+deletion_path+"/"+tag_id+"' data-tag-id='"+tag_id+"' \
	data-method='delete'><i class='fa fa-times-circle fa-white blue pl-1' aria-hidden='true' ></i></a></p> ")
	el.find('.tag-input').val("")
	el.find('.control-group').removeClass('has-error')
	el.find('.control-group .help-block').remove()
	setupTagDelete($('#tag_' + tag_id + ' .tag-delete'));
	})
	if (response['errors'].length > 0) {
	el.find('.control-group').addClass('has-error')
	el.find('.control-group .help-block').remove()
	el.find('.control-group').append('<span class="help-block">' + response['errors'] + '</span>')
	}
	el.find('.tag-input').prop('disabled',false)
	el.find('.tag-input').focus()
	});

But that doesn't happen when tag is added via url in 'adding a tag via javascript with url only', since there's no form object to trigger on success. I could pull out the code for adding the tag to the page into a separate function to trigger? That way we won't have to wait and refresh the page, it will just show up automatically like in the 'adding a tag via javascript' test.

So two possible options: change the testing, or change the function itself.

[jywarren]

pulling out into a separate function sounds good, as it'd be a bit more modular as well. Let's do that! Thank you!