I have got defined REST-Endpoints for which I want to develop interchangeable JavaScript Frontends (Vue.js or React). This means depending on the customer's wishes there shall be a different Frontend. As the REST-Endpoint is defined the set of data that can be submitted is defined. Of course, there is a server-side validation of the data. So, if a customer specific frontend is developed and this frontend wants to submit data that cannot be handled by the REST-Endpoints this will produce an error. However, if the fronted contains wrong input fields because the developer made an error, this error will occur at runtime. I am looking for a way to detect errors at build time.
I want a defined backend for which different developers can create customised frontends. Those frontends shall be tested before being deployed so that they will work with the REST-Endpoints.
It shall be tested, if only data is submitted that can be handled by the backend. However, it shall be possible to submit a subset of the data that can be handled by the REST-Endpoints.
In summary I want to have different Implementations of the frontend. If I wanted to develop different Implementations in the backend I would use Interfaces and would develop different Implementation of this Interface. So, I would create a contract that assures that always the same paramets are passed.
Is there a way to create Interfaces for example with React or Vue.js to enforce the use of the predefined parameters? Or would it be better to write unit tests, that check if the submit request contains more than the allowed parameters? If so, how can I write those unit tests once and apply them to all interchangeable frontends?
Any hint is appreciated.