vize_musea 0.239.0

Musea - Component gallery and documentation for Vize Vue components
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

use super::{escape_string, escape_template, to_pascal_case, transform_to_csf};
use crate::parse::parse_art;
use crate::types::ArtParseOptions;
use vize_carton::Bump;

#[test]
fn test_transform_simple() {
    let allocator = Bump::new();
    let source = r#"
<art title="Button" component="./Button.vue">
  <variant name="Primary" default>
    <Button variant="primary">Click me</Button>
  </variant>
</art>
"#;

    let art = parse_art(&allocator, source, ArtParseOptions::default()).unwrap();
    let csf = transform_to_csf(&art);

    insta::assert_debug_snapshot!(csf);
}

#[test]
fn test_transform_with_category() {
    let allocator = Bump::new();
    let source = r#"
<art title="Button" category="atoms" component="./Button.vue">
  <variant name="Default">
    <Button>Click</Button>
  </variant>
</art>
"#;

    let art = parse_art(&allocator, source, ArtParseOptions::default()).unwrap();
    let csf = transform_to_csf(&art);

    insta::assert_debug_snapshot!(csf);
}

#[test]
fn test_transform_multiple_variants() {
    let allocator = Bump::new();
    let source = r#"
<art title="Button" component="./Button.vue">
  <variant name="Primary">
    <Button variant="primary">Primary</Button>
  </variant>
  <variant name="Secondary">
    <Button variant="secondary">Secondary</Button>
  </variant>
</art>
"#;

    let art = parse_art(&allocator, source, ArtParseOptions::default()).unwrap();
    let csf = transform_to_csf(&art);

    insta::assert_debug_snapshot!(csf);
}

#[test]
fn test_transform_preserves_script_setup_fixtures() {
    let allocator = Bump::new();
    let source = r#"
<script setup lang="ts">
import MoshiDetailCard from './MoshiDetailCard.vue';
import {
  base,
  preparing,
  finished,
  notSucceeded,
} from './fixtures';

defineArt("./MoshiDetailCard.vue", {
  title: "Moshi Detail Card",
  category: "Features/MoshiDetail",
  tags: ["moshi", "detail"],
});

const localFixture = { id: "local" };
</script>

<art>
  <variant name="Available" default>
    <MoshiDetailCard :moshi-with-student="base" />
  </variant>
  <variant name="Preparing">
    <MoshiDetailCard :moshi-with-student="preparing" :fallback="localFixture" />
  </variant>
</art>
"#;

    let art = parse_art(&allocator, source, ArtParseOptions::default()).unwrap();
    let csf = transform_to_csf(&art);

    assert!(csf.code.contains(
        "import {\n  base,\n  preparing,\n  finished,\n  notSucceeded,\n} from './fixtures';"
    ));
    assert!(!csf.code.contains("import {\n\nconst"));
    assert!(!csf.code.contains("defineArt"));
    assert!(csf.code.contains("const localFixture = { id: \"local\" };"));
    assert!(csf.code.contains(
        "return { args, MoshiDetailCard, base, finished, localFixture, notSucceeded, preparing };"
    ));
}

#[test]
fn test_to_pascal_case() {
    assert_eq!(to_pascal_case("primary"), "Primary");
    assert_eq!(to_pascal_case("with icon"), "WithIcon");
    assert_eq!(to_pascal_case("my-button"), "MyButton");
    assert_eq!(to_pascal_case("my_button"), "MyButton");
}

#[test]
fn test_escape_string() {
    assert_eq!(escape_string("hello"), "hello");
    assert_eq!(escape_string("it's"), "it\\'s");
    assert_eq!(escape_string("line\nbreak"), "line\\nbreak");
}

#[test]
fn test_escape_template() {
    assert_eq!(escape_template("hello"), "hello");
    assert_eq!(escape_template("`code`"), "\\`code\\`");
    assert_eq!(escape_template("${var}"), "\\${var}");
}