diff --git a/.github/skills/component-development/SKILL.md b/.github/skills/component-development/SKILL.md index 8afe75da6..331d5381f 100644 --- a/.github/skills/component-development/SKILL.md +++ b/.github/skills/component-development/SKILL.md @@ -25,9 +25,13 @@ This skill covers creating new Blazor components that emulate ASP.NET Web Forms - `BaseStyledComponent` - Components with styling - `DataBoundComponent` - Data-bound components 5. **Add unit tests** in `src/BlazorWebFormsComponents.Test/{ComponentName}/` -6. **Add sample page** in `samples/AfterBlazorServerSide/Pages/ControlSamples/` -7. **Create documentation** in `docs/{Category}/{ComponentName}.md` -8. **Update `mkdocs.yml`** and `README.md` +6. **Add sample page** in `samples/AfterBlazorServerSide/Components/Pages/ControlSamples/{ComponentName}/` +7. **Add integration tests** using Playwright in `samples/AfterBlazorServerSide.Tests/` +8. **Create documentation** in `docs/{Category}/{ComponentName}.md` +9. **Update navigation:** + - Add to `samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor` (TreeView) + - Add to `samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor` (home page catalog) + - Update `mkdocs.yml` and `README.md` ### Base Class Selection @@ -54,3 +58,47 @@ Prefix with `On`: - `OnCommand` for command events - `OnSelectedIndexChanged` for selection changes - `OnDataBinding` for data binding events + +### Integration Testing Requirements + +Every component must have integration tests in `samples/AfterBlazorServerSide.Tests/` using Playwright: + +1. **Page load test** in `ControlSampleTests.cs`: + - Add route to the appropriate `[Theory]` test (EditorControl, DataControl, etc.) + - Verifies page loads without console errors or page errors + +2. **Interactive test** in `InteractiveComponentTests.cs` (for interactive components): + - Test user interactions (clicks, input, selection changes) + - Verify component responds correctly to user actions + - Assert no console errors during interaction + +Example page load test entry: +```csharp +[Theory] +[InlineData("/ControlSamples/YourComponent")] +public async Task EditorControl_Loads_WithoutErrors(string path) +``` + +Example interactive test: +```csharp +[Fact] +public async Task YourComponent_Interaction_Works() +{ + var page = await _fixture.NewPageAsync(); + try + { + await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/YourComponent"); + // Test interactions... + // Assert expected behavior... + } + finally + { + await page.CloseAsync(); + } +} +``` + +Run integration tests with: +```bash +dotnet test samples/AfterBlazorServerSide.Tests +``` diff --git a/.github/skills/documentation/SKILL.md b/.github/skills/documentation/SKILL.md index 975044a98..490ba961c 100644 --- a/.github/skills/documentation/SKILL.md +++ b/.github/skills/documentation/SKILL.md @@ -391,6 +391,304 @@ When creating sample pages in `samples/AfterBlazorServerSide/Components/Pages/Co } ``` +## Creating Sample Pages for Components + +**CRITICAL**: Every documented component MUST have a corresponding sample page in the AfterBlazorServerSide project. + +### Sample Page Structure and Location + +Samples are located in `samples/AfterBlazorServerSide/Components/Pages/ControlSamples/[ComponentName]/` + +The folder structure mirrors the documentation categories: +- **Editor Controls**: `ControlSamples/[ComponentName]/` +- **Data Controls**: `ControlSamples/[ComponentName]/` +- **Validation Controls**: `ControlSamples/[ComponentName]/` (or `ControlSamples/Validations/`) +- **Navigation Controls**: `ControlSamples/[ComponentName]/` +- **Login Controls**: `ControlSamples/[ComponentName]/` + +### Sample File Naming Conventions + +1. **Basic Sample**: `Index.razor` - The main/default sample for the component + - Route: `@page "/ControlSamples/[ComponentName]"` + +2. **Additional Scenarios**: `[ScenarioName].razor` - Named after what they demonstrate + - Route: `@page "/ControlSamples/[ComponentName]/[ScenarioName]"` + - Examples: `Style.razor`, `Events.razor`, `JavaScript.razor` + +3. **Navigation Helper**: `Nav.razor` - Optional component listing all samples for this component + - Used to navigate between multiple samples for the same component + +### Sample Page Required Structure + +Every sample page MUST include: + +1. **Route**: `@page "/ControlSamples/[ComponentName]"` or `@page "/ControlSamples/[ComponentName]/[Scenario]"` +2. **PageTitle**: `[ComponentName] - [Scenario]` +3. **Heading**: `

[ComponentName] Sample

` or `

[ComponentName] - [Scenario]

` +4. **Description**: Brief explanation of what the sample demonstrates +5. **Demo Section**: Working component implementation +6. **Code Display**: Showing the markup and code being used (optional but recommended) + +### Sample Page Template + +```razor +@page "/ControlSamples/[ComponentName]" +@page "/ControlSamples/[ComponentName]/[Scenario]" + +[ComponentName] Sample + +

[ComponentName] - [Scenario Description]

+ +

[Brief description of what this sample demonstrates]

+ +@* Optional: Navigation to other samples for this component *@ +