End to End testing is an important part of testing the app flow, where we make sure that various use-case scenarios in the app checks out correctly. At Dockup, we found this as a very interesting use-case for our product itself, and realized that we could add e2e test for each of our deployments.
Running E2E tests on Dockup is similar to how you would run your service containers and your main app container. This means, you can have your tests as a separate pre built Docker image, or you could have it shipped with your current app repository on GitHub. Let's explore the second option as this is very common and tests usually change as new feature PRs come in.
We will be explaining this based on Cypress.io but you can follow the similar steps for configuring your favorite E2E tool to run alonside Dockup deployments.
For ease of understanding, let's use a simple VueJS app that implements a TodoMVC.
We will keep this source under a common project folder, say
todomvc-app/ and also create another folder, say
todomvc-app/e2e/. We will write our tests inside this. Cypress test specs are kept under a sub-directory called "cypress" and we will have a
cypress.json file inside our
e2e folder. See more on how Cypress tests are written from their docs.
Once you have your test specs ready, we need to add a
Dockerfile and the whole directory structure would look something like this:
todomvc-app/||---- src/| |---- index.html| |---- app.js||---- e2e/| |----cypress/| | |---- fixtures/| | |---- integration/| | | |---- add_todo_spec.js| | | |---- mark_todo_spec.js| | |---- plugins/| | |---- support/| || |---- cypress.json| |---- Dockerfile||---- package.json|---- Dockerfile
Since the test cases are to be run for several deployments, we will be keeping the
baseUrl config value for cypress as an initial dummy URL, and then we will override it with env variables. This is documented by Cypress here.
While creating a Dockup Blueprint for your todomvc-app, we will add a new container holding the image source details.
We will also have to add
CYPRESS_BASE_URL env for Cypress to receive a public endpoint for the deployment. This can be done using the Environment Variables Substitution feature ( Refer DOCKUP_PORT_ENDPOINT_ ) in Dockup.
The cypress container would exit with the overall number of error the test had.
That is all you need to do to have a working cypress end-to-end test running alongside each of the deployments.
Cypress has its own docker image configured to run on several CI tools, which you can use it on Dockup as well, without much changes. All you have to do is, put the
cypress/folder in the same level as the
Dockerfile as their images look for it in the root directory, and as soon as the containers spins up,
cypress run command would run. It is however not recommended to do this on Dockup due to the reason mentioned above. Instead, have the script take care of running the cypress command when the endpoint it up.
Now you can go ahead and deploy this blueprint and have it run the E2E tests for you. Your containers should spin up and the e2e tests should start running. While you wait for them to complete, you can also take a look at the logs.
A successful deployment with your e2e tests passed would look something like this
In the case of cypress, it would exit out with a non-zero exit code when there are failures, and thus the container would also fail, suggesting there are failed test cases.
Not using Dockup already? Click here to start for free.