| import './index'; |
| |
| import { $$ } from 'common-sk/modules/dom'; |
| |
| import { setUpElementUnderTest } from '../../../infra-sk/modules/test_util'; |
| |
| describe('expandable-textarea-sk', () => { |
| // Function to create a new expandable-textarea-sk. |
| const newInstance = setUpElementUnderTest('expandable-textarea-sk'); |
| |
| let expandableTextareaSk; |
| beforeEach(() => { |
| expandableTextareaSk = newInstance((el) => { |
| el.displayText = 'Click to toggle'; |
| }); |
| }); |
| |
| const simulateUserClick = () => { |
| $$('button', expandableTextareaSk).click(); |
| }; |
| |
| it('displays clickable text', () => { |
| expect(expandableTextareaSk).to.not.have.attribute('open'); |
| expect($$('collapse-sk', expandableTextareaSk)) |
| .to.have.attribute('closed'); |
| expect(expandableTextareaSk) |
| .to.contain('expand-more-icon-sk') |
| .and.not.contain('expand-less-icon-sk'); |
| expect($$('button', expandableTextareaSk)).to.contain.text('Click to toggle'); |
| }); |
| |
| it('expands on click with textarea in focus', () => { |
| simulateUserClick(); |
| expect(expandableTextareaSk).to.have.attribute('open'); |
| expect($$('collapse-sk', expandableTextareaSk)) |
| .to.not.have.attribute('closed'); |
| expect(expandableTextareaSk) |
| .to.contain('expand-less-icon-sk') |
| .and.not.contain('expand-more-icon-sk'); |
| expect($$('textarea', expandableTextareaSk)) |
| .to.equal(document.activeElement); |
| }); |
| |
| it('collapses on second click', () => { |
| simulateUserClick(); |
| simulateUserClick(); |
| expect(expandableTextareaSk).to.not.have.attribute('open'); |
| expect($$('collapse-sk', expandableTextareaSk)) |
| .to.have.attribute('closed'); |
| expect(expandableTextareaSk) |
| .to.contain('expand-more-icon-sk') |
| .and.not.contain('expand-less-icon-sk'); |
| }); |
| |
| it('reflects textarea value', () => { |
| $$('textarea', expandableTextareaSk).value = 'foo'; |
| expect(expandableTextareaSk).to.have.property('value', 'foo'); |
| }); |
| }); |