Merge pull request #45 from SpaceyaTech:test-dashboard-sidebar

Add documentation for project checklist and testing guidelines

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.
+

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 <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)