Purpose

• Contains JavaScript frontend tests and toolchain configuration (Jest).

Quick start

cd JestTests
npm install
npm test

Where to look

• Test files under JestTests/__tests__ or JestTests/tests.
• Frontend fixtures and mocks in the same folder.

Notes

• Use the local Node/NPM version recommended by the project (check package.json) and run tests after updating frontend assets.

JavaScript unit testing for SkyCMS using Jest.

# Navigate to JestTests directory
cd JestTests

# Install dependencies (first time only)
npm install

# Run all tests
npm test

# Run tests in watch mode (auto-rerun on changes)
npm run test:watch

# Run with coverage report
npm run test:coverage

# Run only API tests
npm run test:api

# Run only Editor tests
npm run test:editor

# Run only Editor unit suite explicitly
npm run test:unit:editor

JestTests/
├── package.json           # Jest configuration & dependencies
├── tests/
│   ├── api/              # Contact API JavaScript tests
│   │   ├── skycms-contact.test.js
│   │   └── generated-script.test.js
│   └── editor/           # Editor JavaScript tests
│       ├── ckeditor-widget.test.js
│       ├── dublicator.test.js
│       ├── guid.test.js
│       └── image-widget.test.js
├── coverage/             # Coverage reports (generated)
└── node_modules/         # Dependencies (after npm install)

• skycms-contact.test.js: Unit tests for the SkyCmsContact JavaScript library

  • Configuration validation
  • Form initialization
  • Field name mapping (default and custom)
  • Form submission handling
  • Success/error callbacks
  • CAPTCHA integration

• generated-script.test.js: Integration tests for the actual generated JavaScript from /_api/contact/skycms-contact.js

• ckeditor-widget.test.js: Config logic (GUID assignment for new regions, heading vs. content config selection)
• dublicator.test.js: Fresh data-ccms-ceid assignment for cloned blocks
• image-widget.test.js: GUID assignment for new image widgets
• guid.test.js: Shared GUID helper format/uniqueness

After running npm run test:coverage, view the HTML report:

# Open coverage report in browser
start coverage/lcov-report/index.html

Add to your build pipeline:

- script: |
    cd JestTests
    npm install
    npm run test:coverage
  displayName: 'Run JavaScript Tests'