canvas-lms/spec/coffeescripts/jsx/grading/DataRowSpec.coffee at stable · csseditor/canvas-lms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
define [
  'react'
  'react-dom'
  'react-addons-test-utils'
  'jquery'
  'jsx/grading/dataRow'
], (React, ReactDOM, {Simulate, SimulateNative}, $, DataRow) ->

  QUnit.module 'DataRow not being edited, without a sibling',
    setup: ->
      props =
        key: 0
        uniqueId: 0
        row: ['A', 92.346]
        editing: false
        round: (number)-> Math.round(number * 100)/100

      DataRowElement = React.createElement(DataRow, props)
      @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])

    teardown: ->
      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(@dataRow).parentNode)
      $("#fixtures").empty()

  test 'renders in "view" mode (as opposed to "edit" mode)', ->
    ok @dataRow.refs.viewContainer

  test 'getRowData() returns the correct name', ->
    deepEqual @dataRow.getRowData().name, 'A'

  test 'getRowData() sets max score to 100 if there is no sibling row', ->
    deepEqual @dataRow.getRowData().maxScore, 100

  test 'renderMinScore() rounds the score if not in editing mode', ->
    deepEqual @dataRow.renderMinScore(), '92.35'

  test "renderMaxScore() returns a max score of 100 without a '<' sign", ->
    deepEqual @dataRow.renderMaxScore(), '100'

  QUnit.module 'DataRow being edited',
    setup: ->
      @props =
        key: 0
        uniqueId: 0
        row: ['A', 92.346]
        editing: true
        round: (number)-> Math.round(number * 100)/100
        onRowMinScoreChange: ->
        onRowNameChange: ->
        onDeleteRow: ->

      DataRowElement = React.createElement(DataRow, @props)
      @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])

    teardown: ->
      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(@dataRow).parentNode)
      $("#fixtures").empty()

  test 'renders in "edit" mode (as opposed to "view" mode)', ->
    ok @dataRow.refs.editContainer

  test 'on change, accepts arbitrary input and saves to state', ->
    changeMinScore = @spy(@props, 'onRowMinScoreChange')
    DataRowElement = React.createElement(DataRow, @props)
    @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])
    Simulate.change(@dataRow.minScoreInput, {target: {value: 'A'}})
    deepEqual @dataRow.renderMinScore(), 'A'
    Simulate.change(@dataRow.minScoreInput, {target: {value: '*&@%!'}})
    deepEqual @dataRow.renderMinScore(), '*&@%!'
    Simulate.change(@dataRow.minScoreInput, {target: {value: '3B'}})
    deepEqual @dataRow.renderMinScore(), '3B'
    ok changeMinScore.notCalled
    changeMinScore.restore()

  test 'on blur, does not call onRowMinScoreChange if the input parsed value is less than 0', ->
    changeMinScore = @spy(@props, 'onRowMinScoreChange')
    DataRowElement = React.createElement(DataRow, @props)
    @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])
    Simulate.change(@dataRow.minScoreInput, {target: {value: '-1'}})
    Simulate.blur(@dataRow.minScoreInput)
    ok changeMinScore.notCalled
    changeMinScore.restore()

  test 'on blur, does not call onRowMinScoreChange if the input parsed value is greater than 100', ->
    changeMinScore = @spy(@props, 'onRowMinScoreChange')
    DataRowElement = React.createElement(DataRow, @props)
    @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])
    Simulate.change(@dataRow.minScoreInput, {target: {value: '101'}})
    Simulate.blur(@dataRow.minScoreInput)
    ok changeMinScore.notCalled
    changeMinScore.restore()

  test 'on blur, calls onRowMinScoreChange when input parsed value is between 0 and 100', ->
    changeMinScore = @spy(@props, 'onRowMinScoreChange')
    DataRowElement = React.createElement(DataRow, @props)
    @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])
    Simulate.change(@dataRow.minScoreInput, {target: {value: '88.'}})
    Simulate.blur(@dataRow.minScoreInput)
    Simulate.change(@dataRow.minScoreInput, {target: {value: ''}})
    Simulate.blur(@dataRow.minScoreInput)
    Simulate.change(@dataRow.minScoreInput, {target: {value: '100'}})
    Simulate.blur(@dataRow.minScoreInput)
    Simulate.change(@dataRow.minScoreInput, {target: {value: '0'}})
    Simulate.blur(@dataRow.minScoreInput)
    Simulate.change(@dataRow.minScoreInput, {target: {value: 'A'}})
    Simulate.blur(@dataRow.minScoreInput)
    Simulate.change(@dataRow.minScoreInput, {target: {value: '%*@#($'}})
    Simulate.blur(@dataRow.minScoreInput)
    deepEqual changeMinScore.callCount, 3
    changeMinScore.restore()

  test 'on blur, does not call onRowMinScoreChange when input has not changed', ->
    changeMinScore = @spy(@props, 'onRowMinScoreChange')
    DataRowElement = React.createElement(DataRow, @props)
    @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])
    Simulate.blur(@dataRow.minScoreInput)
    ok changeMinScore.notCalled
    changeMinScore.restore()

  test 'calls onRowNameChange when input changes', ->
    changeMinScore = @spy(@props, 'onRowNameChange')
    DataRowElement = React.createElement(DataRow, @props)
    @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])
    Simulate.change(@dataRow.refs.nameInput, {target: {value: 'F'}})
    ok changeMinScore.calledOnce
    changeMinScore.restore()

  test 'calls onDeleteRow when the delete button is clicked', ->
    deleteRow = @spy(@props, 'onDeleteRow')
    DataRowElement = React.createElement(DataRow, @props)
    @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])
    Simulate.click(@dataRow.refs.deleteButton.getDOMNode())
    ok deleteRow.calledOnce

  QUnit.module 'DataRow with a sibling',
    setup: ->
      props =
        key: 1
        row: ['A-', 90.0]
        siblingRow: ['A', 92.346]
        editing: false
        round: (number)-> Math.round(number * 100)/100

      DataRowElement = React.createElement(DataRow, props)
      @dataRow = ReactDOM.render(DataRowElement, $('<table>').appendTo('#fixtures')[0])

    teardown: ->
      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(@dataRow).parentNode)
      $("#fixtures").empty()

  test "shows the max score as the sibling's min score", ->
    deepEqual @dataRow.renderMaxScore(), '< 92.35'