diff --git a/guides/integration-testing.mdx b/guides/integration-testing.mdx new file mode 100644 index 0000000..dc2a165 --- /dev/null +++ b/guides/integration-testing.mdx @@ -0,0 +1,126 @@ +--- +title: Integration testing +--- + +Integration testing is the next step up from unit testing - instead of testing the new feature +in isolation to ensure proper functionality, you're testing how the new feature interacts with +other parts of your application or platform. This ensures that unforeseen errors won't occur and +gives insight into how the new feature fits the product. + +Let's say you just finished creating a shopping cart API service (or module, depending on how you +build your software). This cart service needs access to a few different API services, like a user +service or payments service, so it can complete some of its own core duties. In order to test your +shopping cart service for your integration tests, you'll need to run its dependent services as well. + +That's where Architect comes in. Architect uses dependency management to ensure each component has +all the services needed to run correctly and define internal networking between the services. This +means you'll only ever need the `deploy` command to make test environments. + +We won't delve deep into the types of integration testing (such as Top-down or bottom-up approach), +but we want to lay the initial landscape of the problem. You have one service that needs to interact +with several others; testing each individually can be a nightmare. Some services required for your +integration testing will also depend on other services. + +## Requirements + +To run integration tests, you'll need a few things: + +* A component to test +* A testing framework with support for integration testing +* The [Architect CLI](https://www.npmjs.com/package/@architect-io/cli) + +For our example, we'll be using our starter projects - the language doesn't matter, so feel free to +pick your chosen framework. The only important thing your component will need in the `architect.yml` +file is an [ingress rule](/components/ingress-rules) to allow connections to your application. +We'll use the [react](https://github.com/architect-templates/react) starter project for the example +below. + +Aside from that, you'll need a testing framework that supports integration testing. Certain unit testing +frameworks, such as [jest](https://jestjs.io/), can be extended to perform integration testing, but it's +best to use a framework that focuses on integration testing, such as +[cypress.io](https://www.cypress.io/) or [Nightwatch.js](https://nightwatchjs.org/). For our example, +we'll use [Playwright](https://playwright.dev/). + +## Set up your application + +First, we'll need a component to work on the test. Clone down the react starter project by running: + +```bash +$ git clone git@github.com:architect-templates/react.git +``` + +This application is a simple "Favorite Movies” application that takes a movie name and a rating from 1-5. +Let's pretend that we just added the functionality to add in our movie names, and we want to test it to +ensure that it works with the rest of our application. + +Once cloned, go into your project folder and run the following architect command: + +```bash +$ architect dev . +``` + +This will spin up a local instance of the starter project, which will be accessible through +`https://app.localhost.architect.sh/`. + +## Install playwright + +Open a new terminal in the project folder, and run the following command to install playwright: + +```bash +npm init playwright +``` + +## Writing tests + +After answering all the prompts, npm will install playwright's packages and a few example tests. You +will have a few new folders in your directory. Navigate to the new `/tests` folder, and open up +`example.spec.js`. + +Once this file is open, paste in the below code - This playwright test goes to the page, checks +that it can add in new input, and then submit the input form. + +```js example.spec.js +// @ts-check +const { test, expect } = require('@playwright/test'); + +test('Ensure form submit works', async ({ page }) => { + await page.goto(process.env.BASE_URL); + + // Input a movie title and rating + await page.getByRole('textbox', {name:'name'}).fill('Test-movie'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Digit2'); + + // Submit a new favorite movie + await page.getByRole('button').click(); +}); +``` + +## Running tests + +Once saved, go to the terminal and run the following command: + +```bash +$ BASE_URL='https://app.localhost.architect.sh/' npx playwright test +``` + +This command will execute the test that we just added in. Once the test completes, you can view your +test results by running: + +```bash +$ npx playwright show-report +``` + +## Integration tests on pull requests + +Now that you know how to run your tests manually its time to setup your test suite to run on every +pull request! This will help your team build trust in your changes and accelerate approvals, and +Architect helps by provisioning the test environment automatically every time a pull request is +opened. + +Previously, we passed in the URL of our environment as the `BASE_URL` environment variable, and we +can use that same environment variable to pass in a different address unique to our test environments. +Go ahead and try to wire up [pull-request environments](/deployments/gitops-releases) using your +favorite CI system. You'll be able to use the `architect environment:ingresses` command to extract +the URLs for your environment to run your tests. + diff --git a/mint.json b/mint.json index b44ce73..683894b 100644 --- a/mint.json +++ b/mint.json @@ -63,7 +63,8 @@ "pages": [ "guides/create-a-component", "guides/add-additional-services", - "guides/api-security" + "guides/api-security", + "guides/integration-testing" ] }, {