Feature/#250 wait style

Gopkg.toml

@@ -45,6 +45,10 @@
   name = "github.com/PuerkitoBio/goquery"
   version = "1.5.0"
 
+[[constraint]]
+  name = "github.com/gorilla/css"
+  version = "v1.0.0"
+
 [[constraint]]
   name = "github.com/gofrs/uuid"
   version = "3.1.2"

e2e/pages/dynamic/components/pages/events/appearable.js

@@ -2,23 +2,52 @@ import random from "../../../utils/random.js";
 
 const e = React.createElement;
 
-function render(id) {
-    return  e("span", { id: `${id}-content` }, ["Hello world"]);
+function render(id, props = {}) {
+    return  e("span", { id: `${id}-content`, ...props }, ["Hello world"]);
 }
 
 export default class AppearableComponent extends React.PureComponent {
     constructor(props) {
         super(props);
 
+        let element = null;
+
+        if (props.appear) {
+            if (props.useStyle) {
+                element = render(props.id, { style: {display: "none"}})
+            }
+        } else {
+            if (props.useStyle) {
+                element = render(props.id, { style: {display: "block" }})
+            } else {
+                element = render(props.id)
+            }
+        }
+
         this.state = {
-            element: props.appear === true ? null : render(props.id)
+            element
         };
     }
 
     handleClick() {
         setTimeout(() => {
+            const props = this.props;
+            let element = null;
+
+            if (props.appear) {
+                if (props.useStyle) {
+                    element = render(props.id, { style: {display: "block" }})
+                } else {
+                    element = render(props.id)
+                }
+            } else {
+                if (props.useStyle) {
+                    element = render(props.id, { style: {display: "none"}})
+                }
+            }
+
             this.setState({
-                element: this.props.appear === true ? render(this.props.id) : null
+                element,
             })
         }, random())
     }

e2e/pages/dynamic/components/pages/events/index.js

@@ -48,13 +48,31 @@ export default class EventsPage extends React.Component {
                         title: "Appearable"
                     })
                 ]),
+            ]),
+            e("div", { className: "row" }, [
                 e("div", { className: "col-lg-4"}, [
                     e(Appearable, {
                         id: "wait-no-element",
                         appear: false,
                         title: "Disappearable"
                     })
-                ])
+                ]),
+                e("div", { className: "col-lg-4"}, [
+                    e(Appearable, {
+                        id: "wait-style",
+                        appear: true,
+                        title: "Appearable with style",
+                        useStyle: true,
+                    })
+                ]),
+                e("div", { className: "col-lg-4"}, [
+                    e(Appearable, {
+                        id: "wait-no-style",
+                        appear: false,
+                        title: "Disappearable",
+                        useStyle: true,
+                    })
+                ]),
             ])
         ])
     }

e2e/tests/el_attrs_get.d.fql

@@ -0,0 +1,11 @@
+LET url = @dynamic + "?redirect=/events"
+LET doc = DOCUMENT(url, true)
+LET pageSelector = "#page-events"
+LET elemSelector = "#wait-no-style-content"
+
+WAIT_ELEMENT(doc, pageSelector)
+
+LET el = ELEMENT(doc, elemSelector)
+LET attrs = ATTR_GET(el, "style")
+
+RETURN EXPECT("display: block;", attrs.style)

e2e/tests/el_attrs_remove.d.fql

@@ -0,0 +1,17 @@
+LET url = @dynamic + "?redirect=/events"
+LET doc = DOCUMENT(url, true)
+LET pageSelector = "#page-events"
+LET elemSelector = "#wait-no-style-content"
+
+WAIT_ELEMENT(doc, pageSelector)
+LET el = ELEMENT(doc, elemSelector)
+
+LET prev = el.attributes.style
+
+ATTR_REMOVE(el, "style")
+
+WAIT(1000)
+
+LET curr = el.attributes.style
+
+RETURN prev == "display: block;" && curr == NONE ? "" : "expected attribute to be removed"

