Add react-redux tests (#3)

Author: andrewiggins

CONTRIBUTING.md

@@ -39,7 +39,7 @@ If you'd like to add a library to this project, follow these steps:
 
 	**Using JSX**
 
-	If using JSX to build your app, you need to import the `createElement` function directly. When using React, it is common for developers to rely on React's default export: `import React from "react";`. In order for our website to work however, that import statment needs to look like `import React, { createElement } from "react";`. We require this syntax in this website because it allows the components in the `shared` folder to be written once and used in bundles that don't include the `React.createElement` function.
+	If using JSX to build your app, you need to import the `createElement` function directly. When using React, it is common for developers to rely on React's default export: `import React from "react";`. In order for our website to work however, that import statement needs to look like `import React, { createElement } from "react";`. We require this syntax in this website because it allows the components in the `shared` folder to be written once and used in bundles that don't include the `React.createElement` function.
 
 	**Styling**
 
@@ -100,6 +100,10 @@ If you need to debug the code in your test, i.e. you want to set a breakpoint in
 
 If you want to debug what your app is doing in the browser while the tests are running, Add `jestPuppeteer.debug()` anywhere in your tests where you want the browser to break. Then run the `npm run test:debug <library>` command (replacing `<library>` with the library you are testing). This command will cause Chromium to not run headless and will suspend the browser wherever you put the `jestPuppeteer.debug()` call.
 
+> Note: it appears `jestPuppeteer.debug()` works best when you put it as the first line in your test, as well as wherever you want the test to pause. In order to resume test execution, first resume execution in the Chromium (F8 on windows), then press `Enter` in whatever terminal jest is running in.
+>
+> If all else fails, a good 'ol `console.log()` can sometimes do the trick
+
 ## File issues for bugs in sample apps
 
 If you see a bug in how a sample app is built, open an issue describing what the problem is and what you would expect instead. Use our "Bug report" issue template.

src/full-compat/react-redux/components/AddTodo.js

@@ -22,10 +22,15 @@ class AddTodo extends React.Component {
 		return (
 			<div>
 				<input
+					id="add-todo-input"
 					onChange={e => this.updateInput(e.target.value)}
 					value={this.state.input}
 				/>
-				<button className={styles["add-todo"]} onClick={this.handleAddTodo}>
+				<button
+					id="add-todo-btn"
+					className={styles["add-todo"]}
+					onClick={this.handleAddTodo}
+				>
 					Add Todo
 				</button>
 			</div>

src/full-compat/react-redux/components/TodoList.js

@@ -7,7 +7,7 @@ import { getTodosByVisibilityFilter } from "../redux/selectors";
 import styles from "../styles.css";
 
 const TodoList = ({ todos }) => (
-	<ul className={styles["todo-list"]}>
+	<ul id="todo-list" className={styles["todo-list"]}>
 		{todos && todos.length
 			? todos.map((todo, index) => {
 					return <Todo key={`todo-${todo.id}`} todo={todo} />;

src/full-compat/react-redux/components/VisibilityFilters.js

@@ -12,6 +12,7 @@ const VisibilityFilters = ({ activeFilter, setFilter }) => {
 				const currentFilter = VISIBILITY_FILTERS[filterKey];
 				return (
 					<span
+						id={`filter-${currentFilter}`}
 						key={`visibility-filter-${currentFilter}`}
 						className={cx(
 							styles["filter"],

tests/full-compat/react-redux.test.js

@@ -0,0 +1,134 @@
+import { goToLibraryPage } from "../util";
+
+describe("react-redux", () => {
+	const emptyListText = "No todos, yay!";
+	const completeSign = "👌";
+	const incompleteSign = "👋";
+
+	const inputSel = "#add-todo-input";
+	const addTodoBtnSel = "#add-todo-btn";
+	const todoListSel = "#todo-list";
+	const todoSel = "#todo-list li[class*=todo-item]";
+	const allFilterSel = "#filter-all";
+	const completedFilterSel = "#filter-completed";
+	const incompleteFilterSel = "#filter-incomplete";
+
+	const mockTodos = ["Todo 1", "Todo 2", "Todo 3"];
+
+	function getTodos() {
+		return page.$$eval(todoSel, elements => elements.map(e => e.textContent));
+	}
+
+	async function addTodo(todoText) {
+		await page.type(inputSel, todoText);
+		await page.click(addTodoBtnSel);
+	}
+
+	function markTodoCompleted(index) {
+		return page.click(todoSel + `:nth-child(${index + 1})`);
+	}
+
+	function todoItemText(todoText, completed = false) {
+		return `${completed ? completeSign : incompleteSign} ${todoText}`;
+	}
+
+	async function verifyListIsEmpty() {
+		const todoContents = await page.$eval(todoListSel, e => e.textContent);
+		expect(todoContents).toBe(emptyListText);
+	}
+
+	/**
+	 * @param {string[]} all
+	 * @param {string[]} complete
+	 * @param {string[]} incomplete
+	 */
+	async function verifyFilters(all, complete, incomplete) {
+		await page.click(allFilterSel);
+		if (all.length) {
+			expect(await getTodos()).toEqual(all);
+		} else {
+			await verifyListIsEmpty();
+		}
+
+		await page.click(completedFilterSel);
+		if (complete.length) {
+			expect(await getTodos()).toEqual(complete);
+		} else {
+			await verifyListIsEmpty();
+		}
+
+		await page.click(incompleteFilterSel);
+		if (incomplete.length) {
+			expect(await getTodos()).toEqual(incomplete);
+		} else {
+			await verifyListIsEmpty();
+		}
+
+		// Reset list to "all"
+		await page.click(allFilterSel);
+	}
+
+	beforeEach(async () => {
+		await goToLibraryPage("react-redux");
+	});
+
+	it("should render", async () => {
+		const contents = await page.content();
+		expect(contents).toMatch(/Todo List/);
+	});
+
+	it("should add todos to the list", async () => {
+		const todoContents = await page.$eval(todoListSel, e => e.textContent);
+		expect(todoContents).toBe(emptyListText);
+
+		await addTodo(mockTodos[0]);
+		expect(await getTodos()).toEqual([todoItemText(mockTodos[0])]);
+
+		await addTodo(mockTodos[1]);
+		expect(await getTodos()).toEqual([
+			todoItemText(mockTodos[0]),
+			todoItemText(mockTodos[1])
+		]);
+
+		await addTodo(mockTodos[2]);
+		expect(await getTodos()).toEqual(mockTodos.map(todo => todoItemText(todo)));
+	});
+
+	it("should mark todos as completed", async () => {
+		await addTodo(mockTodos[0]);
+		expect(await getTodos()).toEqual([todoItemText(mockTodos[0])]);
+
+		await markTodoCompleted(0);
+		expect(await getTodos()).toEqual([todoItemText(mockTodos[0], true)]);
+	});
+
+	it("should properly filter todos", async () => {
+		await addTodo(mockTodos[0]);
+		await verifyFilters(
+			[todoItemText(mockTodos[0])],
+			[],
+			[todoItemText(mockTodos[0])]
+		);
+
+		await markTodoCompleted(0);
+		await verifyFilters(
+			[todoItemText(mockTodos[0], true)],
+			[todoItemText(mockTodos[0], true)],
+			[]
+		);
+
+		await addTodo(mockTodos[1]);
+		await verifyFilters(
+			[todoItemText(mockTodos[0], true), todoItemText(mockTodos[1])],
+			[todoItemText(mockTodos[0], true)],
+			[todoItemText(mockTodos[1])]
+		);
+
+		await markTodoCompleted(1);
+		await verifyFilters(
+			[todoItemText(mockTodos[0], true), todoItemText(mockTodos[1], true)],
+			[todoItemText(mockTodos[0], true), todoItemText(mockTodos[1], true)],
+			[]
+		);
+	});
+});