Liturgical Calendar Unit Test Interface

A web-based graphical test interface for validating the LiturgicalCalendarAPI. Connects via WebSocket to a test server, runs unit tests asynchronously, and displays results in real-time on a responsive dashboard.

What This Skill Does

This skill provides comprehensive context for working with the UnitTestInterface repository, which tests the LiturgicalCalendarAPI through:

Tech Stack

Project Structure

```

UnitTestInterface/

├── index.php # Main test runner UI

├── admin.php # Administrative interface

├── resources.php # Resource testing interface

├── includes/ # PHP includes (I18n, auth, pgettext)

├── layout/ # Layout templates (head, navbar, sidebar, footer)

├── components/ # UI components (test modals)

├── assets/

│ ├── js/ # JavaScript (admin, assertions builder, test runner)

│ └── css/ # Stylesheets

└── i18n/ # Translation files

```

Step-by-Step Instructions

1. Environment Setup

When setting up the development environment:

1. Ensure `.env.development` or `.env.local` exists with:

- `WS_PROTOCOL`, `WS_HOST`, `WS_PORT` (WebSocket server config)

- `API_PROTOCOL`, `API_HOST`, `API_PORT` (API server config)

- `APP_ENV` (development|production)

2. Verify LiturgicalCalendarAPI is running (default: port 8000)

3. Verify WebSocket server is running (default: port 8080)

4. Start dev server: `php -S localhost:3003`

2. Code Standards Compliance

Before making any code changes:

**PHP:**

**Markdown:**

**JavaScript:**

3. Working with WebSocket Messages

When implementing or debugging WebSocket communication:

**Message Actions:**

**CRITICAL: Source Data Validation Categories**

Always use `category: "sourceDataCheck"` for validating source files:

```javascript

// Wider region

{

"validate": "wider-region-Europe",

"sourceFile": "Europe",

"category": "sourceDataCheck" // NOT "widerregioncalendar"

}

// National calendar

{

"validate": "national-calendar-IT",

"sourceFile": "IT",

"category": "sourceDataCheck" // NOT "nationalcalendar"

}

// Diocesan calendar

{

"validate": "diocesan-calendar-roma_lazio_it",

"sourceFile": "roma_lazio_it",

"category": "sourceDataCheck" // NOT "diocesancalendar"

}

```

**Missal Validation:**

Convert missal_id to validate format:

```javascript

const parts = missal_id.split('_');

let validateStr;

if (parts.length === 2 && /^[A-Z]{2}$/.test(parts[0])) {

validateStr = `proprium-de-sanctis-${parts[0]}-${parts[1]}`;

} else {

const year = parts[parts.length - 1];

validateStr = `proprium-de-sanctis-${year}`;

}

```

4. API Data Format Handling

When working with dates from the API:

5. CSS Class Slugification

When updating DOM elements based on server responses:

Server sends: `.MaryMotherChurchTest`

Client creates: `.marymotherchurchtest`

Always use `slugifySelector()` from `common.js`:

```javascript

document.querySelectorAll(slugifySelector(responseData.classes)).forEach(el => {

// Update card

});

```

6. Internationalization

When adding translatable strings:

7. Code Review Process

When addressing CodeRabbit feedback:

1. Collect ALL review comments before making changes

2. Address all issues in a single batch of commits

3. Push only after all issues resolved locally

4. Avoid multiple small pushes (rate limiting)

8. Key Global Variables

Available in JavaScript from PHP:

9. Key Classes in AssertionsBuilder.js

Important Constraints

Example Usage

"Help me add a new test type for validating feast day precedence rules"

"Debug why the wider region validation is failing for Europe"

"Add support for displaying ICS calendar format test results"

"Refactor the WebSocket message handling to support batch test execution"