pagetop/tests/html_props_spacing.rs

183 lines
7 KiB
Rust

use pagetop::prelude::*;
#[pagetop::test]
async fn default_margin_adds_nothing() {
let mut cx = Context::default();
let props = Props::default().with_prop(Margin::new());
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
assert_eq!(html, "<span></span>");
assert!(cx.render_assets().into_string().is_empty());
}
#[pagetop::test]
async fn default_padding_adds_nothing() {
let mut cx = Context::default();
let props = Props::default().with_prop(Padding::new());
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
assert_eq!(html, "<span></span>");
assert!(cx.render_assets().into_string().is_empty());
}
#[pagetop::test]
async fn margin_top_adds_matching_style() {
let mut cx = Context::default();
let props = Props::default().with_prop(Margin::new().with_top(UnitValue::RelRem(1.5)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
let assets = cx.render_assets().into_string();
assert!(html.contains(r#"class="_margin-top_1_5rem_""#));
assert!(assets.contains("_margin-top_1_5rem_{margin-top:1.5rem}"));
}
#[pagetop::test]
async fn margin_x_sets_start_and_end() {
let mut cx = Context::default();
let props = Props::default().with_prop(Margin::new().with_x(UnitValue::Auto));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
let assets = cx.render_assets().into_string();
assert!(html.contains(r#"class="_margin-start_auto_ _margin-end_auto_""#));
assert!(assets.contains("_margin-start_auto_{margin-inline-start:auto}"));
assert!(assets.contains("_margin-end_auto_{margin-inline-end:auto}"));
}
#[pagetop::test]
async fn margin_y_sets_top_and_bottom() {
let mut cx = Context::default();
let props = Props::default().with_prop(Margin::new().with_y(UnitValue::Zero));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
let assets = cx.render_assets().into_string();
assert!(html.contains(r#"class="_margin-top_0_ _margin-bottom_0_""#));
assert!(assets.contains("_margin-top_0_{margin-top:0}"));
assert!(assets.contains("_margin-bottom_0_{margin-bottom:0}"));
}
#[pagetop::test]
async fn margin_all_sets_every_side() {
let mut cx = Context::default();
let props = Props::default().with_prop(Margin::new().with_all(UnitValue::Px(8)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
assert!(html.contains(
r#"class="_margin-top_8px_ _margin-bottom_8px_ _margin-start_8px_ _margin-end_8px_""#
));
}
#[pagetop::test]
async fn margin_at_a_breakpoint_combines_token_and_suffix() {
let mut cx = Context::default();
let props =
Props::default().with_prop(Margin::new().with_top_at(Breakpoint::Md, UnitValue::Px(16)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
let assets = cx.render_assets().into_string();
assert!(html.contains(r#"class="_margin-top_16px_md_""#));
assert!(assets.contains("@media(min-width:768px){._margin-top_16px_md_{margin-top:16px}}"));
}
#[pagetop::test]
async fn successive_with_prop_calls_merge_margin_sides() {
let mut cx = Context::default();
let props = Props::default()
.with_prop(Margin::new().with_top(UnitValue::Px(8)))
.with_prop(Margin::new().with_bottom(UnitValue::Px(16)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
// Each `with_prop()` only sets one side; `Margin::merge()` keeps both instead of letting the
// second call overwrite the first one entirely.
assert!(html.contains(r#"class="_margin-top_8px_ _margin-bottom_16px_""#));
}
#[pagetop::test]
async fn later_with_prop_call_overrides_same_side() {
let mut cx = Context::default();
let props = Props::default()
.with_prop(Margin::new().with_top(UnitValue::Px(8)))
.with_prop(Margin::new().with_top(UnitValue::Px(24)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
assert!(html.contains(r#"class="_margin-top_24px_""#));
assert!(!html.contains("_margin-top_8px_"));
}
#[pagetop::test]
async fn padding_top_adds_matching_style() {
let mut cx = Context::default();
let props = Props::default().with_prop(Padding::new().with_top(UnitValue::RelRem(1.0)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
let assets = cx.render_assets().into_string();
assert!(html.contains(r#"class="_padding-top_1rem_""#));
assert!(assets.contains("_padding-top_1rem_{padding-top:1rem}"));
}
#[pagetop::test]
async fn padding_all_sets_every_side() {
let mut cx = Context::default();
let props = Props::default().with_prop(Padding::new().with_all(UnitValue::RelRem(1.0)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
assert!(html.contains(
r#"class="_padding-top_1rem_ _padding-bottom_1rem_ _padding-start_1rem_ _padding-end_1rem_""#
));
}
#[pagetop::test]
async fn padding_at_a_breakpoint_combines_token_and_suffix() {
let mut cx = Context::default();
let props = Props::default()
.with_prop(Padding::new().with_bottom_at(Breakpoint::Lg, UnitValue::RelRem(2.0)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
let assets = cx.render_assets().into_string();
assert!(html.contains(r#"class="_padding-bottom_2rem_lg_""#));
assert!(
assets.contains("@media(min-width:992px){._padding-bottom_2rem_lg_{padding-bottom:2rem}}")
);
}
#[pagetop::test]
async fn padding_auto_is_ignored() {
let mut cx = Context::default();
// CSS does not support `padding: auto`; unlike `Margin`, a side set to `Auto` adds nothing.
let props = Props::default().with_prop(Padding::new().with_all(UnitValue::Auto));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
assert_eq!(html, "<span></span>");
assert!(cx.render_assets().into_string().is_empty());
}
#[pagetop::test]
async fn margin_and_padding_combine_on_same_component() {
let mut cx = Context::default();
let props = Props::default()
.with_prop(Margin::new().with_bottom(UnitValue::Px(8)))
.with_prop(Padding::new().with_top(UnitValue::Px(4)));
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
// Class order follows `Props::unpack()`: margin before padding.
assert!(html.contains(r#"class="_margin-bottom_8px_ _padding-top_4px_""#));
}
#[pagetop::test]
async fn from_margin_for_props_op() {
let mut cx = Context::default();
let margin = Margin::new().with_top(UnitValue::Px(8));
let props = Props::default().with_prop(margin);
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
assert!(html.contains(r#"class="_margin-top_8px_""#));
}
#[pagetop::test]
async fn from_padding_for_props_op() {
let mut cx = Context::default();
let padding = Padding::new().with_top(UnitValue::Px(8));
let props = Props::default().with_prop(padding);
let html = html! { span (props.unpack(&mut cx)) {} }.into_string();
assert!(html.contains(r#"class="_padding-top_8px_""#));
}