react Architecture Docs
Home / File/ index.js — react Source File

index.js — react Source File

Architecture documentation for index.js, a javascript file in the react codebase. 7 imports, 0 dependents.

File javascript BabelCompiler Optimization 7 imports 1 classes

Entity Profile

Dependency Diagram

graph LR
  96aed259_71b1_774a_a0fe_8cafae9a38ef["index.js"]
  bc8ae172_cc20_3692_943c_bbdb1ad34855["Fixture.js"]
  96aed259_71b1_774a_a0fe_8cafae9a38ef --> bc8ae172_cc20_3692_943c_bbdb1ad34855
  2851624d_a736_f3f6_2132_5a20630983fe["Fixture"]
  96aed259_71b1_774a_a0fe_8cafae9a38ef --> 2851624d_a736_f3f6_2132_5a20630983fe
  a3aeab4c_4f93_b8d8_01c2_7a351a28a3fb["Fixture"]
  96aed259_71b1_774a_a0fe_8cafae9a38ef --> a3aeab4c_4f93_b8d8_01c2_7a351a28a3fb
  43315ad6_972b_89f2_a26c_ae2c6075675a["FixtureSet.js"]
  96aed259_71b1_774a_a0fe_8cafae9a38ef --> 43315ad6_972b_89f2_a26c_ae2c6075675a
  f3e4d030_5f7e_b1af_0ae5_fcdf80961e8c["FixtureSet"]
  96aed259_71b1_774a_a0fe_8cafae9a38ef --> f3e4d030_5f7e_b1af_0ae5_fcdf80961e8c
  14dde3c9_48ef_6e34_3667_978d06aff15d["TestCase.js"]
  96aed259_71b1_774a_a0fe_8cafae9a38ef --> 14dde3c9_48ef_6e34_3667_978d06aff15d
  e1e356f5_b085_dad5_a81f_4b4844381311["TestCase"]
  96aed259_71b1_774a_a0fe_8cafae9a38ef --> e1e356f5_b085_dad5_a81f_4b4844381311
  style 96aed259_71b1_774a_a0fe_8cafae9a38ef fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Fixture from '../../Fixture';
import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';

const React = window.React;

class ProgressFixture extends React.Component {
  state = {value: 0, max: 1, enabled: false, backwards: false};

  startTest = () => {
    this.setState({enabled: true}, () => {
      this.progressIntervalId = setInterval(() => {
        if (this.state.backwards) {
          if (this.state.value > 0) {
            this.setState({value: this.state.value - this.state.max / 100});
          } else {
            if (this.state.max === 10000) {
              this.resetTest();
            } else {
              this.setState({max: this.state.max * 100, backwards: false});
            }
          }
        } else {
          if (this.state.value < this.state.max) {
            this.setState({value: this.state.value + this.state.max / 100});
          } else {
            this.setState({backwards: true});
          }
        }
      }, 10);
    });
  };

  resetTest = () => {
    clearInterval(this.progressIntervalId);
    this.setState({value: 0, max: 1, enabled: false, backwards: false});
  };

  render() {
    return (
      <FixtureSet title="Progress">
        <TestCase title="Fill and reset progress bar">
          <TestCase.Steps>
            <li>Press enable button</li>
          </TestCase.Steps>

          <TestCase.ExpectedResult>
            When enabled, bar value should increase from 0% to 100% and
            backwards during three step loop: 0-1, 0-100, 0-10000. Reset button
            stops loop, sets value to 0 and max to 1.
          </TestCase.ExpectedResult>

          <Fixture>
            <div className="control-box">
              <fieldset>
                <legend>Controlled</legend>
                <progress
                  value={this.state.value}
                  max={this.state.max}></progress>
                <button
                  onClick={
                    this.state.enabled ? this.resetTest : this.startTest
                  }>
                  {this.state.enabled ? 'Reset' : 'Enable'}
                </button>
                <br />
                <span className="hint">
                  {' '}
                  max: {JSON.stringify(this.state.max)}
                </span>
                <span className="hint">
                  {' '}
                  value:{' '}
                  {JSON.stringify(
                    Math.round((this.state.value + Number.EPSILON) * 100) / 100
                  )}
                </span>
              </fieldset>
            </div>
          </Fixture>
        </TestCase>
      </FixtureSet>
    );
  }
}

export default ProgressFixture;

Domain

Subdomains

Classes

Dependencies

Source

Frequently Asked Questions

What does index.js do?
index.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Optimization subdomain.
What does index.js depend on?
index.js imports 7 module(s): Fixture, Fixture, Fixture.js, FixtureSet, FixtureSet.js, TestCase, TestCase.js.
Where is index.js in the architecture?
index.js is located at fixtures/dom/src/components/fixtures/progress/index.js (domain: BabelCompiler, subdomain: Optimization, directory: fixtures/dom/src/components/fixtures/progress).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free