Ink/Pastel Test Runner

App.js

import { useState, useEffect } from 'react';
import { render } from 'ink';
import inquirer from 'inquirer';
import fs from 'fs';
import path from 'path';

import TestRunner from './TestRunner';

const App = () => {
  const [testPackages, setTestPackages] = useState([]);

  useEffect(() => {
    // Assuming your tests are organized in a 'tests' directory
    const testsDirectory = path.join(__dirname, 'tests');

    // Read test package names from the 'tests' directory
    const packageNames = fs.readdirSync(testsDirectory);

    inquirer
      .prompt([
        {
          type: 'checkbox',
          name: 'packages',
          message: 'Select test packages to run:',
          choices: packageNames,
        },
      ])
      .then(answers => {
        setTestPackages(answers.packages);
      });
  }, []);

  return <TestRunner packages={testPackages} />;
};

render(<App />);

TestRunner.js

import { Box, Text, Checkbox } from 'ink';
import { Button } from 'pastel';

const TestRunner = ({ packages }) => {
  const [selectedTests, setSelectedTests] = useState([]);

  const handleTestToggle = test => {
    if (selectedTests.includes(test)) {
      setSelectedTests(selectedTests.filter(item => item !== test));
    } else {
      setSelectedTests([...selectedTests, test]);
    }
  };

  const runTests = () => {
    // Implement your test execution logic here using the selectedTests array
  };

  return (
    <Box flexDirection="column">
      <Text bold>Selected Test Packages:</Text>
      {packages.map((package, index) => (
        <Checkbox
          key={index}
          checked={selectedTests.includes(package)}
          onChange={() => handleTestToggle(package)}
          label={package}
        />
      ))}
      <Button onClick={runTests}>Run Tests</Button>
      {/* Display results */}
    </Box>
  );
};

export default TestRunner;