App.render - Code Metrics - Inspection of "Bump json5 from 1.0.1 to 1.0.2 in /examples/simple" - expert-m/react-split-testing - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — master (#61)

unknown

created 2023-01-03 17:38 UTC

App.render B

↳ Parent: App

Complexity

Conditions

Size

Total Lines	63
Code Lines	61

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	61
dl	0
loc	63
rs	8.2763
c	0
b	0
f	0

How to fix Long Method

import React, { Component } from 'react'
import { Experiment, Variant } from 'react-split-testing'


export default class App extends Component {
  constructor(props) {
    super(props)

    this.experiment = React.createRef()

    this.onClick = this.onClick.bind(this)
    this.onChoice = this.onChoice.bind(this)
    this.onRawChoice = this.onRawChoice.bind(this)
  }

  onClick() {
    const experiment = this.experiment.current
    

    alert(

      `Experiment name: "${experiment.getName()}"\n` +
      `Variant name: "${experiment.getActiveVariantName()}"`
    )
  }

  onChoice(experimentName, variantName) {
    console.log(
      `Experiment name: "${experimentName}"\n` +
      `Variant name: "${variantName}"`
    )
  }

  onRawChoice(experiment, variant) {
    console.log(
      `Experiment name: "${experiment.getName()}"\n` +
      `Variant name: "${variant.props.name}"\n` +
      `Variant weight: ${variant.props.weight}`
    )
  }

  render() {
    return (
      <div className="App">
        <div className="block">
          <h1>Experiment #1</h1>
          <Experiment
            ref={this.experiment}
            name="Experiment #1"
            onChoice={this.onChoice}
          >
            <Variant name="A">
              <div>Section A</div>
              <button onClick={this.onClick}>Click me</button>
            </Variant>
            <Variant name="B" weight={2}>
              <div>Section B</div>
              <button onClick={this.onClick}>Click me</button>
            </Variant>
            <Variant name="C">
              <div>Section C</div>
              <button onClick={this.onClick}>Click me</button>
            </Variant>
          </Experiment>
        </div>

        <div className="block">
          <h1>Experiment #2</h1>
          <span>(userIdentifier="something")</span>
          <Experiment
            name="Experiment #2"
            userIdentifier="something"
            onRawChoice={this.onRawChoice}
          >
            <Variant name="A">
              <div>Section A</div>
            </Variant>
            <Variant name="B" weight={2}>
              <div>Section B</div>
            </Variant>
          </Experiment>
        </div>

        <div className="block">
          <h1>Experiment #3</h1>
          <span>(variantName="B")</span>
          <Experiment name="Experiment #3" variantName="B">
            <Variant name="A">
              <div>Section A</div>
            </Variant>
            <Variant name="B">
              <div>Section B</div>
            </Variant>
          </Experiment>
        </div>

        <a
          href="https://github.com/expert-m/react-split-testing/tree/master/examples/simple"
          target="_blank"
          rel="noopener noreferrer"
          className="link"
        >GitHub</a>
      </div>
    )
  }
}


1			import React, { Component } from 'react'
2			import { Experiment, Variant } from 'react-split-testing'
3
4
5			export default class App extends Component {
6			constructor(props) {
7			super(props)
8
9			this.experiment = React.createRef()
10
11			this.onClick = this.onClick.bind(this)
12			this.onChoice = this.onChoice.bind(this)
13			this.onRawChoice = this.onRawChoice.bind(this)
14			}
15
16			onClick() {
17			const experiment = this.experiment.current
18
			0 ignored issues – show introduced 2018-11-15 04:21 UTC by Report Bug Copy Issue Report Trailing spaces not allowed. Loading history...
19			alert(
			0 ignored issues – show Bug introduced 2018-11-15 04:21 UTC by Report Bug Copy Issue Report The variable `alert` was not defined. Loading history...
20			`Experiment name: "${experiment.getName()}"\n` +
21			`Variant name: "${experiment.getActiveVariantName()}"`
22			)
23			}
24
25			onChoice(experimentName, variantName) {
26			console.log(
27			`Experiment name: "${experimentName}"\n` +
28			`Variant name: "${variantName}"`
29			)
30			}
31
32			onRawChoice(experiment, variant) {
33			console.log(
34			`Experiment name: "${experiment.getName()}"\n` +
35			`Variant name: "${variant.props.name}"\n` +
36			`Variant weight: ${variant.props.weight}`
37			)
38			}
39
40			render() {
41			return (
42			<div className="App">
43			<div className="block">
44			<h1>Experiment #1</h1>
45			<Experiment
46			ref={this.experiment}
47			name="Experiment #1"
48			onChoice={this.onChoice}
49			>
50			<Variant name="A">
51			<div>Section A</div>
52			<button onClick={this.onClick}>Click me</button>
53			</Variant>
54			<Variant name="B" weight={2}>
55			<div>Section B</div>
56			<button onClick={this.onClick}>Click me</button>
57			</Variant>
58			<Variant name="C">
59			<div>Section C</div>
60			<button onClick={this.onClick}>Click me</button>
61			</Variant>
62			</Experiment>
63			</div>
64
65			<div className="block">
66			<h1>Experiment #2</h1>
67			<span>(userIdentifier="something")</span>
68			<Experiment
69			name="Experiment #2"
70			userIdentifier="something"
71			onRawChoice={this.onRawChoice}
72			>
73			<Variant name="A">
74			<div>Section A</div>
75			</Variant>
76			<Variant name="B" weight={2}>
77			<div>Section B</div>
78			</Variant>
79			</Experiment>
80			</div>
81
82			<div className="block">
83			<h1>Experiment #3</h1>
84			<span>(variantName="B")</span>
85			<Experiment name="Experiment #3" variantName="B">
86			<Variant name="A">
87			<div>Section A</div>
88			</Variant>
89			<Variant name="B">
90			<div>Section B</div>
91			</Variant>
92			</Experiment>
93			</div>
94
95			<a
96			href="https://github.com/expert-m/react-split-testing/tree/master/examples/simple"
97			target="_blank"
98			rel="noopener noreferrer"
99			className="link"
100			>GitHub</a>
101			</div>
102			)
103			}
104			}
105

expert-m / react-split-testing

Pull Request — master (#61)

App.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like