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
|
import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
import React from "react";
import { shallow, mount } from "enzyme";
describe("<FluentOrText>", () => {
it("should create span with no children", () => {
const wrapper = shallow(<FluentOrText />);
assert.ok(wrapper.find("span").exists());
});
it("should set plain text", () => {
const wrapper = shallow(<FluentOrText message={"hello"} />);
assert.equal(wrapper.text(), "hello");
});
it("should use fluent id on automatic span", () => {
const wrapper = shallow(<FluentOrText message={{ id: "fluent" }} />);
assert.ok(wrapper.find("span[data-l10n-id='fluent']").exists());
});
it("should also allow string_id", () => {
const wrapper = shallow(<FluentOrText message={{ string_id: "fluent" }} />);
assert.ok(wrapper.find("span[data-l10n-id='fluent']").exists());
});
it("should use fluent id on child", () => {
const wrapper = shallow(
<FluentOrText message={{ id: "fluent" }}>
<p />
</FluentOrText>
);
assert.ok(wrapper.find("p[data-l10n-id='fluent']").exists());
});
it("should set args for fluent", () => {
const wrapper = mount(<FluentOrText message={{ args: { num: 5 } }} />);
const { attributes } = wrapper.getDOMNode();
const args = attributes.getNamedItem("data-l10n-args").value;
assert.equal(JSON.parse(args).num, 5);
});
it("should also allow values", () => {
const wrapper = mount(<FluentOrText message={{ values: { num: 5 } }} />);
const { attributes } = wrapper.getDOMNode();
const args = attributes.getNamedItem("data-l10n-args").value;
assert.equal(JSON.parse(args).num, 5);
});
it("should preserve original children with fluent", () => {
const wrapper = shallow(
<FluentOrText message={{ id: "fluent" }}>
<p>
<b data-l10n-name="bold" />
</p>
</FluentOrText>
);
assert.ok(wrapper.find("b[data-l10n-name='bold']").exists());
});
it("should only allow a single child", () => {
assert.throws(() =>
shallow(
<FluentOrText>
<p />
<p />
</FluentOrText>
)
);
});
});
|
