60e2149072
Tasks 16-20: Online Board Tests (Search/Filter, Tabs, Flight List, Details Modal, Time/Date) - Task 16: Search & Filter tests (37 tests) - departure/arrival cities, passenger count, cabin class - Task 17: Arrival/Departure Tabs tests (45 tests) - tab switching, flight display, sorting - Task 18: Flight List View tests (50 tests) - display, sorting, filtering, pagination, loading states - Task 19: Flight Details Modal tests (40 tests) - opening/closing, content display, actions - Task 20: Time & Date Filter tests (43 tests) - date selection, time ranges, calendar navigation Tasks 21-25: Flight Details Tests (Flight Info, Passengers, Seats, Services, Fares) - Task 21: Flight Info Display tests (40 tests) - basic info, airports, route visualization, timeline - Task 22: Passenger Info tests (50 tests) - passenger list, details, services, special requirements - Task 23: Seat Selection tests (50 tests) - seat map, selection, categories, recommendations - Task 24: Service Selection tests (25 tests) - baggage, meals, seats, summary - Task 25: Fare Display tests (55 tests) - fare breakdown, comparisons, discounts, refunds All tests follow AAA pattern and use data-testid selectors matching Angular version. Total: 245 tests across 10 feature suites.
144 lines
3.7 KiB
JavaScript
144 lines
3.7 KiB
JavaScript
// src/jsx/dom/css.ts
|
|
import {
|
|
CLASS_NAME,
|
|
DEFAULT_STYLE_ID,
|
|
PSEUDO_GLOBAL_SELECTOR,
|
|
SELECTOR,
|
|
SELECTORS,
|
|
STYLE_STRING,
|
|
cssCommon,
|
|
cxCommon,
|
|
keyframesCommon,
|
|
viewTransitionCommon
|
|
} from "../../helper/css/common.js";
|
|
import { rawCssString } from "../../helper/css/common.js";
|
|
var splitRule = (rule) => {
|
|
const result = [];
|
|
let startPos = 0;
|
|
let depth = 0;
|
|
for (let i = 0, len = rule.length; i < len; i++) {
|
|
const char = rule[i];
|
|
if (char === "'" || char === '"') {
|
|
const quote = char;
|
|
i++;
|
|
for (; i < len; i++) {
|
|
if (rule[i] === "\\") {
|
|
i++;
|
|
continue;
|
|
}
|
|
if (rule[i] === quote) {
|
|
break;
|
|
}
|
|
}
|
|
continue;
|
|
}
|
|
if (char === "{") {
|
|
depth++;
|
|
continue;
|
|
}
|
|
if (char === "}") {
|
|
depth--;
|
|
if (depth === 0) {
|
|
result.push(rule.slice(startPos, i + 1));
|
|
startPos = i + 1;
|
|
}
|
|
continue;
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
var createCssJsxDomObjects = ({ id }) => {
|
|
let styleSheet = void 0;
|
|
const findStyleSheet = () => {
|
|
if (!styleSheet) {
|
|
styleSheet = document.querySelector(`style#${id}`)?.sheet;
|
|
if (styleSheet) {
|
|
;
|
|
styleSheet.addedStyles = /* @__PURE__ */ new Set();
|
|
}
|
|
}
|
|
return styleSheet ? [styleSheet, styleSheet.addedStyles] : [];
|
|
};
|
|
const insertRule = (className, styleString) => {
|
|
const [sheet, addedStyles] = findStyleSheet();
|
|
if (!sheet || !addedStyles) {
|
|
Promise.resolve().then(() => {
|
|
if (!findStyleSheet()[0]) {
|
|
throw new Error("style sheet not found");
|
|
}
|
|
insertRule(className, styleString);
|
|
});
|
|
return;
|
|
}
|
|
if (!addedStyles.has(className)) {
|
|
addedStyles.add(className);
|
|
(className.startsWith(PSEUDO_GLOBAL_SELECTOR) ? splitRule(styleString) : [`${className[0] === "@" ? "" : "."}${className}{${styleString}}`]).forEach((rule) => {
|
|
sheet.insertRule(rule, sheet.cssRules.length);
|
|
});
|
|
}
|
|
};
|
|
const cssObject = {
|
|
toString() {
|
|
const selector = this[SELECTOR];
|
|
insertRule(selector, this[STYLE_STRING]);
|
|
this[SELECTORS].forEach(({ [CLASS_NAME]: className, [STYLE_STRING]: styleString }) => {
|
|
insertRule(className, styleString);
|
|
});
|
|
return this[CLASS_NAME];
|
|
}
|
|
};
|
|
const Style2 = ({ children, nonce }) => ({
|
|
tag: "style",
|
|
props: {
|
|
id,
|
|
nonce,
|
|
children: children && (Array.isArray(children) ? children : [children]).map(
|
|
(c) => c[STYLE_STRING]
|
|
)
|
|
}
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
});
|
|
return [cssObject, Style2];
|
|
};
|
|
var createCssContext = ({ id }) => {
|
|
const [cssObject, Style2] = createCssJsxDomObjects({ id });
|
|
const newCssClassNameObject = (cssClassName) => {
|
|
cssClassName.toString = cssObject.toString;
|
|
return cssClassName;
|
|
};
|
|
const css2 = (strings, ...values) => {
|
|
return newCssClassNameObject(cssCommon(strings, values));
|
|
};
|
|
const cx2 = (...args) => {
|
|
args = cxCommon(args);
|
|
return css2(Array(args.length).fill(""), ...args);
|
|
};
|
|
const keyframes2 = keyframesCommon;
|
|
const viewTransition2 = ((strings, ...values) => {
|
|
return newCssClassNameObject(viewTransitionCommon(strings, values));
|
|
});
|
|
return {
|
|
css: css2,
|
|
cx: cx2,
|
|
keyframes: keyframes2,
|
|
viewTransition: viewTransition2,
|
|
Style: Style2
|
|
};
|
|
};
|
|
var defaultContext = createCssContext({ id: DEFAULT_STYLE_ID });
|
|
var css = defaultContext.css;
|
|
var cx = defaultContext.cx;
|
|
var keyframes = defaultContext.keyframes;
|
|
var viewTransition = defaultContext.viewTransition;
|
|
var Style = defaultContext.Style;
|
|
export {
|
|
Style,
|
|
createCssContext,
|
|
createCssJsxDomObjects,
|
|
css,
|
|
cx,
|
|
keyframes,
|
|
rawCssString,
|
|
viewTransition
|
|
};
|