-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Editable inline component for Collection Title (#268)
* Update CustomCollection story with handleEditCollection * Update CustomCollection test with handleEditCollection * Fix save and local resolver * Add max length to input * CSS tweaks * Add tests for editable title component * Add test for editCollection to myspace * Update home page test to reflect new heading button * Updating test coverage * Add cypress test for editing title Co-authored-by: Suzanne Rozier <[email protected]>
- Loading branch information
Showing
13 changed files
with
320 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
src/components/CustomCollection/EditableCollectionTitle.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| /** | ||
| * @jest-environment jsdom | ||
| */ | ||
|
|
||
| import { render, screen } from '@testing-library/react' | ||
| import userEvent from '@testing-library/user-event' | ||
| import React from 'react' | ||
|
|
||
| import { EditableCollectionTitle } from './EditableCollectionTitle' | ||
|
|
||
| describe('EditableCollectionTitle component', () => { | ||
| it('renders an editable collection title', () => { | ||
| render( | ||
| <EditableCollectionTitle | ||
| text="Test Collection" | ||
| placeholder="Add Collection Title" | ||
| onSave={jest.fn()} | ||
| /> | ||
| ) | ||
|
|
||
| expect( | ||
| screen.getByRole('button', { name: 'Test Collection' }) | ||
| ).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('renders a placeholder title if no title is passed', () => { | ||
| render( | ||
| <EditableCollectionTitle | ||
| text="" | ||
| placeholder="Add Collection Title" | ||
| onSave={jest.fn()} | ||
| /> | ||
| ) | ||
|
|
||
| expect( | ||
| screen.getByRole('button', { name: 'Add Collection Title' }) | ||
| ).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('renders an input when button is clicked', () => { | ||
| render( | ||
| <EditableCollectionTitle | ||
| text="Test Collection" | ||
| placeholder="Add Collection Title" | ||
| onSave={jest.fn()} | ||
| /> | ||
| ) | ||
| const editTitle = screen.getByRole('button') | ||
| userEvent.click(editTitle) | ||
| const input = screen.getByRole('textbox') | ||
| expect(input).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('calls save function on enter', () => { | ||
| const handleOnSave = jest.fn() | ||
| render( | ||
| <EditableCollectionTitle | ||
| text="Test Collection" | ||
| placeholder="Add Collection Title" | ||
| onSave={handleOnSave} | ||
| /> | ||
| ) | ||
| const editTitle = screen.getByRole('button') | ||
| userEvent.click(editTitle) | ||
| const input = screen.getByRole('textbox') | ||
| userEvent.click(input) | ||
| userEvent.type(input, 'Updated Title {enter}') | ||
| expect(handleOnSave).toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('calls save function on esc', () => { | ||
| const handleOnSave = jest.fn() | ||
| render( | ||
| <EditableCollectionTitle | ||
| text="Test Collection" | ||
| placeholder="Add Collection Title" | ||
| onSave={handleOnSave} | ||
| /> | ||
| ) | ||
| const editTitle = screen.getByRole('button') | ||
| userEvent.click(editTitle) | ||
| const input = screen.getByRole('textbox') | ||
| userEvent.click(input) | ||
| userEvent.type(input, 'Updated Title {esc}') | ||
| expect(handleOnSave).toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('calls save function on tab', () => { | ||
| const handleOnSave = jest.fn() | ||
| render( | ||
| <EditableCollectionTitle | ||
| text="Test Collection" | ||
| placeholder="Add Collection Title" | ||
| onSave={handleOnSave} | ||
| /> | ||
| ) | ||
| const editTitle = screen.getByRole('button') | ||
| userEvent.click(editTitle) | ||
| const input = screen.getByRole('textbox') | ||
| userEvent.click(input) | ||
| userEvent.type(input, 'Updated Title') | ||
| userEvent.tab() | ||
| expect(handleOnSave).toHaveBeenCalled() | ||
| }) | ||
| }) |
Oops, something went wrong.