Issue1476 cypress tests for vocab home page tempate statistics

[miguelvaara]

Reasons for creating this PR

All tests pass (including the new ones related to statistics), except for the "alphabetical index letters are clickable" test, which fails randomly. It sometimes passes if the entire vocab-home test is run again, but after making changes to the test, it sometimes fails and sometimes does not when run separately. I suspect it is related to some clicking issue.

This is an early-stage draft PR, so it does not aim to meet code formatting requirements or have sufficient descriptions. The code will be commented later.

Link to relevant issue(s), if any

• Closes #

Description of the changes in this PR

Known problems or uncertainties in this PR

Checklist

• phpUnit tests pass locally with my changes
• I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
• The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
• The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (b54607b) 70.53% compared to head (77defeb) 70.53%.

Additional details and impacted files

@@             Coverage Diff              @@
##             skosmos-3    #1558   +/-   ##
============================================
  Coverage        70.53%   70.53%           
  Complexity        1643     1643           
============================================
  Files               32       32           
  Lines             4313     4313           
============================================
  Hits              3042     3042           
  Misses            1271     1271           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[osma]

All tests pass (including the new ones related to statistics), except for the "alphabetical index letters are clickable" test, which fails randomly.

I looked at this and was able to replicate the occasional text failure. Here is example log output from Cypress:

It looks like this test revealed a race condition in the alphabetical index Vue component. It starts loading the index entries for the letter A, but the user (here simulated by Cypress) clicks on D before that operation has finished. This leads to a race condition with both requests (for A and D) happening in parallel, and depending on the order in which they finish, the index will contain either 8 or 33 entries. The test expects 8, so it will fail if there are 33 entries.

This is probably a more general problem with all kinds of asynchronous operations performed by Vue components. We should have some sort of queue mechanism, or a way to cancel/invalidate previous operations. In this case, when the user clicks on D before the request for A has finished, it would make sense to cancel the request for A.

[osma]

In Skosmos 2, similar cancellations and race conditions were handled by using a queue for Ajax requests. This implementation of course relies on jQuery functionality, which doesn't exist in Skosmos 3, so another solution is needed.

Skosmos/resource/js/scripts.js

Lines 86 to 136 in 88c2c78

	/*
	* Ajax query queue that keeps track of ongoing queries
	* so they can be cancelled if a another event is triggered.
	* originally taken from https://stackoverflow.com/a/11612641
	*/
	$.ajaxQ = (function(){
	var id = 0, Q = {};
	$(document).ajaxSend(function(e, jqXHR, settings){
	jqXHR._id = ++id;
	jqXHR['req_kind'] = settings.req_kind !== undefined ? settings.req_kind: $.ajaxQ.requestKind.PLUGIN;
	Q[jqXHR._id] = jqXHR;
	});
	$(document).ajaxComplete(function(e, jqXHR){
	delete Q[jqXHR._id];
	});
	return {
	abortAll: function(){
	var r = [];
	$.each(Q, function(i, jqXHR){
	r.push(jqXHR._id);
	jqXHR.abort();
	});
	return r;
	},
	abortContentQueries: function(){
	// includes the ones generated by plugins
	var r = [];
	$.each(Q, function(i, jqXHR){
	r.push(jqXHR._id);
	if (jqXHR.req_kind == $.ajaxQ.requestKind.CONTENT || jqXHR.req_kind == $.ajaxQ.requestKind.PLUGIN) {
	jqXHR.abort();
	}
	});
	return r;
	},
	abortSidebarQueries: function(all=false){
	var r = [];
	$.each(Q, function(i, jqXHR){
	r.push(jqXHR._id);
	if (jqXHR.req_kind == $.ajaxQ.requestKind.SIDEBAR || all && jqXHR.req_kind == $.ajaxQ.requestKind.SIDEBAR_PRIVILEGED) {
	jqXHR.abort();
	}
	});
	return r;
	},
	requestKind: {GLOBAL: 0, SIDEBAR: 1, SIDEBAR_PRIVILEGED: 2, CONTENT: 3, PLUGIN: 4}
	}
	})();

[miguelvaara]

I think we now have four different ways to proceed with this problem:

• building now some kind of queuing mechanism to eliminate the root cause
• separating the statistical tests of the vocabulary page from this test
• accepting that errors will occur occasionally (then implementing TDD rather poorly)
• postponing the developing of the statistical tests (I think we should have them) until the competition situation issue is fixed

Which approach would you suggest @osma ?

[osma]

I think we need a new issue for the race condition. It is unrelated to the tests in this PR, so we can proceed with finishing up this PR.