microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

overhauling steps 4-6, part 1

Browse Source
This commit is contained in:
Ken
2019-03-02 20:57:25 -08:00
parent 8fc928ea8d
commit b91914e1d8
21 changed files with 296 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
step2-04/exercise/README.md
View File

@@ -1,17 +0,0 @@
# Step 2.4: Testing TypeScript code with Jest (Exercise)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Start the test runner by running `npm test` in the root of the `frontend-bootcamp` folder.
## Basic testing
1. Look at `exercise/src/stack.ts` for a sample implementation of a stack
2. Follow the instructions inside `stack.spec.ts` file to complete the two tests
## Enzyme Testing
1. Open up `exercise/src/TestMe.spec.tsx`
2. Fill in the test using Enzyme concepts introduced in the demo

15
step2-04/exercise/index.html
View File

@@ -1,15 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" class="exercise" data-src="./README.md"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
<script src="../../assets/scripts.js"></script>
</body>
</html>

13
step2-04/exercise/src/TestMe.spec.tsx
View File

@@ -1,13 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import { TestMe } from './TestMe';
describe('TestMe Component', () => {
it('should render correctly when hovered', () => {
// TODO:
// 1. mount a <TestMe> Component here
// 2. use enzyme wrapper's find() method to retrieve the #innerMe element
// 3. simulate a hover with "mouseover" event via the simulate() API
// 4. make assertions with expect on the text() of the #innerMe element
});
});

37
step2-04/exercise/src/TestMe.tsx
View File

@@ -1,37 +0,0 @@
import React from 'react';
export interface TestMeProps {
name: string;
}
export interface TestMeState {
enabled: boolean;
}
export const TestMe = (props: TestMeProps) => {
return (
<div id="testMe">
<InnerMe name={props.name} />
</div>
);
};
export class InnerMe extends React.Component<TestMeProps, TestMeState> {
state = {
enabled: false
};
onMouseOver = () => {
this.setState({ enabled: true });
};
render() {
return !this.state.enabled ? (
<div onMouseOver={this.onMouseOver} id="innerMe">
Hello {this.props.name}, Hover Over Me
</div>
) : (
<div id="innerMe">Enabled</div>
);
}
}

2
step2-04/exercise/src/index.ts
View File

@@ -1,2 +0,0 @@
export { Stack } from './stack';
export { TestMe } from './TestMe';

18
step2-04/exercise/src/stack.spec.ts
View File

@@ -1,18 +0,0 @@
// TODO: Import the stack here
describe('Stack', () => {
it('should push item to the top of the stack', () => {
// TODO: implement test here:
// 1. Instantiate a new Stack - i.e. const stack = new Stack<number>();
// 2. Use stack push calls to add some items to the stack
// 3. Write assertions via the expect() API
});
it('should pop the item from the top of stack', () => {
// TODO: implement test here:
// 1. Instantiate a new Stack - i.e. const stack = new Stack<number>();
// 2. Use stack push calls to add some items to the stack
// 3. pop a few items off the stack
// 4. write assertions via the expect() API
});
});

27
step2-04/exercise/src/stack.ts
View File

@@ -1,27 +0,0 @@
export class Stack<T> {
private _items: T[] = [];
/** Add an item to the top of the stack. */
push(item: T) {
this._items.push(item);
}
/** Remove the top item from the stack and return it. */
pop(): T {
if (this._items.length > 0) {
return this._items.pop();
}
}
/** Return the top item from the stack without removing it. */
peek(): T {
if (this._items.length > 0) {
return this._items[this._items.length - 1];
}
}
/** Get the number of items in the stack/ */
get count(): number {
return this._items.length;
}
}