Is there a more intuitive way to run storybook tests automatically?

[visgotti]

The problem is you need to wait for storybook's server to be listening by running nx-storybook before running nx test-storybook

Like it'd be great if there was a comand nx storybook-all project which is basically what my script does but also I added the affected iteration myself explicitly since I could not figure out a way to make the script work from using an executor inside project.json.

Right now the js script gets called in my pre commit hooks, and it's working fine and I'm sure there's room for improvement but I just wanted to get something working for proof of concept. I tried both approaches of using an executor with nx:run-commands and nx:run-script but nx:run-commands was not respecting my exit codes (I could not figure out how to get it to fail, only wait forever if I never console.logged out the configured "readyWhen") And nx:run-script as far as I'm aware there was no way to pass in args or anyway to indicate which lib/app is running so the script can look for the configured storybook ports. So basically I had to write this which is doing what nx affected would normally iterate over if trying to call storybook.

const { exec } = require('child_process');
const fs = require('fs').promises;
const path = require('path');
const waitOn = require('wait-on');

const nxAffectedLibsCommand = `nx show projects --affected --type lib -t storybook`;
const nxAffectedAppsCommand = `nx show projects --affected --type app -t storybook`;

// Function to run a command and return a promise
function runCommand(command) {
  return new Promise((resolve, reject) => {
    const process = exec(command);
    const output = [];
    process.stdout.on('data', data => {
      output.push(data);
      console.log(data);
    });
    process.stderr.on('data', data => console.error(data));

    process.on('close', code => {
      if (code !== 0) {
        reject(new Error(`Command failed: ${command}`));
      } else {
        resolve(output);
      }
    });
  });
}

// Function to wait for a URL to be available
function waitForUrl(url) {
  return new Promise((resolve, reject) => {
    waitOn({ resources: [url] }, err => {
      if (err) {
        console.log(`Failed to wait for URL: ${url}`);
        reject(`Failed to wait for URL: ${url}`);
      } else {
        console.log("Storybook is available at: ", url);
        resolve();
      }
    });
  });
}

// Function to get the port number from the project.json file
async function getPortForProject(rootFolder, project) {
  const projectJsonPath = path.join(rootFolder, project, 'project.json');
  try {
    const projectJson = await fs.readFile(projectJsonPath, 'utf8');
    const projectConfig = JSON.parse(projectJson);
    return projectConfig.targets.storybook.options.port;
  } catch (error) {
    throw new Error(`Failed to read port for project ${project}: ${error.message}`);
  }
}

// Main function to run the commands for each affected project
async function main() {
  try {
    console.log('Getting list of affected projects...');
    const affectedProjectLibs = await runCommand(nxAffectedLibsCommand);
    const affectedProjectApps = await runCommand(nxAffectedAppsCommand);
    const projects = [
      { array: affectedProjectLibs, type: 'libs' },
      { array: affectedProjectApps, type: 'apps' }
    ];
    for(let i = 0; i < projects.length; i++) {
      const { array, type } = projects[i];
      for (let project of array) {
        project = project.trim().replace('\\n', '');
        console.log(`Processing project: ${project}`);
        const port = await getPortForProject(type, project);
        console.log(`Port for project ${project} is: ${port}`);
        
        const storybookCommand = `nx storybook ${project}`;
        const testCommand = `nx test-storybook ${project}`;
        const storybookUrl = `http://localhost:${port}`;
  
        console.log(`Starting Storybook for project ${project} on port ${port}: ${storybookCommand}`);
        runCommand(storybookCommand);
        console.log(`Waiting for Storybook to be available at: ${storybookUrl}`);
        await waitForUrl(storybookUrl);
        await runCommand(testCommand);
      }
    }
    

    process.exit(0);
  } catch (error) {
    console.log('exiting');
    console.error('Error:', error.message);
    process.exit(1);
  }
}
main();

Optimally I'd like for nx to support a command like this out of the box but the next best thing would to be able to figured out a way to use nx:run-commands and have it fail if a test fails because then I can take out my explicit affected iteration and leverage nx's.