0-3 : just know about the skill, but never used (了解这项技术，但从未使用， 按了解程度评分)

4-7: has been used the skill , but just know how to use, but don’t know the Infrastructure （使用过这项技术，但不了解底层原理， 按使用熟练度评分）

8-10: can be good use the entire skill and know about the Infrastructure （能很好的使用这项技术， 熟悉底层原理，按底层原理熟悉度评分）

…

React-Router

Guide line in Chinese:

http://react-guide.github.io/react-router-cn/docs/guides/advanced/ConfirmingNavigation.html

https://cn.redux.js.org/docs/advanced/UsageWithReactRouter.html (use Redux with ReactRouter)

Guide line in English

https://reacttraining.com/react-router/web/guides/quick-start

https://redux.js.org/advanced/usage-with-react-router/ (use Redux with ReactRouter)

Redux

Action, Reducer,Store

https://cn.redux.js.org/docs/introduction/ （Chinese）

https://redux.js.org/basics/basic-tutorial （English）

Action: do some async job, like: ajax request, all the backend api. and then trigger a event to reducer

Reducer: listen to the event, and change the data in Store

Store: data store in it, and the components use connect + mapStageToProps to watch/compute the data change.

For What

When we developing a project and serving for the user with a lot of function. And some of this function is called in multiple place. when a new requirement is come which need to modify the code of the old function. How can you ensure the ensure old function won’t be broken by the change you make. human test? too native. Human always make mistake. So we need the machine to check for us.

Layer Test (Deprecate)

we use mockito to mock all the dependencies injected (the database, the third party api) to the layer, in the Controller layer , we mock the Service function, in the Service layer, we mock the Dao function;

What Selenide is?

Selenide is a framework for test automation powered by Selenium WebDriver that brings the following advantages:

Concise fluent API for tests. Powerful selectors. Simple configuration.

You don’t need to think how to shutdown browser, handle timeouts and StaleElement Exceptions or search for relevant log lines, debugging your tests.

Just focus on your business logic and let Selenide do the rest!

Seleium code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

public  class  GoogleTest {

  
	chromeDriver webdriver;

  

	@Before
	public  void  setUp() {
		System.setProperty("webdriver.chrome.driver","drivers/chromedriver.exe");

		WebDriverManager.chromedriver().setup();

		webdriver = new  ChromeDriver();

	}
																									

	@Test
	public  void  searchGoogle() {
		webdriver.get("[https://www.google.com/ncr](https://www.google.com/ncr)");
		WebElement  q = webdriver.findElementByName("q");
		q.sendKeys("test");
		q.submit();
		wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("resultStats")));

	}
				
  

	@After
	public  void  tearDown() {
		if (webdriver != null) {
		webdriver.quit();
	}

}

  

}

  

Selenide Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

  
@Listeners(BrowserPerClass.class)
public class GoogleTest {


	@Before
	public void setUp() {
		System.setProperty("webdriver.chrome.driver", "drivers/chromedriver.exe");
		Configuration.browser = WebDriverRunner.CHROME;
		Configuration.baseUrl = "[http://google.com](http://google.com/)";
	}

	  

	@Test
	public void searchGoogle() {
		open("/");
		$(By.name("q")).sendKeys("test");
		$(By.name("q")).submit();
		$(By.id("resultStats")).waitUntil(exist, 10000);

	}

  

}

get element using Xpath, cssSelector

some element have no id or name, is not easy to locate it . there is two ways to locate it: Xpath, cssSelector. but how to know what the element’s xpath/cssSelector is? Chrome!!

open the page in Chrome and press F12 to open the Developer Tool Panel. Select the element and right click to copy the xpath/cssSelector. something like:

//*[@id=”tsf”]/div[2]/div/div[3]/center/input[1]

soft link to STDOUT, STDERR to collect log

RUN ln -sf /dev/stdout /var/log/nginx/access.log

mount bind space to collect log

--mount type=bind,src=/opt/logs, dst=/usr/local/tomcat/logs/

mount volume to collect log

--mount type=volume src=volume_name dst=/use/local/tomcat/logs/

use redis/mq to collect log

docker→ redis/mq→ logstash → elasticsearch

Now

all the bugfix are commit direct to ‘bugfix’ branch, all members commit in the same branch. it make the commit history unreadable and everyone have to pull&merge others’s code which is not the current work in their hand frequently and make git hard to handle.

How to change

Use Github Flow

git flow guide

1. Update master to latest upstream code
2. Create a feature branch from master branch git checkout -b feature/myFeatureBranch
3. Do the feature/work
4. Push feature branch to origin
5. Create pull request from origin/ -> upstream/master
6. Review, fix raised comments, merge your PR or even better, get someone else to.

The main rule of GitHub Flow is that master should always be deployable.

Automatic Deploy For Test

1. set github project hook
2. commit pr to develop branch, tigger github project hook
3. the hook send request to an url to the deploy server: jenkin or program you build.
4. the deploy server pull the newest code and restart server
5. test!