Write e2e tests for MR widget vue components based on real API responses
From the discussion here https://gitlab.com/gitlab-org/gitlab-ce/issues/39833 we can write e2e in JavaScript for MR widget vue components by doing the following:
-
Mock the request with vue-resource interceptors like we are doing in environments code (and other places) https://gitlab.com/gitlab-org/gitlab-ce/issues/39833#unit-tests-for-the-main-components
-
Mock the response of that request based either on a fixture or a .json file and test the existing schemas: https://gitlab.com/gitlab-org/gitlab-ce/issues/39833#note_46065497
The reason I am choosing the MR widget is it's because where the discussion started: gitlab-org/gitlab-ee!3215 (comment 45678570)
Kamil: @filipa My problem with leaving it like this is that we nowhere test an agreement between FE and BE on how and what data are accessed, effectively this can easily go wrong and we miss whether it works or not. It seems to me to be very fragile, and in the past, we had similar issues, because of the above.
We should at least ensure that needed data by FE are actually parsed correctly by FE. We have tests for Vue code, but we do not test the mocked responses, and effectively we have some serious hole in our tests.
If we would mock actual requests for FE, we could consider building an extra agreement
rspec
that would verify the mock provided for FE with validation of structure sent by BE.Look at this file: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/3215/diffs#359d546597979f85920f3d54a487f90c0eff0f05_215_215: I added extra data there (practically it is not ideal either, as this is not a response to request sent by FE). Can you ensure that you test the presence of that exact link in the Vue tests?