ae172000a6
This commit improves UI consistency. It also improves maintainability by
removing "magic values" in favor of standardized spacing throughout the
application.
- Adjust spacing variables to match the convention.
- Add `_spacing.scss` to define a centralized set of spacing variables, both
absolute and relative, to standardize the spacing throughout the application.
This new approach ensures a consistent spacing logic across all components and
layouts, facilitating easier maintenance and scalability of the styling codebase.
- Update various SCSS styles to utilize the new spacing variables. This change
harmonizes the spacing across different parts of the application, aligning with
the new design system's principles.
- Slightly adjust existing padding/margin/gaps for better consistency.
Other supporting changes per component:
- RatingCircle: Update style names to match convention and simplify
hacky way to inject circle width value through CSS variables. Add
tests for the new behavior and refactor existing tests for easier
extensibility.
- TheFooter: Add small gap when footer items wrap.
- HiearchicalTreeNode: Refactor variables to separate caret size clearly
from padding applied.
- App: Make padding responsive as initial behavior of v0.13.0 before
5d940b57ef.
- ModalDialog: Use responsive absolute values instead of percentage.
- HorizontalResizeSlider:
- Use `v-bind` instead of hacky way to inject SCSS values through variables.
- Remove `verticalMargin` property to simplify its styling.
- Move `src/presentation/assets/styles/components/_card.scss` closer to
components that it styles. Update structure documentation.
The centralization of spacing definitions will aid in future design
adjustments, ensuring that updates to spacing can be made swiftly and
uniformly across the application. It's a step towards a more maintainable
and scalable frontend architecture.
101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
import { test, expect } from 'vitest';
|
|
import { parseApplication } from '@/application/Parser/ApplicationParser';
|
|
import { indentText } from '@tests/shared/Text';
|
|
import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
|
|
import { shuffle } from '@/application/Common/Shuffle';
|
|
import { type UrlStatus, formatUrlStatus } from './StatusChecker/UrlStatus';
|
|
import { getUrlStatusesInParallel, type BatchRequestOptions } from './StatusChecker/BatchStatusChecker';
|
|
import { TestExecutionDetailsLogger } from './TestExecutionDetailsLogger';
|
|
import { extractDocumentationUrls } from './DocumentationUrlExtractor';
|
|
|
|
// arrange
|
|
const logger = new TestExecutionDetailsLogger();
|
|
logger.logTestSectionStartDelimiter();
|
|
const app = parseApplication();
|
|
let urls = extractDocumentationUrls({
|
|
logger,
|
|
urlExclusionPatterns: [
|
|
/^https:\/\/archive\.ph/, // Drops HEAD/GET requests via fetch/curl, responding to Postman/Chromium.
|
|
],
|
|
application: app,
|
|
});
|
|
urls = filterUrlsToEnvironmentCheckLimit(urls);
|
|
logger.logLabeledInformation('URLs submitted for testing', urls.length.toString());
|
|
const requestOptions: BatchRequestOptions = {
|
|
domainOptions: {
|
|
sameDomainParallelize: false, // be nice to our third-party servers
|
|
sameDomainDelayInMs: 5 /* sec */ * 1000,
|
|
},
|
|
requestOptions: {
|
|
retryExponentialBaseInMs: 3 /* sec */ * 1000,
|
|
requestTimeoutInMs: 60 /* sec */ * 1000,
|
|
additionalHeaders: { referer: app.projectDetails.homepage },
|
|
randomizeTlsFingerprint: true,
|
|
},
|
|
followOptions: {
|
|
followRedirects: true,
|
|
enableCookies: true,
|
|
},
|
|
};
|
|
logger.logLabeledInformation('HTTP request options', JSON.stringify(requestOptions, null, 2));
|
|
const testTimeoutInMs = urls.length * 60 /* seconds */ * 1000;
|
|
logger.logLabeledInformation('Scheduled test duration', convertMillisecondsToHumanReadableFormat(testTimeoutInMs));
|
|
logger.logTestSectionEndDelimiter();
|
|
test(`all URLs (${urls.length}) should be alive`, async () => {
|
|
// act
|
|
const results = await getUrlStatusesInParallel(urls, requestOptions);
|
|
// assert
|
|
const deadUrls = results.filter((r) => r.code === undefined || !isOkStatusCode(r.code));
|
|
expect(deadUrls).to.have.lengthOf(
|
|
0,
|
|
formatAssertionMessage([createReportForDeadUrlStatuses(deadUrls)]),
|
|
);
|
|
}, testTimeoutInMs);
|
|
|
|
function isOkStatusCode(statusCode: number): boolean {
|
|
return statusCode >= 200 && statusCode < 300;
|
|
}
|
|
|
|
function createReportForDeadUrlStatuses(deadUrlStatuses: readonly UrlStatus[]): string {
|
|
return `\n${deadUrlStatuses.map((status) => indentText(formatUrlStatus(status))).join('\n---\n')}\n`;
|
|
}
|
|
|
|
function filterUrlsToEnvironmentCheckLimit(originalUrls: string[]): string[] {
|
|
const { RANDOMIZED_URL_CHECK_LIMIT } = process.env;
|
|
logger.logLabeledInformation('URL check limit', RANDOMIZED_URL_CHECK_LIMIT || 'Unlimited');
|
|
if (RANDOMIZED_URL_CHECK_LIMIT !== undefined && RANDOMIZED_URL_CHECK_LIMIT !== '') {
|
|
const maxUrlsInTest = parseInt(RANDOMIZED_URL_CHECK_LIMIT, 10);
|
|
if (Number.isNaN(maxUrlsInTest)) {
|
|
throw new Error(`Invalid URL limit: ${RANDOMIZED_URL_CHECK_LIMIT}`);
|
|
}
|
|
if (maxUrlsInTest < originalUrls.length) {
|
|
return shuffle(originalUrls).slice(0, maxUrlsInTest);
|
|
}
|
|
}
|
|
return originalUrls;
|
|
}
|
|
|
|
function convertMillisecondsToHumanReadableFormat(milliseconds: number): string {
|
|
const timeParts: string[] = [];
|
|
const addTimePart = (amount: number, label: string) => {
|
|
if (amount === 0) {
|
|
return;
|
|
}
|
|
timeParts.push(`${amount} ${label}`);
|
|
};
|
|
|
|
const hours = milliseconds / (1000 * 60 * 60);
|
|
const absoluteHours = Math.floor(hours);
|
|
addTimePart(absoluteHours, 'hours');
|
|
|
|
const minutes = (hours - absoluteHours) * 60;
|
|
const absoluteMinutes = Math.floor(minutes);
|
|
addTimePart(absoluteMinutes, 'minutes');
|
|
|
|
const seconds = (minutes - absoluteMinutes) * 60;
|
|
const absoluteSeconds = Math.floor(seconds);
|
|
addTimePart(absoluteSeconds, 'seconds');
|
|
|
|
return timeParts.join(', ');
|
|
}
|