e2e/tests/el_attrs_set.d.fql

@@ -0,0 +1,17 @@
+LET url = @dynamic + "?redirect=/events"
+LET doc = DOCUMENT(url, true)
+LET pageSelector = "#page-events"
+LET elemSelector = "#wait-no-style-content"
+
+WAIT_ELEMENT(doc, pageSelector)
+
+LET el = ELEMENT(doc, elemSelector)
+LET prev = el.style
+
+ATTR_SET(el, "style", "color: black;")
+
+WAIT(1000)
+
+LET curr = el.style
+
+RETURN curr.color == "black" ? "" : "styles should be updated"

e2e/tests/el_attrs_set_bulk.d.fql

@@ -0,0 +1,14 @@
+LET url = @dynamic + "?redirect=/events"
+LET doc = DOCUMENT(url, true)
+LET pageSelector = "#page-events"
+LET elemSelector = "#wait-no-style-content"
+
+WAIT_ELEMENT(doc, pageSelector)
+
+LET el = ELEMENT(doc, elemSelector)
+
+ATTR_SET(el, { style: "color: black;", "data-ferret-x": "test" })
+
+WAIT(1000)
+
+RETURN el.style.color == "black" && el.attributes["data-ferret-x"] == "test" ? "" : "styles should be updated"

e2e/tests/el_style_get.d.fql

@@ -0,0 +1,11 @@
+LET url = @dynamic + "?redirect=/events"
+LET doc = DOCUMENT(url, true)
+LET pageSelector = "#page-events"
+LET elemSelector = "#wait-no-style-content"
+
+WAIT_ELEMENT(doc, pageSelector)
+
+LET el = ELEMENT(doc, elemSelector)
+LET val = STYLE_GET(el, "display")
+
+RETURN val.display == "block" ? "" : "could not get style values"

e2e/tests/el_style_remove.d.fql

@@ -0,0 +1,17 @@
+LET url = @dynamic + "?redirect=/events"
+LET doc = DOCUMENT(url, true)
+LET pageSelector = "#page-events"
+LET elemSelector = "#wait-no-style-content"
+
+WAIT_ELEMENT(doc, pageSelector)
+LET el = ELEMENT(doc, elemSelector)
+
+LET prev = el.style
+
+STYLE_REMOVE(el, "display")
+
+WAIT(1000)
+
+LET curr = el.style
+
+RETURN prev.display == "block" && curr.display == NONE ? "" : "expected style to be removed"

e2e/tests/el_style_set.d.fql

@@ -0,0 +1,17 @@
+LET url = @dynamic + "?redirect=/events"
+LET doc = DOCUMENT(url, true)
+LET pageSelector = "#page-events"
+LET elemSelector = "#wait-no-style-content"
+
+WAIT_ELEMENT(doc, pageSelector)
+
+LET el = ELEMENT(doc, elemSelector)
+LET prev = el.style
+
+STYLE_SET(el, "color", "black")
+
+WAIT(1000)
+
+LET curr = el.style
+
+RETURN curr.color == "black" ? "" : "styles should be updated"

e2e/tests/el_style_set_bulk.d.fql

@@ -0,0 +1,17 @@
+LET url = @dynamic + "?redirect=/events"
+LET doc = DOCUMENT(url, true)
+LET pageSelector = "#page-events"
+LET elemSelector = "#wait-no-style-content"
+
+WAIT_ELEMENT(doc, pageSelector)
+
+LET el = ELEMENT(doc, elemSelector)
+LET prev = el.style
+
+STYLE_SET(el, { color: "black", "min-width": "100px", "background-color": "#11111" })
+
+WAIT(1000)
+
+LET curr = el.style
+
+RETURN curr.color == "black" && curr["min-width"] == "100px" && curr["background-color"] == "#11111" ? "" : "styles should be updated"