test: integration tests for plans creation - testing course by simplyNoOne · Pull Request #250 · Solvro/web-planer

simplyNoOne · 2025-07-23T11:52:26Z

Important

This PR adds a comprehensive testing setup using Vitest, including new test scripts, dependencies, mock data, and tests for plan-related components and pages.

Testing Setup:
- Adds vitest and related scripts code-test and code-test:ui to package.json.
- Adds vitest.config.ts for Vitest configuration with plugins and setup files.
- Introduces setup.ts for global test setup, including mock server initialization.
Dependencies:
- Adds testing libraries: @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, msw, jsdom, and vitest.
- Adds mock service worker setup in server.ts and handlers in handlers.ts.
Mocks and Providers:
- Adds Providers.tsx for wrapping components in necessary context providers during tests.
- Adds mock data and functions in mock-data.ts, auth.ts, user.ts, and utils.tsx.
Component and Page Tests:
- Adds editPlan.test.tsx for testing plan editing functionality.
- Adds planPage.test.tsx for testing plan page interactions.
- Updates app-sidebar.tsx and registration-combobox.tsx to include data-testid attributes for testing.

^{This description was created by}^{for 5a4d5da. You can customize this summary. It will automatically update as commits are pushed.}

Rei-x

mega duma Ania, że dałaś radę z przetestowaniem planera i to przy użyciu RTLa - wiele osób przy tym poległo 😭

z takich rzeczy co można by było poprawić to mocniejsze skupienie się na testowaniu behawioralnym, a nie testowaniu implementacji - nasze testy powinny wytrzymać 90% refactorów kodu jeśli dla użytkownika nic się nie zmieniło. Testowanie czy jakiś element html'a jest labelem czy spanem trochę temu przeczy. Ta zasada odnosi się wszędzie do testowania - także nawet we flutterze się przyda

tutaj fajny artykuł jak nie czujesz się jeszcze pewna co już jest implementation detail a co jeszcze nie:
https://blog.photogrammer.net/why-the-scope-of-your-tests-matter/ - trochę nacechowany C# ale dobrze opisuje o co chodzi

Rei-x · 2025-08-24T09:55:50Z

+  await act(async () => {
+    await user.click(regOption);
+  });


potrzebny tu jest act?

z tego co kojarze react testing library automatycznie wszystkie userEventy w to wrappuje

Niewykluczone, że to pozostałość z moich gimnastyk, aby w ogóle te testy przeszły i akurat ta była niepotrzebna

Rei-x · 2025-08-24T09:57:10Z

+    const user = userEvent.setup();
+    render(
+      <Providers user={generateMockUser()} queryClient={new QueryClient()}>
+        <CreateNewPlanPage planId="testplan1" />


obstawiam, że losowe generowanie id planu byłoby trochę bardziej bulletproof - na wypadek jakby coś od tego zależalo

Rei-x · 2025-08-24T09:57:48Z

+    const user = setup();
+
+    const label = screen.getByText("Wydział");
+    expect(label.tagName).toBe("LABEL");


co tym właściwie testujesz?

raczej to jest implementation detail

Rei-x · 2025-08-24T10:01:20Z

+export const mockFaculties: FacultyType = [
+  {
+    id: "id1",
+    name: "faculty 1",
+    departmentId: "dep1",
+  },
+  {
+    id: "id2",
+    name: "faculty 2",
+    departmentId: "dep2",
+  },
+  {
+    id: "id3",
+    name: "faculty 3",
+    departmentId: "dep2",
+  },
+];
+
+export const mockRegistrations: Registration[] = [
+  { id: "reg1", name: "Registration 1" },
+  { id: "reg2", name: "Registration 2" },
+];


ja akurat jestem fanem nadawania jak najprawdziszych nazw dla testowych danych - czyli np. zamiast faculty1 to Wydział Informatyki i Telekomunikacji

łatwiej mi się wtedy testuje i myśli (z tego samego powodu mamy deskryptywne nazwy zmiennych, a nie x,y,z jak matematycy)

Rei-x · 2025-08-24T10:21:39Z

+    const span1 = regs1.find(
+      (element) => element.tagName.toLowerCase() === "span",
+    );
+    const span2 = regs2.find(
+      (element) => element.tagName.toLowerCase() === "span",
+    );


oj oj, co to właściwie testuje? czy istnieje span? to jest bardzo mocno testowanie implementation detail i nie powinno się tak robić - użytkownik nie patrzy na to czy dany element jest spanem

Rei-x · 2025-08-24T10:31:09Z

+  newPlan,
+} from "./mock-data";
+
+const NEXT_PUBLIC_API_URL = "http://localhost:3333";


