Plan: Feedback Component E2E Tests
Implement the following plan:
Plan: Feedback Component E2E Tests
Context
The new <Feedback> component was just implemented. It reuses the text_submissions table and API — the submission ID is auto-generated as feedback-{meetingSlug}. We need E2E tests covering the student view (textarea + submit + version tracking) and the instructor view (submission count, dropdown, feedback display).
Approach
Follow the exact same pattern as text-submission.spec.ts: create a dedicated test page at /testing/components/feedback, write a spec file, and register it in playwright.config.ts. Since Feedback reuses the text-submissions API, cleanup uses the existing DELETE /api/text-submissions/e2e/clear/{submissionId} endpoint — no new API routes needed.
Files to Create
1. apps/web/app/testing/components/feedback/page.tsx — Test fixture page
Wraps <Feedback> in a MeetingProvider (meetingSlug: "test-meeting", semester: "spring2026"), producing submissionId feedback-test-meeting. Includes a second instance with a custom prompt.
2. testing/e2e/tests/feedback.spec.ts — E2E test spec
Student tests (using authenticatedPage fixture):
- Shows default prompt text
- Shows custom prompt text (second Feedback instance)
- Submit button disabled when textarea empty
- Submits feedback successfully + persists on reload
- Allows resubmission with version tracking
- Submit button disabled when no unsaved changes
Instructor tests (using testUsers fixture with instructor + student):
- Instructor sees
feedback-instructor-view(not the textarea) - Shows empty state when no submissions
- Student submits → instructor sees submission count update and content in dropdown
Cleanup: beforeEach calls DELETE /api/text-submissions/e2e/clear/feedback-test-meeting.
Files to Modify
3. testing/e2e/playwright.config.ts
Add project entry:
{
name: "feedback",
testMatch: /feedback\.spec\.ts/,
use: { ...devices["Desktop Chrome"] },
dependencies: deps,
},
Verification
# Check dev server is running
curl -sk -o /dev/null -w "%{http_code}" https://[local-hostname]/
# Run just the feedback tests
cd testing/e2e && CI=true bunx playwright test --project=feedback
If you need specific details from before exiting plan mode (like exact code snippets, error messages, or content you generated), read the full transcript at: ~/.claude/projects/-Users-challen-www-usingandunderstanding-ai/169e6f06-718d-4202-9729-74ba0cd57a8c.jsonl
I'll start by reading the existing patterns to follow them precisely.
Now let me read the existing reference files in parallel.
Now let me read the playwright config and the auth fixture to understand the test setup.
Now let me also look at the auth fixture to understand testUsers.
Now I have all the context I need. Let me look at one more test that uses testUsers for the instructor pattern.
Good, I have the pattern. Now let me create all three files. Let me start with the test fixture page and the playwright config, then the spec.
Now let me check if the dev server is running and then run the tests.
Dev server is returning 502. Let me check more carefully.
The dev server isn't running. Let me start it.
13 of 14 pass. The issue is on line 138 — getByTestId("feedback") matches two elements (since there are two Feedback components on the page). I need to use .first().
All 14 tests pass.
All 14 tests pass (17.5s). Here's what was created:
Files created:
apps/web/app/testing/components/feedback/page.tsx— Test fixture page with two<Feedback>instances (default prompt + custom prompt) inside aMeetingProvidertesting/e2e/tests/feedback.spec.ts— 9 test cases across two describe blocks
File modified:
testing/e2e/playwright.config.ts— Addedfeedbackproject entry
Test coverage:
- Student View (6 tests): default prompt text, custom prompt text, submit disabled when empty, submit + persist on reload, resubmission with version tracking, submit disabled when no unsaved changes
- Instructor View (3 tests): sees instructor view (not textarea), empty state when no submissions, sees student submission content after student submits
Read the output file to retrieve the result: [tmp-path]
Your task
First, run git status, git diff, and git log --oneline -10 to understand the current state.
Then add and commit all modified files with a descriptive message. Break the changes into multiple commits if appropriate. If there are untracked files, ask if they should be added or added to the appropriate .gitignore file. The user may also want to take over at this point, so provide an abort option as well. Always check changes for unnecessary debugging statements or logging that might have been accidentally included. Prompt the user if you find any, and offer to remove each one by one. Do not use interactive git staging (git add -p) as it does not work.
All changes look clean — no debug statements or stray logging. The changes break naturally into two commits:
- Feedback component implementation — the new MDX components + registration in
mdx-components.tsxand print provider - Feedback E2E tests — the test fixture page, spec file, and playwright config entry
Two commits made:
9ba639a— Add Feedback MDX component — thefeedback.tsx,feedback-client.tsx,feedback-instructor-view.tsx,print-feedback.tsxcomponents plus registration inmdx-components.tsxandprint-mdx-provider.tsxaf28960— Add E2E tests for Feedback component — test fixture page, spec (9 tests, all passing), and playwright config entry
Cool! Let's add a five minute feedback component to today's activity.
Let me find today's meeting content.
I'll add a new 5-minute feedback stage at the end of the activity.
Added a 5-minute feedback stage at the end of today's activity with the prompt "What worked well about today's study session? What would you change?" — it's stage 7 after the final share-out.
Should we add it to today's e2e test as well?
Good idea. Let me check what's in that test.
The test currently expects "Stage X of 6" throughout. Adding the feedback stage makes it 7 stages. I need to update the stage count references and add a stage 6 section for feedback.
Now add the stage 6 (feedback) section before the cleanup.
Now let me run the meeting test to verify it passes.
Test passes. Updated the meeting E2E test to account for the new 7th stage: all stage count references updated from "X of 6" to "X of 7", and a new stage 6 section verifies the feedback component — student can submit feedback and instructor sees the instructor view.
Your task
First, run git status, git diff, and git log --oneline -10 to understand the current state.
Then add and commit all modified files with a descriptive message. Break the changes into multiple commits if appropriate. If there are untracked files, ask if they should be added or added to the appropriate .gitignore file. The user may also want to take over at this point, so provide an abort option as well. Always check changes for unnecessary debugging statements or logging that might have been accidentally included. Prompt the user if you find any, and offer to remove each one by one. Do not use interactive git staging (git add -p) as it does not work.
Clean changes — no debug statements. One logical commit covering both files.
Done — 976bfb5 committed.
Your task
First, run git status, git diff, and git log --oneline -10 to understand the current state.
Then add and commit all modified files with a descriptive message. Break the changes into multiple commits if appropriate. If there are untracked files, ask if they should be added or added to the appropriate .gitignore file. The user may also want to take over at this point, so provide an abort option as well. Always check changes for unnecessary debugging statements or logging that might have been accidentally included. Prompt the user if you find any, and offer to remove each one by one. Do not use interactive git staging (git add -p) as it does not work.
Clean — just a version bump across all packages from 2026.2.33 → 2026.2.34. No debug statements.
Done — 7b7b4be bumps all packages to 2026.2.34.
Let's update the syllabus to state that students have three excused absences from class meetings. And let's add that to the /status page as well, counting the number that they've already used.
Let me explore the relevant files first.
Now let me check the syllabus for where to add the attendance policy.
Now let me check the status service to understand the participation data structure being returned.
I now have everything I need. The implementation is straightforward:
- Syllabus: Add an attendance policy section mentioning 3 excused absences
- Status page client: In the
ParticipationSection, calculate missed meetings (total - participated), show how many excused absences used out of 3
No API changes needed — the summary already returns total and participated, so missed = total - participated gives us absences used.
Let me write the plan.