-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add documentation for project checklist, testing guidelines, and boil…
…erplate setup
- Loading branch information
Showing
3 changed files
with
80 additions
and
0 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
# CHECKLIST | ||
|
||
Before working on a feature, it's recommended to check out the [issues](https://github.com/SpaceyaTech/CoLabs-Frontend/issues) and assign yourself one. If none of them interest you, you can [check out the Figma file](https://www.figma.com/design/2r8LJbRj7TEXZ7obQvVeb8/SpaceYaTech-Website-Re-design?node-id=4-598&node-type=canvas&t=ZX1LpTU4llEME87H-0) and identify the feature you want to work on. | ||
- Create an issue on GitHub with the feature you want to work on and assign yourself. | ||
- Create a branch for the feature you want to work on. | ||
- Work on your feature. | ||
- Write some tests to ensure someone else won't break your code. | ||
- Run the tests, linter, and build to make sure you didn't break anything. | ||
```sh | ||
npm run dryrun | ||
``` | ||
- If everything is fine, you can make a pull request and await a review. | ||
- 🎉 🎉 🎉 You did it. Rinse and repeat. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
# Testing | ||
|
||
```sh | ||
npm run test | ||
``` | ||
will run your unit tests and e2e tests to ensure everything is working correctly. | ||
|
||
- [vitest](https://vitest.dev/) | ||
Unit testing, ideal for functions (components too). | ||
|
||
```sh | ||
npm run vitest | ||
``` | ||
|
||
Ideally, put your unit tests next to your `function.ts(x)` but with `function.test.ts(x)`. | ||
|
||
```ts | ||
import { describe, it, expect } from "vitest"; | ||
import { add } from "./add"; | ||
describe("add", () => { | ||
it("should add two numbers", () => { | ||
expect(add(1, 2)).toBe(3); | ||
}); | ||
}); | ||
``` | ||
|
||
Component testing can be done with [react testing library](https://testing-library.com/docs/react-testing-library/intro/) or you could only write e2e tests with Playwright instead to avoid double testing and take advantage of the Playwright tooling like recording of tests and locators. | ||
|
||
- [playwright](https://playwright.dev/) | ||
E2E testing, ideal for UI testing. | ||
|
||
```sh | ||
npm run playwright | ||
``` | ||
|
||
All the tests should be in the `e2e-tests` folder. | ||
|
||
```tsx | ||
import { test, expect } from "@playwright/test"; | ||
|
||
test("has title", async ({ page }) => { | ||
await page.goto("https://playwright.dev/"); | ||
await expect(page).toHaveTitle(/Playwright/); | ||
}); | ||
``` | ||
|
||
Add a `data-test` attribute to components you'll query in your tests for more reliable results. | ||
|
||
```tsx | ||
// index.page.tsx | ||
function HomePage() { | ||
return <div data-test="DashboardLayoutHeaderLogo">Colabs</div>; | ||
} | ||
// e2e-tests/homepage/index.spec.ts | ||
import { test, expect } from "@playwright.test"; | ||
test("has colabs text", async ({ page }) => { | ||
await page.goto("/"); | ||
await expect( | ||
page.locator('[data-test="DashboardLayoutHeaderLogo"]'), | ||
).toHaveText("Colabs"); | ||
}); | ||
``` | ||
|
||
## Helpful resources | ||
- [Playwright tips](https://youtu.be/ZF1W6FxWOiA?si=AkHqOwLDedPJ3PC6) | ||
- [Advice on what to test](https://youtu.be/4-_0aTlkqK0?si=my5IJnAmtcIOhpX9) |