Testing

import { createPlayground } from 'livecodes';

// Project with tests
createPlayground('#container', {
  template: 'jest', // Jest starter template
  params: { tests: 'open' }, // Show tests panel
});

// Custom test configuration
createPlayground('#container', {
  config: {
    activeEditor: 'script',
    script: {
      language: 'javascript',
      content: `
export function add(a, b) {
  return a + b;
}

export function greet(name) {
  return 'Hello, ' + name;
}
      `,
    },
    tests: {
      language: 'javascript',
      content: `
import { add, greet } from './script';

describe('add', () => {
  test('adds numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('handles negatives', () => {
    expect(add(-1, -2)).toBe(-3);
  });
});

describe('greet', () => {
  test('greets by name', () => {
    expect(greet('World')).toBe('Hello, World');
  });
});
      `,
    },
  },
  params: { tests: 'open' },
});

// Script editor (script.js)
export default function greet(name) {
  return 'Hello, ' + name;
}

export const add = (a, b) => a + b;

// Also available in global scope
window.multiply = (a, b) => a * b;

// Tests editor
import greet, { add } from './script'; // Relative import, no extension

describe('imports', () => {
  test('greet', () => {
    expect(greet('World')).toBe('Hello, World');
  });

  test('add', () => {
    expect(add(1, 2)).toBe(3);
  });
});

describe('globals', () => {
  test('multiply', () => {
    expect(window.multiply(2, 3)).toBe(6);
  });
});

// React Testing Library
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';

test('button click', async () => {
  render(<MyComponent />);
  await userEvent.click(screen.getByText('Click me'));
  expect(screen.getByText('Clicked')).toBeInTheDocument();
});

// DOM Testing Library
import { getByText, waitFor } from '@testing-library/dom';

test('element appears', async () => {
  document.body.innerHTML = '<div id="root"></div>';
  // ... render something
  await waitFor(() => {
    expect(getByText(document.body, 'Loaded')).toBeTruthy();
  });
});

const playground = await createPlayground('#container', {
  config: {
    /* ... */
  },
});

// Run tests and get results
const { results } = await playground.runTests();

results.forEach((result) => {
  console.log(result.status); // 'pass', 'fail', or 'skip'
  console.log(result.testPath); // ['describe', 'it']
  console.log(result.duration); // milliseconds
  console.log(result.errors); // string[] of error messages
});

// Watch for test results
playground.watch('tests', ({ results, error }) => {
  if (error) {
    console.error('Test error:', error);
    return;
  }
  const passed = results.filter((r) => r.status === 'pass');
  console.log(`${passed.length} tests passed`);
});

// Jest globals available without import
describe('my tests', () => {
  test('passes', () => {
    expect(1 + 1).toBe(2);
  });

  test('asynchronous', async () => {
    const result = await someAsyncFunction();
    expect(result).toBe('expected');
  });

  test.skip('skipped', () => {
    // Not run
  });

  test.only('run only this', () => {
    // Only this test runs
  });
});

// Lifecycle hooks
beforeAll(() => {
  /* runs once before all tests */
});
afterAll(() => {
  /* runs once after all tests */
});
beforeEach(() => {
  /* runs before each test */
});
afterEach(() => {
  /* runs after each test */
});

// Mocks
jest.fn();
jest.mocked(obj);
jest.spyOn(obj, 'method');

import { assert } from 'chai';

describe('with Chai', () => {
  test('assertions', () => {
    assert.equal(1 + 1, 2);
    assert.isArray([1, 2, 3]);
    assert.include([1, 2, 3], 2);
  });
});

// Script editor has syntax error
export function add(a, b) {
  return a +  // Syntax error - missing operand
}

// Tests editor - tests never run because script failed
import { add } from './script';
test('add', () => expect(add(1, 2)).toBe(3));

// Tests run against the result page
// Script errors prevent the page from loading
// Always ensure script compiles before testing

// Check the console for script errors
// Fix script errors before writing tests

import { add } from 'script'; // Missing ./
import { add } from './script.js'; // Has extension

import { add } from './script'; // Relative import, no extension