@auto-engineer/frontend-checks
Advanced tools
Frontend validation and quality assurance plugin for the Auto Engineer CLI. This plugin provides testing and validation for React applications, ensuring code quality, performance, and user experience standards are met.
Frontend validation and quality assurance plugin for the Auto Engineer CLI. This plugin provides testing and validation for React applications, ensuring code quality, performance, and user experience standards are met.
This is a plugin for the Auto Engineer CLI. Install both the CLI and this plugin:
npm install -g @auto-engineer/cli
npm install @auto-engineer/frontend-checks
Add this plugin to your auto.config.ts:
export default {
plugins: [
'@auto-engineer/frontend-checks',
// ... other plugins
],
};
This plugin provides the following commands:
check:client - Check the client code for issuesThe Frontend Checks plugin performs validation of React applications, including unit testing, integration testing, accessibility auditing, performance analysis, and code quality checks. It ensures that frontend applications meet standards.
Validates individual components and hooks:
// Example test that would be run by the checker
describe('ProductCard Component', () => {
it('renders product information correctly', () => {
const mockProduct = {
id: '1',
name: 'Test Product',
price: 29.99,
imageUrl: '/test-image.jpg'
};
render(<ProductCard product={mockProduct} />);
expect(screen.getByText('Test Product')).toBeInTheDocument();
expect(screen.getByText('$29.99')).toBeInTheDocument();
expect(screen.getByRole('img')).toHaveAttribute('src', '/test-image.jpg');
});
it('handles add to cart interaction', async () => {
const mockOnAddToCart = vi.fn();
const mockProduct = createMockProduct();
render(<ProductCard product={mockProduct} onAddToCart={mockOnAddToCart} />);
const addButton = screen.getByRole('button', { name: /add to cart/i });
await user.click(addButton);
expect(mockOnAddToCart).toHaveBeenCalledWith(mockProduct.id);
});
});
Tests complete user workflows:
// Example integration test
describe('Product Purchase Flow', () => {
it('allows user to complete a purchase', async () => {
// Mock GraphQL responses
const mocks = [
createProductListMock(),
createAddToCartMock(),
createCheckoutMock()
];
render(
<MockedProvider mocks={mocks}>
<App />
</MockedProvider>
);
// Navigate to products
await user.click(screen.getByText('Products'));
// Add product to cart
const addButton = await screen.findByText('Add to Cart');
await user.click(addButton);
// Proceed to checkout
await user.click(screen.getByText('Checkout'));
// Complete purchase
await user.click(screen.getByText('Complete Order'));
// Verify success
expect(await screen.findByText('Order Confirmed')).toBeInTheDocument();
});
});
Full application testing with Playwright:
// Example E2E test
test('complete user registration and login flow', async ({ page }) => {
await page.goto('/register');
// Fill registration form
await page.fill('[data-testid=name-input]', 'John Doe');
await page.fill('[data-testid=email-input]', 'john@example.com');
await page.fill('[data-testid=password-input]', 'securepassword');
// Submit registration
await page.click('[data-testid=register-button]');
// Verify redirect to dashboard
await expect(page).toHaveURL('/dashboard');
// Verify welcome message
await expect(page.locator('[data-testid=welcome-message]')).toContainText('Welcome, John');
});
A11y validation:
Performance metrics:
Best practices:
Customize checking behavior:
// auto.config.ts
export default {
plugins: [
[
'@auto-engineer/frontend-checks',
{
// Testing configuration
testTimeout: 10000,
testCoverage: 80,
runE2ETests: true,
// Performance thresholds
performanceThresholds: {
lcp: 2500,
fid: 100,
cls: 0.1,
bundleSize: 1024 * 1024, // 1MB
},
// Accessibility standards
accessibilityLevel: 'WCAG_AA',
// Browser testing
browsers: ['chromium', 'firefox', 'safari'],
// Device testing
devices: ['Desktop', 'Mobile Chrome', 'Mobile Safari'],
},
],
],
};
Test reporting:
Frontend Checks Results
=======================
✅ Unit Tests: 45/45 passed (100%)
✅ Integration Tests: 12/12 passed (100%)
✅ E2E Tests: 8/8 passed (100%)
✅ TypeScript: No errors
✅ ESLint: No issues found
⚠️ Bundle Size: 1.2MB (exceeds 1MB threshold)
✅ Accessibility: WCAG AA compliant
✅ Performance: All Core Web Vitals passed
- LCP: 1.8s ✅
- FID: 45ms ✅
- CLS: 0.05 ✅
Cross-Browser Results:
✅ Chrome: All tests passed
✅ Firefox: All tests passed
✅ Safari: All tests passed
Generate reports:
The frontend checks integrate with continuous integration:
# Run all frontend checks
auto check:client
# Exit codes:
# 0 - All checks passed
# 1 - Some checks failed
# 2 - Critical failures (build errors, etc.)
name: Frontend Quality Checks
on: [push, pull_request]
jobs:
frontend-checks:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Run frontend checks
run: auto check:client
- name: Upload test reports
if: always()
uses: actions/upload-artifact@v3
with:
name: test-reports
path: reports/
Works with the Auto Engineer ecosystem:
Define project-specific testing patterns:
// Custom test utilities
export const createTestUtils = () => ({
renderWithProviders: (component: React.ReactElement) => {
return render(
<MockedProvider>
<BrowserRouter>
<ThemeProvider>
{component}
</ThemeProvider>
</BrowserRouter>
</MockedProvider>
);
},
mockGraphQLOperation: (operation: string, variables: any, result: any) => ({
request: { query: operation, variables },
result: { data: result }
})
});
Automated UI consistency validation:
The Frontend Checks plugin ensures that React applications meet standards of quality, performance, accessibility, and user experience, providing confidence in production deployments.
FAQs
Frontend validation and quality assurance plugin for the Auto Engineer CLI. This plugin provides testing and validation for React applications, ensuring code quality, performance, and user experience standards are met.
We found that @auto-engineer/frontend-checks demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Former RubyGems maintainers have launched The Gem Cooperative, a new community-run project aimed at rebuilding open governance in the Ruby ecosystem.
Security News
An opt-in lazy import keyword aims to speed up Python startups, especially CLIs, without the ecosystem-wide risks that sank PEP 690.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.