# Merge Request Checklist

### Review

- [ ] Make sure the pipeline has passed. You may have to check the mirrored repo in code.il2.dso.mil to see the pipelines.
- [ ] Make sure that there are no errors in the development console.
- [ ] Make sure everything in the the ticket is addressed and that the acceptance criteria (if applicable) is met.
- [ ] Make sure all components and images match the design file or instruction given (if applicable).
- [ ] Make sure to take out any unused code.
- [ ] Make sure that common mistakes are not present in the code base. (See list under _Common Mistakes_ below).
- [ ] Make sure the page is responsive (see the list for _Responsiveness_ below for checklist).
- [ ] Check if any other issues may need to be checked (some examples can be found under _Other items to look out for_)

#### Common Mistakes

- [ ] Make sure all words are spelled correctly (if applicable).
- [ ] Make sure the right images are used (if applicable).
- [ ] Do not use any inline styles in the HTML component in files.
- [ ] Make sure everything is aligned correctly.
- [ ] Please avoid making global variables.
- [ ] Make sure error handling is in appropriate places.
- [ ] Remove all test code within the working sections when ready to push to master.

### Responsiveness

For all below check the following breakpoints for Vue apps
| Devices | Code | Screen sizes |
| ------ | ------ | ------ |
| Extra Small | xs | < 600px |
| Small | sm | 600px > < 960px |
| Medium | md | 960px > < 1264px |
| Large | lg | 1264px > < 1904px |
| Extra Large | xl | > 1904px |

- [ ] Check for bad word breaks within each breakpoint.
- [ ] Check to see if components are misaligned or have bad spacing, padding, or margin.
- [ ] Check to see if components overflow to either side of the viewport.
- [ ] Check if there are any weird visual glitches at different breakpoints.

#### Other items to look out for

- [ ] Make sure new API calls use the correct HTTP verb and when working with JSON make sure it is validated.
- [ ] With `GET`s, make sure that text/html return type is avoided and application/json is used when dealing with json data.
- [ ] Avoid transmission of confidential data in URL parameters and unnecessary parameters.
- [ ] Make sure all API calls are within a try catch block with appropriate error handling.
- [ ] If dealing with forms, make sure the form has input validation.
- [ ] Avoid logging confidential information.
- [ ] Make sure `no-cache` is on confidential web pages.
- [ ] Make sure `rel="noopener noreferrer"` is on any link that opens to a new tab.
- [ ] For browser performance, use `.webp` images instead of `.png`, `.jpg`, `.jpeg`, etc.

#### Developer responsibilities with Cypress tests

- [ ] Make sure any new download buttons (that don't use DownloadButton.vue) has the attribute `data-cy="download"`.
- [ ] Make sure new pages / paths within router.js are added to the links.js test suite.
- [ ] Add a new test case for within downloads.js if you're adding the `first` download button to any page.
- [ ] Reuse existing custom commands if they serve the purpose of your test.
- [ ] Create a new custom command for any duplicate code / test that can be `globally` reused.
- [ ] Create a local function for duplicate code that can be reused within your test spec.