[DRAFT] Add integration test guide with preview env - DO NOT MERGE

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.
+

mint.json

@@ -63,7 +63,8 @@
       "pages": [
         "guides/create-a-component",
         "guides/add-additional-services",
-        "guides/api-security"
+        "guides/api-security",
+        "guides/integration-testing"
       ]
     },
     {