Fox Testing

Fox Testing checks your Fiscal Ox components for common mistakes before they go live. It looks at each component's .html and .js files, tells you what is wrong and on which line, and writes an easy-to-read testing report you can share with your team.

It can also use Groq AI to take a deeper look at a component and catch problems that simple checks can't, such as user input that isn't escaped or a modal that isn't cleared before it opens again.

Before you start

Fox Testing switches on when you open a folder named Fiscal Ox (or a folder that contains it). That folder needs a components folder, and each component needs an .html file and a .js file with the same name as its folder.

If you open any other folder, the commands still show up, but they tell you why they can't run.

AI features need a Groq API key. Everything else works without one.

Commands

Open the Command Palette with Cmd + Shift + P (Windows/Linux: Ctrl + Shift + P) and type Fox Testing to see all commands.

Testing

Reports

Groq AI

Right-click menus

• In the Explorer: right-click the components folder, a component folder or a component file and choose Test Components.
• In the editor: right-click inside a component file to find Test Components, Test Current Component and AI Review Current Component.

Testing your components

1. Run Fox Testing: Test Components.

2. Choose what to test:

   • All Components: pick the components folder or the Fiscal Ox folder.
   • Particular Component: pick one component folder.
   • Particular File: pick one .html or .js file of a component.

   You can pick a Fiscal Ox folder anywhere on your computer, not only the one you have open.

3. A Testing... message shows the progress. You can cancel it at any time.

4. When it's done, you'll see Testing completed. Testing report generated successfully. Click Open Report to read it.

The testing report

The report is saved as Fox Testing Report.md in the Fiscal Ox folder. It's replaced every time you run a new test.

What's inside:

• Result: passed or failed, and how many components need fixing
• Summary: a short explanation of the result and what to fix first
• Issue Status: how many issues there are of each type
• Top Issues: the most serious and most common problems
• Component Results: one line per component with its result
• Issues by Component: each issue with the file and line number
• Issue Guide: why each issue matters and how to fix it

Every issue gets one of three labels:

A component fails if it has at least one critical issue.

When you test a single component or file, Groq AI also reviews the code and adds anything extra it finds, marked (AI review). When you test all components, this deeper review is skipped so you don't use up your daily AI limit. If you haven't set a Groq key, you still get the full report, just without the AI-written summary.

Other helpful features

• Problems panel: every issue is listed with its file and line. Click one to jump straight to it.
• Quick fixes: for simple issues, click the 💡 light bulb to fix them in one click. For example: add type="button" to a button, hide a create panel on load, remove a console.log, or delete commented-out code.
• Explain with AI: from the 💡 menu you can ask AI to explain any issue and suggest a fix.
• Turn a check off: if a check doesn't fit your project, you can turn it off from the 💡 menu.
• Testing view: every component is listed with one test per check area, so you can see at a glance what passes and what doesn't.
• Test on save: when you save a component file, it's re-tested automatically. This never uses AI.

Hiding issues in your code

By default, Fox Testing marks problems right in your code: underlines, red error boxes and grey INFO / WARNING notes at the end of lines, entries in the Problems panel and 💡 suggestions. If you'd rather keep your editor clean, turn this off:

1. Open Settings (Cmd + , on macOS, Ctrl + , on Windows/Linux).
2. Search for Fox Testing: Show In Editor.
3. Untick the box.

Everything Fox Testing shows inside your code disappears right away, and nothing new is added while the setting is off. Testing, the pass/fail results in the Testing view and the testing report keep working as normal. Tick the box again to bring everything back.

What gets checked

Fox Testing runs 98 checks, grouped into 15 component checks (C01–C15) and 5 code review areas (R1–R5).

• Critical (error) issues fail the test.
• Needs Improvement (warning) and Good Practice (info) issues are reported but don't fail it, unless you change the failOn setting.

C01 · Component structure & page registration

C02 · Panel layout & identifiers

C03 · Panel headings & action buttons

C04 · Form fields & labels

C05 · select2 & date handling

C06 · List tables

C07 · Status indicators

C08 · Modals

C09 · User dialogs & server failure handling

C10 · Irreversible actions & delete confirmation

C11 · Icons

C12 · CSS, colour & inline styles

C13 · JavaScript conventions

C14 · Third-party libraries

C15 · Verified on page at desktop & tablet width

This one can't be automated, so it always shows as skipped. Open the component on its page and check it at desktop and tablet width yourself.

R1 · Correctness & safety

R2 · Performance

R3 · Structure & maintainability

R4 · UI / UX consistency

R5 · General reviewer checks

AI checks

When AI review runs, it also looks for:

• Missing null checks on server responses
• Required fields that aren't validated before saving
• The same data being requested more than once
• A panel shown without hiding the other panels
• A modal that isn't reset, or a success message shown while a modal is still open
• Approve, reject or sign actions that skip the e-signature step
• User input added to the page without escaping
• Pending ids that aren't cleared after a confirmed action
• Logic bugs, or handlers that do unrelated things
• Missing loading, empty or error states

AI findings are suggestions. They can be Needs Improvement at most, so AI alone will never fail a component.

Groq AI

Setting up your key

1. Create a free API key at console.groq.com.
2. Run Fox Testing: Set Groq API Key and paste it in.

Your key is stored in your computer's secure storage (Keychain on macOS, Credential Manager on Windows). It's only ever sent to Groq, and it never shows up in logs.

If you prefer, you can set a GROQ_API_KEY environment variable instead.

Staying within the free plan

Fox Testing is built to work on Groq's free plan:

• It keeps track of how much you use per minute and per day, and slows down before you hit Groq's limits.
• It sends only the relevant parts of large files, not the whole file.
• It remembers answers for code that hasn't changed, so re-testing the same component costs nothing.
• If the main AI model runs out of quota for the day, it switches to a backup model automatically.

Run Fox Testing: Show AI Usage to see where you stand.

The default models are openai/gpt-oss-120b, with openai/gpt-oss-20b as the backup. Groq sometimes retires models. If that happens, Fox Testing will let you know, and you can pick another one from Groq's model list in the settings.

Settings

Search for Fox Testing in VS Code settings.

Sharing settings with your team

To make sure everyone on the team uses the same settings, add a .fiscalox-testing.json file to the root of the Fiscal Ox folder:

{
  "failOn": "error",
  "exclude": ["mathJS"],
  "maxFindingsPerRule": 25,
  "rules": {
    "fox/label-for": "error",
    "review/naming": "off"
  }
}

Your own VS Code settings are applied on top of this file.

Requirements

• VS Code 1.85 or later
• A Groq API key (only for AI features)