engineering
engineering copied to clipboard
hackforla
Create a Guide/Template: Implementing Tests with Your Code Changes
Overview
We need to create a guide to best practices for implementing tests with your code changes.
Action Items
- [x] Gather examples of how other projects have done it, adding each example as a link in the resources section
- [x] Once done, remove the "TG: Gather Examples" label and add the "TG: Draft Template" label
- [ ] Create a draft template, either in markdown format in this issue or a google doc in the Engineering google drive
- [ ] Once done, remove the "TG: Draft Template" label and add the "TG: Create Guide" label
- [ ] Create a guide on how to use the template
- [ ] Once done, remove the "TG: Create Guide" label and add the "TG: Review Guide" label
- [ ] Review the guide with engineering communities of practice
- [ ] Once done, remove the "TG: Review Guide" label and add the "TG: Leadership Review" label
- [ ] Present to Hack for LA leadership team for sign off
- [ ] Once approved, remove the "TG: Leadership Review" label and add the "TG: Place Guide" label
- [ ] Possibly create an issue template on .github
- [ ] Include link to template under resources if you add it as a template in .github
Resources
Update tracker issue (TBD) with the name of item you are working
Started a google doc for this guide as a copy of the Guide to Engineering Documentation as requested by @gregpawin at our Engineering CoP
@alan-zambrano Hi Alan! Thank you so much for taking this. I have been reflecting on the script I gave you and realized it was a little bare-bones. Let me outline some ways of expanding it. So, in your messages to other senior developers, make sure you
- Give your name and something about yourself
- State your purpose for contacting them
- Confirm who they are
- Ask any questions you have
Example:
Hi. I am Ava and I am a developer at HfLA. I would like to ask about _______ for the _____ project. Are you a good person to ask? If so, are you open to answering a few questions I have?
- Q1: _______ ?
- Q2: _______ ?
If not, who would be a good person on your team to contact?
If you need to, you can also ask them if they have the time for a thirty minute zoom chat, if you prefer to do a Q&A face-to-face. It's a good way to ask any follow-ups and to meet them in person 😄
Hi @Aveline-art Here are the notes I've taken so far.
Civic Tech Jobs @Aveline-art testing for react is a pain. Need Jest a test runner. tests your code as you rytpe so you get instant feedback. Tests for JavaScript code. for react you need react-testing library. builds on top of jest. A library for a library tests so that it works as intend for the user. "find button, click button, does it do what you expect?" Simulates pressing a button. Axe-react an accessibility testing library. If you go to index, browser, homepage. Axe tells you if it's accessible for people who can't see certain colors, or if it's contrasted correctly super-linter. More of a test, more of a style. Sets a certain style for your code. Sets tabs to x spaces so that it's uniform. Makes code more readable, easier to edit. Checks CSS classes if there's a clash, prevents confusion. separate out technologies for testing based on languages.
Home Unite Us Hi Alan. My team hasn't been doing testing for our designs so I can't really help you. Best of luck.
Design Systems @kelenelee Hi Alan, thanks for reaching out. Our research team doesn’t do QA. We use Zoom to do qualitative interviews and observations of user behavior towards design prototypes and overall HfLA experience. We’re still in the process of synthesizing research results. As of now, Design Systems has no developers
LA TDM Calculator Hey Alan, I can answer some of these but I'm actually not super active with the group right now. You can contact -- and -- though. To answer some of your questions: Mostly cypress tests - but I don't think people are running them regularly unfortunately. I was trying to integrate them into our pipelines but I got busy this past year as I was job searching. Im not sure where it's at right now tbh.
LA TDM Calculator @fyliu Testing end-to-end using Cypress. Emulates an automated user typing into text box for example. Testing for login and other special cases as they became necessary. -- wrote 6 full scenario tests for "realistic" projects https://github.com/hackforla/tdm-calculator/tree/develop/cypress/cypress/integration CTI testing interacts with hidden webpage attributes whereas TDM interacts with visible elements. for example https://github.com/hackforla/tdm-calculator/blob/83109ca3d0f12de7d53914a339b78babf39847cc/cypress/cypress/integration/save-button.spec.js#L41
CTI @bruceplai front end end-to-end testing to mimic the user experience using Cypress.io https://github.com/civictechindex/CTI-website-frontend/blob/main/cypress/integration/pages/faq.spec.js https://github.com/civictechindex/CTI-website-frontend/blob/main/cypress/integration/pages/organizations.spec.js These test are supposed to simulate actual use cases to ensure a good user experience. Testing for accessibility using axe and wave. this testing is not automated and done whenever font or colors change, which is not very frequently
VRMS @jbubar 1 Jest framework for testing code 2 applications: client has zero tests new applications has several tests on it. Each file has a test file. JS has the code for the component. Each component has its own test. Test driven development. TDD The idea is that every time you create something, you write the test for it first. I want there to be a field that is editable and when the submit button sends, do something. Tests if VRMS are written on the document on the web page. Is there a footer? is there a sign in? Useful because you could run the tests whenever. Change the code and if the tests are broken, you can fix whatever you changed. Github actions: PR checks Every time someone makes a pull request, we run a series of tests to see if they pass and then the pull request is approved. Changes your issues and your workflows. Written in .yaml file. For example, do not approve changes to .md.
@ alan-zambrano Please provide update
- Progress: "What is the current status of your project? What have you completed and what is left to do?"
- Blockers: "Difficulties or errors encountered."
- Availability: "How much time will you have this week to work on this issue?"
- ETA: "When do you expect this issue to be completed?"
- Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."
- remember to add links to the top of the issue if they are going to be needed again.
@alan-zambrano Please provide update
- Progress: "What is the current status of your project? What have you completed and what is left to do?"
- Blockers: "Difficulties or errors encountered."
- Availability: "How much time will you have this week to work on this issue?"
- ETA: "When do you expect this issue to be completed?"
- Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."
- remember to add links to the top of the issue if they are going to be needed again.