Add tests for Dev Connect (#988)
This commit is contained in:
Mario See
Mac Siri
parent
92b6020db7
commit
b5446e18f3
15 changed files with 1205 additions and 6 deletions
|
|
@ -0,0 +1,17 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Alert /> should render and test snapshot 1`] = `
|
||||
<div
|
||||
class="chatalert__default "
|
||||
>
|
||||
More new messages below
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<Alert /> should render and test snapshot with hidden class 1`] = `
|
||||
<div
|
||||
class="chatalert__default chatalert__default--hidden"
|
||||
>
|
||||
More new messages below
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<CodeEditor /> should render and test snapshot 1`] = `
|
||||
<div
|
||||
class="chatcodeeditor"
|
||||
id="codeeditor"
|
||||
>
|
||||
<div
|
||||
class="chatcodeeditor__header"
|
||||
>
|
||||
Experimental (WIP)
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Compose /> behavior with message should render and test snapshot 1`] = `
|
||||
<div
|
||||
class="messagecomposer"
|
||||
>
|
||||
<textarea
|
||||
class="messagecomposer__input"
|
||||
id="messageform"
|
||||
maxLength="1000"
|
||||
onKeyDown={[Function]}
|
||||
placeholder="Message goes here"
|
||||
/>
|
||||
<button
|
||||
class="messagecomposer__submit"
|
||||
onClick={[Function]}
|
||||
>
|
||||
SEND
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<GithubRepo /> with fake token should have the proper elements, attributes and values with states set 1`] = `
|
||||
RenderContext {
|
||||
"0": VNode {
|
||||
"attributes": Object {
|
||||
"activeChannelId": 12345,
|
||||
"githubToken": "some_token",
|
||||
"pusherKey": "ASDFGHJKL",
|
||||
"resource": Object {
|
||||
"args": "someargs",
|
||||
},
|
||||
},
|
||||
"children": Array [],
|
||||
"key": undefined,
|
||||
"nodeName": [Function],
|
||||
},
|
||||
"length": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`<GithubRepo /> with fake token should render and test snapshot 1`] = `
|
||||
<div
|
||||
class="activecontent__githubrepo"
|
||||
>
|
||||
<div
|
||||
class="activecontent__githubrepoheader"
|
||||
>
|
||||
<a
|
||||
href="/Users/benhalpern/dev/dev.to_core/app"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="activecontent__githubrepofiles"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<GithubRepo /> with no token should render and test snapshot 1`] = `
|
||||
<div
|
||||
class="activecontent__githubrepo"
|
||||
>
|
||||
<div
|
||||
class="activecontent__githubrepoheader"
|
||||
>
|
||||
<em>
|
||||
Authentication required
|
||||
</em>
|
||||
</div>
|
||||
<p>
|
||||
You must
|
||||
<a
|
||||
data-no-instant={true}
|
||||
href="/users/auth/github"
|
||||
>
|
||||
authenticate with GitHub
|
||||
</a>
|
||||
to use this feature.
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Message /> should render and test snapshot 1`] = `
|
||||
<div
|
||||
class="chatmessage"
|
||||
>
|
||||
<div
|
||||
class="chatmessage__profilepic"
|
||||
>
|
||||
<a
|
||||
data-content="users/undefined"
|
||||
href="/asdf"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="asdf profile"
|
||||
class="chatmessagebody__profileimage"
|
||||
data-content="users/undefined"
|
||||
src=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="chatmessage__body"
|
||||
>
|
||||
<span
|
||||
class="chatmessagebody__username"
|
||||
style={
|
||||
Object {
|
||||
"color": "#00FFFF",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
class="chatmessagebody__username--link"
|
||||
data-content="users/undefined"
|
||||
href="/asdf"
|
||||
target="_blank"
|
||||
>
|
||||
asdf
|
||||
</a>
|
||||
</span>
|
||||
<span />
|
||||
<div
|
||||
class="chatmessage__bodytext"
|
||||
>
|
||||
<span
|
||||
class="chatmessagebody__message"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "WE BUILT THIS CITY",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"color": "black",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
|
||||
<div>
|
||||
<img
|
||||
src="https://media.giphy.com/media/3o7WTHb2WjEXbsmWDS/giphy.gif"
|
||||
style={
|
||||
Object {
|
||||
"borderRadius": "500px",
|
||||
"display": "block",
|
||||
"height": "210px",
|
||||
"margin": " 15px auto",
|
||||
"width": "210px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<h1
|
||||
style={
|
||||
Object {
|
||||
"textAlign": "center",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
href="/bojackhorseman"
|
||||
target="_blank"
|
||||
>
|
||||
Bojack Horseman
|
||||
</a>
|
||||
</h1>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"height": "50px",
|
||||
"margin": "auto",
|
||||
"width": "96%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
href="https://twitter.com/bojacktwitter"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"margin": "5px 15px 15px 0px",
|
||||
"width": "30px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/bojackgithub"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"margin": "5px 15px 15px 0px",
|
||||
"width": "30px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="http://bojackhorseman.com"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"margin": "5px 15px 15px 0px",
|
||||
"width": "30px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"fontStyle": "italic",
|
||||
}
|
||||
}
|
||||
>
|
||||
I am the Bojack Horseman from Horsing Around and Secreteriat
|
||||
</div>
|
||||
<div
|
||||
class="activechatchannel__activecontentuserdetails"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="key"
|
||||
>
|
||||
location
|
||||
</div>
|
||||
<div
|
||||
class="value"
|
||||
>
|
||||
Los Angeles, CA
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="key"
|
||||
>
|
||||
joined
|
||||
</div>
|
||||
<div
|
||||
class="value"
|
||||
>
|
||||
January 2, 1964
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
|
||||
<div>
|
||||
<img
|
||||
src="https://media.giphy.com/media/xThuW6sWCGbpZMpX7a/giphy.gif"
|
||||
style={
|
||||
Object {
|
||||
"borderRadius": "500px",
|
||||
"display": "block",
|
||||
"height": "210px",
|
||||
"margin": " 15px auto",
|
||||
"width": "210px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<h1
|
||||
style={
|
||||
Object {
|
||||
"textAlign": "center",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
href="/mrpeanutbutter"
|
||||
target="_blank"
|
||||
>
|
||||
Mr. Peanutbutter
|
||||
</a>
|
||||
</h1>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"height": "50px",
|
||||
"margin": "auto",
|
||||
"width": "96%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
href="https://twitter.com/mrpbtwitter"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"margin": "5px 15px 15px 0px",
|
||||
"width": "30px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/mrpbgithub"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"margin": "5px 15px 15px 0px",
|
||||
"width": "30px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="http://mrpeanutbutter.com"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"margin": "5px 15px 15px 0px",
|
||||
"width": "30px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"fontStyle": "italic",
|
||||
}
|
||||
}
|
||||
>
|
||||
Woof Woof *smile*
|
||||
</div>
|
||||
<div
|
||||
class="activechatchannel__activecontentuserdetails"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="key"
|
||||
>
|
||||
location
|
||||
</div>
|
||||
<div
|
||||
class="value"
|
||||
>
|
||||
Los Angeles, DO(G)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="key"
|
||||
>
|
||||
joined
|
||||
</div>
|
||||
<div
|
||||
class="value"
|
||||
>
|
||||
1960s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<View /> should render and test snapshot (no channel) 1`] = `
|
||||
<div
|
||||
class="chatNonChatView"
|
||||
>
|
||||
<div
|
||||
class="container"
|
||||
>
|
||||
<button
|
||||
class="chatNonChatView_exitbutton"
|
||||
data-content="exit"
|
||||
onClick={[Function]}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<h1>
|
||||
Channel Invitations 🤗
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<View /> should render and test snapshot (with channel) 1`] = `
|
||||
RenderContext {
|
||||
"0": VNode {
|
||||
"attributes": Object {
|
||||
"channels": Array [
|
||||
Object {
|
||||
"channel_name": "name",
|
||||
"description": "some description",
|
||||
"membership_id": "12345",
|
||||
},
|
||||
],
|
||||
"onAcceptInvitation": [Function],
|
||||
"onDeclineInvitation": [Function],
|
||||
"onViewExit": [Function],
|
||||
},
|
||||
"children": Array [],
|
||||
"key": undefined,
|
||||
"nodeName": [Function],
|
||||
},
|
||||
"length": 1,
|
||||
}
|
||||
`;
|
||||
34
app/javascript/chat/__tests__/alert.test.jsx
Normal file
34
app/javascript/chat/__tests__/alert.test.jsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { h } from 'preact';
|
||||
import render from 'preact-render-to-json';
|
||||
import { shallow } from 'preact-render-spy';
|
||||
import Alert from '../alert';
|
||||
|
||||
describe('<Alert />', () => {
|
||||
it('should render and test snapshot', () => {
|
||||
const tree = render(<Alert showAlert />);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render and test snapshot with hidden class', () => {
|
||||
const tree = render(<Alert showAlert={false} />);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should have div without hidden class', () => {
|
||||
const context = shallow(<Alert showAlert />);
|
||||
expect(context.find('.chatalert__default').exists()).toEqual(true);
|
||||
expect(context.find('.chatalert__default').text()).toEqual(
|
||||
'More new messages below',
|
||||
);
|
||||
expect(context.find('.chatalert__default--hidden').exists()).toEqual(false);
|
||||
});
|
||||
|
||||
it('should have div with hidden class', () => {
|
||||
const context = shallow(<Alert showAlert={false} />);
|
||||
expect(context.find('.chatalert__default').exists()).toEqual(true);
|
||||
expect(context.find('.chatalert__default').text()).toEqual(
|
||||
'More new messages below',
|
||||
);
|
||||
expect(context.find('.chatalert__default--hidden').exists()).toEqual(true);
|
||||
});
|
||||
});
|
||||
22
app/javascript/chat/__tests__/codeEditor.test.jsx
Normal file
22
app/javascript/chat/__tests__/codeEditor.test.jsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { h } from 'preact';
|
||||
import render from 'preact-render-to-json';
|
||||
// import { shallow } from 'preact-render-spy';
|
||||
import CodeEditor from '../codeEditor';
|
||||
|
||||
const getCodeEditor = () => (
|
||||
<CodeEditor activeChannelId={12345} pusherKey="ASDFGHJKL" />
|
||||
);
|
||||
|
||||
describe('<CodeEditor />', () => {
|
||||
it('should render and test snapshot', () => {
|
||||
const tree = render(getCodeEditor());
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// it('should have the proper attributes and text values', () => {
|
||||
// const context = shallow(getCodeEditor());
|
||||
// expect(context.find('codeeditor').exists()).toEqual(true);
|
||||
// expect(context.find('.chatcodeeditor__header').exists()).toEqual(true);
|
||||
// expect(context.find('.chatcodeeditor__header').text()).toEqual('Experimental (WIP)');
|
||||
// });
|
||||
});
|
||||
137
app/javascript/chat/__tests__/compose.test.jsx
Normal file
137
app/javascript/chat/__tests__/compose.test.jsx
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import { h } from 'preact';
|
||||
import render from 'preact-render-to-json';
|
||||
import { shallow } from 'preact-render-spy';
|
||||
import Compose from '../compose';
|
||||
|
||||
let submitNoMessage = false;
|
||||
let submitWithMessage = false;
|
||||
let textfieldIsEmpty = true;
|
||||
|
||||
const handleSubmitEmpty = () => {
|
||||
submitNoMessage = true;
|
||||
submitWithMessage = false;
|
||||
textfieldIsEmpty = true;
|
||||
};
|
||||
|
||||
const handleSubmitFake = () => {
|
||||
submitNoMessage = false;
|
||||
submitWithMessage = true;
|
||||
textfieldIsEmpty = true;
|
||||
};
|
||||
|
||||
const handleKeyDownFake = e => {
|
||||
const enterPressed = e.keyCode === 13;
|
||||
if (!enterPressed) {
|
||||
textfieldIsEmpty = false;
|
||||
} else if (textfieldIsEmpty) {
|
||||
handleSubmitEmpty();
|
||||
} else {
|
||||
handleSubmitFake();
|
||||
}
|
||||
};
|
||||
|
||||
const getCompose = tf => {
|
||||
// true -> not empty, false -> empty
|
||||
if (tf) {
|
||||
return (
|
||||
<Compose
|
||||
handleSubmitOnClick={handleSubmitFake}
|
||||
handleKeyDown={handleKeyDownFake}
|
||||
activeChannelId={12345}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Compose
|
||||
handleSubmitOnClick={handleSubmitEmpty}
|
||||
handleKeyDown={handleKeyDownFake}
|
||||
activeChannelId={12345}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
describe('<Compose />', () => {
|
||||
afterEach(() => {
|
||||
submitNoMessage = false;
|
||||
submitWithMessage = false;
|
||||
textfieldIsEmpty = true;
|
||||
});
|
||||
|
||||
describe('behavior with no message', () => {
|
||||
it('should click submit', () => {
|
||||
const context = shallow(getCompose(false));
|
||||
const btn = context.find('.messagecomposer__submit');
|
||||
|
||||
expect(btn.simulate('click'));
|
||||
|
||||
expect(submitNoMessage).toEqual(true);
|
||||
expect(submitWithMessage).toEqual(false);
|
||||
expect(textfieldIsEmpty).toEqual(true);
|
||||
});
|
||||
|
||||
it('should press enter', () => {
|
||||
const context = shallow(getCompose(false));
|
||||
const input = context.find('.messagecomposer__input');
|
||||
|
||||
const enter = { keyCode: 13 };
|
||||
expect(input.simulate('keyDown', enter));
|
||||
|
||||
expect(submitNoMessage).toEqual(true);
|
||||
expect(submitWithMessage).toEqual(false);
|
||||
expect(textfieldIsEmpty).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('behavior with message', () => {
|
||||
it('should render and test snapshot', () => {
|
||||
const tree = render(getCompose(true));
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should have proper elements, attributes and values', () => {
|
||||
const context = shallow(getCompose(true));
|
||||
expect(context.find('.messagecomposer').exists()).toEqual(true);
|
||||
|
||||
const input = context.find('.messagecomposer__input');
|
||||
expect(input.exists()).toEqual(true);
|
||||
expect(input.text()).toEqual('');
|
||||
expect(input.attr('maxLength')).toEqual('1000');
|
||||
expect(input.attr('placeholder')).toEqual('Message goes here');
|
||||
|
||||
const btn = context.find('.messagecomposer__submit');
|
||||
expect(btn.exists()).toEqual(true);
|
||||
expect(btn.text()).toEqual('SEND');
|
||||
});
|
||||
|
||||
it('should click submit and check for empty textarea', () => {
|
||||
const context = shallow(getCompose(true));
|
||||
const input = context.find('.messagecomposer__input');
|
||||
const btn = context.find('.messagecomposer__submit');
|
||||
|
||||
const someletter = { keyCode: 69 };
|
||||
|
||||
expect(input.simulate('keyDown', someletter));
|
||||
expect(textfieldIsEmpty).toEqual(false);
|
||||
|
||||
expect(btn.simulate('click'));
|
||||
|
||||
expect(submitNoMessage).toEqual(false);
|
||||
expect(submitWithMessage).toEqual(true);
|
||||
expect(textfieldIsEmpty).toEqual(true);
|
||||
});
|
||||
|
||||
it('should press enter and check for empty textarea', () => {
|
||||
const context = shallow(getCompose(true));
|
||||
const input = context.find('.messagecomposer__input');
|
||||
|
||||
const someletter = { keyCode: 69 };
|
||||
expect(input.simulate('keyDown', someletter));
|
||||
const enter = { keyCode: 13 };
|
||||
expect(input.simulate('keyDown', enter));
|
||||
|
||||
expect(submitNoMessage).toEqual(false);
|
||||
expect(submitWithMessage).toEqual(true);
|
||||
expect(textfieldIsEmpty).toEqual(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
191
app/javascript/chat/__tests__/githubRepo.test.jsx
Normal file
191
app/javascript/chat/__tests__/githubRepo.test.jsx
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
import { h } from 'preact';
|
||||
import render from 'preact-render-to-json';
|
||||
import { shallow } from 'preact-render-spy';
|
||||
import fetch from 'jest-fetch-mock';
|
||||
import marked from 'marked';
|
||||
import GithubRepo from '../githubRepo';
|
||||
|
||||
global.fetch = fetch;
|
||||
|
||||
const getGithubRepo = token => (
|
||||
<GithubRepo
|
||||
activeChannelId={12345}
|
||||
pusherKey="ASDFGHJKL"
|
||||
githubToken={token}
|
||||
resource={{ args: 'someargs' }}
|
||||
/>
|
||||
);
|
||||
|
||||
describe('<GithubRepo />', () => {
|
||||
describe('with no token', () => {
|
||||
it('should render and test snapshot', () => {
|
||||
const tree = render(getGithubRepo());
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should have the proper elements, attributes and values', () => {
|
||||
const context = shallow(getGithubRepo());
|
||||
expect(context.find('.activecontent__githubrepo').exists()).toEqual(true);
|
||||
expect(context.find('em').text()).toEqual('Authentication required');
|
||||
});
|
||||
});
|
||||
|
||||
describe('with fake token', () => {
|
||||
it('should render and test snapshot', () => {
|
||||
const tree = render(getGithubRepo('some_token'));
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should have the proper elements, attributes and values with states set', async () => {
|
||||
const context = await shallow(getGithubRepo('some_token'));
|
||||
const dirs = [
|
||||
{
|
||||
name: 'Camera',
|
||||
path: 'Camera',
|
||||
sha: 'hysst5jI2idHutihWo3JxYlTByoj0lkdXmkmuBEp',
|
||||
size: 0,
|
||||
url:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Camera?ref=master',
|
||||
html_url:
|
||||
'https://github.com/username/repositoryname/tree/master/Camera',
|
||||
git_url:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/hysst5jI2idHutihWo3JxYlTByoj0lkdXmkmuBEp',
|
||||
download_url: null,
|
||||
type: 'dir',
|
||||
_links: {
|
||||
self:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Camera?ref=master',
|
||||
git:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/hysst5jI2idHutihWo3JxYlTByoj0lkdXmkmuBEp',
|
||||
html:
|
||||
'https://github.com/username/repositoryname/tree/master/Camera',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Environment',
|
||||
path: 'Environment',
|
||||
sha: 'dwogYlYGQOXj1ru3L9HYfX7HdX3WNQPJgJVeStRs',
|
||||
size: 0,
|
||||
url:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Environment?ref=master',
|
||||
html_url:
|
||||
'https://github.com/username/repositoryname/tree/master/Environment',
|
||||
git_url:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/dwogYlYGQOXj1ru3L9HYfX7HdX3WNQPJgJVeStRs',
|
||||
download_url: null,
|
||||
type: 'dir',
|
||||
_links: {
|
||||
self:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Environment?ref=master',
|
||||
git:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/dwogYlYGQOXj1ru3L9HYfX7HdX3WNQPJgJVeStRs',
|
||||
html:
|
||||
'https://github.com/username/repositoryname/tree/master/Environment',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Interactables',
|
||||
path: 'Interactables',
|
||||
sha: '44OLxtYSQjr2DLVKPnwGTj6JuQpo7Te7pEIDULat',
|
||||
size: 0,
|
||||
url:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Interactables?ref=master',
|
||||
html_url:
|
||||
'https://github.com/username/repositoryname/tree/master/Interactables',
|
||||
git_url:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/44OLxtYSQjr2DLVKPnwGTj6JuQpo7Te7pEIDULat',
|
||||
download_url: null,
|
||||
type: 'dir',
|
||||
_links: {
|
||||
self:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Interactables?ref=master',
|
||||
git:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/44OLxtYSQjr2DLVKPnwGTj6JuQpo7Te7pEIDULat',
|
||||
html:
|
||||
'https://github.com/username/repositoryname/tree/master/Interactables',
|
||||
},
|
||||
},
|
||||
];
|
||||
context.setState({ directories: dirs });
|
||||
const fils = [
|
||||
{
|
||||
name: 'Level Design',
|
||||
path: 'Level Design',
|
||||
sha: 'g178Oy2xV8gqFBhoaflJkSbHN01dxWEqjJTxw6Ax',
|
||||
size: 583,
|
||||
url:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Level%20Design?ref=master',
|
||||
html_url:
|
||||
'https://github.com/username/repositoryname/tree/master/Level%20Design',
|
||||
git_url:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/g178Oy2xV8gqFBhoaflJkSbHN01dxWEqjJTxw6Ax',
|
||||
download_url:
|
||||
'https://raw.githubusercontent.com/username/repositoryname/master/Level%20Design',
|
||||
type: 'file',
|
||||
_links: {
|
||||
self:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Level%20Design?ref=master',
|
||||
git:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/g178Oy2xV8gqFBhoaflJkSbHN01dxWEqjJTxw6Ax',
|
||||
html:
|
||||
'https://github.com/username/repositoryname/tree/master/Level%20Design',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Player',
|
||||
path: 'Player',
|
||||
sha: 'tia6ISq19krmOJzbtwpCTIuwRnvpSxZY2g1FMgOp',
|
||||
size: 1000,
|
||||
url:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Player?ref=master',
|
||||
html_url:
|
||||
'https://github.com/username/repositoryname/tree/master/Player',
|
||||
git_url:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/tia6ISq19krmOJzbtwpCTIuwRnvpSxZY2g1FMgOp',
|
||||
download_url:
|
||||
'https://raw.githubusercontent.com/username/repositoryname/master/Player',
|
||||
type: 'file',
|
||||
_links: {
|
||||
self:
|
||||
'https://api.github.com/repos/username/repositoryname/contents/Player?ref=master',
|
||||
git:
|
||||
'https://api.github.com/repos/username/repositoryname/git/trees/tia6ISq19krmOJzbtwpCTIuwRnvpSxZY2g1FMgOp',
|
||||
html:
|
||||
'https://github.com/username/repositoryname/tree/master/Player',
|
||||
},
|
||||
},
|
||||
];
|
||||
context.setState({ files: fils });
|
||||
const dirsfils = dirs.concat(fils);
|
||||
context.setState({ readme: 'SOMETHING READ ME BLAHHHH' });
|
||||
context.setState({ root: true });
|
||||
context.rerender();
|
||||
|
||||
const tree = render(context);
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
||||
const len = context.find('.activecontent__githubrepofilerow').length;
|
||||
for (let i = 0; i < len; i += 1) {
|
||||
const ghrow = context.find('.activecontent__githubrepofilerow').at(i);
|
||||
expect(ghrow.exists()).toEqual(true);
|
||||
if (dirsfils[i].type === 'dir') {
|
||||
expect(ghrow.text()).toEqual(`📁 ${dirsfils[i].name}`);
|
||||
} else {
|
||||
expect(ghrow.text()).toEqual(dirsfils[i].name);
|
||||
}
|
||||
expect(ghrow.childAt(0).attr('href')).toEqual(dirsfils[i].html_url);
|
||||
expect(ghrow.childAt(0).attr('data-api-url')).toEqual(dirsfils[i].url);
|
||||
expect(ghrow.childAt(0).attr('data-path')).toEqual(dirsfils[i].path);
|
||||
}
|
||||
expect(context.find('.activecontent__githubrepoheader').text()).toEqual(
|
||||
context.state('path'),
|
||||
);
|
||||
expect(
|
||||
context
|
||||
.find('.activecontent__githubrepo')
|
||||
.childAt(2)
|
||||
.attr('dangerouslySetInnerHTML'),
|
||||
).toEqual({ __html: `${marked(context.state('readme'))}` });
|
||||
});
|
||||
});
|
||||
});
|
||||
41
app/javascript/chat/__tests__/message.test.jsx
Normal file
41
app/javascript/chat/__tests__/message.test.jsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { h } from 'preact';
|
||||
import render from 'preact-render-to-json';
|
||||
import { shallow } from 'preact-render-spy';
|
||||
import Message from '../message';
|
||||
|
||||
const msg = {
|
||||
username: 'asdf',
|
||||
used_id: 12345,
|
||||
message: 'WE BUILT THIS CITY',
|
||||
color: '#00FFFF',
|
||||
};
|
||||
|
||||
const getMessage = message => (
|
||||
<Message
|
||||
user={message.username}
|
||||
userID={message.user_id}
|
||||
message={message.message}
|
||||
color={message.color}
|
||||
/>
|
||||
);
|
||||
|
||||
describe('<Message />', () => {
|
||||
it('should render and test snapshot', () => {
|
||||
const tree = render(getMessage(msg));
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should have the proper elements, attributes and values', () => {
|
||||
const context = shallow(getMessage(msg));
|
||||
expect(context.find('.chatmessage').exists()).toEqual(true);
|
||||
expect(
|
||||
context.find('.chatmessagebody__message').attr('dangerouslySetInnerHTML'),
|
||||
).toEqual({ __html: msg.message });
|
||||
expect(
|
||||
context.find('.chatmessagebody__username').attr('style').color,
|
||||
).toEqual(msg.color);
|
||||
expect(context.find('.chatmessagebody__username--link').text()).toEqual(
|
||||
msg.username,
|
||||
);
|
||||
});
|
||||
});
|
||||
176
app/javascript/chat/__tests__/userDetails.test.jsx
Normal file
176
app/javascript/chat/__tests__/userDetails.test.jsx
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
import { h } from 'preact';
|
||||
import render from 'preact-render-to-json';
|
||||
import { shallow } from 'preact-render-spy';
|
||||
import UserDetails from '../userDetails';
|
||||
|
||||
const user1 = {
|
||||
username: 'bojackhorseman',
|
||||
name: 'Bojack Horseman',
|
||||
summary: 'I am the Bojack Horseman from Horsing Around and Secreteriat',
|
||||
joined_at: 'January 2, 1964',
|
||||
twitter_username: 'bojacktwitter',
|
||||
github_username: 'bojackgithub',
|
||||
website_url: 'http://bojackhorseman.com',
|
||||
location: 'Los Angeles, CA',
|
||||
profile_image: 'https://media.giphy.com/media/3o7WTHb2WjEXbsmWDS/giphy.gif',
|
||||
};
|
||||
|
||||
const user2 = {
|
||||
username: 'mrpeanutbutter',
|
||||
name: 'Mr. Peanutbutter',
|
||||
summary: 'Woof Woof *smile*',
|
||||
joined_at: '1960s',
|
||||
twitter_username: 'mrpbtwitter',
|
||||
github_username: 'mrpbgithub',
|
||||
website_url: 'http://mrpeanutbutter.com',
|
||||
location: 'Los Angeles, DO(G)',
|
||||
profile_image: 'https://media.giphy.com/media/xThuW6sWCGbpZMpX7a/giphy.gif',
|
||||
};
|
||||
|
||||
const getUserDetails = user => <UserDetails user={user} />;
|
||||
|
||||
describe('<UserDetails />', () => {
|
||||
describe('for user1', () => {
|
||||
it('should render and test snapshot', () => {
|
||||
const tree = render(getUserDetails(user1));
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should have the appropriate elements, attributes and values', () => {
|
||||
const context = shallow(getUserDetails(user1));
|
||||
expect(
|
||||
context.find('.activechatchannel__activecontentuserdetails').exists(),
|
||||
).toEqual(true); // only class to check for
|
||||
const parentDiv = context.find('div').at(0);
|
||||
|
||||
expect(parentDiv.childAt(0)).toEqual(context.find('img').at(0));
|
||||
expect(
|
||||
context
|
||||
.find('img')
|
||||
.at(0)
|
||||
.attr('src'),
|
||||
).toEqual(user1.profile_image); // profile pic
|
||||
|
||||
expect(parentDiv.childAt(1)).toEqual(context.find('h1'));
|
||||
expect(context.find('h1').text()).toEqual(user1.name); // user.name
|
||||
expect(
|
||||
context
|
||||
.find('a')
|
||||
.at(0)
|
||||
.attr('href'),
|
||||
).toEqual(`/${user1.username}`); // user.username
|
||||
|
||||
// social links
|
||||
expect(
|
||||
context
|
||||
.find('a')
|
||||
.at(1)
|
||||
.attr('href'),
|
||||
).toEqual(`https://twitter.com/${user1.twitter_username}`); // twitter
|
||||
expect(
|
||||
context
|
||||
.find('a')
|
||||
.at(2)
|
||||
.attr('href'),
|
||||
).toEqual(`https://github.com/${user1.github_username}`); // github
|
||||
expect(
|
||||
context
|
||||
.find('a')
|
||||
.at(3)
|
||||
.attr('href'),
|
||||
).toEqual(user1.website_url); // website
|
||||
|
||||
expect(parentDiv.childAt(3)).toEqual(context.find('div').at(2));
|
||||
expect(
|
||||
context
|
||||
.find('div')
|
||||
.at(2)
|
||||
.text(),
|
||||
).toEqual(user1.summary); // user.summary
|
||||
expect(
|
||||
context
|
||||
.find('div')
|
||||
.at(6)
|
||||
.text(),
|
||||
).toEqual(user1.location); // user.location
|
||||
expect(
|
||||
context
|
||||
.find('div')
|
||||
.at(8)
|
||||
.text(),
|
||||
).toEqual(user1.joined_at); // user.joined_at
|
||||
});
|
||||
});
|
||||
|
||||
describe('for user2', () => {
|
||||
it('should render and test snapshot', () => {
|
||||
const tree = render(getUserDetails(user2));
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should have the appropriate elements, attributes and values', () => {
|
||||
const context = shallow(getUserDetails(user2));
|
||||
expect(
|
||||
context.find('.activechatchannel__activecontentuserdetails').exists(),
|
||||
).toEqual(true); // only class to check for
|
||||
const parentDiv = context.find('div').at(0);
|
||||
|
||||
expect(parentDiv.childAt(0)).toEqual(context.find('img').at(0));
|
||||
expect(
|
||||
context
|
||||
.find('img')
|
||||
.at(0)
|
||||
.attr('src'),
|
||||
).toEqual(user2.profile_image); // profile pic
|
||||
|
||||
expect(parentDiv.childAt(1)).toEqual(context.find('h1'));
|
||||
expect(context.find('h1').text()).toEqual(user2.name); // user.name
|
||||
expect(
|
||||
context
|
||||
.find('a')
|
||||
.at(0)
|
||||
.attr('href'),
|
||||
).toEqual(`/${user2.username}`); // user.username
|
||||
|
||||
// social links
|
||||
expect(
|
||||
context
|
||||
.find('a')
|
||||
.at(1)
|
||||
.attr('href'),
|
||||
).toEqual(`https://twitter.com/${user2.twitter_username}`); // twitter
|
||||
expect(
|
||||
context
|
||||
.find('a')
|
||||
.at(2)
|
||||
.attr('href'),
|
||||
).toEqual(`https://github.com/${user2.github_username}`); // github
|
||||
expect(
|
||||
context
|
||||
.find('a')
|
||||
.at(3)
|
||||
.attr('href'),
|
||||
).toEqual(user2.website_url); // website
|
||||
|
||||
expect(parentDiv.childAt(3)).toEqual(context.find('div').at(2));
|
||||
expect(
|
||||
context
|
||||
.find('div')
|
||||
.at(2)
|
||||
.text(),
|
||||
).toEqual(user2.summary); // user.summary
|
||||
expect(
|
||||
context
|
||||
.find('div')
|
||||
.at(6)
|
||||
.text(),
|
||||
).toEqual(user2.location); // user.location
|
||||
expect(
|
||||
context
|
||||
.find('div')
|
||||
.at(8)
|
||||
.text(),
|
||||
).toEqual(user2.joined_at); // user.joined_at
|
||||
});
|
||||
});
|
||||
});
|
||||
139
app/javascript/chat/__tests__/view.test.jsx
Normal file
139
app/javascript/chat/__tests__/view.test.jsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import { h } from 'preact';
|
||||
import render from 'preact-render-to-json';
|
||||
import { shallow } from 'preact-render-spy';
|
||||
import View from '../view';
|
||||
|
||||
let exited = false;
|
||||
let accepted = false;
|
||||
let declined = false;
|
||||
|
||||
const onViewExitFake = () => {
|
||||
exited = true;
|
||||
};
|
||||
|
||||
const handleInvitationAcceptFake = () => {
|
||||
accepted = true;
|
||||
};
|
||||
|
||||
const handleInvitationDeclineFake = () => {
|
||||
declined = true;
|
||||
};
|
||||
|
||||
const sampleChannel = [
|
||||
{
|
||||
channel_name: 'name',
|
||||
description: 'some description',
|
||||
membership_id: '12345',
|
||||
},
|
||||
];
|
||||
|
||||
const getView = channel => (
|
||||
<View
|
||||
channels={channel}
|
||||
onViewExit={onViewExitFake}
|
||||
onAcceptInvitation={handleInvitationAcceptFake}
|
||||
onDeclineInvitation={handleInvitationDeclineFake}
|
||||
/>
|
||||
);
|
||||
|
||||
describe('<View />', () => {
|
||||
it('should render and test snapshot (no channel)', () => {
|
||||
const tree = render(getView([]));
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render and test snapshot (with channel)', () => {
|
||||
const tree = shallow(getView(sampleChannel));
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should have the proper attributes and text values (no channel provided)', () => {
|
||||
const context = shallow(getView([]));
|
||||
expect(context.find('.chatNonChatView').exists()).toEqual(true);
|
||||
expect(context.find('.container').exists()).toEqual(true);
|
||||
|
||||
expect(context.find('.chatNonChatView_exitbutton').exists()).toEqual(true);
|
||||
expect(context.find('.chatNonChatView_exitbutton').text()).toEqual('×');
|
||||
|
||||
expect(context.find('h1').exists()).toEqual(true);
|
||||
expect(context.find('h1').text()).toEqual('Channel Invitations 🤗');
|
||||
|
||||
expect(context.find('.chatNonChatView_contentblock').exists()).toEqual(
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
it('should have the proper attributes and text values (with channel provided)', () => {
|
||||
const context = shallow(getView(sampleChannel));
|
||||
expect(context.find('.chatNonChatView_contentblock').exists()).toEqual(
|
||||
true,
|
||||
);
|
||||
|
||||
expect(context.find('h2').exists()).toEqual(true);
|
||||
expect(context.find('h2').text()).toEqual('name');
|
||||
|
||||
expect(context.find('em').exists()).toEqual(true);
|
||||
expect(context.find('em').text()).toEqual('some description');
|
||||
|
||||
expect(context.find('.cta').exists()).toEqual(true);
|
||||
expect(
|
||||
context
|
||||
.find('.cta')
|
||||
.at(0)
|
||||
.attr('data-content'),
|
||||
).toEqual('12345'); // accept button
|
||||
expect(
|
||||
context
|
||||
.find('.cta')
|
||||
.at(0)
|
||||
.text(),
|
||||
).toEqual('Accept'); // accept button
|
||||
expect(
|
||||
context
|
||||
.find('.cta')
|
||||
.at(1)
|
||||
.attr('data-content'),
|
||||
).toEqual('12345'); // decline button
|
||||
expect(
|
||||
context
|
||||
.find('.cta')
|
||||
.at(1)
|
||||
.text(),
|
||||
).toEqual('Decline'); // accept button
|
||||
});
|
||||
|
||||
it('should trigger exit', () => {
|
||||
const context = shallow(getView([]));
|
||||
context.find('.chatNonChatView_exitbutton').simulate('click');
|
||||
expect(exited).toEqual(true);
|
||||
exited = false;
|
||||
});
|
||||
|
||||
it('should trigger accept', () => {
|
||||
const context = shallow(getView(sampleChannel));
|
||||
context
|
||||
.find('.cta')
|
||||
.at(0)
|
||||
.simulate('click'); // click accept button
|
||||
|
||||
expect(exited).toEqual(false);
|
||||
expect(accepted).toEqual(true);
|
||||
expect(declined).toEqual(false);
|
||||
|
||||
accepted = false;
|
||||
});
|
||||
|
||||
it('should trigger decline', () => {
|
||||
const context = shallow(getView(sampleChannel));
|
||||
context
|
||||
.find('.cta')
|
||||
.at(1)
|
||||
.simulate('click'); // click decline button
|
||||
|
||||
expect(exited).toEqual(false);
|
||||
expect(accepted).toEqual(false);
|
||||
expect(declined).toEqual(true);
|
||||
|
||||
declined = false;
|
||||
});
|
||||
});
|
||||
|
|
@ -2,12 +2,13 @@
|
|||
|
||||
We use the following testing tools:
|
||||
|
||||
* [**RSpec**](http://rspec.info/) for testing the backend
|
||||
* [**Capybara**](https://github.com/teamcapybara/capybara) with [**selenium-webdriver**](https://github.com/SeleniumHQ/selenium/tree/master/javascript/node/selenium-webdriver) for view testing
|
||||
* [**chromedriver-helper**](https://github.com/flavorjones/chromedriver-helper) for standard JS testing
|
||||
* [**guard-rspec**](https://github.com/guard/guard-rspec) for automated testing
|
||||
* [**Jest**](https://facebook.github.io/jest) for testing in the front-end
|
||||
* [**SimpleCov**](https://github.com/colszowka/simplecov) for tracking overall test coverage
|
||||
- [**RSpec**](http://rspec.info/) for testing the backend
|
||||
- [**Capybara**](https://github.com/teamcapybara/capybara) with [**selenium-webdriver**](https://github.com/SeleniumHQ/selenium/tree/master/javascript/node/selenium-webdriver) for view testing
|
||||
- [**chromedriver-helper**](https://github.com/flavorjones/chromedriver-helper) for standard JS testing
|
||||
- [**guard-rspec**](https://github.com/guard/guard-rspec) for automated testing
|
||||
- [**Jest**](https://facebook.github.io/jest) for testing in the front-end
|
||||
- [**preact-render-spy**](https://github.com/mzgoddard/preact-render-spy) for testing Preact components.
|
||||
- [**SimpleCov**](https://github.com/colszowka/simplecov) for tracking overall test coverage
|
||||
|
||||
Each pull request should come with tests related to the newly written feature or bug fix. Ideally, we should test both the front end and back end.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue