Skip to content

Commit

Permalink
update react
Browse files Browse the repository at this point in the history
  • Loading branch information
@git-nandor
git-nandor committed Nov 27, 2024
1 parent 0be14fb commit aa154b4
Show file tree
Hide file tree
Showing 88 changed files with 247 additions and 290 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Before contributing please read our [code of conduct](https://instructure.design

## React Support

Instructure UI currently supports 16.8.0 and higher.
Instructure UI currently supports 16.14.0 and higher.

## Browser Support

Expand Down
153 changes: 55 additions & 98 deletions cypress/component/TextArea.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,116 +25,73 @@
import React from 'react'
import '../support/component'
import 'cypress-real-events'
import { expect } from 'chai'

import { TextArea } from '../../packages/ui'

// it('should resize if autoGrow is true', () => {
// cy.mount(
// <TextArea label="Name" autoGrow={true} width="500px" onChange={cy.stub()} />
// )

// cy.get('textarea').then((input) => {
// const initialHeight = parseInt(getComputedStyle(input[0]).height, 10)

// cy.get('textarea')
// .invoke(
// 'val',
// 'Chartreuse celiac thundercats, distillery snackwave glossier pork belly tacos venmo fanny pack paleo portland. Migas 3 wolf moon typewriter, meditation pitchfork meh narwhal copper mug gluten-free vegan next level. Succulents keytar cronut, fanny pack kitsch hammock sustainable skateboard gochujang poutine la croix ennui cred quinoa. Fap copper mug pitchfork small batch hell of vice. Kickstarter small batch hexagon, scenester bushwick tacos cliche. Pickled flannel PBR&B, chartreuse next level vinyl echo park chambray pitchfork selfies actually tattooed blue bottle 3 wolf moon. Raw denim enamel pin tumeric retro fam scenester.'
// )
// .trigger('input')

// cy.get('textarea').then((input) => {
// const resizedHeight = parseInt(getComputedStyle(input[0]).height, 10)
// expect(resizedHeight).to.be.above(initialHeight)
// })

// cy.get('[class$="-textArea__layout"]').then((layout) => {
// const layoutMinHeight = parseInt(
// getComputedStyle(layout[0]).getPropertyValue('min-height'),
// 10
// )
// cy.get('textarea').then((input) => {
// const resizedHeight = parseInt(getComputedStyle(input[0]).height, 10)
// expect(resizedHeight).to.equal(layoutMinHeight)
// })
// })
// })
// })
it('should resize if autoGrow is true', () => {
cy.mount(
<TextArea label="Name" autoGrow={true} width="500px" onChange={cy.stub()} />
)

// it('should set a maxHeight', () => {
// cy.mount(
// <TextArea
// label="Name"
// autoGrow={true}
// maxHeight="160px"
// onChange={cy.stub()}
// value={`Chartreuse celiac thundercats, distillery snackwave glossier
// pork belly tacos venmo fanny pack paleo portland. Migas 3 wolf moon typewriter,
// meditation pitchfork meh narwhal copper mug gluten-free vegan next level.
// Succulents keytar cronut, fanny pack kitsch hammock sustainable skateboard
// gochujang poutine la croix ennui cred quinoa. Fap copper mug pitchfork small
// batch hell of vice. Kickstarter small batch hexagon, scenester bushwick tacos
// cliche. Pickled flannel PBR&B, chartreuse next level vinyl echo park chambray
// pitchfork selfies actually tattooed blue bottle 3 wolf moon. Raw denim enamel
// pin tumeric retro fam scenester. Succulents keytar cronut, fanny pack kitsch
// hammock sustainable skateboard gochujang poutine la croix ennui cred quinoa.
// Fap copper mug pitchfork small batch hell of vice. Kickstarter small batch
// hexagon, scenester bushwick tacos`}
// />
// )
// const input = cy.get('textarea')
cy.get('textarea').then((input) => {
const initialHeight = parseInt(getComputedStyle(input[0]).height, 10)

// input.should('have.css', 'max-height', '160px')
cy.get('textarea')
.invoke(
'val',
'Chartreuse celiac thundercats, distillery snackwave glossier pork belly tacos venmo fanny pack paleo portland. Migas 3 wolf moon typewriter, meditation pitchfork meh narwhal copper mug gluten-free vegan next level. Succulents keytar cronut, fanny pack kitsch hammock sustainable skateboard gochujang poutine la croix ennui cred quinoa. Fap copper mug pitchfork small batch hell of vice. Kickstarter small batch hexagon, scenester bushwick tacos cliche. Pickled flannel PBR&B, chartreuse next level vinyl echo park chambray pitchfork selfies actually tattooed blue bottle 3 wolf moon. Raw denim enamel pin tumeric retro fam scenester.'
)
.trigger('input')

// // ensure maxHeight is being applied to input container and not exceeded by minHeight style
// cy.get('[class$=-textArea__layout]').then((layout) => {
// const layoutMaxHeight = parseInt(layout.css('max-height'), 10)
// const layoutMinHeight = parseInt(layout.css('min-height'), 10)
cy.get('textarea').then((input) => {
const resizedHeight = parseInt(getComputedStyle(input[0]).height, 10)
expect(resizedHeight).to.be.above(initialHeight)
})

// expect(layoutMaxHeight).to.equal(160)
// expect(layoutMaxHeight).to.be.above(layoutMinHeight)
// })
// })
cy.get('[class$="-textArea__layout"]').then((layout) => {
const layoutMinHeight = parseInt(
getComputedStyle(layout[0]).getPropertyValue('min-height'),
10
)
cy.get('textarea').then((input) => {
const resizedHeight = parseInt(getComputedStyle(input[0]).height, 10)
expect(resizedHeight).to.equal(layoutMinHeight)
})
})
})
})

it('should update outline width when textarea is resized', () => {
it('should set a maxHeight', () => {
cy.mount(
<div
style={{
width: '300px',
minHeight: '100px',
}}
>
<TextArea label="Description" resize="both" />
</div>
<TextArea
label="Name"
autoGrow={true}
maxHeight="160px"
onChange={cy.stub()}
value={`Chartreuse celiac thundercats, distillery snackwave glossier
pork belly tacos venmo fanny pack paleo portland. Migas 3 wolf moon typewriter,
meditation pitchfork meh narwhal copper mug gluten-free vegan next level.
Succulents keytar cronut, fanny pack kitsch hammock sustainable skateboard
gochujang poutine la croix ennui cred quinoa. Fap copper mug pitchfork small
batch hell of vice. Kickstarter small batch hexagon, scenester bushwick tacos
cliche. Pickled flannel PBR&B, chartreuse next level vinyl echo park chambray
pitchfork selfies actually tattooed blue bottle 3 wolf moon. Raw denim enamel
pin tumeric retro fam scenester. Succulents keytar cronut, fanny pack kitsch
hammock sustainable skateboard gochujang poutine la croix ennui cred quinoa.
Fap copper mug pitchfork small batch hell of vice. Kickstarter small batch
hexagon, scenester bushwick tacos`}
/>
)
const input = cy.get('textarea')

cy.get('textarea').then(($textarea) => {
const initialWidth = parseInt($textarea.css('width'), 10)

cy.get('[class$="-textArea__outline"]').then(($outline) => {
const initialOutlineWidth = parseInt($outline.css('width'), 10)
input.should('have.css', 'max-height', '160px')

// Ensure initial widths are equal
expect(initialOutlineWidth).to.equal(initialWidth)
// ensure maxHeight is being applied to input container and not exceeded by minHeight style
cy.get('[class$=-textArea__layout]').then((layout) => {
const layoutMaxHeight = parseInt(layout.css('max-height'), 10)
const layoutMinHeight = parseInt(layout.css('min-height'), 10)

// Resize the textarea
// cy.wrap($textarea)
// .trigger('mousedown', { which: 1, clientX: initialWidth, clientY: 0 })
// .trigger('mousemove', { clientX: initialWidth + 50, clientY: 0 })
// .trigger('mouseup')

// // Check updated width after resizing
// cy.wrap($textarea).then(($textareaAfterResize) => {
// const resizedWidth = parseInt($textareaAfterResize.css('width'), 10)
// expect(resizedWidth).to.be.above(initialWidth)

// // Validate the outline width matches the resized textarea width
// cy.get('[class$="-textArea__outline"]').then(($outlineAfterResize) => {
// const resizedOutlineWidth = parseInt($outlineAfterResize.css('width'), 10)
// expect(resizedOutlineWidth).to.equal(resizedWidth)
// })
// })
})
expect(layoutMaxHeight).to.equal(160)
expect(layoutMaxHeight).to.be.above(layoutMinHeight)
})
})
Loading

0 comments on commit aa154b4

Please sign in to comment.