Unit test:
Mocha, chai, Enzyme,
Both shallow and mount return wrappers that give us many helpful methods we can use to find child components, check props, set state, and perform other testing tasks. We will use chai's expect assertion-style on these methods in our tests.
- shallow, test stateless component, is used to render one level component, for isolation component, so child compoent does not affect
- Mount , for test container component, is "real" rendering that will actually render your component into a browser environment. (jsdom to accomplish rendering in a browser-like environment)
- render, static, render react components to static HTML and analyze the resulting HTML structure. analyzing the actual HTML output of a component
use sinon to stub some of the component method
test setState called amount: stub the setState,
const setState = sinon.stub(SomeComponent.prototype, ‘setState’)
.callsFake( (newState, callback) => { callback() });
//shallow
import React from 'react';
import { mount, shallow } from 'enzyme';
import {expect} from 'chai';
import Email from '../lib/email';
describe('<Email>', function () {
it('should have an input for the email', function () {
const wrapper = shallow(<Email/>);
expect(wrapper.find('input')).to.have.length(1);
});
it('should have a button', function () {
const wrapper = shallow(<Email/>);
expect(wrapper.find('button')).to.have.length(1);
});
it('should have props for handleEmailChange and fetchGravatar', function () {
const wrapper = shallow(<Email/>);
expect(wrapper.props().handleEmailChange).to.be.defined;
expect(wrapper.props().fetchGravatar).to.be.defined;
});
});
//mount
describe('<Gravatar />', () => {
it('contains an <Avatar/> component', function () {
const wrapper = mount(<Gravatar/>);
expect(wrapper.find(Avatar)).to.have.length(1);
});
it('contains an <Email/> component', function () {
const wrapper = mount(<Gravatar/>);
expect(wrapper.find(Email)).to.have.length(1);
});
it('should have an initial email state', function () {
const wrapper = mount(<Gravatar/>);
expect(wrapper.state().email).to.equal('[email protected]');
});
it('should have an initial src state', function () {
const wrapper = mount(<Gravatar/>);
expect(wrapper.state().src).to.equal('http://placehold.it/200x200');
});
it('should update the src state on clicking fetch', function () {
const wrapper = mount(<Gravatar/>);
wrapper.setState({ email: '[email protected]' });
wrapper.find('button').simulate('click');
expect(wrapper.state('email')).to.equal('[email protected]');
expect(wrapper.state('src')).to.equal(`http://gravatar.com/avatar/${md5('[email protected]')}?s=200`);
});
});
Candidate 1 Interview
- what is component & container:
React is component based, and we usually separate the component into two categories for separation of concerns and also for better reusability.
And everything you can see on the screen is the presentational component, they are used only for presentation, they are just a plain function, and they do not have state, and do not have lifecycle methods, they only accepts data from container component and show it on the scree.
And the component behind the sense is the container component, they are ES6 class, and they have state, and lifecycles, and they are used to data source, and also is the place where the middleware or business logic exists, and they should know nothing about the dom, and if you are using redux, container component is the one you gonna connected to the store.
When to use?
we usually have a container at high level, and they are used to fetch data, and load presentational component, and PC will only used to get the data and show the UI. as long as your component does not have any lifecycle methods, or your component does not need to connect to a store, you should use the presentational component.
In our minds, container components are tied to data in the Store. They are meant to retrieve and format data for their children, as well as pass functionality to them. Container components aren’t always at the top level. In fact, oftentimes they are in the midst of the sub-structure of the app.
explain == vs ===
'===' triple equal is Strict Equa, which will not do converstion when comparing two values,
and '==' will is Loose Equal, which will do a conversion when comparing, for example, 1 == true, which will convert the boolean to number //Number(true) => 1
explain redux architecture(bi-directional data flow)
redux is strict unidirectional data flow, which means that all the data in an application is maintained in same patterns, which is if you want to change a state, you need to dispatch an action, dispatch is a store function return by createStore() method in redux, so dispatch will call the reducer for you, and the reducer should be a pure function, and it takes the previous state and action, an d reducer must be a pure function, and will return you next state, and the store will also save the entire state tree, so it will be a new tree every time you dispatch a action, and listeners that subscribed to the store will be invoked, and the listener can call store.getState() to get current state.
And we usually use the react-redux library to help us connecting our component to the store, it's a HOC for reuse the business logic, so you do not need to define contextTypes, getState or dispatch by your self, the connect will do it for you.
.
Candidate 1 feedback:
Pretty good idea about javascript
Have good idea about closure, context and prototype
Have worked with react well
a. Need to improve on async operation with React redux
CSS is okay
Seems quick learner
Candidate 2 interview:
1) What is closure? And related questions.
2) What type of design pattern does React API uses?
- Composition: react is component based, so components written by different people should work well together,
- HOC: similar decorator design pattern, it's wrapping a component and adding new functionalities or props to it. connect?
- Container and Presentational component
- Dependency Injection: Context: like event
3) what type of events does React uses? Native or Synthetic?
Synthetic Event: a cross-browser wrapper around the browser’s native event, so the events works the same for different browsers.
https://reactjs.org/docs/events.html
a cross-browser wrapper around the browser’s native event
4) Questions on CSS media queries
define different style rules for different media types/devices
@media not|only mediatype and (media feature)
5) Explain how Redux works
6) Asked me about designing an Event Management application using React + Redux (This one took about 15 mins as it is a mini project)
7) How do we test React components and how can we check whether a particular component rendered these many times
8) Asked me about the result of one JavaScript functi
Candidate 3 interview:
- recording attached
Candidate 4 interview:
1) Disadvantages of Closure ?
lead to memory leaks. Because the closure is an inner function defined inside a outer function, and the inner function can get the variable defined by the outer function even if the outer function has returned, so that means, as closures are active, this memory by that the variable defined in outer fucntion cannot be garbage collected. Therefore, closures can lead to memory leaks if not used well.
And in such case, we need to mannualy release the momory by assigning a null to the function return;
2) Which code leads to Memory leaks , How to catch memory leaks ?
memory leak is caused by when some memory is not needed any more but you still keep a strong reference of it, so it will not be garbage collected and returned to OS。
- global variable cannot be GC, so create a variable without declare will cause memory leak;
- Timers or callbacks that are forgotten
- closures, As long as closures are active, this memory cannot be garbage collected. Therefore, closures can lead to memory leaks if not used well.
- out of DOM references
Eg: when we did the UI experimenetation, we were trying to save some of the HTML elements into an array, but if you do not delete it,
3) How to analyze heaps in chrome profiler for leaks?
using the Profile/memory in the chrome developer tool,
- take heap snapshot, compare it with the previous snapshot
- Record the allocation timeline, so you can know which variable is being created during this time
in node: process.memoryUsage(); global.gc(); process.memoryUsage()
4) Describe Prototype inheritance with an example , difference between classical and Prototypical inheritance and in which situations you use them.
5) What is even loop in Js ?
event loop is when JS execute the code, it execute the synchronous code immediately, and put asynchronous code into the
6) What are the states in Promises ?
7) ES6 spread operator uses
copy/concat array (concat, slice), copy object (Object.assign)
use it to transfer array like obj to array
replace apply method for a function call
8) How React-Router works ?
9) How to pass data between parent & child components in React
10 ) Is prop part of the state in React ?
No, state is internal, props is passed from parent
11 ) How does Redux pass state to components ?
12 ) About Provider in Redux , HOC example in react
13 ) Question about combineReducers
key, value, value will be the reducers, and key will be merged into the global state object,
for example,
14 ) Question about css pseudo classes
15 ) How does position Static work
Static is the default position, and the element will be positioned at normal style, and the top, right, bottom, left, z-index will have no effect
16) What does border-radius do ?
for rounded border corners are
Candidate 5 interview:
1.difference between scope and context.
2.how do u change the context of a method.
3.can u write a custom bind function which attaches the context to run.
4.diff btw classical and prototypal inheritance.
5.what is event loop in javascript.
6.how do u render menu in react which has sub menu in its menu items which in turn has sub menu in sub-menu item.
use recursion, abstract the menu component, so when you render it, we can define a renderSubMenu method which will be recursively call itself to render the sub menu until there is no more submenu.
7.diff == &===.
8.CSS Display properties.
block; inline; inline-block; content;none
Coding:
Please complete the below/attached coding assessment for the Goldman Sachs role. I have included some of the assessments from the candidates who got the offer. Please use that as guidance if needed however do not copy anything otherwise you will be blacklisted. This is just for your guidance so you can finish it =)
Coding Assesment:
Please find .zip file attached with exercise peripherals and instructions below.
Instructions
A user is taken through a series of multiple choice questions and being assessed based on the options chosen.
-Create a JSON structure to iterate through the questions. Set a score for each options (1, 2, 3 etc.)
-The page should be responsive. Users should be able to navigate back and forth and can change their choices (see visuals within folder screenshots)
-There is only single route for all questions (/assessment)
-On the last page display final score (no visuals provided)
Use create-react-app to boilerplate app code (npm install -g create-react-app)
https://github.com/facebookincubator/create-react-app
PLEASE NOTE: ****
1)Please ask candidates toremove node files from code before zipping it.If they don't, the file will likely be too big to send via email.
2) Please write good, pretty and
complete tasks with unit tests
etc. More coding chops they show the easier the interview will become. If someone turns in a half hearted, incomplete or basic level code, they will not move forward.
3)
DO NOT copy
any assessments that have been shared online. Someone recently copied some components, file names, etc and got blacklisted. This work should be 100% yours.
Cleared Coding Assessments:
Candidate 1: Prat
https://github.com/saipratik1739/gs-test
Candidate 2: Je
https://drive.google.com/open?id=0B4ss1Y-5Tz-8X2d6Q19TYVpvLVE
Candidate 3: San
https://github.com/sandeshgihub/GS-React-quiz
Candidate 4: Jag
https://app.box.com/s/23f8oqjxbgwy5x5ttse2sjd4wn96krfa
Candidate 5: Pras