`
-- This library replaces the need to import CSS stylesheets because they are bundled as normal JS code
-- Take a look at `demo/src/components/TodoApp.tsx`
+You can use intellisense to discover which parts of the component you can to customize.
+
+The `styles` prop can take either an object, or a function which returns a style object based on the component's prop values.
+
+The following code (simplified from `demo/src/components/TodoHeader.tsx`) demonstrates using `styles` to customize individual components. The TextField uses a style function and the PrimaryButton uses a style object.
+
+```tsx
+function render() {
+ return (
+
+ );
+}
+```
+
+## 4. CSS-in-JS with `mergeStyles`
+
+`mergeStyles` is a styling library that creates CSS class names from styles that are expressed as JavaScript objects. These classes can be used as the `className` prop of any component or element, such as `
`.
+
+This is an advanced approach which also works outside of Fabric. Within Fabric-based apps, you would typically only use `mergeStyles` in certain niche scenarios. (Fabric itself uses `mergeStyles` under the hood to power some of its styling.)
+
+Benefits of `mergeStyles` include:
+- Works in any app
+- Eliminates the need to import or bundle CSS stylesheets (all styles are bundled as normal JS code)
+- Provides type checking for styles (like Sass) when used with TypeScript
+- Very performant compared with other similar libraries
+
+The following is a basic example using mergeStyles. ([This CodePen](https://codepen.io/dzearing/pen/jGdgrE?editors=1011) illustrates in more detail what `mergeStyles` does and includes some advanced examples.)
+
+```tsx
+// can also import from office-ui-fabric-react in Fabric-based apps
+import { mergeStyles } from '@uifabric/merge-styles';
+
+const blueBackgroundClassName = mergeStyles({
+ backgroundColor: 'green'
+});
+const className = mergeStyles(blueBackgroundClassName, {
+ padding: 50, // px is assumed if no units are given
+ selectors: {
+ ':hover': {
+ backgroundColor: 'red'
+ }
+ }
+});
+
+const myDiv = (
+
+ I am a green div that turns red on hover!
+
+);
+```
# Exercises
-## Fabric Theming and Styling
+## Fabric theming and styling
-### Applying Fabric Themes
+### Applying Fabric themes
-Apply some included and predefined themes from the UI Fabric package inside the `/step2-03/exercise/src/components/TodoApp.tsx`. Do this by replacing:
+Try applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing:
```ts
import { FluentCustomizations } from '@uifabric/fluent-theme';
@@ -92,18 +169,17 @@ with:
import { TeamsCustomizations } from '@uifabric/theme-samples';
```
-### Customizing Fabric Themes
+### Applying customized themes
-Create your own theme and apply the color palette here:
-https://developer.microsoft.com/en-us/fabric#/styles/themegenerator
+1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code.
-1. Delete the `Customizer` component
+2. In `exercise/src/components/TodoApp.tsx`, delete the `Customizer` component.
-2. Paste in this code in the `TodoApp.tsx` before the `TodoApp` component definition
+3. Paste in the generated theme code before the `TodoApp` component definition.
-3. Play around with the values and use intellisense to discover the `ITheme` type within VS Code
+4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type.
-### Customizing One Fabric Control Instance
+### Customizing one Fabric control instance
1. Open `exercise/src/components/TodoFooter.tsx`
@@ -113,15 +189,11 @@ https://developer.microsoft.com/en-us/fabric#/styles/themegenerator
4. Try to customize this with a styles function
-## Advanced / Non-Fabric Component Styling
+## Advanced/non-Fabric component styling
-### CSS in JS with MergeStyles
+### CSS-in-JS with `mergeStyles`
-The styling library name is neither glamorous nor does it bring about emotion, but it is very quick and lightweight. `MergeStyles` turns CSS Rules into CSS class names to be applied to the components.
-
-**NOTE:** Fabric components automatically use `mergeStyles` under the hood, so it is typically not necessary to directly call `mergeStyles` when styling Fabric components.
-
-1. Try applying a merged style `className` as a prop inside `TodoApp`
+1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`
```tsx
import { mergeStyles } from 'office-ui-fabric-react';
diff --git a/step2-03/demo/src/components/TodoHeader.tsx b/step2-03/demo/src/components/TodoHeader.tsx
index e92f9be..3e432f2 100644
--- a/step2-03/demo/src/components/TodoHeader.tsx
+++ b/step2-03/demo/src/components/TodoHeader.tsx
@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component
- todos
+ todos - step2-03 demo
diff --git a/step2-03/exercise/src/components/TodoHeader.tsx b/step2-03/exercise/src/components/TodoHeader.tsx
index 511dc1e..422675f 100644
--- a/step2-03/exercise/src/components/TodoHeader.tsx
+++ b/step2-03/exercise/src/components/TodoHeader.tsx
@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component
- todos
+ todos - step2-03 exercise
diff --git a/step2-04/README.md b/step2-04/README.md
index b7a5afb..e1e3102 100644
--- a/step2-04/README.md
+++ b/step2-04/README.md
@@ -1,28 +1,27 @@
-# Step 2.4
+# Step 2.4: Testing TypeScript code with Jest
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
-Testing TypeScript code with jest. jest is a test framework made by Facebook and is very popular in the React and the wider JS ecosystem. We will work on implementing simple unit tests here in this exercise.
+[Jest](https://jestjs.io/) is a test framework made by Facebook and is very popular in the React and wider JS ecosystems.
-https://jestjs.io/
+In this exercise, we will work on implementing simple unit tests using Jest.
-# jest Features
+## Jest Features
- Multi-threaded and isolated test runner
-- Provides a "fake" browser environment if needed (window, document, DOM, etc).
-- Snapshots: show API or large object changes along side code changes in pull requests
-- Code coverage is integrated (--coverage)
-- Very clear error messages of where the test failures occur
-- By default, will simulate a "good enough" browser environment called JSDOM
+- Provides a fake browser-like environment if needed (window, document, DOM, etc) using jsdom
+- Snapshots: Jest can create text-based snapshots of rendered components. These snapshots can be checked in and show API or large object changes alongside code changes in pull requests.
+- Code coverage is integrated (`--coverage`)
+- Very clear error messages showing where a test failure occurred
-# How to use jest
+## How to use Jest
-- using `create-react-app` or other project generators, jest should already be preconfigured. Run `npm test` usually will trigger it!
-- needs `jest.config.js`
+- Using `create-react-app` or other project generators, Jest should already be pre-configured. Running `npm test` usually will trigger it!
+- A `jest.config.js` file is used for configuration
- `jsdom` might not have enough API from real browsers, for those cases, polyfills are required. Place these inside `jest.setup.js` and hook up the setup file in `jest.config.js`
- in order to use `enzyme` library to test React Components, more config bits are needed inside `jest.setup.js`
-# What does a test look like?
+## What does a test look like?
```ts
// describe(), it() and expect() are globally exported, so they don't need to be imported when jest runs these tests
@@ -33,11 +32,15 @@ describe('Something to be tested', () => {
});
```
-# Test React Components by using `enzyme`
+## Testing React components using Enzyme
-- use `enzyme` to `mount()` the component (as oppose to rendering)
-- the `mount()` function will return a wrapper that can be inspected
-- the wrapper has functionality like `find()`, simulating clicks, etc.
+[Enzyme](https://airbnb.io/enzyme/) is made by Airbnb and provides utilities to help test React components.
+
+In a real app using ReactDOM, the top-level component will be rendered on the page using `ReactDOM.render()`. Enzyme provides a lighter-weight `mount()` function which is usually adequate for testing purposes.
+
+`mount()` returns a wrapper that can be inspected and provides functionality like `find()`, simulating clicks, etc.
+
+The following code demonstrates how Enzyme can be used to help test React components.
```tsx
import React from 'react';
@@ -45,19 +48,32 @@ import { mount } from 'enzyme';
import { TestMe } from './TestMe';
describe('TestMe Component', () => {
- it('should have a non-clickable component when the origina InnerMe is clicked', () => {
+ it('should have a non-clickable component when the original InnerMe is clicked', () => {
const wrapper = mount();
wrapper.find('#innerMe').simulate('click');
expect(wrapper.find('#innerMe').text()).toBe('Clicked');
});
});
+
+describe('Foo Component Tests', () => {
+ it('allows us to set props', () => {
+ const wrapper = mount();
+ expect(wrapper.props().bar).toBe('baz');
+ wrapper.setProps({ bar: 'foo' });
+ expect(wrapper.props().bar).toBe('foo');
+
+ wrapper.find('button').simulate('click');
+ });
+});
```
-# Advanced Topics
+## Advanced topics
-## Mocking
+### Mocking
-Mocking functions is a large part of what makes `jest` a powerful testing library. `jest` actually intercepts module inclusion process in `node.js` allowing it to mock entire modules if needed. There are many ways to mock as you can imagine in a language as flexible as JS. We only look at the simplest case but there's a lot of depth here.
+Mocking functions is a large part of what makes Jest a powerful testing library. Jest actually intercepts the module loading process in Node.js, allowing it to mock entire modules if needed.
+
+There are many ways to mock, as you'd imagine in a language as flexible as JS. We only look at the simplest case, but there's a lot of depth here.
To mock a function:
@@ -66,33 +82,30 @@ it('some test function', () => {
const mockCallback = jest.fn(x => 42 + x);
mockCallback(1);
mockCallback(2);
- expect(mockCallback.mock.calls.length).toBe(2);
+ expect(mockCallback).toHaveBeenCalledTimes(2);
});
```
-Read more about jest mocking here: https://jestjs.io/docs/en/mock-functions.html
+Read more about jest mocking [here](https://jestjs.io/docs/en/mock-functions.html).
-## Async Testing
+### Async Testing
-### callback
+For testing async scenarios, the test runner needs some way to know when the scenario is finished. Jest tests can handle async scenarios using callbacks, promises, or async/await.
```ts
+// Callback
it('tests callback functions', (done) => {
- someFunctionThatCallsDone(done));
-})
-```
+ setTimeout(() => {
+ done();
+ }, 1000);
+});
-### promise
-
-```ts
+// Returning a promise
it('tests promise functions', () => {
return someFunctionThatReturnsPromise());
-})
-```
+});
-### (recommended) async / await
-
-```ts
+// Async/await (recommended)
it('tests async functions', async () => {
expect(await someFunction()).toBe(5);
});
@@ -100,50 +113,29 @@ it('tests async functions', async () => {
# Demo
-## jest basics
+## Jest basics
In this repo, we can start an inner loop development of tests with the command: `npm test`
Take a look at code inside `demo/src`:
-1. `index.ts` is exports a few functions for a counter as well as a test for squaring numbers but demonstrates out jest uses mocks
+1. `index.ts` exports a few functions for a counter as well as a function for squaring numbers. We'll use this last function to demonstrate how mocks work.
2. `multiply.ts` is a contrived example of a function that is exported
-3. `index.spec.ts` is the test file: note how tests are re-run on save to test file changes as well as source code changes under `src`
+3. `index.spec.ts` is the test file
-## testing React applications
-
-You can also test React Components with `jest` with the help of a partner library called `enzyme`. Take a look at the test below:
-
-```ts
-import { mount } from 'enzyme';
-
-describe('Foo Component Tests', () => {
- it('allows us to set props', () => {
- const wrapper = mount();
- expect(wrapper.props().bar).toBe('baz');
- wrapper.setProps({ bar: 'foo' });
- expect(wrapper.props().bar).toBe('foo');
- });
-});
-```
-
-`mount` does a full mount of the component. You can use the `enzyme` wrapper to simulate clicks, etc.:
-
-```ts
-wrapper.find('button').simulate('click');
-```
+Note how tests are re-run when either test files or source files under `src` are saved.
# Exercise
-## Basic Testing
+## Basic testing
1. Run the tests by running `npm test` at the root of the bootcamp project
-2. Look at the `stack.ts` for a sample implementation of a stack
+2. Look at `exercise/src/stack.ts` for a sample implementation of a stack
-3. Follow the instructions inside the `stack.spec.ts` file to complete the two tests
+3. Follow the instructions inside `stack.spec.ts` file to complete the two tests
## Enzyme Testing
diff --git a/step2-04/demo/src/TestMe.spec.tsx b/step2-04/demo/src/TestMe.spec.tsx
index 87f7400..70452b6 100644
--- a/step2-04/demo/src/TestMe.spec.tsx
+++ b/step2-04/demo/src/TestMe.spec.tsx
@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
import { TestMe } from './TestMe';
describe('TestMe Component', () => {
- it('should have a non-clickable component when the origina InnerMe is clicked', () => {
+ it('should have a non-clickable component when the original InnerMe is clicked', () => {
const wrapper = mount();
wrapper.find('#innerMe').simulate('click');
expect(wrapper.find('#innerMe').text()).toBe('Clicked');
diff --git a/step2-04/demo/src/index.spec.tsx b/step2-04/demo/src/index.spec.tsx
index 87f7400..6fa5c3e 100644
--- a/step2-04/demo/src/index.spec.tsx
+++ b/step2-04/demo/src/index.spec.tsx
@@ -1,11 +1,7 @@
import React from 'react';
import { mount } from 'enzyme';
-import { TestMe } from './TestMe';
-describe('TestMe Component', () => {
- it('should have a non-clickable component when the origina InnerMe is clicked', () => {
- const wrapper = mount();
- wrapper.find('#innerMe').simulate('click');
- expect(wrapper.find('#innerMe').text()).toBe('Clicked');
+describe('index', () => {
+ it('placeholder', () => {
});
});
diff --git a/step2-07/demo/src/components/TodoHeader.tsx b/step2-07/demo/src/components/TodoHeader.tsx
index 56ce281..171cf06 100644
--- a/step2-07/demo/src/components/TodoHeader.tsx
+++ b/step2-07/demo/src/components/TodoHeader.tsx
@@ -22,7 +22,7 @@ class TodoHeader extends React.Component {
return (
- todos
+ todos - step2-07 demo
diff --git a/step2-07/exercise/src/components/TodoHeader.tsx b/step2-07/exercise/src/components/TodoHeader.tsx
index ff9f329..6a410af 100644
--- a/step2-07/exercise/src/components/TodoHeader.tsx
+++ b/step2-07/exercise/src/components/TodoHeader.tsx
@@ -23,7 +23,7 @@ export class TodoHeader extends React.Component
- todos
+ todos - step2-07 exercise
diff --git a/step2-08/demo/src/components/TodoHeader.tsx b/step2-08/demo/src/components/TodoHeader.tsx
index 280baff..ec5b351 100644
--- a/step2-08/demo/src/components/TodoHeader.tsx
+++ b/step2-08/demo/src/components/TodoHeader.tsx
@@ -24,7 +24,7 @@ class TodoHeader extends React.Component {
return (
- todos
+ todos - step2-08 demo
diff --git a/step2-08/exercise/src/components/TodoHeader.tsx b/step2-08/exercise/src/components/TodoHeader.tsx
index 04e9aab..c0de11c 100644
--- a/step2-08/exercise/src/components/TodoHeader.tsx
+++ b/step2-08/exercise/src/components/TodoHeader.tsx
@@ -24,7 +24,7 @@ class TodoHeader extends React.Component {
return (
- todos
+ todos - step2-08 exercise
diff --git a/step2-09/demo/src/components/TodoHeader.tsx b/step2-09/demo/src/components/TodoHeader.tsx
index d2c0b7e..943a6d0 100644
--- a/step2-09/demo/src/components/TodoHeader.tsx
+++ b/step2-09/demo/src/components/TodoHeader.tsx
@@ -24,7 +24,7 @@ class TodoHeader extends React.Component {
return (
- todos
+ todos - step2-09 demo
diff --git a/step2-09/exercise/src/components/TodoHeader.tsx b/step2-09/exercise/src/components/TodoHeader.tsx
index d2c0b7e..c885b88 100644
--- a/step2-09/exercise/src/components/TodoHeader.tsx
+++ b/step2-09/exercise/src/components/TodoHeader.tsx
@@ -24,7 +24,7 @@ class TodoHeader extends React.Component {
return (
- todos
+ todos - step2-09 exercise