Skip to content

Commit 6101ea6

Browse files
git-nandorgit-nandor
committed
test(ui-source-code-editor): migrate old SourceCodeEditor tests
1 parent 2ef4a6b commit 6101ea6

File tree

7 files changed

+496
-543
lines changed

7 files changed

+496
-543
lines changed

‎cypress/component/SourceCodeEditor.cy.tsx‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
import React from 'react'
25+
import { expect } from 'chai'
26+
import { SourceCodeEditor } from '@instructure/ui'
27+
28+
import '../support/component'
29+
import 'cypress-real-events'
30+
31+
const LONG_TEXT =
32+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in aliquam erat, sit amet imperdiet arcu. Curabitur cursus et diam in pharetra.'
33+
34+
describe('<SourceCodeEditor/>', () => {
35+
it('should behave uncontrolled', async () => {
36+
const onChangeSpy = cy.spy().as('onChangeSpy')
37+
cy.mount(
38+
<SourceCodeEditor
39+
label="foo"
40+
defaultValue="hello"
41+
onChange={onChangeSpy}
42+
/>
43+
)
44+
cy.get('[role="textbox"]')
45+
.should('contain.text', 'hello')
46+
.click()
47+
.realType(' world')
48+
49+
cy.get('@onChangeSpy').should('have.been.calledWith', 'hello world')
50+
51+
cy.get('[role="textbox"]').invoke('text').should('contain', 'hello world')
52+
})
53+
54+
it('should behave controlled', async () => {
55+
const onChangeSpy = cy.spy().as('onChangeSpy')
56+
cy.mount(
57+
<SourceCodeEditor label="foo" value="hello" onChange={onChangeSpy} />
58+
)
59+
60+
cy.get('[role="textbox"]')
61+
.should('contain.text', 'hello')
62+
.click()
63+
.realType('w')
64+
65+
cy.get('@onChangeSpy').should('have.been.calledWith', 'hellow')
66+
cy.get('[role="textbox"]').invoke('text').should('eq', 'hello')
67+
68+
cy.mount(
69+
<SourceCodeEditor
70+
label="foo"
71+
value="hello world"
72+
onChange={onChangeSpy}
73+
/>
74+
)
75+
76+
cy.get('[role="textbox"]').invoke('text').should('eq', 'hello world')
77+
})
78+
79+
it('should focus editor on load', async () => {
80+
cy.mount(<SourceCodeEditor label="foo" autofocus />)
81+
cy.get('[role="textbox"]').should('have.focus')
82+
})
83+
84+
it("shouldn't update value when typing if readOnly", async () => {
85+
cy.mount(<SourceCodeEditor label="foo" readOnly />)
86+
87+
cy.get('[role="textbox"]').should('not.contain.text', 'w')
88+
cy.get('[role="textbox"]').realType('w')
89+
cy.get('[role="textbox"]').should('not.contain.text', 'w')
90+
})
91+
92+
it('should wrap lines when lineWrapping is true', () => {
93+
let boxWidth: number
94+
let boxHeight: number
95+
let wrappedBoxWidth: number
96+
let wrappedBoxHeight: number
97+
98+
cy.mount(<SourceCodeEditor label="foo" defaultValue={LONG_TEXT} />)
99+
100+
cy.get('[role="textbox"]')
101+
.should('exist')
102+
.invoke('css', ['width', 'height'])
103+
.then((styles) => {
104+
boxWidth = parseFloat(styles.width)
105+
boxHeight = parseFloat(styles.height)
106+
})
107+
108+
// Set props: lineWrapping
109+
cy.mount(
110+
<SourceCodeEditor label="foo" defaultValue={LONG_TEXT} lineWrapping />
111+
)
112+
113+
cy.get('[role="textbox"]')
114+
.should('exist')
115+
.invoke('css', ['width', 'height'])
116+
.then((styles) => {
117+
wrappedBoxWidth = parseFloat(styles.width)
118+
wrappedBoxHeight = parseFloat(styles.height)
119+
120+
expect(wrappedBoxWidth).to.be.lessThan(boxWidth)
121+
expect(wrappedBoxHeight).to.be.greaterThan(boxHeight)
122+
})
123+
})
124+
125+
it('should apply and update width', async () => {
126+
const testValue1 = '300px'
127+
const testValue2 = '500px'
128+
129+
cy.mount(
130+
<SourceCodeEditor
131+
label="this is a label for the SR"
132+
defaultValue="hello"
133+
width={testValue1}
134+
/>
135+
)
136+
137+
cy.get('[class$="-codeEditor"]').should('have.css', 'width', testValue1)
138+
139+
cy.get('.cm-editor').should('have.css', 'width', testValue1)
140+
141+
cy.get('[role="textbox"]').should('have.css', 'width', testValue1)
142+
143+
// Set props: width
144+
cy.mount(
145+
<SourceCodeEditor
146+
label="this is a label for the SR"
147+
defaultValue="hello"
148+
width={testValue2}
149+
/>
150+
)
151+
152+
cy.get('[class$="-codeEditor"]').should('have.css', 'width', testValue2)
153+
154+
cy.get('.cm-editor').should('have.css', 'width', testValue2)
155+
156+
cy.get('[role="textbox"]').should('have.css', 'width', testValue2)
157+
})
158+
159+
it('should apply and update height', async () => {
160+
const testValue1 = '300px'
161+
const testValue2 = '500px'
162+
163+
cy.mount(
164+
<SourceCodeEditor
165+
label="this is a label for the SR"
166+
defaultValue="hello"
167+
height={testValue1}
168+
/>
169+
)
170+
171+
cy.get('[class$="-codeEditor"]').should('have.css', 'height', testValue1)
172+
173+
cy.get('.cm-editor').should('have.css', 'height', testValue1)
174+
175+
cy.get('[role="textbox"]').should('have.css', 'height', testValue1)
176+
177+
// Set props: height
178+
cy.mount(
179+
<SourceCodeEditor
180+
label="this is a label for the SR"
181+
defaultValue="hello"
182+
height={testValue2}
183+
/>
184+
)
185+
186+
cy.get('[class$="-codeEditor"]').should('have.css', 'height', testValue2)
187+
188+
cy.get('.cm-editor').should('have.css', 'height', testValue2)
189+
190+
cy.get('[role="textbox"]').should('have.css', 'height', testValue2)
191+
})
192+
})

‎package-lock.json‎

Lines changed: 1 addition & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ui-source-code-editor/package.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,9 @@
2424
"license": "MIT",
2525
"devDependencies": {
2626
"@instructure/ui-babel-preset": "10.16.2",
27-
"@instructure/ui-test-queries": "10.16.2",
28-
"@instructure/ui-test-utils": "10.16.2",
2927
"@testing-library/jest-dom": "^6.6.3",
3028
"@testing-library/react": "^16.0.1",
29+
"@testing-library/user-event": "^14.5.2",
3130
"vitest": "^2.1.8"
3231
},
3332
"dependencies": {
@@ -54,7 +53,6 @@
5453
"@instructure/ui-icons": "10.16.2",
5554
"@instructure/ui-prop-types": "10.16.2",
5655
"@instructure/ui-react-utils": "10.16.2",
57-
"@instructure/ui-test-locator": "10.16.2",
5856
"@instructure/ui-testable": "10.16.2",
5957
"@instructure/ui-text-input": "10.16.2",
6058
"@instructure/ui-themes": "10.16.2",

‎packages/ui-source-code-editor/src/SourceCodeEditor/SourceCodeEditorLocator.ts‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

0 commit comments

Comments
 (0)