Testing

/**
 * Adds Storybook configuration to an Angular project
 * @param tree - Virtual file system tree
 * @param options - Storybook configuration options
 * @returns Promise resolving to callback function
 */
async function storybookConfigurationGenerator(
  tree: Tree,
  options: StorybookConfigurationSchema
): Promise<GeneratorCallback>;

interface StorybookConfigurationSchema {
  project: string;
  interactionTests?: boolean;
  generateStories?: boolean;
  linter?: 'eslint' | 'none';
  tsConfiguration?: boolean;
  configureStaticServe?: boolean;
  skipFormat?: boolean;
  ignorePaths?: string[];
}

import { storybookConfigurationGenerator } from "@nx/angular/generators";

await storybookConfigurationGenerator(tree, {
  project: "my-lib",
  interactionTests: true,
  generateStories: true,
  configureStaticServe: true
});

/**
 * Creates stories for all components in a project
 * @param tree - Virtual file system tree
 * @param options - Stories generation options
 * @returns Promise resolving to callback function
 */
async function storiesGenerator(
  tree: Tree,
  options: StoriesSchema
): Promise<GeneratorCallback>;

interface StoriesSchema {
  project: string;
  generateCypressSpecs?: boolean;
  cypressProject?: string;
  ignorePaths?: string[];
  skipFormat?: boolean;
}

import { storiesGenerator } from "@nx/angular/generators";

await storiesGenerator(tree, {
  project: "ui-components",
  generateCypressSpecs: true,
  cypressProject: "ui-components-e2e"
});

/**
 * Creates a stories file for a component
 * @param tree - Virtual file system tree
 * @param options - Component story options
 * @returns Promise resolving to callback function
 */
async function componentStoryGenerator(
  tree: Tree,
  options: ComponentStorySchema
): Promise<GeneratorCallback>;

interface ComponentStorySchema {
  componentPath: string;
  project: string;
  componentName?: string;
  componentFileName?: string;
  skipFormat?: boolean;
}

/**
 * Sets up Cypress component testing for a project
 * @param tree - Virtual file system tree
 * @param options - Cypress component configuration options
 * @returns Promise resolving to callback function
 */
async function cypressComponentConfigurationGenerator(
  tree: Tree,
  options: CypressComponentConfigurationSchema
): Promise<GeneratorCallback>;

interface CypressComponentConfigurationSchema {
  project: string;
  buildTarget?: string;
  skipFormat?: boolean;
  bundler?: 'vite' | 'webpack';
}

import { cypressComponentConfigurationGenerator } from "@nx/angular/generators";

await cypressComponentConfigurationGenerator(tree, {
  project: "my-app",
  buildTarget: "my-app:build",
  bundler: "vite"
});

/**
 * Creates a Cypress component test file for a component
 * @param tree - Virtual file system tree
 * @param options - Component test options
 * @returns Promise resolving to callback function
 */
async function componentTestGenerator(
  tree: Tree,
  options: ComponentTestSchema
): Promise<GeneratorCallback>;

interface ComponentTestSchema {
  project: string;
  componentName: string;
  componentPath: string;
  componentFileName?: string;
  skipFormat?: boolean;
}

import { componentTestGenerator } from "@nx/angular/generators";

await componentTestGenerator(tree, {
  project: "my-app",
  componentName: "UserProfile",
  componentPath: "src/app/user-profile/user-profile.component.ts"
});

/**
 * Angular Nx preset for Cypress Component Testing
 * @param pathToConfig - Path to the Cypress configuration file
 * @param options - Optional preset configuration
 * @returns Cypress configuration object
 */
function nxComponentTestingPreset(
  pathToConfig: string,
  options?: NxComponentTestingPresetOptions
): CypressConfig;

interface NxComponentTestingPresetOptions {
  buildTarget?: string;
  ctViteConfig?: string;
}

interface CypressConfig {
  component: {
    devServer: {
      framework: string;
      bundler: string;
      options?: {
        projectConfig?: any;
      };
    };
    specPattern: string;
    indexHtmlFile?: string;
  };
}

// cypress.config.ts
import { nxComponentTestingPreset } from "@nx/angular/plugins/component-testing";

export default nxComponentTestingPreset(__filename, {
  buildTarget: "my-app:build"
});

// Set up Storybook for a library
await storybookConfigurationGenerator(tree, {
  project: "ui-components",
  configureCypress: true,
  generateStories: true,
  standaloneConfig: true
});

// Generate stories for all components
await storiesGenerator(tree, {
  project: "ui-components",
  generateCypressSpecs: true
});

// Configure Cypress component testing
await cypressComponentConfigurationGenerator(tree, {
  project: "my-app",
  buildTarget: "my-app:build",
  bundler: "vite"
});

// Create component test for specific component
await componentTestGenerator(tree, {
  project: "my-app",
  componentName: "HeaderComponent",
  componentPath: "src/app/header/header.component.ts"
});

// header.component.cy.ts
import { HeaderComponent } from './header.component';

describe('HeaderComponent', () => {
  it('should render', () => {
    cy.mount(HeaderComponent, {
      componentProperties: {
        title: 'Test Title'
      }
    });
    
    cy.get('[data-cy=header-title]')
      .should('contain.text', 'Test Title');
  });
  
  it('should handle click events', () => {
    cy.mount(HeaderComponent, {
      componentProperties: {
        onMenuClick: cy.stub().as('menuClickStub')
      }
    });
    
    cy.get('[data-cy=menu-button]').click();
    cy.get('@menuClickStub').should('have.been.called');
  });
});

// header.component.stories.ts
import type { Meta, StoryObj } from '@storybook/angular';
import { HeaderComponent } from './header.component';

const meta: Meta<HeaderComponent> = {
  title: 'Components/Header',
  component: HeaderComponent,
  parameters: {
    layout: 'fullscreen'
  },
  argTypes: {
    title: {
      control: 'text'
    },
    showMenu: {
      control: 'boolean'
    }
  }
};

export default meta;
type Story = StoryObj<HeaderComponent>;

export const Default: Story = {
  args: {
    title: 'My Application',
    showMenu: true
  }
};

export const WithoutMenu: Story = {
  args: {
    title: 'My Application',
    showMenu: false
  }
};

export const LongTitle: Story = {
  args: {
    title: 'My Very Long Application Title That Might Wrap',
    showMenu: true
  }
};

interface Tree {
  read(filePath: string): Buffer | null;
  write(filePath: string, content: Buffer | string): void;
  exists(filePath: string): boolean;
  delete(filePath: string): void;
  rename(from: string, to: string): void;
  children(dirPath: string): string[];
  isFile(filePath: string): boolean;
}

interface GeneratorCallback {
  (): void | Promise<void>;
}

type Linter = 'eslint' | 'none';
type Bundler = 'vite' | 'webpack';

interface NxComponentTestingPresetOptions {
  buildTarget?: string;
  ctViteConfig?: string;
}

interface CypressConfig {
  component: {
    devServer: {
      framework: string;
      bundler: string;
      options?: any;
    };
    specPattern: string;
    indexHtmlFile?: string;
  };
}