Commit ba70fe53 authored by John Kirkwood's avatar John Kirkwood

Update MDC grid layout and tests.

parent 5873ecde
from .pyreact import ce, cp, get_prop
def Div(props, children):
children = children or []
def Div(props=[], children=[]):
return ce('div', props, children)
......@@ -15,6 +14,8 @@ def Button(props=[], children=[]):
def SubmitButton(props=[], children=[]):
props.append(
cp('type', 'submit'))
if children == []:
children = "Submit"
return ce('button', props, children)
......
......@@ -9,7 +9,7 @@ from chp.pyreact import (
context_middleware, inject_ids, render_element
)
from chp.store import (create_store, Inject_ast_into_DOM, render_app)
# from chp.django.components import * #noqa
from chp.django.components import Csrf
from chp.mdc.components import * # noqa
from chp.mdc.django.factory import Factory as MdcField
......@@ -32,23 +32,33 @@ class PostForm(forms.ModelForm):
def render(self, *args, **kwargs):
form = (
# Form([
# cp('id', "form-chp"),
# ],
# [
# Csrf(),
Flex([],
[
MdcField.render(self["checkbox"]),
MdcField.render(self["text"]),
MdcField.render(self["date"]),
MdcField.render(self["media"]),
MdcField.render(self["foreignkey"]),
Grid([], [
Row([], [
Cell([], [
Form([
cp('id', "form-chp"),
],
)
# ,
# ])
)
[
Csrf(),
Flex([],
[
# Div([], str(self.errors)),
MdcField.render(self["checkbox"]),
MdcField.render(self["text"]),
MdcField.render(self["date"]),
MdcField.render(self["media"]),
MdcField.render(self["foreignkey"]),
]),
Flex([],
[
SubmitButton([cp("form", "form-chp")]),
],
{"display": "grid"}),
])
]) # Cell
]) # Row
]) # Grid
)
return form
......
......@@ -15,16 +15,8 @@
</div>
</form>
<form id="form-chp" method="post">
{% csrf_token %}
{{ form.render }}
{{ form.render }}
<div class="mdc-button">
<button form="form-chp" type="submit">Submit</button>
</div>
</form>
<form id="form-mdc" method="post">
{% csrf_token %}
......
......@@ -2,75 +2,154 @@ import pytest
import re
from chp.django.example.blog.forms import PostForm
from chp.mdc.django.factory import Factory as MdcField
from chp.pyreact import render_element
pytestmark = pytest.mark.django_db
def test_render():
"""Regression test."""
@pytest.fixture(scope="module")
def postform():
return PostForm(initial={
"checkbox": True,
"text": "Initial value",
"date": "2018-10-03",
"media": "vinyl",
# "foreignkey": "" # will require database setup fixture
})
# <form action="/blog/post/create" method="POST" class="mdc-layout-grid__cell" chp-id="[0-9]+">
# </form>
# <option value="grains" chp-id="[0-9]+">Bread, Cereal, Rice, and Pasta</option><option value="vegetables" chp-id="[0-9]+">Vegetables</option><option value="fruit" chp-id="[0-9]+">Fruit</option>
# <option value="1" chp-id="[0-9]+">johnk</option>
# <option value="2" chp-id="[0-9]+">jpic</option>
# <option value="3" chp-id="[0-9]+">vindarel</option>
@pytest.fixture(scope="module")
def postform_html(postform):
# TODO: Django doesn't handle scoped database access in pytest
# https://github.com/pytest-dev/pytest-django/issues/514
# https://github.com/django-nose/django-nose/issues/276#issuecomment-412623604
# return postform.render()
pass
def test_render(postform):
"""Regression test."""
regex = """
<div class="mdc-layout-grid" chp-id="[0-9]+">
<div class="mdc-layout-grid__inner" chp-id="[0-9]+">
<div class="mdc-layout-grid__cell--span-12" chp-id="[0-9]+">
<form id="form-chp" chp-id="[0-9]+">
<input type="hidden" name="csrfmiddlewaretoken" value="REQUEST NOT AVAILABLE IN CONTEXT" chp-id="[0-9]+" />
<div style="display: flex;" chp-id="[0-9]+">
<div class="mdc-form-field mdc-form-field--align-end" data-mdc-auto-init="MDCFormField" chp-id="[0-9]+">
<div class="mdc-checkbox" data-mdc-auto-init="MDCCheckbox" chp-id="[0-9]+"><input name="checkbox" id="id_checkbox" class="mdc-checkbox__native-control" type="checkbox" chp-id="[0-9]+" />
<div class="mdc-checkbox" data-mdc-auto-init="MDCCheckbox" chp-id="[0-9]+"><input name="checkbox" id="id_checkbox" checked class="mdc-checkbox__native-control" type="checkbox" chp-id="[0-9]+" />
<div class="mdc-checkbox__background" chp-id="[0-9]+"></div></div><label for="id_checkbox" chp-id="[0-9]+">This is my checkbox:</label></div>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField" chp-id="[0-9]+"><input name="text" maxlength="200" required id="id_text" class="mdc-text-field__input" type="text" chp-id="[0-9]+" />
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField" chp-id="[0-9]+"><input name="text" value="Initial value" maxlength="[0-9]+" required id="id_text" class="mdc-text-field__input" type="text" chp-id="[0-9]+" />
<label for="id_text" class="mdc-floating-label" chp-id="[0-9]+">Input Label:</label>
<div class="mdc-line-ripple" chp-id="[0-9]+"></div></div>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField" chp-id="[0-9]+"><input name="date" required id="id_date" class="mdc-text-field__input" type="date" chp-id="[0-9]+" />
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField" chp-id="[0-9]+"><input name="date" value="2018-10-03" required id="id_date" class="mdc-text-field__input" type="date" chp-id="[0-9]+" />
<label for="id_date" class="mdc-floating-label" chp-id="[0-9]+">Type = date:</label>
<div class="mdc-line-ripple" chp-id="[0-9]+"></div></div>
<div class="mdc-select" data-mdc-auto-init="MDCSelect" chp-id="[0-9]+"><select name="media" required id="id_media" class="mdc-select__native-control" chp-id="[0-9]+">
<option value="" selected disabled chp-id="[0-9]+"></option><optgroup label="Audio" chp-id="[0-9]+"><option value="vinyl" chp-id="[0-9]+">Vinyl</option><option value="cd" chp-id="[0-9]+">CD</option><option value="mp3" chp-id="[0-9]+">MP3</option></optgroup><optgroup label="Video" chp-id="[0-9]+"><option value="vhs" chp-id="[0-9]+">VHS tape</option><option value="dvd" chp-id="[0-9]+">DVD</option><option value="blu-ray" chp-id="[0-9]+">Blu-ray</option></optgroup>
</select><label for="id_media" class="mdc-floating-label" chp-id="[0-9]+">Media:</label>
<div class="mdc-select" data-mdc-auto-init="MDCSelect" chp-id="[0-9]+">
<select name="media" required id="id_media" class="mdc-select__native-control" chp-id="[0-9]+">
<option value="" disabled chp-id="[0-9]+"></option><optgroup label="Audio" chp-id="[0-9]+"><option value="vinyl" selected chp-id="[0-9]+">Vinyl</option><option value="cd" chp-id="[0-9]+">CD</option><option value="mp3" chp-id="[0-9]+">MP3</option></optgroup><optgroup label="Video" chp-id="[0-9]+"><option value="vhs" chp-id="[0-9]+">VHS tape</option><option value="dvd" chp-id="[0-9]+">DVD</option><option value="blu-ray" chp-id="[0-9]+">Blu-ray</option></optgroup>
</select>
<label for="id_media" class="mdc-floating-label" chp-id="[0-9]+">Media:</label>
<div class="mdc-line-ripple" chp-id="[0-9]+"></div></div>
<div class="mdc-select" data-mdc-auto-init="MDCSelect" chp-id="[0-9]+"><select name="foreignkey" required id="id_foreignkey" class="mdc-select__native-control" chp-id="[0-9]+">
<div class="mdc-select" data-mdc-auto-init="MDCSelect" chp-id="[0-9]+">
<select name="foreignkey" required id="id_foreignkey" class="mdc-select__native-control" chp-id="[0-9]+">
<option value="" selected disabled chp-id="[0-9]+"></option>
</select>
<label for="id_foreignkey" class="mdc-floating-label" chp-id="[0-9]+">Foreignkey:</label>
<div class="mdc-line-ripple" chp-id="[0-9]+"></div></div></div>
<div style="display: grid;" chp-id="[0-9]+">
<div class="mdc-button" data-mdc-auto-init="None" chp-id="[0-9]+"><button form="form-chp" type="submit" chp-id="[0-9]+">Submit</button></div></div>
</form></div></div></div>
"""
regex = regex.replace("\n", "")
regexc = re.compile(regex)
result = PostForm().render()
assert re.match(regexc, result) is not None
def test_render_checkbox():
test_value = True
f = PostForm(initial={"checkbox": test_value})
assert "checked" in f.render()
def test_render_text():
test_value = "Initial value"
f = PostForm(initial={"text": test_value})
assert test_value in f.render()
def test_render_date():
test_value = "2018-10-03"
f = PostForm(initial={"date": test_value})
assert test_value in f.render()
def test_render_media():
test_value = "vinyl"
f = PostForm(initial={"media": test_value})
assert test_value in f.render()
# TODO: needs a fixture to create a foreign key
def test_render_foreignkey():
test_value = ""
f = PostForm(initial={"foreignkey": test_value})
assert test_value in f.render()
assert re.match(regexc, postform.render()) is not None
def test_render_checkbox(postform):
fld = MdcField.render(postform["checkbox"])
html = render_element(fld)
test_str = """
<div class="mdc-form-field mdc-form-field--align-end" data-mdc-auto-init="MDCFormField">
<div class="mdc-checkbox" data-mdc-auto-init="MDCCheckbox">
<input name="checkbox" id="id_checkbox" checked class="mdc-checkbox__native-control" type="checkbox" />
<div class="mdc-checkbox__background"></div>
</div>
<label for="id_checkbox">This is my checkbox:</label>
</div>
"""
test_str = re.sub("\n\s*", "", test_str)
assert html == test_str
def test_render_text(postform):
fld = MdcField.render(postform["text"])
html = render_element(fld)
test_str = """
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input name="text" value="Initial value" maxlength="200" required id="id_text" class="mdc-text-field__input" type="text" />
<label for="id_text" class="mdc-floating-label">Input Label:</label>
<div class="mdc-line-ripple"></div>
</div>
"""
test_str = re.sub("\n\s*", "", test_str)
assert html == test_str
def test_render_date(postform):
fld = MdcField.render(postform["date"])
html = render_element(fld)
test_str = """
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input name="date" value="2018-10-03" required id="id_date" class="mdc-text-field__input" type="date" />
<label for="id_date" class="mdc-floating-label">Type = date:</label>
<div class="mdc-line-ripple"></div>
</div>
"""
test_str = re.sub("\n\s*", "", test_str)
assert html == test_str
def test_render_media(postform):
fld = MdcField.render(postform["media"])
html = render_element(fld)
test_str = """
<div class="mdc-select" data-mdc-auto-init="MDCSelect">
<select name="media" required id="id_media" class="mdc-select__native-control">
<option value="" disabled></option>
<optgroup label="Audio">
<option value="vinyl" selected>Vinyl</option>
<option value="cd">CD</option>
<option value="mp3">MP3</option>
</optgroup>
<optgroup label="Video">
<option value="vhs">VHS tape</option>
<option value="dvd">DVD</option>
<option value="blu-ray">Blu-ray</option>
</optgroup>
</select>
<label for="id_media" class="mdc-floating-label">Media:</label>
<div class="mdc-line-ripple"></div>
</div>
"""
test_str = re.sub("\n\s*", "", test_str)
assert html == test_str
# TODO: needs a fixture to create database entries
def test_render_foreignkey(postform):
fld = MdcField.render(postform["foreignkey"])
html = render_element(fld)
test_str = """
<div class="mdc-select" data-mdc-auto-init="MDCSelect">
<select name="foreignkey" required id="id_foreignkey" class="mdc-select__native-control">
<option value="" selected disabled></option>
</select>
<label for="id_foreignkey" class="mdc-floating-label">Foreignkey:</label>
<div class="mdc-line-ripple"></div>
</div>
"""
test_str = re.sub("\n\s*", "", test_str)
assert html == test_str
......@@ -27,25 +27,29 @@ def Div(props=[], children=[]):
return chp.Div(props, children)
def Grid(children=[]):
"""Set the DMC display to 'grid'."""
props = [
def Grid(props=[], children=[]):
"""Start the MDC grid layout."""
props.append(
cp('class', 'mdc-layout-grid')
]
)
return Div(props, children)
def Row(children=[]):
props = [
def Row(props=[], children=[]):
"""Start the MDC grid inner."""
props.append(
cp('class', 'mdc-layout-grid__inner')
]
)
return Div(props, children)
def Cell(children=[]):
props = [
cp('class', 'mdc-layout-grid__cell')
]
def Cell(props=[], children=[]):
"""Start the MDC grid cell.
Set the span to 12 columns as a sensible default."""
props.append(
cp('class', 'mdc-layout-grid__cell--span-12')
)
return Div(props, children)
......@@ -60,9 +64,9 @@ def Flex(props=[], children=[], context={}):
def Form(props=[], children=[]):
ast = chp.Form(props, children)
ast["props"].append(
cp('class', 'mdc-layout-grid__cell')
)
# ast["props"].append(
# cp('class', 'mdc-layout-grid__cell')
# )
return ast
......@@ -225,7 +229,8 @@ def SubmitButton(props=[], children=[]):
cp("class", "mdc-button"),
cp("data-mdc-auto-init", None),
]
return Div(props_div, ast)
children_div = [ast]
return Div(props_div, children_div)
def Select(props=[], children=[]):
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment