Skip to content

Commit

Permalink
[MM-47090]: Migrate "components/integrations/abstract_command.jsx" to…
Browse files Browse the repository at this point in the history 
… Typescript (mattermost#23325)
  • Loading branch information
@saideepesh000
saideepesh000 committed Jul 2, 2023
1 parent 8abc8ed commit 70d0a0f
Show file tree
Hide file tree
Showing 6 changed files with 185 additions and 162 deletions.
36 changes: 20 additions & 16 deletions ...napshots__/abstract_command.test.jsx.snap → ...napshots__/abstract_command.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<input
className="form-control"
id="displayName"
maxLength="64"
maxLength={64}
onChange={[Function]}
type="text"
value="display_name"
Expand Down Expand Up @@ -76,7 +76,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<input
className="form-control"
id="description"
maxLength="128"
maxLength={128}
onChange={[Function]}
type="text"
value="description"
Expand Down Expand Up @@ -177,7 +177,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<LocalizedInput
className="form-control"
id="url"
maxLength="1024"
maxLength={1024}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -258,7 +258,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<LocalizedInput
className="form-control"
id="username"
maxLength="64"
maxLength={64}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -297,7 +297,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<LocalizedInput
className="form-control"
id="iconUrl"
maxLength="1024"
maxLength={1024}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -367,7 +367,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<LocalizedInput
className="form-control"
id="autocompleteHint"
maxLength="1024"
maxLength={1024}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -406,7 +406,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<LocalizedInput
className="form-control"
id="description"
maxLength="128"
maxLength={128}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -462,7 +462,9 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
id="Footer"
/>
</SpinnerButton>
renderExtra
<div>
renderExtra
</div>
</div>
</form>
</div>
Expand Down Expand Up @@ -512,7 +514,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<input
className="form-control"
id="displayName"
maxLength="64"
maxLength={64}
onChange={[Function]}
type="text"
value="display_name"
Expand Down Expand Up @@ -545,7 +547,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<input
className="form-control"
id="description"
maxLength="128"
maxLength={128}
onChange={[Function]}
type="text"
value="description"
Expand Down Expand Up @@ -646,7 +648,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<LocalizedInput
className="form-control"
id="url"
maxLength="1024"
maxLength={1024}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -727,7 +729,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<LocalizedInput
className="form-control"
id="username"
maxLength="64"
maxLength={64}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -766,7 +768,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<LocalizedInput
className="form-control"
id="iconUrl"
maxLength="1024"
maxLength={1024}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -836,7 +838,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<LocalizedInput
className="form-control"
id="autocompleteHint"
maxLength="1024"
maxLength={1024}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -875,7 +877,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<LocalizedInput
className="form-control"
id="description"
maxLength="128"
maxLength={128}
onChange={[Function]}
placeholder={
Object {
Expand Down Expand Up @@ -934,7 +936,9 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
id="Footer"
/>
</SpinnerButton>
renderExtra
<div>
renderExtra
</div>
</div>
</form>
</div>
Expand Down
72 changes: 41 additions & 31 deletions ...ts/integrations/abstract_command.test.jsx → ...ts/integrations/abstract_command.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';
import React, {FormEvent} from 'react';
import {shallow} from 'enzyme';
import {FormattedMessage} from 'react-intl';

import AbstractCommand from 'components/integrations/abstract_command.jsx';
import AbstractCommand from 'components/integrations/abstract_command';
import {TestHelper} from 'utils/test_helper';

describe('components/integrations/AbstractCommand', () => {
const header = {id: 'Header', defaultMessage: 'Header'};
const footer = {id: 'Footer', defaultMessage: 'Footer'};
const loading = {id: 'Loading', defaultMessage: 'Loading'};
const method: 'G' | 'P' | '' = 'G';
const command = {
id: 'r5tpgt4iepf45jt768jz84djic',
display_name: 'display_name',
Expand All @@ -20,23 +22,21 @@ describe('components/integrations/AbstractCommand', () => {
auto_complete_hint: 'auto_complete_hint',
auto_complete_desc: 'auto_complete_desc',
token: 'jb6oyqh95irpbx8fo9zmndkp1r',
create_at: '1499722850203',
create_at: 1499722850203,
creator_id: '88oybd1dwfdoxpkpw1h5kpbyco',
delete_at: 0,
icon_url: 'https://google.com/icon',
method: 'G',
method,
team_id: 'm5gix3oye3du8ghk4ko6h9cq7y',
update_at: 1504468859001,
url: 'https://google.com/command',
username: 'username',
};
const team = {
name: 'test',
id: command.team_id,
};
const team = TestHelper.getTeamMock({name: 'test', id: command.team_id});

const action = jest.fn().mockImplementation(
() => {
return new Promise((resolve) => {
return new Promise<void>((resolve) => {
process.nextTick(() => resolve());
});
},
Expand All @@ -47,14 +47,14 @@ describe('components/integrations/AbstractCommand', () => {
header,
footer,
loading,
renderExtra: 'renderExtra',
renderExtra: <div>{'renderExtra'}</div>,
serverError: '',
initialCommand: command,
action,
};

test('should match snapshot', () => {
const wrapper = shallow(
const wrapper = shallow<AbstractCommand>(
<AbstractCommand {...baseProps}/>,
);
expect(wrapper).toMatchSnapshot();
Expand All @@ -63,7 +63,7 @@ describe('components/integrations/AbstractCommand', () => {
test('should match snapshot, displays client error', () => {
const newSeverError = 'server error';
const props = {...baseProps, serverError: newSeverError};
const wrapper = shallow(
const wrapper = shallow<AbstractCommand>(
<AbstractCommand {...props}/>,
);

Expand All @@ -75,7 +75,7 @@ describe('components/integrations/AbstractCommand', () => {
});

test('should call action function', () => {
const wrapper = shallow(
const wrapper = shallow<AbstractCommand>(
<AbstractCommand {...baseProps}/>,
);

Expand All @@ -86,7 +86,7 @@ describe('components/integrations/AbstractCommand', () => {
});

test('should match object returned by getStateFromCommand', () => {
const wrapper = shallow(
const wrapper = shallow<AbstractCommand>(
<AbstractCommand {...baseProps}/>,
);

Expand All @@ -109,67 +109,77 @@ describe('components/integrations/AbstractCommand', () => {
});

test('should match state when method is called', () => {
const wrapper = shallow(
const wrapper = shallow<AbstractCommand>(
<AbstractCommand {...baseProps}/>,
);

const displayName = 'new display_name';
wrapper.instance().updateDisplayName({target: {value: displayName}});
const displayNameEvent = {preventDefault: jest.fn(), target: {value: displayName}} as any;
wrapper.instance().updateDisplayName(displayNameEvent);
expect(wrapper.state('displayName')).toEqual(displayName);

const description = 'new description';
wrapper.instance().updateDescription({target: {value: description}});
const descriptionEvent = {preventDefault: jest.fn(), target: {value: description}} as any;
wrapper.instance().updateDescription(descriptionEvent);
expect(wrapper.state('description')).toEqual(description);

const trigger = 'new trigger';
wrapper.instance().updateTrigger({target: {value: trigger}});
const triggerEvent = {preventDefault: jest.fn(), target: {value: trigger}} as any;
wrapper.instance().updateTrigger(triggerEvent);
expect(wrapper.state('trigger')).toEqual(trigger);

const url = 'new url';
wrapper.instance().updateUrl({target: {value: url}});
const urlEvent = {preventDefault: jest.fn(), target: {value: url}} as any;
wrapper.instance().updateUrl(urlEvent);
expect(wrapper.state('url')).toEqual(url);

const method = 'new method';
wrapper.instance().updateMethod({target: {value: method}});
const method = 'P';
const methodEvent = {preventDefault: jest.fn(), target: {value: method}} as any;
wrapper.instance().updateMethod(methodEvent);
expect(wrapper.state('method')).toEqual(method);

const username = 'new username';
wrapper.instance().updateUsername({target: {value: username}});
const usernameEvent = {preventDefault: jest.fn(), target: {value: username}} as any;
wrapper.instance().updateUsername(usernameEvent);
expect(wrapper.state('username')).toEqual(username);

const iconUrl = 'new iconUrl';
wrapper.instance().updateIconUrl({target: {value: iconUrl}});
const iconUrlEvent = {preventDefault: jest.fn(), target: {value: iconUrl}} as any;
wrapper.instance().updateIconUrl(iconUrlEvent);
expect(wrapper.state('iconUrl')).toEqual(iconUrl);

wrapper.instance().updateAutocomplete({target: {checked: true}});
const trueUpdateAutocompleteEvent = {target: {checked: true}} as any;
const falseeUpdateAutocompleteEvent = {target: {checked: false}} as any;
wrapper.instance().updateAutocomplete(trueUpdateAutocompleteEvent);
expect(wrapper.state('autocomplete')).toEqual(true);
wrapper.instance().updateAutocomplete({target: {checked: false}});
wrapper.instance().updateAutocomplete(falseeUpdateAutocompleteEvent);
expect(wrapper.state('autocomplete')).toEqual(false);

const autocompleteHint = 'new autocompleteHint';
wrapper.instance().updateAutocompleteHint({target: {value: autocompleteHint}});
const autocompleteHintEvent = {preventDefault: jest.fn(), target: {value: autocompleteHint}} as any;
wrapper.instance().updateAutocompleteHint(autocompleteHintEvent);
expect(wrapper.state('autocompleteHint')).toEqual(autocompleteHint);

const autocompleteDescription = 'new autocompleteDescription';
wrapper.instance().updateAutocompleteDescription({target: {value: autocompleteDescription}});
const autocompleteDescriptionEvent = {preventDefault: jest.fn(), target: {value: autocompleteDescription}} as any;
wrapper.instance().updateAutocompleteDescription(autocompleteDescriptionEvent);
expect(wrapper.state('autocompleteDescription')).toEqual(autocompleteDescription);
});

test('should match state when handleSubmit is called', () => {
const newAction = jest.fn().mockImplementation(
() => {
return new Promise((resolve) => {
return new Promise<void>((resolve) => {
process.nextTick(() => resolve());
});
},
);
const props = {...baseProps, action: newAction};
const wrapper = shallow(
const wrapper = shallow<AbstractCommand>(
<AbstractCommand {...props}/>,
);
expect(newAction).toHaveBeenCalledTimes(0);

const evt = {preventDefault: jest.fn()};
const evt = {preventDefault: jest.fn()} as unknown as FormEvent<Element>;
const handleSubmit = wrapper.instance().handleSubmit;
handleSubmit(evt);
expect(wrapper.state('saving')).toEqual(true);
Expand Down
Loading

0 comments on commit 70d0a0f

Please sign in to comment.