Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. dagatsoin
    D
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    dagatsoin

    @dagatsoin

    0
    Reputation
    5
    Posts
    984
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    dagatsoin Follow

    Posts made by dagatsoin

    • How to make React unit test with Jest using OnsenUI?

      I am trying to run a simple snapshot unit test using Jest and Enzyme.

      Here is my component:

      import React from 'react';
      import injectSheet from 'react-jss'
      import theme from '../theme/progressBar'
      
      import {ProgressBar} from "react-onsenui"
      
      const LoadingBar = ({sheet:{classes}, progress}) => <div className={classes.wzProgressBar + " wzProgressBar__loading"}>
        <div className="wzProgressBar_container">
          <ProgressBar className="wzProgressBar_content" value={progress}/>
        </div>
      </div>
      
      export default injectSheet(theme)(LoadingBar);
      

      My test file:

      import React from 'react';
      import LoadingBar from './LoadingBar';
      import renderer from 'react-test-renderer';
      
      test('Load bar at 0%', () => {
        const component = renderer.create(<LoadingBar progress={0}/>);
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
      });
      
      test('Load bar at 50%', () => {
        const component = renderer.create(<LoadingBar progress={50}/>);
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
      });
      
      test('Load bar at 100%', () => {
        const component = renderer.create(<LoadingBar progress={100}/>);
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
      });
      

      My jest config in package.json:

      "jest": {
          "rootDir": "imports/ui"
        },
      

      And my .babelrc

       "env": {
          "test": {
            "presets": [
              "es2015",
              "react",
              "stage-0"
            ]
          }
        }
      

      Here is the result in the terminal:

       wizar-guide@0.0.1 test /Users/vikti/dev/wizar-guide
      > jest --verbose
      
       FAIL  1-molecules/LoadingBar.snapshot.test.jsx
        ● Test suite failed to run
      
          Invalid state
            
            at ../../node_modules/onsenui/js/onsenui.js:4744:9
            at ../../node_modules/onsenui/js/onsenui.js:4745:2
            at ../../node_modules/onsenui/js/onsenui.js:3739:84
            at Object.<anonymous> (../../node_modules/onsenui/js/onsenui.js:3742:2)
            at Object.<anonymous>.React (../../node_modules/react-onsenui/dist/react-onsenui.js:3:123)
            at Object.<anonymous> (../../node_modules/react-onsenui/dist/react-onsenui.js:6:2)
            at Object.<anonymous> (1-molecules/LoadingBar.jsx:5:21)
            at Object.<anonymous> (1-molecules/LoadingBar.snapshot.test.jsx:2:19)
            at process._tickCallback (../../internal/process/next_tick.js:103:7)
      
      Test Suites: 1 failed, 1 total
      Tests:       0 total
      Snapshots:   0 total
      Time:        3.664s
      Ran all test suites.
      npm ERR! Test failed.  See above for more details.
      

      As soon I remove the onsenui component my test passes. So is there any configuration I miss to make test with OnsenUI?

      posted in Onsen UI
      D
      dagatsoin
    • RE: OnsenUI 2 React with Meteor.js Demo App

      I think it is because renderFixed is not bound to the instance.
      Could you try to replace renderFixed() {by renderFixed = ()=>{?

      posted in Onsen UI
      D
      dagatsoin
    • RE: Reference on V.2rc React Components theming?

      for those who ask: here is a demo repo which works with JSS: https://github.com/dagatsoin/JSS-OnseUI-example

      npm install -g monaca # Install Monaca CLI - Onsen UI toolkit
      monaca signup # Free sign up
      git clone git@github.com:dagatsoin/JSS-OnseUI-example.git
      cd JSS-OnseUI-example
      npm install
      monaca preview 
      
      posted in Onsen UI
      D
      dagatsoin
    • RE: Reference on V.2rc React Components theming?

      @argelius thx you very much.

      posted in Onsen UI
      D
      dagatsoin
    • Reference on V.2rc React Components theming?

      Hello,

      I have just discovered Onsen UI and I would like to know about customization and theming provided react components. I don’t find reference/tutorial on the v2.rc about those topics, so here is my questions:

      • How far we can customize existing components? I am looking for something more mutable than material-ui.
      • Which css methodology does Onsen use? (I saw some BEM in the default style sheet)
      • Does it use css-module or inline style or BEM namespace to avoid naming conflict?
      • What is the workflow for theming?
      • Is it compatible with JSS?

      Thank you :)

      posted in Onsen UI
      D
      dagatsoin