def test_fieldwrapper_combined(self):
html_output = fieldwrapper_combined(self.form["char_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
<input class="input-field" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />
</div>
</div>
</div>
""",
)
html_output = fieldwrapper_combined(self.form["char_field"],
self.form["int_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
<input class="input-field" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""",
)
def test_fieldwrapper_date_label_title_translation(self):
activate("en")
html_output = fieldwrapper_combined(self.form["date_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--datefield fieldwrapper--dateinput fieldwrapper--icon">
<input class="input-field" id="id_date_field" name="date_field" type="text" value="1940-10-9" placeholder="Date field" />
<label class="label--inline-edit" for="id_date_field" title="Edit Date field">{}</label>
</div>
</div>
</div>
""".format(self.date_range_svg),
)
activate("nl")
html_output = fieldwrapper_combined(self.form["date_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--datefield fieldwrapper--dateinput fieldwrapper--icon">
<input class="input-field" id="id_date_field" name="date_field" type="text" value="1940-10-9" placeholder="Date field" />
<label class="label--inline-edit" for="id_date_field" title="Date field wijzigen">{}</label>
</div>
</div>
</div>
""".format(self.date_range_svg),
)
def test_fieldwrapper_combined_select(self):
html_output = fieldwrapper_combined(self.form["choice_field"],
self.form["int_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--choicefield fieldwrapper--select select">
<select class="" id="id_choice_field" name="choice_field"><option selected="selected" value="1">a</option><option value="2">b</option></select>
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""",
)
def test_fieldwrapper_combined_date(self):
html_output = fieldwrapper_combined(self.form["date_field"],
self.form["int_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--datefield fieldwrapper--dateinput fieldwrapper--icon">
<input class="input-field" id="id_date_field" name="date_field" type="text" value="1940-10-9" placeholder="Date field" />
<label class="label--inline-edit" for="id_date_field" title="Edit Date field">{}</label>
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""".format(self.date_range_svg),
)
def test_fieldwrapper_combined_password(self):
html_output = fieldwrapper_combined(self.form["pass_field"],
self.form["int_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--passwordinput fieldwrapper--icon">
<input class="input-field" id="id_pass_field" name="pass_field" type="password" placeholder="Pass field" />
<button class="input-icon input-icon__password" type="button" tabindex="-1">{}</button>
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""".format(self.eye_svg),
)
def test_fieldwrapper_combined_uses_widget_placeholders(self):
html_output = fieldwrapper_combined(
self.form["int_field"],
self.form["int_field"],
self.form["int_field"],
field0_placeholder="Eerste",
field1_placeholder="Tweede",
field2_placeholder="Derde",
)
html = """
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" placeholder="Eerste" type="number" value="1" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" placeholder="Tweede" type="number" value="1" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" placeholder="Derde" type="number" value="1" />
</div>
</div>
</div>
"""
self.assertHTMLEqual(html_output, html)
self.form.fields["int_field"].widget.attrs.update(
placeholder="lorem ipsum")
html_output = fieldwrapper_combined(
self.form["int_field"],
self.form["int_field"],
self.form["int_field"],
field0_placeholder="Eerste",
field1_placeholder="Tweede",
field2_placeholder="Derde",
)
self.assertHTMLEqual(html_output, html)
html_output = fieldwrapper_combined(self.form["int_field"],
self.form["int_field"],
self.form["int_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" placeholder="lorem ipsum" type="number" value="1" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" placeholder="lorem ipsum" type="number" value="1" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" placeholder="lorem ipsum" type="number" value="1" />
</div>
</div>
</div>
""",
)
def test_fieldwrapper_combined_unit_text_left_right(self):
html_output = fieldwrapper_combined(self.form["char_field"],
self.form["int_field"],
field0_unit_text_left="$")
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput fieldwrapper--unit">
<i class="input-unit input-unit--left">$</i>
<input class="input-field input-field--unit-left" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""",
)
html_output = fieldwrapper_combined(
self.form["char_field"],
self.form["int_field"],
field0_unit_text_left="$",
field0_unit_text_right="KM",
field1_unit_text_left=mark_safe("€"),
)
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput fieldwrapper--unit">
<i class="input-unit input-unit--left">$</i>
<input class="input-field input-field--unit-left input-field--unit-right" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />
<i class="input-unit input-unit--right">KM</i>
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput fieldwrapper--unit">
<i class="input-unit input-unit--left">€</i>
<input class="input-field input-field--unit-left" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""",
)
html_output = fieldwrapper_combined(
self.form["pass_field"],
self.form["int_field"],
field0_unit_text_left="$",
field0_unit_text_right="KM",
field1_unit_text_left=mark_safe("€"),
)
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--passwordinput fieldwrapper--icon">
<input class="input-field" id="id_pass_field" name="pass_field" type="password" placeholder="Pass field" />
<button class="input-icon input-icon__password" type="button" tabindex="-1">{}</button>
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput fieldwrapper--unit">
<i class="input-unit input-unit--left">€</i>
<input class="input-field input-field--unit-left" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""".format(self.eye_svg),
)
def test_fieldwrapper_combined_before_after_field(self):
html_output = fieldwrapper_combined(
self.form["char_field"],
self.form["int_field"],
field0_before_field="!",
field0_after_field="@",
)
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
!<input class="input-field" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />@
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""",
)
html_output = fieldwrapper_combined(
self.form["char_field"],
self.form["int_field"],
field0_before_field="!",
field0_after_field="@",
field1_before_field="#",
field1_after_field="$",
)
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
!<input class="input-field" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />@
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
#<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />$
</div>
</div>
</div>
""",
)
html_output = fieldwrapper_combined(
self.form["pass_field"],
self.form["int_field"],
field0_before_field="!",
field0_after_field="@", # ignored
field1_before_field="#",
field1_after_field="$",
)
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--passwordinput fieldwrapper--icon">
!<input class="input-field" id="id_pass_field" name="pass_field" type="password" placeholder="Pass field" />
<button class="input-icon input-icon__password" type="button" tabindex="-1">{}</button>
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
#<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />$
</div>
</div>
</div>
""".format(self.eye_svg),
)
def test_fieldwrapper_combined_field_kwargs(self):
html_output = fieldwrapper_combined(
self.form["char_field"],
self.form["int_field"],
field0_class=" test class ",
field0_data_some="data",
)
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
<input class="input-field test class" data-some="data" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""",
)
html_output = fieldwrapper_combined(
self.form["char_field"],
self.form["int_field"],
field1_class=" test class ",
field1_data_some="data",
)
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
<input class="input-field" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field test class" data-some="data" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""",
)
html_output = fieldwrapper_combined(
self.form["char_field"],
self.form["int_field"],
field0_class=" test class ",
field0_data_some="data",
field1_class="test",
field1_data_other="{}",
)
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
<input class="input-field test class" data-some="data" id="id_char_field" name="char_field" type="text" value="abc" placeholder="Char field" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field test" data-other="{}" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
</div>
""",
)
def test_fieldwrapper_combined_help_text(self):
html_output = fieldwrapper_combined(self.form["help_field"],
self.form["int_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
<input class="input-field" id="id_help_field" name="help_field" type="text" value="abc" placeholder="Help field" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput ">
<input class="input-field" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
<div class="helptext">Help Text</div>
</div>
""",
)
html_output = fieldwrapper_combined(self.form["help_field"],
self.form["help_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
<input class="input-field" id="id_help_field" name="help_field" type="text" value="abc" placeholder="Help field" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput ">
<input class="input-field" id="id_help_field" name="help_field" type="text" value="abc" placeholder="Help field" />
</div>
</div>
<div class="helptext">Help Text</div>
<div class="helptext">Help Text</div>
</div>
""",
)
self.form.add_error("help_field", forms.ValidationError("Err"))
self.form.add_error("int_field", forms.ValidationError("Err2"))
html_output = fieldwrapper_combined(self.form["help_field"],
self.form["int_field"])
self.assertHTMLEqual(
html_output,
"""
<div class="fieldwrapper ">
<div class="fieldwrapper-combined">
<div class="fieldwrapper-combined__field fieldwrapper--charfield fieldwrapper--textinput error">
<input class="input-field error" id="id_help_field" name="help_field" type="text" value="abc" placeholder="Help field" />
</div>
<div class="fieldwrapper-combined__field fieldwrapper--integerfield fieldwrapper--numberinput error">
<input class="input-field error" id="id_int_field" name="int_field" type="number" value="1" placeholder="Int field" />
</div>
</div>
<div class="helptext">Help Text</div>
<ul class="errorlist"><li>Err</li></ul>
<ul class="errorlist"><li>Err2</li></ul>
</div>
""",
)