-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(account-settings): username view (#1752)
* Move Account page to separate dir * Add account snapshot tests * Allow console logs in tests * Add data-test attribute to Input * Add username to Settings component
- Loading branch information
Showing
10 changed files
with
341 additions
and
5 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| // Libraries | ||
| import React from 'react' | ||
| import {shallow} from 'enzyme' | ||
|
|
||
| // Components | ||
| import Account from 'src/me/components/account/Account' | ||
|
|
||
| const setup = (override?) => { | ||
| const props = { | ||
| params: {tab: 'settings'}, | ||
| ...override, | ||
| } | ||
|
|
||
| const wrapper = shallow(<Account {...props} />) | ||
|
|
||
| return {wrapper} | ||
| } | ||
|
|
||
| describe('Account', () => { | ||
| describe('rendering', () => { | ||
| it('renders!', () => { | ||
| const {wrapper} = setup() | ||
|
|
||
| expect(wrapper.exists()).toBe(true) | ||
| expect(wrapper).toMatchSnapshot() | ||
| }) | ||
| }) | ||
| }) |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| // Libraries | ||
| import React from 'react' | ||
| import {mount} from 'enzyme' | ||
|
|
||
| // Components | ||
| import {Settings} from 'src/me/components/account/Settings' | ||
| import {me} from '../../mockUserData' | ||
|
|
||
| const setup = (override?) => { | ||
| const props = { | ||
| me, | ||
| ...override, | ||
| } | ||
|
|
||
| const wrapper = mount(<Settings {...props} />) | ||
|
|
||
| return {wrapper} | ||
| } | ||
|
|
||
| describe('Account', () => { | ||
| describe('rendering', () => { | ||
| it('renders!', () => { | ||
| const {wrapper} = setup() | ||
|
|
||
| expect(wrapper.exists()).toBe(true) | ||
| expect(wrapper).toMatchSnapshot() | ||
| }) | ||
|
|
||
| it('displays the users info by default', () => { | ||
| const {wrapper} = setup() | ||
|
|
||
| const nameInput = wrapper.find({'data-test': 'nameInput'}) | ||
| expect(nameInput.props().value).toBe(me.name) | ||
| }) | ||
| }) | ||
| }) |
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,68 @@ | ||
| // Libraries | ||
| import React, {PureComponent, ChangeEvent} from 'react' | ||
| import {connect} from 'react-redux' | ||
|
|
||
| // Types | ||
| import {MeState} from 'src/types/v2' | ||
| import { | ||
| Form, | ||
| Button, | ||
| Input, | ||
| Columns, | ||
| ComponentSize, | ||
| ComponentStatus, | ||
| Panel, | ||
| } from 'src/clockface' | ||
|
|
||
| interface StateProps { | ||
| me: MeState | ||
| } | ||
|
|
||
| interface State { | ||
| me: MeState | ||
| } | ||
|
|
||
| export class Settings extends PureComponent<StateProps, State> { | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { | ||
| me: this.props.me, | ||
| } | ||
| } | ||
|
|
||
| public render() { | ||
| const {me} = this.state | ||
|
|
||
| return ( | ||
| <Panel> | ||
| <Panel.Header title="About Me"> | ||
| <Button text="Edit About Me" /> | ||
| </Panel.Header> | ||
| <Panel.Body> | ||
| <Form> | ||
| <Form.Element label="Username" colsXS={Columns.Six}> | ||
| <Input | ||
| value={me.name} | ||
| dataTest="nameInput" | ||
| titleText="Username" | ||
| size={ComponentSize.Small} | ||
| status={ComponentStatus.Disabled} | ||
| onChange={this.handleChangeInput} | ||
| /> | ||
| </Form.Element> | ||
| </Form> | ||
| </Panel.Body> | ||
| </Panel> | ||
| ) | ||
| } | ||
|
|
||
| private handleChangeInput = (_: ChangeEvent<HTMLInputElement>): void => { | ||
| // console.log('changing: ', e) | ||
| } | ||
| } | ||
|
|
||
| const mstp = ({me}) => ({ | ||
| me, | ||
| }) | ||
|
|
||
| export default connect<StateProps>(mstp)(Settings) |
48 changes: 48 additions & 0 deletions
48
ui/src/me/components/account/__snapshots__/Account.test.tsx.snap
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,48 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Account rendering renders! 1`] = ` | ||
| <Page> | ||
| <PageHeader | ||
| fullWidth={false} | ||
| inPresentationMode={false} | ||
| > | ||
| <PageHeaderLeft | ||
| offsetPixels={0} | ||
| > | ||
| <PageTitle | ||
| title="My Account" | ||
| /> | ||
| </PageHeaderLeft> | ||
| <PageHeaderRight | ||
| offsetPixels={0} | ||
| /> | ||
| </PageHeader> | ||
| <PageContents | ||
| fullWidth={false} | ||
| scrollable={true} | ||
| > | ||
| <withRouter(ProfilePage) | ||
| activeTabUrl="settings" | ||
| name="Account" | ||
| parentUrl="/account" | ||
| > | ||
| <ProfilePageSection | ||
| id="settings" | ||
| title="Settings" | ||
| url="settings" | ||
| > | ||
| <Connect(Settings) /> | ||
| </ProfilePageSection> | ||
| <ProfilePageSection | ||
| id="tokens" | ||
| title="Tokens" | ||
| url="tokens" | ||
| > | ||
| <div> | ||
| Tokens go here | ||
| </div> | ||
| </ProfilePageSection> | ||
| </withRouter(ProfilePage)> | ||
| </PageContents> | ||
| </Page> | ||
| `; |
140 changes: 140 additions & 0 deletions
140
ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap
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,140 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Account rendering renders! 1`] = ` | ||
| <Settings | ||
| me={ | ||
| Object { | ||
| "id": "id-of-groot", | ||
| "links": Object { | ||
| "log": "/api/v2/users/id-of-groot/log", | ||
| "self": "/api/v2/users/id-of-groot", | ||
| }, | ||
| "name": "groot", | ||
| } | ||
| } | ||
| > | ||
| <Panel> | ||
| <div | ||
| className="panel" | ||
| > | ||
| <PanelHeader | ||
| title="About Me" | ||
| > | ||
| <div | ||
| className="panel-header" | ||
| > | ||
| <div | ||
| className="panel-title" | ||
| > | ||
| About Me | ||
| </div> | ||
| <div | ||
| className="panel-controls" | ||
| > | ||
| <ComponentSpacer | ||
| align="right" | ||
| > | ||
| <div | ||
| className="component-spacer component-spacer--right component-spacer--horizontal" | ||
| > | ||
| <Button | ||
| active={false} | ||
| color="default" | ||
| shape="none" | ||
| size="sm" | ||
| status="default" | ||
| text="Edit About Me" | ||
| type="submit" | ||
| > | ||
| <button | ||
| className="button button-sm button-default" | ||
| disabled={false} | ||
| tabIndex={0} | ||
| title="Edit About Me" | ||
| type="submit" | ||
| > | ||
| Edit About Me | ||
| </button> | ||
| </Button> | ||
| </div> | ||
| </ComponentSpacer> | ||
| </div> | ||
| </div> | ||
| </PanelHeader> | ||
| <PanelBody> | ||
| <div | ||
| className="panel-body" | ||
| > | ||
| <Form> | ||
| <form | ||
| className="form--wrapper" | ||
| onSubmit={[Function]} | ||
| > | ||
| <FormElement | ||
| colsXS={6} | ||
| errorMessage="" | ||
| helpText="" | ||
| label="Username" | ||
| > | ||
| <div | ||
| className="form--element col-xs-6" | ||
| > | ||
| <FormLabel | ||
| label="Username" | ||
| > | ||
| <label | ||
| className="form--label" | ||
| > | ||
| Username | ||
| </label> | ||
| </FormLabel> | ||
| <Input | ||
| autoFocus={false} | ||
| autocomplete="off" | ||
| dataTest="nameInput" | ||
| disabledTitleText="This input is disabled" | ||
| name="" | ||
| onChange={[Function]} | ||
| placeholder="" | ||
| size="sm" | ||
| spellCheck={false} | ||
| status="disabled" | ||
| titleText="Username" | ||
| value="groot" | ||
| > | ||
| <div | ||
| className="input input-sm input--disabled" | ||
| style={ | ||
| Object { | ||
| "width": "100%", | ||
| } | ||
| } | ||
| > | ||
| <input | ||
| autoComplete="off" | ||
| autoFocus={false} | ||
| className="input-field" | ||
| data-test="nameInput" | ||
| disabled={true} | ||
| name="" | ||
| onChange={[Function]} | ||
| placeholder="" | ||
| spellCheck={false} | ||
| title="This input is disabled" | ||
| value="groot" | ||
| /> | ||
| <div | ||
| className="input-shadow" | ||
| /> | ||
| </div> | ||
| </Input> | ||
| </div> | ||
| </FormElement> | ||
| </form> | ||
| </Form> | ||
| </div> | ||
| </PanelBody> | ||
| </div> | ||
| </Panel> | ||
| </Settings> | ||
| `; |
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 |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import MePage from 'src/me/containers/MePage' | ||
| import Account from 'src/me/components/Account' | ||
| import Account from 'src/me/components/account/Account' | ||
|
|
||
| export {MePage, Account} |
Oops, something went wrong.