How to determine Material-UI toggle ON/OFF state from DOM?

Question

Inspecting toggles on http://www.material-ui.com/#/components/toggle there is an input tag of type 'checkbox' in DOM. 'Toggled by default' has attribute 'checked' but when I turn it to OFF state then attributes in underling 'input' tag does not change and 'checked' is still present. How to determine toggle ON/OFF state from DOM?

p.s. I am writing automated functional tests using Selenium web driver.

score 5 · Answer 1 · answered Aug 22 '16 at 19:58

If you can assign a custom data-* prop to each toggle, try this:

handleToggle = (event) => {
  // here's your checked Value
  event.target.getAttribute('data-isToggled') 
}

// ...React boilerplate

<Toggle
  label="Toggled by default"
  onToggle={this.handleToggle}
  data-isToggled={this.state.Toggled}
  toggled={this.state.Toggled}
/>

score 0 · Answer 2 · answered Mar 01 '16 at 07:00

0

You don't directly check toggle state from the DOM. You have to use javascript callbacks to determine if a toggle switch is on or off.

Class ToggleComponent Example

      export default class ToggleComponent extends React.Component {

      constructor(props) {
        super(props);
        this.state = {Toggled: true};
      }

      handleToggle() {
        this.setState({Toggled: !this.state.Toggled});
        console.log(this.state.Toggled)
      }

      render() {
        return (
          <div>
            <Toggle
                label="Toggled by default"
                defaultToggled={this.state.Toggled}
                onToggle={this.handleToggle.bind(this)}
                toggle={this.state.Toggled}
              />

          </div>
        );
      }
    }

Look at: https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

answered Mar 01 '16 at 07:00

Felipe Elías Lolas Isuani

67
1

I am writing automated functional tests using Selenium web driver and I don't have access to React components, so I need to determine toggle state from DOM. – Krzysztof Mar 01 '16 at 12:58
Why Selenium? React works on a virtual DOM, you can use [Jest](https://facebook.github.io/jest/docs/tutorial-react.html) for testing components. Anyway, check this answer: [How do you test a ReactJS Web App with Selenium](http://stackoverflow.com/questions/23350401/how-do-you-test-a-reactjs-web-app-with-selenium) – Felipe Elías Lolas Isuani Mar 01 '16 at 15:44
This doesn't provide a real answer for the question. – calbertts Aug 06 '16 at 06:18
nor is this a proper callback, should have been this.setState({toggled: !this.state.Toggled}, ()=>console.log(this.state.Toggled)) – high incompetance Nov 15 '16 at 06:43

How to determine Material-UI toggle ON/OFF state from DOM?

2 Answers2