Merge pull request #1621 from freedomofpress/frontend-testing

Add snapshot frontend testing

.gitignore

@@ -2,6 +2,7 @@ db.sqlite3*
 /static/
 /media/
 /htmlcov/
+/coverage/
 /pressfreedom/settings/local.py
 *.pyc
 __pycache__

README.rst

@@ -73,6 +73,12 @@ To test your frontend code with jest, you can run the following command:
 
     docker-compose exec node npm test
 
+If tests need to be updated, you can run the following command:
+
+.. code:: bash
+
+    docker-compose exec node npm test-update
+
 Debugging
 ---------
 

babel.config.js

@@ -1,35 +1,34 @@
 // babel.config.js
-module.exports = api => {
-  const isTest = api.env('test')
-  if (isTest) {
-    return {
-      presets: [
-        [
-          '@babel/preset-env',
-          {
-            modules: false,
-            "targets": {
-              "node": "current"
-            },
-          },
-        ],
-        '@babel/preset-react',
-      ],
-      plugins: [
-        "@babel/plugin-transform-modules-commonjs",
-      ],
-    }
-  } else {
-    return {
-      presets: [
-        [
-          '@babel/preset-env',
-          {
-            modules: false,
-          },
-        ],
-        '@babel/preset-react',
-      ],
-    }
-  }
-};
+module.exports = (api) => {
+	const isTest = api.env('test')
+	if (isTest) {
+		return {
+			presets: [
+				[
+					'@babel/preset-env',
+					{
+						modules: false,
+						targets: {
+							node: 'current',
+						},
+					},
+				],
+				'@babel/preset-react',
+			],
+			plugins: [
+				'@babel/plugin-transform-modules-commonjs',
+			],
+		}
+	}
+	return {
+		presets: [
+			[
+				'@babel/preset-env',
+				{
+					modules: false,
+				},
+			],
+			'@babel/preset-react',
+		],
+	}
+}

client/charts/js/components/CategoryFilter.jsx

@@ -206,7 +206,7 @@ export default function CategoryFilter({
 					symbol={filterDef.symbol}
 					label={filterDef.title}
 					count={categoryFrequencies[filterDef.title]}
-					isOpen={selectedCategories.has(filterDef.title)}
+					isOpen={!!selectedCategories.has && selectedCategories.has(filterDef.title)}
 					onClick={selectCategoryIfHasCount}
 				>
 					<FilterSet

client/charts/js/components/FilterSidebar.jsx

@@ -4,8 +4,8 @@ import FiltersIntegration from "./FiltersIntegration";
 import { decode } from "../lib/queryString";
 import "../../sass/base.sass";
 
-export default function FilterSidebar({ serializedFilters}) {
-	const [dataset, setDataset] = useState(null);
+export default function FilterSidebar({ serializedFilters, initialDataset = null }) {
+	const [dataset, setDataset] = useState(initialDataset);
 	let filters = JSON.parse(serializedFilters)
 
 	useEffect(() => {

client/charts/js/components/__tests__/Autocomplete.test.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import Autocomplete from '../Autocomplete'
+
+test('renders Autocomplete with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<Autocomplete
+			suggestions={[{label: "test label"}]}
+			suggestionsLabelField={'label'}
+			placeholder={'test'}
+			name={'test autocomplete'}
+			itemNamePlural={'tests'}
+			handleSelect={() => {}}
+			suggestionsSidenoteField={'sidenote'}
+		/>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/BarChart.test.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import BarChart from '../BarChart'
+
+test('renders BarChart with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<BarChart
+			data={[{"month":10,"monthName":"Nov","numberOfIncidents":0},{"month":11,"monthName":"Dec","numberOfIncidents":0},{"month":0,"monthName":"Jan","numberOfIncidents":0},{"month":1,"monthName":"Feb","numberOfIncidents":0},{"month":2,"monthName":"Mar","numberOfIncidents":0},{"month":3,"monthName":"Apr","numberOfIncidents":0}]}
+			x="monthName"
+			y="numberOfIncidents"
+			titleLabel="incidents"
+			isMobileView={false}
+			width={480}
+			height={500}
+			openSearchPage={() => {}}
+		/>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/BarChartYears.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import BarChartYears from '../BarChartYears'
+
+test('renders BarChartYears with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<BarChartYears
+			countYears={[{"year":2012,"count":2,"numberOfIncidents":0}]}
+			x="monthName"
+			y="numberOfIncidents"
+			selectedYears={[2012]}
+			width={480}
+			height={500}
+		/>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/Button.test.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import Button from '../Button'
+
+test('renders Button with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<Button
+			label="test"
+			selected={false}
+			onClick={() => {}}
+		/>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/ButtonsRow.test.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import ButtonsRow from '../ButtonsRow'
+
+test('renders ButtonsRow with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<ButtonsRow
+			label="test"
+			buttonLabels={['test1', 'test2']}
+			updateSelection={() => {}}
+			isButtonSelectable={() => true}
+		/>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/CategoryFilter.test.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import CategoryFilter from '../CategoryFilter'
+
+test('renders CategoryFilter with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<CategoryFilter
+			dataset={[{ categories: ['test'] }]}
+			filterDefs={[{ title: 'test-def', id: 'test-def', symbol: 'test-def', filters: [] }]}
+			filterParameters={{}}
+			width={500}
+			height={500}
+		/>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/CategoryPageChart.test.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import * as d3 from 'd3'
+import Renderer from 'react-test-renderer'
+import CategoryPageChart from '../CategoryPageChart'
+
+test('renders CategoryPageChart with mocked data', () => {
+	expect(Renderer.create(
+		<CategoryPageChart
+			data={[{ categories: ['test'], date: d3.timeParse("%m-%d-%Y")('1-1-2020') }]}
+			category={'test'}
+			width={500}
+			categoryName={'test'}
+		/>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/CategorySection.test.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import CategorySection from '../CategorySection'
+
+test('renders CategorySection with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<CategorySection symbol="test" label="test" count={2} isOpen={false} onClick={() => {}}>
+			This is a test
+		</CategorySection>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/ChartDescription.test.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import ChartDescription from '../ChartDescription'
+
+test('renders ChartDescription with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<ChartDescription id="test">
+			This is a test
+		</ChartDescription>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/CheckBoxBar.test.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import CheckBoxBar from '../CheckBoxBar'
+
+test('renders CheckBoxBar with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<CheckBoxBar
+			label="test"
+			count={2}
+			isSelected={false}
+			onClick={() => {}}
+		/>
+	)).toMatchSnapshot();
+});

client/charts/js/components/__tests__/CheckBoxesYear.test.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import CheckBoxesYear from '../CheckBoxesYear'
+
+test('renders CheckBoxesYear with mocked data', () => {
+	const renderer = new ShallowRenderer();
+	expect(renderer.render(
+		<CheckBoxesYear
+			width={500}
+			options={[{ year: 2020 }]}
+			selectedYears={[2020]}
+			onClick={() => {}}
+		/>
+	)).toMatchSnapshot();
+});