diff --git a/ChangeLog.md b/ChangeLog.md --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,3 +1,31 @@ +# 1.0.0 + +* Bindings to react-intl (http://formatjs.io/react/) for i18n support. This is useful even if your app is + a single language, as it allows easy number, date, relative time, and message formatting like pluralization. + It also supports multiple locales and translations of messages. + +* The type of `callback` has extended to allow arbitrary function properties to be + passed to foreign classes. The old `callback` accepted callbacks of type `Aeson.Value -> handler` + while the new callback allows functions of any number of arguments, as long as each argument implements + `FromJSRef`. Since `Aeson.Value` implements `FromJSRef`, any existing calls to `callback` should still work. + This change also caused some changes to types in `React.Flux.Internal`. + +* Add a function `nestedProperty` to `React.Flux.PropertiesAndEvents` to create nested properties. + +* Support for React 0.14 + * React 0.13 and 0.14 are both supported from the same Haskell code, the differences are handled internally. + * If you are using React 0.14, you will have to include `react-dom.min.js` and make sure the + `ReactDOM` variable is protected by closure similar to how `React` must be protected. + * `initializeTouchEvents` has been removed from React 0.14, so you can remove the call from your app. + * The SVG `image_` tag is now supported by `React.Flux.DOM`. + * The new media events on images and videos don't have direct Haskell equivalents, instead the handlers can be + created by the new `on` function in `React.Flux.PropertiesAndEvents`. + * The CSS transitions in `React.Flux.Addons.React` were made simpler by just passing the raw + properties. There were several changes to the possible properties in React 0.14 and covering them all + from Haskell is not worth it when the properties can easily be created directly. + +* `reactRenderToString` was added to allow executing a react-flux application using node. + # 0.9.4 * Fix to build with latest ghcjs-base (requires at least aaa4d59117f37d1b9c60a154a9128b3bcc6301cd) diff --git a/README.md b/README.md --- a/README.md +++ b/README.md @@ -46,23 +46,25 @@ echo "compiler: ghcjs" > cabal.config cabal configure -fexample -ftest-client cabal build -cd example/todo -make ~~~ -The above builds the TODO application, compresses it with closure, and builds the test client. +The above builds the TODO application and the test client. Next, install [selenium-server-standalone](http://www.seleniumhq.org/download/) (also from [npm](https://www.npmjs.com/package/selenium-server-standalone-jar)). Then, build the [hspec-webdriver](https://hackage.haskell.org/package/hspec-webdriver) test suite using GHC (not -GHCJS). I use stack for this, although you can use cabal too if you like. +GHCJS). I use stack for this, although you can use cabal too if you like. Also, at the moment, the prerelease +of the react-intl library must be installed from npm. ~~~ -cd test/spec +cd test/client +npm install react-intl@next +cd ../spec stack build ~~~ -Finally, start selenium-server-standalone and execute the test suite. It must be started from the -`test/spec` directory, otherwise it does not find the correct javascript files. +Finally, start selenium-server-standalone and execute the test suite. Make sure you also have +closure installed, since the test suite will compress the todo app before testing it. It must be +started from the `test/spec` directory, otherwise it does not find the correct javascript files. ~~~ stack exec react-flux-spec diff --git a/example/README.md b/example/README.md --- a/example/README.md +++ b/example/README.md @@ -10,7 +10,7 @@ When reading the code for the example application, you should start with `TodoStore.hs`. Next, look at `TodoDispatcher.hs` and `TodoViews.hs`. Finally, you can look at `TodoComponents.hs` and -`Main.hs`. +`Main.hs` and `NodeMain.hs`. ### Build @@ -21,7 +21,9 @@ cabal build ~~~ -The result of this build is a file `dist/build/todo/todo.jsexe/all.js`. There is a file +### TODO in the browser + +A result of this build is a file `dist/build/todo/todo.jsexe/all.js`. There is a file `example/todo/todo-dev.html` which loads this `all.js` file directly from the `dist` directory, so you can open `todo-dev.html` after building. @@ -35,7 +37,18 @@ ~~~ This produces a file `js-build/todo.min.js` which is only 500 kibibytes which when compressed with -gzip is 124 kibibytes. +gzip is 124 kibibytes. You can then open `example/todo/todo.html` which loads this minimized javascript. + +### TODO in node + +`NodeMain.hs` is a separate main module which instead of rendering the TODO example application into the DOM, +it renders it to a string and then displays it. To execute this, run + +~~~ +cd example/todo +npm install react@0.13.3 +node run-in-node.js +~~~ ### Testing diff --git a/example/todo/Makefile b/example/todo/Makefile --- a/example/todo/Makefile +++ b/example/todo/Makefile @@ -3,9 +3,9 @@ js-build/todo.js: ../../dist/build/todo/todo.jsexe/all.js mkdir -p js-build - echo "(function(global,React) {" > js-build/todo.js + echo "(function(global,React,ReactDOM) {" > js-build/todo.js cat ../../dist/build/todo/todo.jsexe/all.js >> js-build/todo.js - echo "})(this, window['React']);" >> js-build/todo.js + echo "})(window, window['React'], window['ReactDOM']);" >> js-build/todo.js sed -i 's/goog.provide.*//' js-build/todo.js sed -i 's/goog.require.*//' js-build/todo.js # https://github.com/ghcjs/shims/issues/21 diff --git a/example/todo/NodeMain.hs b/example/todo/NodeMain.hs new file mode 100644 --- /dev/null +++ b/example/todo/NodeMain.hs @@ -0,0 +1,6 @@ +import React.Flux +import TodoViews +import qualified Data.Text.IO as T + +main :: IO () +main = reactRenderToString True todoApp () >>= T.putStrLn diff --git a/example/todo/run-in-node.js b/example/todo/run-in-node.js new file mode 100644 --- /dev/null +++ b/example/todo/run-in-node.js @@ -0,0 +1,2 @@ +React = require("react"); +require("../../dist/build/todo-node/todo-node.jsexe/all.js"); diff --git a/example/todo/todo-dev.html b/example/todo/todo-dev.html --- a/example/todo/todo-dev.html +++ b/example/todo/todo-dev.html @@ -7,7 +7,8 @@
- + + diff --git a/example/todo/todo.html b/example/todo/todo.html --- a/example/todo/todo.html +++ b/example/todo/todo.html @@ -7,7 +7,8 @@
- + + diff --git a/jsbits/callback.js b/jsbits/callback.js new file mode 100644 --- /dev/null +++ b/jsbits/callback.js @@ -0,0 +1,9 @@ +function hsreact$mk_arguments_callback(f) { + return function() { + var args = new Array(arguments.length); + for (var i = 0; i < arguments.length; i++) { + args[i] = arguments[i]; + } + f(args); + }; +} diff --git a/jsbits/views.js b/jsbits/views.js --- a/jsbits/views.js +++ b/jsbits/views.js @@ -130,3 +130,14 @@ return React['createClass'](cl); } + +//React 0.14 introduced React.Children.toArray. Also, to be able to run template haskell splices, +//we need to defend againsg React not being defined. +var hsreact$children_to_array = typeof React !== "object" ? null : (React['Children']['toArray'] ? React['Children']['toArray'] : + (function (children) { + var ret = []; + React['Children']['forEach'](children, function(x) { + ret.push(x); + }); + return ret; + })); diff --git a/react-flux.cabal b/react-flux.cabal --- a/react-flux.cabal +++ b/react-flux.cabal @@ -1,5 +1,5 @@ name: react-flux -version: 0.9.4 +version: 1.0.0 synopsis: A binding to React based on the Flux application architecture for GHCJS category: Web homepage: https://bitbucket.org/wuzzeb/react-flux @@ -18,15 +18,16 @@ example/css/bg.png, example/todo/Makefile, example/todo/*.hs, - example/todo/*.html + example/todo/*.html, + example/todo/run-in-node.js, example/routing/*.hs, example/routing/*.html, - test/client/test-client.html, + test/client/*.html, + test/client/msgs/*.json, + test/client/msgs/*.xml, test/spec/react-flux-spec.cabal, - test/spec/Spec.hs, test/spec/stack.yaml, - test/spec/TestClientSpec.hs, - test/spec/TodoSpec.hs + test/spec/*.hs source-repository head type: mercurial @@ -44,7 +45,10 @@ hs-source-dirs: src ghc-options: -Wall default-language: Haskell2010 - js-sources: jsbits/views.js jsbits/store.js jsbits/export.js + js-sources: jsbits/views.js + jsbits/store.js + jsbits/export.js + jsbits/callback.js exposed-modules: React.Flux React.Flux.DOM @@ -53,6 +57,7 @@ React.Flux.Internal React.Flux.Addons.React React.Flux.Addons.Bootstrap + React.Flux.Addons.Intl other-modules: React.Flux.Views React.Flux.Store @@ -76,6 +81,10 @@ , mtl >= 2.1 , aeson >= 0.8 , text >= 1.2 + , time >= 1.5 + , unordered-containers + , bytestring + , template-haskell >= 2.10 if impl(ghcjs) build-depends: ghcjs-base @@ -93,7 +102,20 @@ , react-flux , deepseq -executable test-client +executable todo-node + if !flag(example) + Buildable: False + ghc-options: -Wall + + default-language: Haskell2010 + hs-source-dirs: example/todo + main-is: NodeMain.hs + build-depends: base + , react-flux + , deepseq + , text + +executable test-client-13 if !flag(test-client) Buildable: False ghc-options: -Wall @@ -101,9 +123,29 @@ default-language: Haskell2010 hs-source-dirs: test/client - main-is: TestClient.hs + other-modules: TestClient + main-is: TestClient13.hs build-depends: base , react-flux + , time + , deepseq + if impl(ghcjs) + build-depends: ghcjs-base + +executable test-client-14 + if !flag(test-client) + Buildable: False + ghc-options: -Wall + --cpp-options: -DGHCJS_BROWSER + + default-language: Haskell2010 + hs-source-dirs: test/client + other-modules: TestClient + main-is: TestClient14.hs + build-depends: base + , react-flux + , time + , deepseq if impl(ghcjs) build-depends: ghcjs-base diff --git a/src/React/Flux.hs b/src/React/Flux.hs --- a/src/React/Flux.hs +++ b/src/React/Flux.hs @@ -19,14 +19,25 @@ -- which calls 'reactRender' and initializes any AJAX load calls to the backend. The source package -- contains some . -- --- __Deployment__: Care has been taken to make sure closure with ADVANCED_OPTIMIZATIONS correctly --- minimizes a react-flux application. No externs are needed, instead all you need to do is provide --- or protect the @React@ variable. The TODO example does this as follows: +-- __Web Deployment__: 'reactRender' is used to render your application into the DOM. +-- Care has been taken to make sure closure with ADVANCED_OPTIMIZATIONS correctly +-- minimizes a react-flux application. No externs are needed, instead all you need to do is +-- protect the @React@ variable (and @ReactDOM@ if you are using version >= 0.14). The TODO example +-- does this as follows: -- --- >(function(global, React) { +-- >(function(global, React, ReactDOM) { -- >contents of all.js --- >})(this, window['React']); +-- >})(window, window['React'], window['ReactDOM']); -- +-- __Node Deployment__: 'reactRenderToString' is used to render the application to a string when +-- running in node (not the browser). To execute with node, you need to get @global.React@ (and +-- @global.ReactDOM@ for 0.14) before executing all.js. The TODO example application does this by +-- creating a file @run-in-node.js@ with the contents +-- +-- >React = require("react"); +-- >ReactDOM = require("react-dom"); +-- >require("../../dist/build/todo-node/todo-node.jsexe/all.js"); +-- -- __Testing__: I use the following approach to test my react-flux application. First, I use unit -- testing to test the dispatcher and store 'transform' functions. Since the dispatcher and the -- store transform are just data manipulation, existing Haskell tools like hspec, QuickCheck, @@ -77,12 +88,14 @@ -- * Main , reactRender + , reactRenderToString -- * Performance -- $performance ) where import Data.Typeable (Typeable) +import Data.Text (Text) import React.Flux.Views import React.Flux.DOM @@ -91,14 +104,15 @@ import React.Flux.Store #ifdef __GHCJS__ -import GHCJS.Types (JSString) +import GHCJS.Types (JSString, JSRef) +import GHCJS.Marshal (fromJSRef) #endif ---------------------------------------------------------------------------------------------------- -- reactRender has two versions ---------------------------------------------------------------------------------------------------- --- | Render your React application into the DOM. +-- | Render your React application into the DOM. Use this from your @main@ function, and only in the browser. reactRender :: Typeable props => String -- ^ The ID of the HTML element to render the application into. -- (This string is passed to @document.getElementById@) @@ -113,12 +127,46 @@ js_ReactRender e (toJSString htmlId) foreign import javascript unsafe - "React['render']($1, document.getElementById($2))" + "(typeof ReactDOM === 'object' ? ReactDOM : React)['render']($1, document.getElementById($2))" js_ReactRender :: ReactElementRef -> JSString -> IO () #else reactRender _ _ _ = return () + +#endif + +-- | Render your React application to a string using either @React.renderToString@ if the first +-- argument is false or @React.renderToStaticMarkup@ if the first argument is true. +-- Use this only on the server when running with node. +reactRenderToString :: Typeable props + => Bool -- ^ Render to static markup? If true, this won't create extra DOM attributes + -- that React uses internally. + -> ReactView props -- ^ A single instance of this view is created + -> props -- ^ the properties to pass to the view + -> IO Text + +#ifdef __GHCJS__ + +reactRenderToString includeStatic rc props = do + (e, _) <- mkReactElement id (return []) $ view rc props mempty + sRef <- (if includeStatic then js_ReactRenderStaticMarkup else js_ReactRenderToString) e + --return sRef + --return $ JSS.unpack sRef + mtxt <- fromJSRef sRef + maybe (error "Unable to convert string return to Text") return mtxt + +foreign import javascript unsafe + "(typeof ReactDOM === 'object' ? ReactDOM : React)['renderToString']($1)" + js_ReactRenderToString :: ReactElementRef -> IO JSRef + +foreign import javascript unsafe + "(typeof ReactDOM === 'object' ? ReactDOM : React)['renderToStaticMarkup']($1)" + js_ReactRenderStaticMarkup :: ReactElementRef -> IO JSRef + +#else + +reactRenderToString _ _ _ = return "" #endif diff --git a/src/React/Flux/Addons/Bootstrap.hs b/src/React/Flux/Addons/Bootstrap.hs --- a/src/React/Flux/Addons/Bootstrap.hs +++ b/src/React/Flux/Addons/Bootstrap.hs @@ -15,11 +15,18 @@ -- | A bootstrap . For example, -- -- >bootstrap_ "Alert" [ "bsStyle" $= "danger" --- > , callback "onDismiss" (const $ dispatch CloseAlert) +-- > , callback "onDismiss" $ dispatch CloseAlert -- > ] $ -- > p_ "Hello, World!" +-- > +-- >bootstrap_ "Nav" [ "activeKey" @= (1 :: Int) +-- > , callback "onSelect" $ \(i :: Int) -> dispatch $ TabChange i +-- > ] $ do +-- > bootstrap_ "NavItem" ["eventKey" @= (1 :: Int)] "Item 1" +-- > bootstrap_ "NavItem" ["eventKey" @= (2 :: Int)] "Item 2" +-- > bootstrap_ "NavItem" ["eventKey" @= (3 :: Int)] "Item 3" bootstrap_ :: String - -- ^ The component name. Uses @window['ReactBootstrap'][name]@ to find the class, so + -- ^ The component name. Uses @window[\'ReactBootstrap\'][name]@ to find the class, so -- the name can be anything exported to the @window.ReactBoostrap@ object. -> [PropertyOrHandler eventHandler] -- ^ Properties and callbacks to pass to the ReactBootstrap class. You can use 'callback' diff --git a/src/React/Flux/Addons/Intl.hs b/src/React/Flux/Addons/Intl.hs new file mode 100644 --- /dev/null +++ b/src/React/Flux/Addons/Intl.hs @@ -0,0 +1,582 @@ +-- | Bindings to the library, which allows easy formatting of +-- numbers, dates, times, relative times, pluralization, and translated messages. This library can +-- be used for formatting and pluralization even if you intend to present your application in a single +-- language and locale. +-- +-- These bindings are for the 2.0 version of ReactIntl which is currently just a +-- pre-release, and due to how react-flux works, it also requires React 0.14. For temporary documentation, +-- see . Because this is a binding to a +-- pre-release, the API below might change! I consider it unlikely, but if a change is required I will +-- violate the PVP and not increment the major number, just the minor number. +-- +-- To use these bindings, you need to provide the @ReactIntl@ variable. In the browser you can just +-- load the @react-intl.min.js@ script onto the page so that @window.ReactIntl@ exists. If you are +-- running in node, execute @ReactIntl = require(\"ReactIntl\");@ so that @global.ReactIntl@ +-- exists. When compiling with closure, protect the ReactIntl variable as follows: +-- +-- >(function(global, React, ReactDOM, ReactIntl) { +-- >contents of all.js +-- >})(window, window['React'], window['ReactDOM'], window['ReactIntl']); +-- +-- __Using with a single locale and no translations__. If you intend to present your application in +-- a single language, you can still use this module for formatting. Add a call to 'intlProvider_' +-- to the top of your app with a hard-coded locale and @Nothing@ for the messages. You can then use +-- anything in the /Formatting/ section like 'int_', 'relativeTo_', and 'message', where 'message' +-- will just always use the default message provided in the source code (helpful for templating). +-- If you want to specify the locale so dates and numbers are formatted in the user's locale, it is +-- strongly recommended to set the locale from the server based on the @Accept-Language@ header +-- and/or a user setting so that the page as a whole is consistint. I have the server set a +-- variable on @window@ for the locale to use, and then pass that locale into 'intlProvider_'. +-- +-- __Translations__. The react-intl philosophy is that messages should be defined in the source +-- code instead of kept in a separate file. To support translations, a tool (in this case Template +-- Haskell) is used to extract the messages from the source code into a file given to the +-- translators. The result of the translation is then used to replace the default message given in +-- the source code. +-- +-- 1. Use the functions in the /Formatting/ section like 'int_', 'relativeTo_', and 'message' +-- inside your rendering functions. +-- +-- 2. At the bottom of each file which contains messages, add a call to 'writeIntlMessages'. This +-- is a template haskell function which during compilation will produce a file containing all the +-- messages found within the haskell module. +-- +-- 3. Give these message files to your translators. The translation results will then need to be +-- converted into javascript files in the format expected by ReactIntl, which is a javascript +-- object with keys the 'MessageId's and value the translated message. For example, each translation +-- could result in a javascript file such as the following: +-- +-- @ +-- window.myMessages = window.myMessages || {}; +-- window.myMessages["fr-FR"] = { +-- "num_photos": "{name} {numPhotos, plural, =0 {n'a pas pris de photographie.} =1 {a pris une photographie.} other {a pris # photographies.}", +-- ... +-- }; +-- @ +-- +-- 4. Based on the @Accept-Language@ header and/or a user setting, the server includes the +-- appropriate translation javascript file and sets a variable on window containing the locale to +-- use. Note that no translation javascript file is needed if the default messages from the +-- source code should be used. +-- +-- @ +-- \ - - - diff --git a/test/client/test-client13.html b/test/client/test-client13.html new file mode 100644 --- /dev/null +++ b/test/client/test-client13.html @@ -0,0 +1,12 @@ + + + Test Client + + +
+ + + + + + diff --git a/test/client/test-client14.html b/test/client/test-client14.html new file mode 100644 --- /dev/null +++ b/test/client/test-client14.html @@ -0,0 +1,13 @@ + + + Test Client + + +
+ + + + + + + diff --git a/test/spec/Main.hs b/test/spec/Main.hs new file mode 100644 --- /dev/null +++ b/test/spec/Main.hs @@ -0,0 +1,10 @@ +module Main where + +import Test.Hspec +import System.Process +import qualified Spec + +main :: IO () +main = do + _ <- system "cd ../../example/todo && make" + hspec Spec.spec diff --git a/test/spec/Spec.hs b/test/spec/Spec.hs --- a/test/spec/Spec.hs +++ b/test/spec/Spec.hs @@ -1,1 +1,1 @@ -{-# OPTIONS_GHC -F -pgmF hspec-discover #-} +{-# OPTIONS_GHC -F -pgmF hspec-discover -optF --module-name=Spec #-} diff --git a/test/spec/TestClientSpec.hs b/test/spec/TestClientSpec.hs --- a/test/spec/TestClientSpec.hs +++ b/test/spec/TestClientSpec.hs @@ -5,6 +5,7 @@ import Control.Monad import Control.Monad.IO.Class (liftIO) import Data.List +--import Data.Time import qualified Data.Text as T import System.Directory (getCurrentDirectory) import Test.Hspec.WebDriver @@ -34,11 +35,37 @@ p <- findElem (ById "world") getText p `shouldReturn` (T.pack $ "Current props: " ++ props) +scuShouldBe :: [(Int, String)] -> WD () +scuShouldBe items = do + d <- findElem $ ById "should-component-update" + lis <- findElemsFrom d $ ByTag "li" + length lis `shouldBe` length items + forM_ (zip lis items) $ \(li,(i, s)) -> + getText li `shouldReturn` (T.pack $ show i ++ s) + +intlSpanShouldBe :: String -> String -> WD () +intlSpanShouldBe ident txt = do + e <- findElem (ById $ T.pack ident) + getText e `shouldReturn` T.pack txt + +-- | Only up to 999,999 since this is just used for the number of days since 1969 +showWithComma :: Integer -> String +showWithComma i = show x ++ "," ++ show y + where + (x, y) = divMod i 1000 + spec :: Spec -spec = session " for the test client" $ using Chrome $ do +spec = do + describe "React 0.13" $ testClientSpec "test-client13.html" + describe "React 0.14" $ do + testClientSpec "test-client14.html" + intlSpec "test-client14.html" + +testClientSpec :: String -> Spec +testClientSpec filename = session " for the test client" $ using Chrome $ do it "opens the page" $ runWD $ do dir <- liftIO $ getCurrentDirectory - openPage $ "file://" ++ dir ++ "/../client/test-client.html" + openPage $ "file://" ++ dir ++ "/../client/" ++ filename loadLog `shouldReturn` [ "will mount" , "Current props and state: Hello, 12" @@ -49,8 +76,6 @@ , "refProps id = world" ] lifecyclePropsAndStateAre "Hello" 100 - child <- findElem (ById "child-passed-to-view") - isDisplayed child `shouldReturn` True it "processes a focus event" $ runWD $ do findElem (ById "keyinput") >>= click @@ -158,8 +183,136 @@ , "Current props and state: Helloo, 101" ] + describe "children passed to view" $ do + + it "does not display null children" $ runWD $ do + s <- findElem $ ById "empty-children" + findElemsFrom s (ByCSS "*") `shouldReturn` [] + getText s `shouldReturn` "" + + it "displays a single child" $ runWD $ do + s <- findElem $ ById "single-child-wrapper" + s' <- findElemFrom s $ ByCSS "span#single-child" + getText s' `shouldReturn` "Single Child!!" + + it "displays a child list" $ runWD $ do + s <- findElem $ ById "multi-child" + c1 <- findElemFrom s $ ByCSS "span#child1" + getText c1 `shouldReturn` "Child 1" + c2 <- findElemFrom s $ ByCSS "span#child2" + getText c2 `shouldReturn` "Child 2" + + it "displays the elements inside the transition" $ runWD $ do + d <- findElem $ ById "css-transitions" + [a, b] <- findElemsFrom d $ ByCSS "span.css-transition-entry" + getText a `shouldReturn` "A" + getText b `shouldReturn` "B" + + describe "bootstrap" $ do + + it "displays and closes alert" $ runWD $ do + alert <- findElem $ ByCSS "div#bootstrap div.alert" + (findElemFrom alert (ByTag "p") >>= getText) + `shouldReturn` "Hello, World!" + findElemFrom alert (ByTag "button") >>= click + loadLog `shouldReturn` ["Closing alert"] + + it "switchs nav items" $ runWD $ do + navUl <- findElem $ ByCSS "div#bootstrap nav > ul" + i1 <- findElemFrom navUl $ ByCSS "li:first-child a" + i2 <- findElemFrom navUl $ ByCSS "li:nth-child(2) a" + i3 <- findElemFrom navUl $ ByCSS "li:nth-child(3) a" + click i2 + loadLog `shouldReturn` ["Switched to 2"] + click i3 + loadLog `shouldReturn` ["Switched to 3"] + click i1 + loadLog `shouldReturn` ["Switched to 1"] + + describe "should component update" $ do + + it "has the initial data" $ runWD $ + scuShouldBe [(1, "Hello"), (2, "World"), (3, "!!!")] + + it "increments just the first entry without re-rendering all entries" $ runWD $ do + findElem (ById "increment-first-scu") >>= click + scuShouldBe [(2, "Hello"), (2, "World"), (3, "!!!")] + loadLog `shouldReturn` + [ "Component will update" + , "current props: 1 Hello" + , "new props: 2 Hello" + ] + + it "does not update when no change to data" $ runWD $ do + findElem (ById "no-change-scu") >>= click + scuShouldBe [(2, "Hello"), (2, "World"), (3, "!!!")] + loadLog `shouldReturn` [] + + it "increments all entries" $ runWD $ do + findElem (ById "change-all-scu") >>= click + scuShouldBe [(3, "Hello"), (3, "World"), (4, "!!!")] + loadLog `shouldReturn` + [ "Component will update" + , "current props: 2 Hello" + , "new props: 3 Hello" + , "Component will update" + , "current props: 2 World" + , "new props: 3 World" + , "Component will update" + , "current props: 3 !!!" + , "new props: 4 !!!" + ] + + {- it "inspects the session" $ runWD $ do loadLog >>= \x -> liftIO $ putStrLn $ show x inspectSession -} + +intlSpec :: String -> Spec +intlSpec filename = session " for the i18n test client" $ using Chrome $ do + it "opens the page" $ runWD $ do + dir <- liftIO $ getCurrentDirectory + openPage $ "file://" ++ dir ++ "/../client/" ++ filename + + it "displays the intl formatted data" $ runWD $ do + "f-number" `intlSpanShouldBe` "90%" + "f-int" `intlSpanShouldBe` "100,000" + "f-double" `intlSpanShouldBe` "40,000.2" + "f-shortday" `intlSpanShouldBe` "Jul 20, 1969" + "f-fullday" `intlSpanShouldBe` "Sunday, July 20, 69 AD" + "f-date" `intlSpanShouldBe` "Sun, Jul 20, 69" + -- f-shorttime and f-fulltime cannot be (easily) tested since they rely on the current timezone + "f-time" `intlSpanShouldBe` "Jul 19, 69, 4:56:00 PM GMT-10" + "f-plural" `intlSpanShouldBe` "plural other" + + {- + today <- liftIO (utctDay <$> getCurrentTime) + let moon = fromGregorian 1969 7 20 + daysAgo = diffDays today moon + yearsAgo :: Int = round $ realToFrac daysAgo / (365 :: Double) -- is close enough + "f-relative" `intlSpanShouldBe` (show yearsAgo ++ " years ago") + "f-relative-days" `intlSpanShouldBe` (showWithComma daysAgo ++ " days ago") + -} + + it "displays messages" $ runWD $ do + msg <- findElem $ ById "f-msg" + getText msg `shouldReturn` "Neil Armstrong took 100 photos years ago." + takenAgoSpan <- findElemFrom msg $ ById "takenAgoSpan" + getText takenAgoSpan `shouldReturn` "years ago" + + msg' <- findElem $ ById "f-msg-with-descr" + getText msg' `shouldReturn` "Neil Armstrong took no photos." + + "f-msg-with-trans" `intlSpanShouldBe` "message from translation xxx" + + htmlMsg <- findElem $ ById "f-html-msg" + getText htmlMsg `shouldReturn` "42 is the answer to life, the universe, and everything" + (findElemFrom htmlMsg (ByTag "b") >>= getText) + `shouldReturn` "42" + + htmlMsg' <- findElem $ ById "f-html-msg-with-descr" + getText htmlMsg' `shouldReturn` "42 is the answer to life, the universe, and everything" + (findElemFrom htmlMsg' (ByTag "b") >>= getText) + `shouldReturn` "answer" diff --git a/test/spec/TodoSpec.hs b/test/spec/TodoSpec.hs --- a/test/spec/TodoSpec.hs +++ b/test/spec/TodoSpec.hs @@ -16,7 +16,7 @@ forM_ (zip entries todos) $ \(li, (todo, complete)) -> do chk <- findElemFrom li $ ByCSS "input[type=checkbox]" attr chk "checked" `shouldReturn` if complete then Just "true" else Nothing - spn <- findElemFrom li $ ByTag "span" + spn <- findElemFrom li $ ByTag "label" getText spn `shouldReturn` todo -- check items left @@ -30,7 +30,7 @@ -- clear completed let completedCnt = length $ filter snd todos when (completedCnt > 0) $ do - completeBtn <- findElem $ ByCSS "button#clear-completed span" + completeBtn <- findElem $ ByCSS "button#clear-completed" getText completeBtn `shouldReturn` (T.pack $ "Clear completed (" ++ show completedCnt ++ ")") getRow :: Int -> WD Element @@ -58,7 +58,7 @@ it "edits a todo" $ runWD $ do midRow <- getRow 1 - findElemFrom midRow (ByTag "span") >>= moveToCenter + findElemFrom midRow (ByTag "label") >>= moveToCenter doubleClick editBox <- findElemFrom midRow (ByCSS "input.edit") sendKeys "Learn react.js" editBox diff --git a/test/spec/react-flux-spec.cabal b/test/spec/react-flux-spec.cabal --- a/test/spec/react-flux-spec.cabal +++ b/test/spec/react-flux-spec.cabal @@ -6,12 +6,14 @@ executable react-flux-spec ghc-options: -Wall hs-source-dirs: . - main-is: Spec.hs - other-modules: TodoSpec, TestClientSpec + main-is: Main.hs + other-modules: TodoSpec, TestClientSpec, Spec build-depends: base , hspec , webdriver , hspec-webdriver , directory + , process , transformers , text + , time diff --git a/test/spec/stack.yaml b/test/spec/stack.yaml --- a/test/spec/stack.yaml +++ b/test/spec/stack.yaml @@ -1,3 +1,3 @@ -resolver: lts-3.2 +resolver: lts-3.6 packages: - '.'