hmm, to nie powinno być jakoś wyciągane ze zmiennych środowiskowych? pytam bo nie jestem pewien

Wiem że coś mi nie chciało działać jak było w .env i chyba musiałam tak to zrobić, ale możliwe że coś przeoczyłam

Rei-x · 2025-08-24T10:31:54Z

+export const mockCourses: CourseType = [
+  {
+    id: "c1",
+    name: "Analizka",
+    registrationId: mockRegistrations[0].id,
+    groups: groupsForCourses1,
+  },
+  {
+    id: "c2",
+    name: "Algebra",
+    registrationId: mockRegistrations[0].id,
+    groups: groupsForCourses2,
+  },
+];


Suggested change

export const mockCourses: CourseType = [

{

id: "c1",

name: "Analizka",

registrationId: mockRegistrations[0].id,

groups: groupsForCourses1,

},

{

id: "c2",

name: "Algebra",

registrationId: mockRegistrations[0].id,

groups: groupsForCourses2,

},

];

export const mockCourses = [

{

id: "c1",

name: "Analizka",

registrationId: mockRegistrations[0].id,

groups: groupsForCourses1,

},

{

id: "c2",

name: "Algebra",

registrationId: mockRegistrations[0].id,

groups: groupsForCourses2,

},

] satisfies CourseType[];

satisfies jest troche bezpieczniejsze

tyczy się też innych zmiennych

Rei-x · 2025-08-24T10:33:57Z

+  },
+}));
+
+vi.mock("next/headers", () => ({


nie mockowałaś już tego w frontend/src/tests/mocks/auth.ts?

ogólnie najlepiej trzymać wszystkie mocki w jednym miejscu według mnie, potem może się szybko pogubić co masz zamockowane a co nie

Rei-x · 2025-08-24T10:34:43Z

+});
+afterEach(() => {
+  server.resetHandlers();
+  cleanup();


szacun, że pamiętałaś o cleanupie z rtl'a - większość zapominała

Rei-x · 2025-08-24T10:51:24Z

+    "code-test": "vitest",
+    "code-test:ui": "vitest --ui",


raczej konwencja jest taka, że to się nazywa po prostu "test" i "test:ui". To że @qamarq wymyślił sobie, że skrypt "test" będzie robił linting to inna kwestia - to jakiś jego wymyśł.

w swoich projektach nazywaj to po prostu "test"

test: i burn with hate for this

09ee8a2

pull-request-size Bot added the size/XL label Jul 23, 2025

simplyNoOne closed this Jul 23, 2025

ellipsis-dev Bot reviewed Jul 23, 2025

View reviewed changes

Comment thread frontend/src/pages/editPlan.test.tsx Outdated

Comment thread frontend/src/pages/editPlan.test.tsx Outdated

Comment thread frontend/src/pages/planPage.test.tsx

Comment thread frontend/src/tests/mocks/handlers.ts Outdated

simplyNoOne added 2 commits July 25, 2025 11:33

test: slight fixes

0c8c1e8

test: more tests but coupling

5a4d5da

simplyNoOne reopened this Jul 25, 2025

ellipsis-dev Bot reviewed Jul 25, 2025

View reviewed changes

Comment thread frontend/src/tests/mocks/mock-data.ts

simplyNoOne added 4 commits July 26, 2025 22:41

fix: make tests and ci pass

5d0783b

fix: providers file

876caf2

fix: make ci pass

06b1567

fix: minor test fix

cf672f2

simplyNoOne changed the title ~~test: i burn with hate for this~~ test: integration tests for plans creation - testing course Jul 26, 2025

Rei-x approved these changes Aug 24, 2025

View reviewed changes

qamarq closed this Feb 23, 2026

Conversation

simplyNoOne commented Jul 23, 2025 • edited by ellipsis-dev Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Rei-x left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

simplyNoOne commented Jul 23, 2025 •

edited by ellipsis-dev Bot

Loading