Skip to content

Commit

Permalink
chore (#8): adds maintenance tooling
Browse files Browse the repository at this point in the history
closes #8 

adds cypress, config, and sample test
adds renovate config
adds testing docs to readme
adds table of contents to readme
  • Loading branch information
tzmanics authored Jun 11, 2022
2 parents 20d0035 + fba1721 commit 19a0e3b
Show file tree
Hide file tree
Showing 7 changed files with 1,946 additions and 242 deletions.
54 changes: 53 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@ Click this button and it will help you create a new repo, create a new Netlify p

[![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/angular-quickstart)

## Table of Contents:

- [Setup](#setup)
- [Deploying](#deploying)
- [Testing](#testing)
- [Included Default Testing](#included-default-testing)
- [Removing Renovate](#removing-renovate)
- [Removing Cypress](#removing-cypress)
- [Angular + Netlify Resources](#angular--netlify-resources)

## Setup

Clone this repo with one of these options:
Expand All @@ -33,7 +43,49 @@ There are a few ways to deploy this template:
- Head to the [Netlify UI](https://app.netlify.com/) to deploy via GitHub or [drag and drop](https://app.netlify.com/drop) the project folder
- Use the Netlify CLI's create from template command `netlify sites:create-template angular-quickstart` which will create a repo, Netlify project, and deploy it

## Angular 💙 Netlify Resources
## Testing

### Included Default Testing

We’ve included some tooling that helps us maintain these templates. This template currently uses:

- [Renovate](https://www.mend.io/free-developer-tools/renovate/) - to regularly update our dependencies
- [Cypress](https://www.cypress.io/) - to run tests against how the template runs in the browser
- [Cypress Netlify Build Plugin](https://github.com/cypress-io/netlify-plugin-cypress) - to run our tests during our build process

If your team is not interested in this tooling, you can remove them with ease!

### Removing Renovate

In order to keep our project up-to-date with dependencies we use a tool called [Renovate](https://github.com/marketplace/renovate). If you’re not interested in this tooling, delete the `renovate.json` file and commit that onto your main branch.

### Removing Cypress

For our testing, we use [Cypress](https://www.cypress.io/) for end-to-end testing. This makes sure that we can validate that our templates are rendering and displaying as we’d expect. By default, we have Cypress not generate deploy links if our tests don’t pass. If you’d like to keep Cypress and still generate the deploy links, go into your `netlify.toml` and delete the plugin configuration lines:

```diff
[[plugins]]
package = "netlify-plugin-cypress"
- [plugins.inputs.postBuild]
- enable = true
-
- [plugins.inputs]
- enable = false
```

If you’d like to remove the `netlify-plugin-cypress` build plugin entirely, you’d need to delete the entire block above instead. And then make sure sure to remove the package from the dependencies using:

```bash
npm uninstall -D netlify-plugin-cypress
```

And lastly if you’d like to remove Cypress entirely, delete the entire `cypress` folder and the `cypress.config.ts` file. Then remove the dependency using:

```bash
npm uninstall cypress
```

## Angular + Netlify Resources

Here are some resources to help you on your Angular + Netlify coding fun!

Expand Down
8 changes: 8 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { defineConfig } from "cypress";

export default defineConfig({
e2e: {
baseUrl: 'http://localhost:8888',
supportFile: false,
},
});
17 changes: 17 additions & 0 deletions cypress/e2e/basic.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
describe('empty spec', () => {
beforeEach(() => {
cy.visit('/')
})

it('displays the resources text', () => {
cy.get('h2')
.contains('Here are some resources to help you on your Angular + Netlify journey');
})
it('renders the image', () => {
cy.get('img')
.should('be.visible')
.and(($img) => {
expect($img[0].naturalWidth).to.be.greaterThan(0);
})
})
})
11 changes: 10 additions & 1 deletion netlify.toml
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,13 @@
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
status = 200

[[plugins]]
package = "netlify-plugin-cypress"

[plugins.inputs.postBuild]
enable = true

[plugins.inputs]
enable = false
Loading

0 comments on commit 19a0e3b

Please sign in to comment.