diff --git a/BOILERPLATE.md b/docs/BOILERPLATE.md similarity index 100% rename from BOILERPLATE.md rename to docs/BOILERPLATE.md diff --git a/docs/CHECKLIST.MD b/docs/CHECKLIST.MD new file mode 100644 index 0000000..e39a003 --- /dev/null +++ b/docs/CHECKLIST.MD @@ -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. + diff --git a/docs/TESTING.md b/docs/TESTING.md new file mode 100644 index 0000000..dd06592 --- /dev/null +++ b/docs/TESTING.md @@ -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
Colabs
; +} +// 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)