In this post, I will try to explain how to do integration tests for your Phoenix project and add them to the checks in your repository
These are the tools that we will use:
- Ex_machina to create test data.
- Wallaby to test your web applications by simulating realistic user interactions.
- GitHub Actions to configure the environment and run the tests at GitHub.
ExMachina
The first step will be to configure your project to easily create test data. As mentioned above, we will use ex_machina. To install it follow the instructions of their repository. Once we have installed the library, let's configure it to our needs.
Factories and Factory Module
We will split factories into separate files and will import them by creating a Factory module.
Here we have the code of our Client factory.
# test/suport/factories/client.ex defmodule OurProject.ClientFactory do defmacro __using__(_opts) do quote do def client_factory do %OurProject.Clients.Client{ name: "Client Name", contact_info: "Client contact_info" } end end end end And then we import it in our Factory Module.
# test/support/factory.ex defmodule OurProject.Factory do use ExMachina.Ecto, repo: OurProject.Repo use OurProject.ClientFactory end Once we have created our Factory module and our factories we can use them in any test importing the factory module. You can with ExMachina you can build or insert test data, the main difference is that build returns an object that is not saved at the database. For more information read the Overview section of their repository
Here is an example test that inserts a client when we need it. Calling the client_fixture function.
# test/our_project/client/some_client_test.ex defmodule OurProject.SomeClientTest do use OurProject.DataCase import OurProject.Factory def client_fixture(attrs \\ %{}) do # `insert*` returns an inserted comment. Only works with ExMachina.Ecto # Associated records defined on the factory are inserted as well. insert(:client, attrs) end ... end Wallaby
We already have our data so we can start with the integration tests. Install wallaby following the instructions on their GitHub page and configure it with Chromedriver.
# config/test.exs config :wallaby, driver: Wallaby.Experimental.Chrome, chrome: [ headless: true ] Now, we will create a FeatureCase module to configure the database, create the session and import the modules and helpers that our tests will need. Here we will import our Factory module.
# test/support/feature_case.ex defmodule OurProject.FeatureCase do use ExUnit.CaseTemplate using do quote do use Wallaby.DSL import Wallaby.Query alias OurProject.Repo import Ecto import Ecto.Changeset import Ecto.Query #Import our Router Helpers import OurProject.Router.Helpers #Import custom helpers if we need them import OurProject.TestHelpers.Navigation #Import our ExMachina factories import OurProject.Factory end end # Connect to the test database and create the session for each test setup tags do :ok = Ecto.Adapters.SQL.Sandbox.checkout(OurProject.Repo) unless tags[:async] do Ecto.Adapters.SQL.Sandbox.mode(OurProject.Repo, {:shared, self()}) end metadata = Phoenix.Ecto.SQL.Sandbox.metadata_for(OurProject.Repo, self()) {:ok, session} = Wallaby.start_session(metadata: metadata) {:ok, session: session} end end Finally, we are ready to create our first test. We are going to create a test that requires fake data so we can see how to use the factories inside an integration test.
#test/integration/client/delete_client.exs defmodule OurProject.DeleteClientTest do use OurProject.FeatureCase, async: false setup %{session: session} do client = insert(:client) {:ok, session: session, client: client} end test "remove client", %{session: session, client: client} do session |> visit("/clients", client.name) |> click(link(client.name)) |> click(link("delete")) |> assert_has(css(".toast-message", count: 1, text: "Client successfully deleted")) end end GitHub Actions
We have our integration tests and we want to check them when we submit a pull request. With a few steps, we can configure our GitHub workflow to run the tests every time we push to the branch.
Chromedriver
We have to add Chromedriver to our CI. To do it we will use an action created by @nanasses. Here you can read the documentation.
# .github/workflows/ci.yml - uses: nanasess/setup-chromedriver@master Compile our project
We have to get the dependencies, compile the project and run the migrations.
# .github/workflows/ci.yml - name: Install Dependencies run: mix deps.get - run: mix compile - run: mix ecto.migrate Compile our assets
In order to have our javascript compiled it's needed to compile our assets.
# .github/workflows/ci.yml - run: npm install working-directory: ./assets - run: npm run deploy --prefix ./assets Run the tests
And finally, run the tests.
# .github/workflows/ci.yml - run: mix test --trace Overview
There is our entire ci.yml file.
name: Continuous Integration on: [push] # This workflow will build and test a Phoenix application that uses # PostgreSQL as a database. Will also cache dependencies and build # artifacts to speed up the build. jobs: test: env: MIX_ENV: ci DATABASE_URL: postgres://postgres:postgres@localhost:5432/postgres runs-on: ubuntu-latest services: db: env: POSTGRES_USER: postgres POSTGRES_PASSWORD: postgres POSTGRES_DB: postgres image: postgres:11 ports: ['5432:5432'] options: >- --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5 steps: - uses: actions/checkout@v1.0.0 - name: Recover dependency cache uses: actions/cache@v1 id: deps_cache with: path: deps key: ${{ runner.OS }}-deps-${{ hashFiles('**/mix.lock') }} restore-keys: | ${{ runner.OS }}-deps-${{ env.cache-name }}- ${{ runner.OS }}-deps- ${{ runner.OS }}- - name: Recover build cache uses: actions/cache@v1 with: path: _build key: ${{ runner.OS }}-build-${{ env.cache-name }} restore-keys: | ${{ runner.OS }}-build- ${{ runner.OS }}- - uses: actions/setup-elixir@v1.0.0 with: otp-version: 22.x elixir-version: 1.9.x - uses: nanasess/setup-chromedriver@master - name: Install Dependencies run: mix deps.get - run: mix compile - run: mix ecto.migrate - run: npm install working-directory: ./assets - run: npm run deploy --prefix ./assets - run: mix test --trace That's it
We have our tests created and running on GitHub. If you are interested in GitHub Actions, at Codegram we have a repository with GitHub Actions workflows that can be useful to you.
I hope you found this post useful. If you have any comments, questions or suggestions, tell us on Twitter!
Photo by Glenn Carstens-Peters on Unsplash
Top comments (0)