aacb45156b
- Install Jest for unit testing with React Testing Library - Install Playwright for end-to-end testing - Configure Jest with proper TypeScript support and module mapping - Create test setup files and utilities for both unit and e2e tests Components: * Jest configuration with coverage thresholds * Playwright configuration with browser automation * Unit tests for LoginForm, AuthContext, and useSocketIO hook * E2E tests for authentication, dashboard, and agents workflows * GitHub Actions workflow for automated testing * Mock data and API utilities for consistent testing * Test documentation with best practices Testing features: - Unit tests with 70% coverage threshold - E2E tests with API mocking and user journey testing - CI/CD integration for automated test runs - Cross-browser testing support with Playwright - Authentication system testing end-to-end 🚀 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
CSS Calc 
Implemented from : https://drafts.csswg.org/css-values-4/ on 2023-02-17
Usage
Add CSS calc to your project:
npm install @csstools/css-calc @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
With string values :
import { calc } from '@csstools/css-calc';
// '20'
console.log(calc('calc(10 * 2)'));
With component values :
import { stringify, tokenizer } from '@csstools/css-tokenizer';
import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms';
import { calcFromComponentValues } from '@csstools/css-calc';
const t = tokenizer({
css: 'calc(10 * 2)',
});
const tokens = [];
{
while (!t.endOfFile()) {
tokens.push(t.nextToken());
}
tokens.push(t.nextToken()); // EOF-token
}
const result = parseCommaSeparatedListOfComponentValues(tokens, {});
// filter or mutate the component values
const calcResult = calcFromComponentValues(result, { precision: 5, toCanonicalUnits: true });
// filter or mutate the component values even further
const calcResultStr = calcResult.map((componentValues) => {
return componentValues.map((x) => stringify(...x.tokens())).join('');
}).join(',');
// '20'
console.log(calcResultStr);
Options
precision :
The default precision is fairly high. It aims to be high enough to make rounding unnoticeable in the browser.
You can set it to a lower number to suit your needs.
import { calc } from '@csstools/css-calc';
// '0.3'
console.log(calc('calc(1 / 3)', { precision: 1 }));
// '0.33'
console.log(calc('calc(1 / 3)', { precision: 2 }));
globals :
Pass global values as a map of key value pairs.
Example : Relative color syntax (
lch(from pink calc(l / 2) c h)) exposes color channel information as ident tokens. By passing globals forl,candhit is possible to solve nestedcalc()'s.
import { calc } from '@csstools/css-calc';
const globals = new Map([
['a', '10px'],
['b', '2rem'],
]);
// '20px'
console.log(calc('calc(a * 2)', { globals: globals }));
// '6rem'
console.log(calc('calc(b * 3)', { globals: globals }));
toCanonicalUnits :
By default this package will try to preserve units. The heuristic to do this is very simplistic. We take the first unit we encounter and try to convert other dimensions to that unit.
This better matches what users expect from a CSS dev tool.
If you want to have outputs that are closes to CSS serialized values you can pass toCanonicalUnits: true.
import { calc } from '@csstools/css-calc';
// '20hz'
console.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: true }));
// '20hz'
console.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: true }));
// '0.02khz' !!!
console.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: false }));
// '20hz'
console.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: false }));