another long js test

Author: egonSchiele

salty.cabal

@@ -4,7 +4,7 @@ cabal-version: 1.12
 --
 -- see: https://github.com/sol/hpack
 --
--- hash: de87688a8c0ef5fc7533bb54220ff935324c137d25dea6745d4d70ec6fd6e936
+-- hash: 8edb419b4c8d90e40ed1a6a5aa2587cab392fe2baa01d8b36cacff164c458a78
 
 name:           salty
 version:        0.1.0.0
@@ -76,7 +76,8 @@ test-suite salty-test
   main-is: Spec.hs
   other-modules:
       JsSpec
-      LongExamples.Js.SimpleWebPage.Pages
+      LongExamples.Js.SimpleWebPage.Controller
+      LongExamples.Js.SimpleWebPage.Nav
       PhpSpec
       TestUtils
       Paths_salty

test/LongExamples/Js/SimpleWebPage/Pages.hs test/LongExamples/Js/SimpleWebPage/Controller.hs

@@ -1,5 +1,5 @@
 {-# LANGUAGE QuasiQuotes #-}
-module LongExamples.Js.SimpleWebPage.Pages where
+module LongExamples.Js.SimpleWebPage.Controller where
 import Text.RawString.QQ
 
 import Test.HUnit

test/LongExamples/Js/SimpleWebPage/Nav.hs

@@ -0,0 +1,107 @@
+{-# LANGUAGE QuasiQuotes #-}
+module LongExamples.Js.SimpleWebPage.Nav where
+import Text.RawString.QQ
+
+import Test.HUnit
+import Parser
+import Types
+import TestUtils
+
+tests = [
+  salty `matchesJs` expectedJs
+  ]
+
+
+salty = [r|import * as React from "react"
+
+class NavItem extends React.Component {
+  getClass := guard
+    | @props.selected == true -> "nav-link active"
+    | _ -> "nav-link"
+
+  render := {
+    li.new({className: "nav-item"}) do
+      a.new({
+      href: "#",
+      className: @getClass(),
+      key: @props.navId,
+      children: @props.title,
+      onClick: (\e -> {
+        e.preventDefault()
+        @props.navItemClicked(@props.navId)
+      })
+      })
+    end
+  }
+}
+
+export default class Nav extends React.Component where
+constructor props := {
+  super(props)
+  @navItemClicked = props.navItemClicked
+  @state = {
+    steps: [
+      "Shop preferences",
+      "Name your shop",
+      "Stock your shop",
+      "How you'll get paid",
+      "Set up billing"
+    ]
+  }
+}
+
+render := {
+  ul.new({className: "nav nav-pills"}) do
+    @@steps.map(\step i -> {
+      NavItem.new({
+        navId: i,
+        title: step,
+        selected: (i == @props.selected),
+        navItemClicked: (\id -> {
+          @setState({
+            selected: id
+          }, (\_ -> @navItemClicked(id))
+        )
+        })
+      })
+    })
+  end
+}
+|]
+
+expectedJs = [r|import * as React from "react";
+class NavItem extends React.Component {
+  getClass() {
+    if (this.props.selected === true) {
+      return "nav-link active";
+    } else {
+      return "nav-link";
+    }
+  }
+  render() {
+    return (<li className="nav-item"><a href="#" className={this.getClass()} key={this.props.navId} children={this.props.title} onClick={((e) => {
+      e.preventDefault();
+      return this.props.navItemClicked(this.props.navId);
+    })}></a></li>);
+  }
+}
+ export default class Nav extends React.Component {
+  constructor(props) {
+    super(props);
+    this.navItemClicked = props.navItemClicked;
+    this.state = {
+      "steps": ["Shop preferences", "Name your shop", "Stock your shop", "How you'll get paid", "Set up billing"]
+  }
+}
+render() {
+  return (<ul className="nav nav-pills">{this.state.steps.map((step, i) => {
+    return <NavItem navId={i} title={step} selected={(i === this.props.selected)} navItemClicked={((id) => {
+      return this.setState({
+        "selected": id
+      }, (() => {
+        return this.navItemClicked(id);
+      }));
+    })}></NavItem>
+  })}</ul>);
+}
+}|]

test/Spec.hs

@@ -2,12 +2,14 @@
 import Test.HUnit
 import qualified PhpSpec
 import qualified JsSpec
-import qualified LongExamples.Js.SimpleWebPage.Pages
+import qualified LongExamples.Js.SimpleWebPage.Controller
+import qualified LongExamples.Js.SimpleWebPage.Nav
 
 allTests = TestList $
                  PhpSpec.phpTests
               ++ JsSpec.jsTests
-              ++ LongExamples.Js.SimpleWebPage.Pages.tests
+              ++ LongExamples.Js.SimpleWebPage.Controller.tests
+              ++ LongExamples.Js.SimpleWebPage.Nav.tests
 
 main :: IO ()
 main = runTestTT allTests >> return ()