{{ content_as_json }}
"
content = [{"a": 1}]
@computed
def content_as_json(self):
# Will break because self.content is not a native python type
# json.dumps does not know how to serialize this types
return json.dumps(sef.content)
# vue.py provides a method to convert the wrapper types
return json.dumps(Object.to_py(self.content))
```
**When converting to native python types reactivity may get lost!**
### When Native Javascript Types Are Assumed
A similar problem exists when passing wrapper variables to native javascript methods.
Brython can convert native Python types like lists and dicts to their javascript equivalent.
Since the wrapper types are not real lists/dicts Brython cannot convert them.
```python
from vue import VueComponent, computed
from vue.bridge import Object
from vue.utils import js_lib
js_json = js_lib("JSON")
class MyComponent(VueComponent):
template = "{{ content_as_json }}
"
content = [{"a": 1}]
@computed
def content_as_json(self):
# Will break because self.content is not a native javascript type
# JSON.stringify does not know how to serialize this types
return js_json.stringify(self.content)
# vue.py provides a method to convert the wrapper types
return js_json.stringify(Object.to_js(self.content))
```
### Are These Limitations Forever?
I hope not!
Currently the main reason for this limitations is [Brython Issue 893](https://github.com/brython-dev/brython/issues/893).
When this one gets fixed, the wrapper classes can be subclasses of native python types and Brython should be able to do the right conversions under the hood.
================================================
FILE: docs/docs/vue_concepts/computed_properties.md
================================================
# Computed Properties
Computed properties can be defined with the `@computed` decorator
```python
from vue import VueComponent, computed
class ComponentWithMethods(VueComponent):
message = "Hallo vue.py"
@computed
def reversed(self):
return "".join(reversed(self.message))
```
computed setters are defined similar to plain python setters
```python
class ComputedSetter(VueComponent):
message = "Hallo vue.py"
@computed
def reversed_message(self):
return self.message[::-1]
@reversed_message.setter
def reversed_message(self, reversed_message):
self.message = reversed_message[::-1]
```
# Watchers
Watchers can be defined with the `@watch` decorator.
```python
from vue import VueComponent, watch
class Watch(VueComponent):
message = ""
@watch("message")
def log_message_changes(self, new, old):
print("'message' changed from '{}' to '{}'".format(old, new)
```
`deep` and `immediate` watchers can be configured via arguments
```python
from vue import VueComponent, watch
class Watch(VueComponent):
message = ""
@watch("message", deep=True, immediate=True)
def log_message_changes(self, new, old):
print("'message' changed from '{}' to '{}'".format(old, new)
```
================================================
FILE: docs/docs/vue_concepts/custom_directives.md
================================================
# Custom Directives
## Local Registration
For [function directives](https://vuejs.org/v2/guide/custom-directive.html#Function-Shorthand)
is just a decorator necessary
```python
from vue import VueComponent, directive
class CustomDirective(VueComponent):
@staticmethod
@directive
def custom_focus(el, binding, vnode, old_vnode, *args):
pass
```
To define custom hook functions, add the directive name as argument to
the decorator
```python
from vue import VueComponent, directive
class CustomDirective(VueComponent):
@staticmethod
@directive("focus")
def component_updated(el, binding, vnode, old_vnode, *args):
# implement 'componentUpdated' hook function here
pass
@staticmethod
@directive("focus")
def inserted(el, binding, vnode, old_vnode, *args):
# implement 'inserted' hook function here
pass
```
To avoid code duplication when adding the same hook function to different hooks,
the hooks can be specified as decorator arguments.
```python
from vue import VueComponent, directive
class CustomDirective(VueComponent):
@staticmethod
@directive("focus", "component_updated", "inserted")
def combined_hook(el, binding, vnode, old_vnode, *args):
# implement function for 'componentUpdated' and 'inserted' hook here
pass
```
**The Vue.js hook `componentUpdated` is called `component_updated` to be more pythonic**
The `@staticmethod` decorator is only necessary to avoid IDE checker errors.
Underscores in directive names get replaced by dashes, so `custom_focus` gets `v-custom-focus`.
## Global Registration
Global directives can be created by sub-classing `VueDirective`.
```python
from vue import Vue, VueDirective
class MyDirective(VueDirective):
def bind(el, binding, vnode, old_vnode):
pass
def component_updated(el, binding, vnode, old_vnode):
pass
Vue.directive("my-directive", MyDirective)
```
and for function directives just pass the function to `Vue.directive`
```python
from vue import Vue
def my_directive(el, binding, vnode, old_vnode):
pass
Vue.directive("my-directive", my_directive)
```
`vue.py` offeres a shorthand, if you like to take the **lower-cased** name
of the function/directive-class as directive name.
```python
from vue import Vue
def my_directive(el, binding, vnode, old_vnode):
pass
Vue.directive(my_directive) # directive name is 'my_directive'
```
## Retrieve Global Directives
Getter for global directives works similar to Vue.js
```python
from vue import Vue
directive = Vue.directive('directive-name')
```
================================================
FILE: docs/docs/vue_concepts/custom_vmodel.md
================================================
# Customize V-Model
To customize the event and prop used by `v-model` a class variable of the type `Model()` can be defined.
```python
from vue import VueComponent, Model
class CustomVModel(VueComponent):
model = Model(prop="checked", event="change")
checked: bool
template = """
{{ checked }}
{heading}
{content} {footer}My Custom Heading
content... Default Footer ``` If you only have one slot in your component, the `template_slots` attribute can be the template string ```python from vue import VueComponent class Base(VueComponent): template = "{}
" class Sub(Base): template_slots = "heading" ``` The `Sub` component gets rendered as ```htmlheading
``` Mixing both is also possible ```python class Base(VueComponent): template_slots = {"pre": "DEFAULT", "post": "DEFAULT"} template = "{pre} {} {post}
" class WithSlots(Base): template_slots = {"pre": "PRE", "default": "SUB"} class WithDefault(Base): template_slots = "SUB" ``` The `WithSlots` component gets rendered as ```htmlPRE SUB DEFAULT
``` The `WithDefault` component gets rendered as ```htmlDEFAULT SUB DEFAULT
``` ================================================ FILE: docs/docs/vue_concepts/filter.md ================================================ # Filter ## Local Registration Local registration of filters is done with the `@filters` decorator. ```python from vue import VueComponent, filters class ComponentWithFilter(VueComponent): message = "Message" @filters def lower_case(value): return value.lower() template = "{{ message | lower_case }}
"
```
To avoid errors on source code checking errors in modern IDEs, an additional `@staticmethod` decorator can be added
```python
from vue import VueComponent, filters
class ComponentWithFilter(VueComponent):
@staticmethod
@filters
def lower_case(value):
return value.lower()
```
## Global Registration
Global registration of filters works similar to Vue.js
```python
from vue import Vue
Vue.filter("capitalize", str.capitalize)
```
Additionally in vue.py it is allowd to only pass a function to `Vue.filter`.
In this case the filter gets registered under the function name.
```python
from vue import Vue
def my_filter(val):
return "filtered({})".format(val)
Vue.filter(my_filter)
```
================================================
FILE: docs/docs/vue_concepts/instance_components.md
================================================
# Components
## Define
A Vue component can be defined by writing a sub-class of `VueComponent`
```python
from vue import VueComponent
class MyComponent(VueComponent):
pass
```
## Registration
Every component has to be [registered](https://vuejs.org/v2/guide/components-registration.html) to be available in other components.
### Local Registration
```python
from vue import VueComponent
class MyComponent(VueComponent):
components = [
MyVuePyComponent,
AnotherNativeVueJsComponent,
]
```
The component to register can be either a `vue.py` component or a native
Vue.js component loaded with `js_lib` or `js_import`
### Global Registration
```python
from vue import Vue
# For vue.py components or native Vue.js component loaded with js_lib or js_import
Vue.component(MyComponent)
Vue.component("my-custom-name", MyComponent)
# Only for vue.py components
MyComponent.register()
MyComponent.register("my-custom-name")
```
## Template
The component html template can be defined with a class variable called `template`
```python
from vue import VueComponent
class MyComponent(VueComponent):
template = """
Hallo vue.py!
"""
```
`vue.py` templates look the same than Vue.js templates. This means inline expressions must be javascript!!.
```python
from vue import VueComponent
class MyComponent(VueComponent):
message = "Hallo vue.py!"
template = """
{{ message.split('').reverse().join('') }}
"""
```
# Instance
## Start
To start a component as Vue application, just pass a css selector at initialization
```
App("#app")
```
## Prop Data
[propsData](https://vuejs.org/v2/api/#propsData) can be passed in as a dictionary.
```python
App("#app", props_data={"prop": "value"})
```
## API
### Dollar Methods
$-methods like `$emit` can be called by omitting the `$`
```python
from vue import VueComponent
class MyComponent(VueComponent):
def created(self):
self.emit("creation", "Arg")
```
In the case your Component has another attribute with the same name, you can use a workaround and directly call `getattr()`
```python
from vue import VueComponent
class MyComponent(VueComponent):
emit = "already used"
def created(self):
getattr(self, "$emit")("creation", "Arg")
```
================================================
FILE: docs/docs/vue_concepts/lifecycle_hooks.md
================================================
# Lifecycle Hooks
Certain names for component methods are reserved, to specify lifecycle hooks.
```python
from vue import VueComponent
class ComponentLifecycleHooks(VueComponent):
def before_create(self):
print("on beforeCreate")
def created(self):
print("on created")
def before_mount(self):
print("on beforeMount")
def mounted(self):
print("on mounted")
def before_update(self):
print("on beforeUpdate")
def updated(self):
print("on updated")
def before_destroy(self):
print("on beforeDestroy")
def destroyed(self):
print("on destroyed")
```
================================================
FILE: docs/docs/vue_concepts/plugins_mixins.md
================================================
# Mixins
## Write Mixins
Mixins are created by sub-classing from `VueMixin` and from there it is
similar to write a `VueComponent`
```python
from vue import VueMixin, computed
class MyMixin(VueMixin):
prop: str
value = "default"
def created(self):
pass
@computed
def upper_value(self):
return self.value.upper()
```
## Use Mixins
### Local Registration
Local registration of a Mixin within a Component works just like in Vue.js.
```python
from vue import VueComponent
class MyComponent(VueComponent):
mixins = [MyPyMixin, AnotherVueJsMixin]
```
Mixins wirtten in Vue.js and `vue.py` can be mixed.
### Global Registration
Global registration of a Mixin works also just like in Vue.js.
```python
from vue import Vue
Vue.mixin(MyMixin)
```
# Plugins
## Write Plugins
A plugin can be written by sub-classing `VuePlugin` and implementing
the function `install` similar to Vue.js.
```python
from vue import Vue, VuePlugin, VueMixin
class MyPlugin(VuePlugin):
class MyMixin(VueMixin):
def created(self):
pass
# 4) Within a Mixin, new instance methods can be defined
def my_method(self, args):
pass
@staticmethod
def global_method():
pass
@staticmethod
def install(*args, **kwargs):
# 1) Add a global method or property
Vue.my_global_method = MyPlugin.global_method
# 2) Add a global assed
Vue.directive(MyDirective)
# 3) Inject Mixins
Vue.mixin(MyPlugin.MyMixin)
```
## Use Plugins
Using plugins works like in Vue.js
```python
from vue import Vue
Vue.use(MyPlugin)
```
`vue.py` supports also using native Vue.js plugins.
================================================
FILE: docs/docs/vue_concepts/props.md
================================================
# Props
A prop is defined by adding a type hint to a class variable.
```python
from vue import VueComponent
class ComponentWithData(VueComponent):
prop: str
```
## Types
Unlike Vue.js, vue.py enforces prop types (if not type hint is provided, it is a data field).
The following types are currently supported:
* `int`
* `float`
* `str`
* `bool`
* `list`
* `dict`
## Default
By assigning a value to a prop, the default value can be defined.
```python
from vue import VueComponent
class ComponentWithData(VueComponent):
prop: str = "default"
```
## Required
If no default value is given, the prop is automatically required.
## Validator
With the `@validator` decorator are prop validators defined
```python
from vue import VueComponent, validator
class ComponentWithData(VueComponent):
prop: int
@validator("prop")
def prop_must_be_greater_than_100(self, value):
return value > 100
```
================================================
FILE: docs/docs/vue_concepts/render_function.md
================================================
# Render Function
A render function can be defined by overwriting the `render` method.
```python
from vue import VueComponent
class ComponentWithData(VueComponent):
def render(self, create_element):
return create_element("h1", "Title")
```
## Accessing Slots
Slots can be accessed as a dictionary.
```python
from vue import VueComponent
class ComponentWithSlots(VueComponent):
def render(self, create_element):
return create_element(f"div", self.slots.get("default"))
```
It is recommened to access the dictionary via the `get`-method to avoid failures
when no children for the slot are provided.
## Passing Props
```python
from vue import VueComponent
class ComponentWithProps(VueComponent):
prop: str = "p"
template = ""
ComponentWithProps.register()
class Component(VueComponent):
def render(self, create_element):
return create_element(
"ComponentWithProps", {"props": {"prop": "p"}},
)
```
================================================
FILE: docs/docs/vue_concepts/vue-router.md
================================================
# Vue Router
## Define
A vue router can be used by writing a sub-class of `VueRouter`,
setting some `VueRoute`s
and set the `router` parameter when initializing a app.
```python
from vue import VueComponent, VueRouter, VueRoute
class Foo(VueComponent):
template = "foo
"
class Bar(VueComponent):
template = "bar
"
class Router(VueRouter):
routes = [
VueRoute("/foo", Foo),
VueRoute("/bar", Bar),
]
class App(VueComponent):
template = """
{{ message }}
"
```
================================================
FILE: docs/planning.md
================================================
# Future Plans
## Performance
* How to improve loading times?
* create benchmarks
## Tools
* Docker deployment
## Vue.py Universe
* store synchronization
* with local/session storage
* over WebSockets with python backend
* desktop toolkit
* based on [pywebview](https://github.com/r0x0r/pywebview) ??
## Vue.js Features
* full access to Vue object (global configuration etc.)
* ...
## Internals
* write tests for decorators
## Docs
* embed examples in gallery
================================================
FILE: examples/elastic_header/app.py
================================================
from vue import VueComponent, data, computed
from vue.bridge import Object
from vue.utils import js_lib
dynamics = js_lib("dynamics")
class DraggableHeaderView(VueComponent):
template = "#header-view"
dragging = False
@data
def c(self):
return {"x": 160, "y": 160}
@data
def start(self):
return {"x": 0, "y": 0}
@computed
def header_path(self):
return f'M0,0 L320,0 320,160Q{self.c["x"]},{self.c["y"]} 0,160'
@computed
def content_position(self):
dy = self.c["y"] - 160
dampen = 2 if dy > 0 else 4
return {"transform": f"translate3d(0,{dy / dampen}px,0)"}
def start_drag(self, e):
e = e["changedTouches"][0] if "changedTouches" in e else e
self.dragging = True
self.start["x"] = e.pageX
self.start["y"] = e.pageY
def on_drag(self, e):
e = e["changedTouches"][0] if "changedTouches" in e else e
if self.dragging:
self.c["x"] = 160 + (e.pageX - self.start["x"])
dy = e.pageY - self.start["y"]
dampen = 1.5 if dy > 0 else 4
self.c["y"] = int(160 + dy / dampen)
def stop_drag(self, _):
if self.dragging:
self.dragging = False
dynamics.animate(
Object.to_js(self.c),
{"x": 160, "y": 160},
{"type": dynamics.spring, "duration": 700, "friction": 280},
)
DraggableHeaderView.register()
class App(VueComponent):
template = "#main"
App("#app")
================================================
FILE: examples/elastic_header/header-view.html
================================================
Elastic Draggable SVG Header
with vue.py + dynamics.js
Note this is just an effect demo - there are of course many additional details if you want to use this in production, e.g. handling responsive sizes, reload threshold and content scrolling. Those are out of scope for this quick little hack. However, the idea is that you can hide them as internal details of a vue.py component and expose a simple Web-Component-like interface.
Latest vue.py Commits
stefanhoelzl/vue.py@{{ current_branch }}
-
{{ record.sha.slice(0, 7) }}
-
by at {{ record.commit.author.date | format_date }}
| {{ key | capitalize }} |
|---|
| {{ entry[key] }} |
custom header
{{stat.value}}
{{ stats }}
* input[type="range"] requires IE10 or above.
todos
(You can double click on an item to turn it into a folder.)
{{ model.name }}
[{{ open ? '-' : '+' }}]
- +
{{ text }}
"""
return App(el, props_data={"text": "TEXT"})
with selenium.app(app_with_props_data):
assert selenium.element_has_text("el", "TEXT")
def test_emit_method(selenium):
def call_emit(el):
class Emitter(VueComponent):
template = ""
def created(self):
self.emit("creation", "YES")
Emitter.register()
class App(VueComponent):
text = "NO"
template = """
{{ text }}
{{ components_string }}
"
comps = []
def created(self):
self.comps.append("BASE")
@computed
def components_string(self):
return " ".join(self.comps)
class Sub(Base):
extends = True
def created(self):
self.comps.append("SUB")
@computed
def components_string(self):
comps = super().components_string()
return f"SUB({comps})"
return Sub(el)
with selenium.app(extended_component):
assert selenium.element_has_text("comps", "SUB(BASE SUB)")
def test_extend_from_dict(selenium):
class Component(VueComponent):
template = "{{ done }}
"
done = "NO"
extends = {"created": lambda: print("CREATED BASE")}
def created(self):
print("CREATED SUB")
self.done = "YES"
with selenium.app(Component):
assert selenium.element_has_text("done", "YES")
assert "CREATED BASE" in selenium.logs[-2]["message"]
assert "CREATED SUB" in selenium.logs[-1]["message"]
================================================
FILE: tests/selenium/test_examples.py
================================================
import time
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
def test_markdown_editor(selenium):
with selenium.example():
time.sleep(0.5)
element = selenium.element_present("markdown")
element.clear()
element.send_keys("# Title\n\n")
element.send_keys("* item one\n")
element.send_keys("* item two\n")
element.send_keys("\n")
element.send_keys("_italic_\n")
element.send_keys("\n")
element.send_keys("`some code`\n")
element.send_keys("\n")
element.send_keys("**bold**\n")
element.send_keys("\n")
element.send_keys("## Sub Title\n")
element.send_keys("\n")
selenium.element_has_text("sub-title", "Sub Title")
def test_grid_component(selenium):
with selenium.example():
time.sleep(0.5)
query = selenium.element_present("query")
query.clear()
query.send_keys("j")
power = selenium.element_present("power")
power.click()
rows = selenium.driver.find_elements(by=By.TAG_NAME, value="td")
assert "Jet Li" == rows[0].text
assert "8000" == rows[1].text
assert "Jackie Chan" == rows[2].text
assert "7000" == rows[3].text
def test_tree_view(selenium):
with selenium.example():
time.sleep(0.5)
lis = selenium.find_elements(by=By.TAG_NAME, value="li")
lis[0].click()
lis[3].click()
ActionChains(selenium.driver).double_click(lis[8]).perform()
assert selenium.find_elements(by=By.TAG_NAME, value="li")[9].text == "new stuff"
def test_svg_graph(selenium):
with selenium.example():
time.sleep(0.5)
selenium.find_elements(by=By.TAG_NAME, value="button")[5].click()
a = selenium.find_elements(by=By.TAG_NAME, value="input")[0]
d = selenium.find_elements(by=By.TAG_NAME, value="input")[3]
ActionChains(selenium.driver).click_and_hold(a).move_by_offset(
20, 0
).release().perform()
ActionChains(selenium.driver).click_and_hold(d).move_by_offset(
5, 0
).release().perform()
polygon = selenium.find_elements(by=By.TAG_NAME, value="polygon")[0]
assert 5 == len(polygon.get_attribute("points").split(" "))
def test_modal_component(selenium):
with selenium.example():
time.sleep(1)
show_button = selenium.element_present("show-modal")
show_button.click()
time.sleep(1)
assert selenium.element_present("modal_view", timeout=2)
def test_todo_mvc(selenium):
with selenium.example():
time.sleep(0.5)
title_input = selenium.element_present("title-input")
title_input.clear()
title_input.send_keys("new todo")
title_input.send_keys(Keys.ENTER)
title_input.send_keys("completed")
title_input.send_keys(Keys.ENTER)
toggle_buttons = selenium.driver.find_elements(by=By.CLASS_NAME, value="toggle")
assert 2 == len(toggle_buttons)
toggle_buttons[1].click()
selenium.element_present("show-active").click()
labels = selenium.driver.find_elements(by=By.TAG_NAME, value="label")
assert 1 == len(labels)
assert "new todo" == labels[0].text
selenium.element_present("show-all").click()
labels = selenium.driver.find_elements(by=By.TAG_NAME, value="label")
assert 2 == len(labels)
assert "new todo" == labels[0].text
assert "completed" == labels[1].text
def test_github_commits(selenium):
with selenium.example(hash_="testing"):
assert selenium.element_with_tag_name_present("ul")
time.sleep(2)
assert 10 == len(selenium.driver.find_elements(by=By.TAG_NAME, value="li"))
def test_elastic_header(selenium):
with selenium.example():
assert selenium.element_present("header")
header = selenium.find_element(by=By.ID, value="header")
content = selenium.find_element(by=By.ID, value="content")
assert (
content.get_attribute("style") == "transform:"
" translate3d(0px, 0px, 0px);"
)
ActionChains(selenium.driver).click_and_hold(header).move_by_offset(
xoffset=0, yoffset=100
).perform()
selenium.screenshot()
assert (
content.get_attribute("style") == "transform:"
" translate3d(0px, 33px, 0px);"
)
ActionChains(selenium.driver).release().perform()
time.sleep(1)
assert (
content.get_attribute("style") == "transform:"
" translate3d(0px, 0px, 0px);"
)
================================================
FILE: tests/selenium/test_guide/test_components/test_custom_events.py
================================================
from vue import *
from selenium.webdriver.common.by import By
def test_customize_v_model(selenium):
def app(el):
class CustomVModel(VueComponent):
model = Model(prop="checked", event="change")
checked: bool
template = """
{{ checked }}
{{ clicked }}
{{ content }}
"
def created(self):
assert isinstance(self.prop, int)
self.content = "text"
SubComponent.register()
class App(VueComponent):
template = """
{{ content }}
"
def created(self):
assert 100 == self.prop
self.content = "text"
SubComponent.register()
class App(VueComponent):
template = """
{{ content }}
"
def created(self):
self.content = "text"
SubComponent.register()
class App(VueComponent):
template = """
{{ cnt }}
"
SubComponent.register()
class App(VueComponent):
template = """
{{ prop }}
"
SubComponent.register()
class App(VueComponent):
template = """
{{ prop }}
"
SubComponent.register()
class App(VueComponent):
template = """
TEXT
"""
SubComponent.register("another-name")
class App(VueComponent):
template = """
{{ prop }}
"""
SubComponent.register()
class App(VueComponent):
template = """
{{ text }}
{{ message }}
{{ reversed_message }}
{{ new_val }}
{{ message }}
{{ text }}
"
def before_create(self):
print("lh: before_created", self)
def created(self):
print("lh: created", self)
def before_mount(self):
print("lh: before_mount", self)
def mounted(self):
print("lh: mounted", self)
def before_update(self):
print("lh: before_update", self)
def updated(self):
print("lh: updated", self)
def before_destroy(self):
print("lh: before_destroy", self)
def destroyed(self):
print("lh: destroyed", self)
ComponentLifecycleHooks.register("clh")
class App(VueComponent):
show = True
text = "created"
def mounted(self):
self.text = "mounted"
def updated(self):
self.show = False
template = (
"{{ message }}
"
with selenium.app(DeclarativeRendering):
assert selenium.element_has_text("content", "MESSAGE CONTENT")
def test_bind_element_title(selenium):
class BindElementTitle(VueComponent):
title = "TITLE"
template = ""
with selenium.app(BindElementTitle):
assert selenium.element_attribute_has_value("withtitle", "title", "TITLE")
def test_if_condition(selenium):
class IfCondition(VueComponent):
show = False
template = (
""
"
"
)
with selenium.app(IfCondition):
assert selenium.element_present("present")
assert selenium.element_not_present("notpresent")
def test_for_loop(selenium):
class ForLoop(VueComponent):
items = ["0", "1", "2"]
template = (
"DONT SHOW
"
" "
"- "
"
- {{ item }} " "
"
"
"
)
with selenium.app(VModel):
assert selenium.element_has_text("p", "false")
selenium.find_element(by=By.ID, value="c").click()
assert selenium.element_has_text("p", "true")
def test_component(selenium):
def components(el):
class SubComponent(VueComponent):
template = """
{{ clicked }}
" " " "HEADER
""" SubComponent.register() class App(VueComponent): template = """{{ text }}
{{ sub }}
{{ message | lower_case }}
"
with selenium.app(ComponentWithFilter):
assert selenium.element_has_text("content", "message")
def test_global_filter(selenium):
def app(el):
Vue.filter("lower_case", lambda v: v.lower())
class ComponentUsesGlobalFilter(VueComponent):
message = "Message"
template = "{{ message | lower_case }}
"
return ComponentUsesGlobalFilter(el)
with selenium.app(app):
assert selenium.element_has_text("content", "message")
================================================
FILE: tests/selenium/test_guide/test_reusability_composition/test_mixins.py
================================================
from vue import *
def test_local_mixin(selenium):
def app(el):
class MyMixin(VueMixin):
def created(self):
print("created")
@staticmethod
@filters
def lower_case(value):
return value.lower()
class ComponentUsesGlobalFilter(VueComponent):
message = "Message"
mixins = [MyMixin]
template = "{{ message | lower_case }}
"
return ComponentUsesGlobalFilter(el)
with selenium.app(app):
assert selenium.element_has_text("content", "message")
logs = list(filter(lambda l: "created" in l["message"], selenium.logs))
assert 1 == len(logs)
================================================
FILE: tests/selenium/test_guide/test_reusability_composition/test_render_function.py
================================================
from vue import *
from selenium.webdriver.common.by import By
def test_basics(selenium):
def app(el):
class ComponentWithRenderFunction(VueComponent):
level = 3
def render(self, create_element):
return create_element(f"h{self.level}", "Title")
return ComponentWithRenderFunction(el)
with selenium.app(app):
assert selenium.element_with_tag_name_has_text("h3", "Title")
def test_slots(selenium):
def app(el):
class WithSlots(VueComponent):
def render(self, create_element):
return create_element(f"p", self.slots.get("default"))
WithSlots.register()
class Component(VueComponent):
template = "foo
'
class Bar(VueComponent):
text = "bar"
template = '{{ text }}
'
class Router(VueRouter):
routes = [VueRoute("/foo", Foo), VueRoute("/bar", Bar)]
class ComponentUsingRouter(VueComponent):
template = """
{{ $route.params.id }}
'
class Router(VueRouter):
routes = [VueRoute("/user/:id", User)]
class ComponentUsingRouter(VueComponent):
template = """
foo top
'
class FooBottom(VueComponent):
template = 'foo bottom
'
class BarTop(VueComponent):
template = 'bar top
'
class BarBottom(VueComponent):
template = 'bar bottom
'
class Router(VueRouter):
routes = [
VueRoute("/foo", components={"default": FooBottom, "top": FooTop}),
VueRoute("/bar", components={"default": BarBottom, "top": BarTop}),
]
class ComponentUsingRouter(VueComponent):
template = """
Home
'
class UserProfile(VueComponent):
template = 'Profile
'
class UserPosts(VueComponent):
template = 'Posts
'
class ComponentUsingRouter(VueComponent):
template = """
User {{ $route.params.id }}
{{ message }}
"
return ComponentUsingStore(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message")
def test_mutation_noargs(selenium):
def app(el):
class Store(VueStore):
message = ""
@mutation
def mutate_message(self):
self.message = "Message"
class ComponentUsingMutation(VueComponent):
@computed
def message(self):
self.store.commit("mutate_message")
return self.store.message
template = "{{ message }}
"
return ComponentUsingMutation(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message")
def test_mutation(selenium):
def app(el):
class Store(VueStore):
message = ""
@mutation
def mutate_message(self, new_message):
self.message = new_message
class ComponentUsingMutation(VueComponent):
@computed
def message(self):
self.store.commit("mutate_message", "Message")
return self.store.message
template = "{{ message }}
"
return ComponentUsingMutation(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message")
def test_mutation_kwargs(selenium):
def app(el):
class Store(VueStore):
message = ""
@mutation
def mutate_message(self, new_message, postfix=""):
self.message = new_message + postfix
class ComponentUsingMutation(VueComponent):
@computed
def message(self):
self.store.commit("mutate_message", "Message", postfix="!")
return self.store.message
template = "{{ message }}
"
return ComponentUsingMutation(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message!")
def test_action(selenium):
def app(el):
class Store(VueStore):
message = ""
@mutation
def mutate_message(self, new_message):
self.message = new_message
@action
def change_message(self, new_message):
self.commit("mutate_message", new_message)
class ComponentUsingAction(VueComponent):
def created(self):
self.store.dispatch("change_message", "Message")
@computed
def message(self):
return self.store.message
template = "{{ message }}
"
return ComponentUsingAction(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message")
def test_action_noargs(selenium):
def app(el):
class Store(VueStore):
message = ""
@mutation
def mutate_message(self, new_message):
self.message = new_message
@action
def change_message(self):
self.commit("mutate_message", "Message")
class ComponentUsingAction(VueComponent):
def created(self):
self.store.dispatch("change_message")
@computed
def message(self):
return self.store.message
template = "{{ message }}
"
return ComponentUsingAction(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message")
def test_action_kwargs(selenium):
def app(el):
class Store(VueStore):
message = ""
@mutation
def mutate_message(self, new_message):
self.message = new_message
@action
def change_message(self, new_message, postfix=""):
self.commit("mutate_message", new_message + postfix)
class ComponentUsingAction(VueComponent):
def created(self):
self.store.dispatch("change_message", "Message", postfix="!")
@computed
def message(self):
return self.store.message
template = "{{ message }}
"
return ComponentUsingAction(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message!")
def test_getter_noargs(selenium):
def app(el):
class Store(VueStore):
message = "Message"
@getter
def msg(self):
return self.message
class ComponentUsingGetter(VueComponent):
@computed
def message(self):
return self.store.msg
template = "{{ message }}
"
return ComponentUsingGetter(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message")
def test_getter_method(selenium):
def app(el):
class Store(VueStore):
message = "Message"
@getter
def msg(self, prefix):
return prefix + self.message
class ComponentUsingGetter(VueComponent):
@computed
def message(self):
return self.store.msg("pre")
template = "{{ message }}
"
return ComponentUsingGetter(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "preMessage")
def test_getter_kwargs(selenium):
def app(el):
class Store(VueStore):
message = "Message"
@getter
def msg(self, prefix, postfix):
return prefix + self.message + postfix
class ComponentUsingGetter(VueComponent):
@computed
def message(self):
return self.store.msg("pre", "!")
template = "{{ message }}
"
return ComponentUsingGetter(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "preMessage!")
def test_plugin(selenium):
def app(el):
class Plugin(VueStorePlugin):
def initialize(self, store):
store.message = "Message"
def subscribe(self, state, mut, *args, **kwargs):
print(state.message, mut, args, kwargs)
class Store(VueStore):
plugins = [Plugin().install]
message = ""
@mutation
def msg(self, prefix, postfix=""):
pass
class ComponentUsingGetter(VueComponent):
@computed
def message(self):
return self.store.message
def created(self):
self.store.commit("msg", "Hallo", postfix="!")
template = "{{ message }}
"
return ComponentUsingGetter(el, store=Store())
with selenium.app(app, config=VuexConfig):
assert selenium.element_has_text("content", "Message")
last_log_message = selenium.get_logs()[-1]["message"]
expected_msg = "Message msg ('Hallo',) {'postfix': '!'}"
assert expected_msg in last_log_message
def test_using_state_within_native_vue_component(selenium):
def app(el):
class Store(VueStore):
message = "Message"
class ComponentUsingNativeComponent(VueComponent):
template = "{{ message }}
',
computed: {
message () {
return this.$store.state.message
}
}
});
"""
with selenium.app(app, config=config, files={"my.js": myjs}):
assert selenium.element_has_text("content", "Message")
================================================
FILE: tests/test_install.py
================================================
import json
import subprocess
import urllib.request
import time
from contextlib import contextmanager
import pytest
from tools.release import version
def _raise_failed_process(proc, error_msg):
stdout = proc.stdout if isinstance(proc.stdout, bytes) else proc.stdout.read()
stderr = proc.stderr if isinstance(proc.stderr, bytes) else proc.stderr.read()
print(f"return-code: {proc.returncode}")
print("stdout")
print(stdout.decode("utf-8"))
print("stderr")
print(stderr.decode("utf-8"))
raise RuntimeError(error_msg)
def shell(*args, env=None, cwd=None):
proc = subprocess.run(args, env=env, cwd=cwd, capture_output=True)
if proc.returncode:
_raise_failed_process(proc, str(args))
@pytest.fixture
def wheel(scope="session"):
shell("make", "build")
return f"dist/vuepy-{version()}-py3-none-any.whl"
@pytest.fixture
def venv(tmp_path):
path = tmp_path / "venv"
shell("python", "-m", "venv", str(path))
return path
@pytest.fixture
def install(wheel, venv):
def _install(extra=None):
extra = f"[{extra}]" if extra else ""
shell(
"pip",
"install",
f"{wheel}{extra}",
env={"PATH": str(venv / "bin"), "PIP_USER": "no"},
)
return _install
@contextmanager
def background_task(*args, env=None, cwd=None):
proc = subprocess.Popen(
args, env=env, cwd=cwd, stdout=subprocess.PIPE, stderr=subprocess.PIPE
)
try:
yield
finally:
if proc.poll() is not None:
_raise_failed_process(proc, "background task finished early")
proc.kill()
proc.communicate()
def request(url, retries=0, retry_delay=0):
for retry in range(1 + retries):
try:
with urllib.request.urlopen(url) as response:
return response
except urllib.request.URLError:
if retry >= retries:
raise
time.sleep(retry_delay)
@pytest.fixture
def app(tmp_path):
app_path = tmp_path / "app"
app_path.mkdir()
return app_path
@pytest.fixture
def config(app):
def _config(values):
app.joinpath("vuepy.yml").write_text(json.dumps(values, indent=2))
return _config
def test_static(install, venv, tmp_path, app):
destination = tmp_path / "destination"
install()
shell(
"vue-cli",
"deploy",
"static",
str(destination),
env={"PATH": f"{venv / 'bin'}"},
cwd=str(app),
)
assert (destination / "index.html").is_file()
def test_flask(install, venv, app):
install(extra="flask")
with background_task(
"vue-cli", "deploy", "flask", env={"PATH": f"{venv / 'bin'}"}, cwd=str(app)
):
assert (
request("http://localhost:5000", retries=5, retry_delay=0.5).status == 200
)
def test_flask_settings(install, config, venv, app):
install(extra="flask")
config({"provider": {"flask": {"PORT": 5001}}})
with background_task(
"vue-cli", "deploy", "flask", env={"PATH": f"{venv / 'bin'}"}, cwd=str(app)
):
assert (
request("http://localhost:5001", retries=5, retry_delay=0.5).status == 200
)
================================================
FILE: tests/unit/test_bridge/__init__.py
================================================
================================================
FILE: tests/unit/test_bridge/mocks.py
================================================
class VueMock:
@staticmethod
def set(obj, key, value):
setattr(obj, key, value)
@staticmethod
def delete(obj, key):
delattr(obj, key)
class ObjectMock:
def __new__(cls, arg):
return arg
@staticmethod
def assign(target, *sources):
for source in sources:
target.attributes.update(source)
return target
@staticmethod
def keys(obj):
return [k for k in obj]
class ArrayMock:
def __init__(self, *items):
self._data = list(items)
def __getitem__(self, item):
return self._data[item]
def __setitem__(self, key, value):
self._data[key] = value
@property
def length(self):
return len(self._data)
def push(self, *items):
self._data.extend(items)
def splice(self, index, delete_count=None, *items):
delete_count = (
delete_count if delete_count is not None else len(self._data) - index
)
index = index if index >= 0 else len(self._data) + index
deleted = self._data[index : index + delete_count]
self._data = (
self._data[0:index] + list(items) + self._data[index + delete_count :]
)
return deleted
def slice(self, index, stop=None):
return self._data[index:stop]
def indexOf(self, obj, start=0):
try:
return self._data.index(obj, start)
except ValueError:
return -1
def reverse(self):
self._data.reverse()
return self._data
================================================
FILE: tests/unit/test_bridge/test_dict.py
================================================
from unittest import mock
import pytest
from tests.unit.test_bridge.mocks import ObjectMock, VueMock
from vue.bridge.dict import window, Dict
@pytest.fixture(scope="module", autouse=True)
def window_object():
with mock.patch.object(window, "Object", new=ObjectMock), mock.patch.object(
window, "Vue", new=VueMock
):
yield
class JsObjectMock:
def __init__(self, attribtes):
self.attributes = attribtes
def __getattr__(self, item):
return self.attributes[item]
def __setattr__(self, key, value):
if key == "attributes":
super().__setattr__(key, value)
else:
self.attributes[key] = value
def __delattr__(self, item):
del self.attributes[item]
def __iter__(self):
return iter(self.attributes)
def make_dict(dct):
return Dict(JsObjectMock(dct))
class TestDict:
def test_getitem(self):
assert "value" == make_dict({"key": "value"})["key"]
def test_items(self):
assert (("a", 1), ("b", 2)) == make_dict({"a": 1, "b": 2}).items()
def test_eq(self):
assert {"a": 1} != make_dict({"a": 2})
assert {"a": 0, "b": 1} == make_dict({"a": 0, "b": 1})
def test_keys(self):
assert ("a", "b") == make_dict({"a": 0, "b": 1}).keys()
def test_iter(self):
assert ["a", "b"] == list(iter(make_dict({"a": 0, "b": 1})))
def test_setitem(self):
d = make_dict({})
d["a"] = 1
assert 1 == d["a"]
def test_contains(self):
assert "a" in make_dict({"a": 0, "b": 1})
def test_setdefault(self):
d = make_dict({})
assert 1 == d.setdefault("a", 1)
assert 1 == d.setdefault("a", 2)
def test_len(self):
assert 2 == len(make_dict({"a": 0, "b": 1}))
def test_get(self):
assert 1 == make_dict({"a": 0, "b": 1}).get("b", "default")
assert "default" == make_dict({"a": 0, "b": 1}).get("c", "default")
def test_values(self):
assert (0, 1) == make_dict({"a": 0, "b": 1}).values()
def test_repr(self):
assert str({"a": 0, "b": 1}) == str(make_dict({"a": 0, "b": 1}))
def test_update(self):
d = make_dict({"a": 0, "b": 1})
d.update(a=2)
assert {"a": 2, "b": 1} == d
d.update(c=0)
assert {"a": 2, "b": 1, "c": 0} == d
d.update({"c": 3, "d": 0})
assert {"a": 2, "b": 1, "c": 3, "d": 0} == d
def test_bool(self):
assert not make_dict({})
assert make_dict({"a": 0})
def test_delitem(self):
d = make_dict({"a": 0, "b": 1})
del d["a"]
assert {"b": 1} == d
def test_pop(self):
d = make_dict({"a": 0, "b": 1})
assert 1 == d.pop("b")
assert {"a": 0} == d
def test_pop_default(self):
d = make_dict({"a": 0, "b": 1})
assert "default" == d.pop("c", "default")
assert {"a": 0, "b": 1} == d
def test_pop_key_error(self):
d = make_dict({"a": 0, "b": 1})
with pytest.raises(KeyError):
d.pop("c")
def test_popitem(self):
d = make_dict({"a": 2})
assert ("a", 2) == d.popitem()
assert {} == d
def test_clear(self):
d = make_dict({"a": 0, "b": 1})
d.clear()
assert not d
def test_set(self):
d = make_dict({"a": 0, "b": 1})
old_id = id(d)
d.__set__({"c": 1, "d": 2})
assert old_id == id(d)
assert {"c": 1, "d": 2} == d
def test_getattr(self):
d = make_dict({"a": 0, "b": 1})
assert 1 == d.b
def test_setattr(self):
d = make_dict({"a": 1})
d.a = 2
assert {"a": 2} == d
def test_str_toString(self):
d = make_dict({})
d.toString = lambda: "STRING"
assert "STRING" == str(d)
================================================
FILE: tests/unit/test_bridge/test_jsobject.py
================================================
from unittest import mock
from browser import window
from vue.bridge import Object
from vue.bridge.vue_instance import VueInstance
from .mocks import ArrayMock
class TestJSObjectWrapper:
def test_vue(self):
class This:
def _isVue(self):
return True
assert isinstance(Object.from_js(This()), VueInstance)
def test_array(self):
with mock.patch.object(window.Array, "isArray", return_value=True):
obj = Object.from_js(ArrayMock(1, 2, 3))
assert [1, 2, 3] == obj
def test_dict(self):
assert {"a": 1, "b": 2} == Object.from_js({"a": 1, "b": 2})
================================================
FILE: tests/unit/test_bridge/test_list.py
================================================
import pytest
from vue.bridge.list import List
from .mocks import ArrayMock
class TestList:
def test_len(self):
assert 3 == len(List(ArrayMock(1, 2, 3)))
def test_getitem(self):
assert 3 == List(ArrayMock(1, 2, 3))[2]
assert [2, 3] == List(ArrayMock(1, 2, 3, 4))[1:3]
assert 3 == List(ArrayMock(1, 2, 3))[-1]
assert [2] == List(ArrayMock(1, 2, 3))[-2:-1]
def test_delitem(self):
l = List(ArrayMock(1, 2, 3))
del l[1]
assert [1, 3] == l
def test_delitem_range(self):
l = List(ArrayMock(1, 2, 3, 4))
del l[1:3]
assert [1, 4] == l
def test_setitem(self):
l = List(ArrayMock(1, 2, 3))
l[1] = 5
assert [1, 5, 3] == l
def test_setitem_range(self):
l = List(ArrayMock(1, 2, 3))
l[:] = [5]
assert [5] == l
def test_setitem_negative(self):
l = List(ArrayMock(1, 2, 3, 4))
l[-3:-1] = [8, 9]
assert [1, 8, 9, 4] == l
def test_iter(self):
assert [1, 2, 3] == [i for i in List(ArrayMock(1, 2, 3))]
def test_eq(self):
assert [1, 2, 3] == List(ArrayMock(1, 2, 3))
def test_mul(self):
assert [1, 2, 1, 2, 1, 2] == List(ArrayMock(1, 2)) * 3
def test_index(self):
assert 3 == List(ArrayMock(1, 2, 3, 4)).index(4)
def test_index_start(self):
assert 4 == List(ArrayMock(4, 1, 2, 3, 4)).index(4, start=1)
def test_index_not_in_list(self):
with pytest.raises(ValueError):
List(ArrayMock(1, 2, 3)).index(4)
def test_extend(self):
l = List(ArrayMock(1, 2))
l.extend([3, 4])
assert [1, 2, 3, 4] == l
def test_contains(self):
assert 3 in List(ArrayMock(1, 2, 3))
def test_count(self):
assert 2 == List(ArrayMock(1, 2, 1)).count(1)
def test_repr(self):
assert "[1, 2, 3]" == repr(List(ArrayMock(1, 2, 3)))
def test_str(self):
assert "[1, 2, 3]" == str(List(ArrayMock(1, 2, 3)))
def test_append(self):
l = List(ArrayMock(1, 2))
l.append(3)
assert [1, 2, 3] == l
def test_insert(self):
l = List(ArrayMock(1, 3))
l.insert(1, 2)
assert [1, 2, 3] == l
def test_remove(self):
l = List(ArrayMock(1, 2, 1, 3))
l.remove(1)
assert [2, 3] == l
def test_pop(self):
l = List(ArrayMock(1, 2, 3))
assert 3 == l.pop()
def test_sort(self):
l = List(ArrayMock(4, 3, 6, 1))
l.sort()
assert [1, 3, 4, 6] == l
def test_reverse(self):
l = List(ArrayMock(4, 3, 6, 1))
l.reverse()
assert [1, 6, 3, 4] == l
def test_set(self):
l = List(ArrayMock(4, 3, 6, 1))
l.__set__([1, 2, 3, 4])
assert [1, 2, 3, 4] == l
================================================
FILE: tests/unit/test_bridge/test_vue.py
================================================
from unittest import mock
import pytest
from .mocks import ArrayMock
from vue.bridge.vue_instance import VueInstance
from browser import window
class TestVue:
def test_getattr(self):
class This:
def __init__(self):
self.attribute = "value"
this = This()
vue = VueInstance(this)
assert "value" == vue.attribute
this.attribute = "new_value"
assert "new_value" == vue.attribute
def test_get_dollar_attribute(self):
class This:
def __getattr__(self, item):
if item == "$dollar":
return "DOLLAR"
return super().__getattribute__(item)
vue = VueInstance(This())
assert "DOLLAR" == vue.dollar
with pytest.raises(AttributeError):
assert not vue.no_dollar
def test_setattr(self):
class This:
def __init__(self):
self.attribute = False
def __getattr__(self, item):
if item == "$props":
return ()
return self.__getattribute__(item)
this = This()
vue = VueInstance(this)
vue.attribute = True
assert vue.attribute
assert this.attribute
def test_set_attribute_with_set(self):
class This:
def __init__(self):
self.list = ArrayMock([1, 2, 3, 4])
def __getattr__(self, item):
if item == "$props":
return ()
return self.__getattribute__(item)
this = This()
vue = VueInstance(this)
list_id = id(this.list)
with mock.patch.object(window.Array, "isArray", return_value=True):
vue.list = [0, 1, 2]
assert [0, 1, 2] == vue.list._data
assert list_id == id(this.list)
================================================
FILE: tests/unit/test_bridge/test_vuex.py
================================================
from vue.bridge.vuex_instance import VuexInstance
class Getter:
def __init__(self, **kwargs):
self.vars = kwargs
def __getattr__(self, item):
return self.vars[item]
class Callable:
def __init__(self):
self.args = None
def __call__(self, *args):
self.args = args
def test_get_state():
vuex = VuexInstance(state=dict(i=1))
assert 1 == vuex.i
def test_get_root_state():
vuex = VuexInstance(root_state=dict(i=1))
assert 1 == vuex.i
def test_set_state():
state = dict(i=0)
vuex = VuexInstance(state=state)
vuex.i = 1
assert 1 == state["i"]
def test_set_root_state():
state = dict(i=0)
vuex = VuexInstance(root_state=state)
vuex.i = 1
assert 1 == state["i"]
def test_access_getter():
vuex = VuexInstance(getters=Getter(i=1))
assert 1 == vuex.i
def test_access_root_getter():
vuex = VuexInstance(root_getters=Getter(i=1))
assert 1 == vuex.i
def test_access_comit():
c = Callable()
vuex = VuexInstance(commit=c)
vuex.commit("mutation", 1, a=0)
assert "mutation" == c.args[0]
assert {"args": (1,), "kwargs": {"a": 0}} == c.args[1]
def test_access_dispatch():
c = Callable()
vuex = VuexInstance(dispatch=c)
vuex.dispatch("action", 1, a=0)
assert "action" == c.args[0]
assert {"args": (1,), "kwargs": {"a": 0}} == c.args[1]
================================================
FILE: tests/unit/test_transformers/conftest.py
================================================
from unittest import mock
from vue.bridge.list import window as list_window
import pytest
class ArrayMock(list):
def __new__(cls, *args):
return list(args)
@staticmethod
def isArray(obj):
return isinstance(obj, list)
@pytest.fixture(scope="module", autouse=True)
def window_object():
with mock.patch.object(list_window, "Array", new=ArrayMock):
yield
================================================
FILE: tests/unit/test_transformers/test_component.py
================================================
from unittest import mock
from vue import *
def test_empty():
class Empty(VueComponent):
pass
assert {} == Empty.init_dict()
def test_method():
class Component(VueComponent):
def do(self, event):
return self, event
vue_dict = Component.init_dict()
assert "do" in vue_dict["methods"]
method = vue_dict["methods"]["do"]
with mock.patch("vue.decorators.base.javascript.this", return_value="THIS"):
assert "SELF", "EVENT" == method("EVENT")
def test_method_as_coroutine():
class Component(VueComponent):
async def co(self):
return self
assert "co" in Component.init_dict()["methods"]
def test_data():
class Component(VueComponent):
attribute = 1
assert {"attribute": 1} == Component.init_dict()["data"]("THIS")
def test_data_as_property():
class Component(VueComponent):
@data
def attribute(self):
return self
assert {"attribute": "THIS"} == Component.init_dict()["data"]("THIS")
def test_props():
class Component(VueComponent):
prop: int
init_dict = Component.init_dict()
assert {"prop": {"type": int, "required": True}} == init_dict["props"]
def test_props_with_default():
class Component(VueComponent):
prop: int = 100
init_dict = Component.init_dict()
props = {"prop": {"type": int, "default": 100}}
assert props == init_dict["props"]
def test_props_validator():
class Component(VueComponent):
prop: int
@validator("prop")
def is_lt_100(self, value):
return value < 100
init_dict = Component.init_dict()
assert not init_dict["props"]["prop"]["validator"](100)
assert init_dict["props"]["prop"]["validator"](99)
def test_template():
class Component(VueComponent):
template = "TEMPLATE"
init_dict = Component.init_dict()
assert "TEMPLATE" == init_dict["template"]
def test_lifecycle_hooks():
class Component(VueComponent):
def before_create(self):
return self
def created(self):
return self
def before_mount(self):
return self
def mounted(self):
return self
def before_update(self):
return self
def updated(self):
return self
def before_destroy(self):
return self
def destroyed(self):
return self
init_dict = Component.init_dict()
assert "beforeCreate" in init_dict
assert "created" in init_dict
assert "beforeMount" in init_dict
assert "mounted" in init_dict
assert "beforeUpdate" in init_dict
assert "updated" in init_dict
assert "beforeDestroy" in init_dict
assert "destroyed" in init_dict
def test_customize_model():
class Component(VueComponent):
model = Model(prop="prop", event="event")
init_dict = Component.init_dict()
assert {"prop": "prop", "event": "event"} == init_dict["model"]
def test_filter():
class Component(VueComponent):
@staticmethod
@filters
def lower_case(value):
return value.lower()
init_dict = Component.init_dict()
assert "abc" == init_dict["filters"]["lower_case"]("Abc")
def test_watch():
class Component(VueComponent):
@watch("data")
def lower_case(self, new, old):
return old, new
init_dict = Component.init_dict()
result = init_dict["watch"]["data"]["handler"]("new", "old")
assert "new", "old" == result
def test_watch_deep():
class Component(VueComponent):
@watch("data", deep=True)
def lower_case(self, new, old):
return new, old
init_dict = Component.init_dict()
assert init_dict["watch"]["data"]["deep"]
def test_watch_immediate():
class Component(VueComponent):
@watch("data", immediate=True)
def lower_case(self, new, old):
return new, old
init_dict = Component.init_dict()
assert init_dict["watch"]["data"]["immediate"]
def test_function_directive():
class Component(VueComponent):
@staticmethod
@directive
def focus(el, binding, vnode, old_vnode):
return el, binding, vnode, old_vnode
init_dict = Component.init_dict()
res = ["el", "binding", "vnode", "old_vnode"]
assert res == init_dict["directives"]["focus"](
"el", "binding", "vnode", "old_vnode"
)
def test_full_directive_different_hooks():
class Component(VueComponent):
@staticmethod
@directive("focus")
def bind():
return "bind"
@staticmethod
@directive("focus")
def inserted():
return "inserted"
@staticmethod
@directive("focus")
def update():
return "update"
@staticmethod
@directive("focus")
def component_updated():
return "componentUpdated"
@staticmethod
@directive("focus")
def unbind():
return "unbind"
init_dict = Component.init_dict()
directive_map = init_dict["directives"]["focus"]
for fn_name in ("bind", "inserted", "update", "componentUpdated", "unbind"):
assert fn_name == directive_map[fn_name]()
def test_full_directive_single_hook():
class Component(VueComponent):
@staticmethod
@directive("focus", "bind", "inserted", "update", "component_updated", "unbind")
def hook():
return "hook"
init_dict = Component.init_dict()
directive_map = init_dict["directives"]["focus"]
for fn_name in ("bind", "inserted", "update", "componentUpdated", "unbind"):
assert "hook" == directive_map[fn_name]()
def test_directive_replace_dash():
class Component(VueComponent):
@staticmethod
@directive
def focus_dashed(el, binding, vnode, old_vnode):
return el, binding, vnode, old_vnode
init_dict = Component.init_dict()
assert "focus-dashed" in init_dict["directives"]
def test_mixins():
class Component(VueComponent):
mixins = [{"created": "fn"}]
assert [{"created": "fn"}] == Component.init_dict()["mixins"]
def test_vuepy_mixin():
class MyMixin(VueMixin):
pass
class Component(VueComponent):
mixins = [MyMixin]
assert [{}] == Component.init_dict()["mixins"]
def test_render_function():
class Component(VueComponent):
def render(self, create_element):
pass
assert "render" in Component.init_dict()
def test_attributes_from_base_class():
class Component(VueComponent):
template = "TEMPLATE"
class SubComponent(Component):
pass
assert "TEMPLATE" == SubComponent.init_dict()["template"]
def test_extends():
class Component(VueComponent):
template = "TEMPLATE"
class SubComponent(Component):
extends = True
assert {"template": "TEMPLATE"} == SubComponent.init_dict()["extends"]
def test_template_merging():
class Base(VueComponent):
template = "BASE {}
" class Middle(Base): template_slots = "MIDDLE {}" class Sub(Middle): template_slots = "SUB" assert "BASE MIDDLE SUB
" == Sub.init_dict()["template"] def test_template_merging_with_slots(): class Base(VueComponent): template_slots = {"pre": "DEFAULT", "post": "DEFAULT"} template = "{pre} {} {post}
" class WithSlots(Base): template_slots = {"pre": "PRE", "default": "SUB"} class WithDefault(Base): template_slots = "SUB" assert "PRE SUB DEFAULT
" == WithSlots.init_dict()["template"] assert "DEFAULT SUB DEFAULT
" == WithDefault.init_dict()["template"] def test_components(): class Component(VueComponent): components = [{"created": "fn"}] assert [{"created": "fn"}] == Component.init_dict()["components"] def test_vuepy_components(): class SubComponent(VueComponent): pass class Component(VueComponent): components = [SubComponent] assert [{}] == Component.init_dict()["components"] ================================================ FILE: tests/unit/test_transformers/test_router.py ================================================ from unittest.mock import Mock from vue import * class TestVueRoute: def test_path_and_component(self): route = VueRoute("/path", VueComponent) assert route == {"path": "/path", "component": VueComponent.init_dict()} def test_path_and_components(self): route = VueRoute( "/path", components={"default": VueComponent, "named": VueComponent} ) assert route == { "path": "/path", "components": { "default": VueComponent.init_dict(), "named": VueComponent.init_dict(), }, } def test_path_and_components_and_children(self): route = VueRoute( "/path", VueComponent, children=[ VueRoute("/path", VueComponent), VueRoute("/path2", VueComponent), ], ) assert route == { "path": "/path", "component": VueComponent.init_dict(), "children": [ {"path": "/path", "component": VueComponent.init_dict()}, {"path": "/path2", "component": VueComponent.init_dict()}, ], } def test_path_and_redirect(self): route = VueRoute("/path", redirect="/path2") assert route == {"path": "/path", "redirect": "/path2"} class TestVueRouter: def test_routes(self): class Router(VueRouter): routes = [VueRoute("/path", VueComponent)] routes = Router.init_dict()["routes"] assert routes == [{"path": "/path", "component": VueComponent.init_dict()}] def test_custom_router(self): router_class_mock = Mock() router_class_mock.new.return_value = "CustomRouter" class Router(VueRouter): RouterClass = router_class_mock router = Router() assert router == "CustomRouter" router_class_mock.new.assert_called_with(Router.init_dict()) ================================================ FILE: tests/unit/test_transformers/test_store.py ================================================ from vue import * from vue.bridge import VuexInstance def test_state(): class Store(VueStore): attribute = 1 assert {"attribute": 1} == Store.init_dict()["state"] def test_mutation(): class Store(VueStore): @mutation def mutation(self, payload): return self, payload store, arg = Store.init_dict()["mutations"]["mutation"]({}, {"args": (2,)}) assert 2 == arg assert isinstance(store, VuexInstance) def test_action(): class Context: def __init__(self): self.state = {} self.getters = {} self.rootState = {} self.rootGetters = {} self.commit = None self.dispatch = None class Store(VueStore): @action def action(self, payload): return self, payload store, arg = Store.init_dict()["actions"]["action"](Context(), {"args": (2,)}) assert 2 == arg assert isinstance(store, VuexInstance) def test_getter(): class Store(VueStore): @staticmethod @getter def getter(self): return self vuex = Store.init_dict()["getters"]["getter"]({}, {}) assert isinstance(vuex, VuexInstance) def test_getter_method(): class Store(VueStore): @staticmethod @getter def getter(self, value): return self, value vuex, value = Store.init_dict()["getters"]["getter"]({}, {})(3) assert isinstance(vuex, VuexInstance) assert 3 == value def test_plugin_registration(): class Store(VueStore): plugins = [1] assert [1] == Store.init_dict()["plugins"] ================================================ FILE: tests/unit/test_utils.py ================================================ import pytest from unittest import mock from vue import utils from vue.utils import * @pytest.fixture def fix_load_and_window(): utils.CACHE.clear() class WindowMock: def __getattr__(self, item): return item class LoadMock: def __init__(self): self.call_count = 0 def __call__(self, path): self.call_count += 1 path, mods = path.split(";") mods = mods.split(",") for mod in mods: if mod: setattr(WindowMock, mod, mod) with mock.patch.object(utils, "load", new=LoadMock()), mock.patch.object( utils, "window", new=WindowMock ): yield @pytest.mark.usefixtures("fix_load_and_window") class TestJsLoad: def test_single(self): assert "a" == js_load("path;a") def test_multiple(self): assert {"a": "a", "b": "b"} == js_load("path;a,b") def test_different(self): assert "a" == js_load("first;a") assert "b" == js_load("second;b") assert 2 == utils.load.call_count def test_using_cache(self): assert "a" == js_load("path;a") assert "a" == js_load("path;a") assert 1 == utils.load.call_count def test_none(self): assert js_load("path;") is None def test_ignore_dollar(self): assert js_load("path;$test") is None class TestJsLib: def test_getattr_of_window(self): class WindowMock: attribute = "ATTRIBUTE" with mock.patch.object(utils, "window", new=WindowMock): assert "ATTRIBUTE" == js_lib("attribute") def test_get_default(self): class AttributeWithDefault: default = "DEFAULT" def __dir__(self): return ["default"] class WindowMock: attribute = AttributeWithDefault() with mock.patch.object(utils, "window", new=WindowMock): assert "DEFAULT" == js_lib("attribute") ================================================ FILE: tests/unit/test_vue.py ================================================ from contextlib import contextmanager from unittest import mock import pytest from vue import Vue, VueComponent, VueDirective, VueMixin from vue.bridge.dict import window @pytest.fixture(autouse=True) def window_object(): with mock.patch.object(window, "Object", new=dict): yield class VueMock(mock.MagicMock): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.init_dict = None self.register_name = None self.directive_name = None self._directive = None @contextmanager def new(self): with mock.patch("vue.vue.window.Vue.new", new=self) as new: yield self self.init_dict = new.call_args[0][0] @contextmanager def component(self): with mock.patch("vue.vue.window.Vue.component", new=self) as component: component.side_effect = lambda *args, **kwargs: self.init_dict yield self self.init_dict = ( component.call_args[0][1] if len(component.call_args[0]) > 1 else component ) self.register_name = component.call_args[0][0] @contextmanager def directive(self): with mock.patch("vue.vue.window.Vue.directive", new=self) as drctv: drctv.side_effect = lambda *args, **kwargs: self._directive yield self self.directive_name = drctv.call_args[0][0] self._directive = drctv.call_args[0][1] if len(drctv.call_args[0]) > 1 else None @contextmanager def filter(self): with mock.patch("vue.vue.window.Vue.filter", new=self) as flt: yield self flt._filter_name = flt.call_args[0][0] flt._filter = flt.call_args[0][1] @contextmanager def mixin(self): with mock.patch("vue.vue.window.Vue.mixin", new=self) as mixin: yield self mixin.init_dict = mixin.call_args[0][0] @contextmanager def use(self): with mock.patch("vue.vue.window.Vue.use", new=self) as use: yield self use.plugin = use.call_args[0][0] class TestVueComponent: def test_el(self): class Component(VueComponent): pass with VueMock().new() as new: Component("app") assert "app" == new.init_dict["el"] def test_props_data(self): class Component(VueComponent): prop: str with VueMock().new() as new: Component("app", props_data={"prop": "PROP"}) assert {"prop": "PROP"} == new.init_dict["propsData"] def test_register(self): class Component(VueComponent): pass with VueMock().component() as component: Component.register() assert "Component" == component.register_name with VueMock().component() as component: Component.register("new-name") assert "new-name" == component.register_name class TestVue: def test_directive(self): class Drctv(VueDirective): def bind(self): pass with VueMock().directive() as dirctv: Vue.directive("directive", Drctv) assert "directive" == dirctv.directive_name assert "bind" in dirctv._directive def test_directive_with_implicit_name(self): class Drctv(VueDirective): def bind(self): pass with VueMock().directive() as dirctv: Vue.directive(Drctv) assert "drctv" == dirctv.directive_name assert "bind" in dirctv._directive def test_function_directive(self): def function_directive(a): return a with VueMock().directive() as dirctv: Vue.directive("my-directive", function_directive) assert "my-directive" == dirctv.directive_name assert "a" == dirctv._directive("a") def test_function_directive_with_implicit_name(self): def function_directive(a): return a with VueMock().directive() as dirctv: Vue.directive(function_directive) assert "function_directive" == dirctv.directive_name assert "a" == dirctv._directive("a") def test_directive_getter(self): with VueMock().directive() as drctv: drctv._directive = "DIRECTIVE" drctv.directive_name = "my-directive" assert "DIRECTIVE" == Vue.directive("my-durective") def test_filter(self): with VueMock().filter() as filter_mock: Vue.filter("my_filter", lambda val: "filtered({})".format(val)) assert "my_filter" == filter_mock._filter_name assert "filtered(value)" == filter_mock._filter("value") def test_filter_use_function_name(self): def flt(v): return "filtered({})".format(v) with VueMock().filter() as filter_mock: Vue.filter(flt) assert "flt" == filter_mock._filter_name assert "filtered(value)" == filter_mock._filter("value") def test_mixin(self): class Mixin(VueMixin): def created(self): return "created" with VueMock().mixin() as mixin_mock: Vue.mixin(Mixin) assert "created" == mixin_mock.init_dict["created"]() def test_use(self): with VueMock().use() as use: Vue.use("Plugin") assert "Plugin" == use.plugin def test_component(self): with VueMock().component() as component: Vue.component("my-component", {"a": 0}) assert {"a": 0} == component.init_dict assert "my-component" == component.register_name def test_vuepy_component(self): class MyComponent(VueComponent): pass with VueMock().component() as component: Vue.component("my-component", MyComponent) assert {} == component.init_dict assert "my-component" == component.register_name def test_vuepy_component_implicit_naming(self): class MyComponent(VueComponent): pass with VueMock().component() as component: Vue.component(MyComponent) assert {} == component.init_dict assert "MyComponent" == component.register_name def test_component_getter(self): with VueMock().component() as comp: comp.init_dict = {"a": 0} component = Vue.component("my-component") assert {"a": 0} == component ================================================ FILE: vue/__init__.py ================================================ from .__version__ import __version__ try: from .vue import VueComponent, VueMixin, Vue, VueDirective, VuePlugin from .store import VueStore, VueStorePlugin from .router import VueRouter, VueRoute from .decorators import ( computed, validator, directive, filters, watch, data, Model, custom, mutation, action, getter, ) except ModuleNotFoundError: pass ================================================ FILE: vue/bridge/__init__.py ================================================ from .object import Object from .list import List from .dict import Dict from .vue_instance import VueInstance from .vuex_instance import VuexInstance ================================================ FILE: vue/bridge/dict.py ================================================ from browser import window from .object import Object class Dict(Object): @staticmethod def __unwraps__(): return dict @staticmethod def __can_wrap__(obj): return (str(type(obj)) == "