Write snapshot tests for new pages and components

Author: pieperm

web-ui/src/components/select-skills-dialog/SelectSkillsDialog.test.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import SelectSkillsDialog from "./SelectSkillsDialog";
+import EnzymeToJson from 'enzyme-to-json';
+import { mount } from 'enzyme';
+
+const skill = {
+  id: "skill-id",
+  name: "Java",
+  description: "A programming language",
+  pending: false,
+  extraneous: true
+};
+
+it("renders correctly", () => {
+  const dialog = mount(
+    <SelectSkillsDialog
+      isOpen={true}
+      onClose={jest.fn()}
+      selectableSkills={[skill]}
+      onSave={jest.fn()}
+    />
+  );
+  expect(EnzymeToJson(dialog)).toMatchSnapshot({});
+});
+
+
+

web-ui/src/components/skill-category-card/SkillCategoryCard.test.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import SkillCategoryCard from "./SkillCategoryCard";
+import {AppContextProvider} from "../../context/AppContext";
+import {BrowserRouter} from "react-router-dom";
+
+it("renders correctly", () => {
+  snapshot(
+    <AppContextProvider>
+      <BrowserRouter>
+        <SkillCategoryCard name="Languages" id="languages-id"/>
+      </BrowserRouter>
+    </AppContextProvider>
+  );
+});

web-ui/src/components/skill-category-new-dialog/SkillCategoryNewDialog.test.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import SkillCategoryNewDialog from "./SkillCategoryNewDialog";
+import EnzymeToJson from 'enzyme-to-json';
+import { mount } from 'enzyme';
+
+
+it("renders correctly", () => {
+  const dialog = mount(
+    <SkillCategoryNewDialog
+      isOpen={true}
+      onClose={jest.fn()}
+      onConfirm={jest.fn()}
+    />
+  );
+  expect(EnzymeToJson(dialog)).toMatchSnapshot({});
+});
+
+

web-ui/src/pages/SkillCategoriesPage.jsx

@@ -41,11 +41,11 @@ const Root = styled('div')({
     backgroundColor: "transparent",
     margin: "4rem 2rem 2rem 2rem",
     height: "100%",
-    'max-width': "100%",
-    '@media (max-width:800px)': {
+    maxWidth: "100%",
+    '@media (max-width: 800px)': {
       display: "flex",
-      'flex-direction': "column",
-      'overflow-x': "hidden",
+      flexDirection: "column",
+      overflowX: "hidden",
       margin: "2rem 5% 0 5%",
     }
   }
@@ -182,21 +182,21 @@ const SkillCategoriesPage = () => {
           />
           <Autocomplete
             className="filter-skill-categories-field"
+            size="small"
+            style={{ minWidth: "200px", maxWidth: "300px" }}
+            options={skills}
+            getOptionLabel={(option) => option.name}
+            filterSelectedOptions
+            value={skillFilter}
+            onChange={(_, newValue) => setSkillFilter(newValue)}
             renderInput={(params) => (
               <TextField
                 {...params}
-                style={{ minWidth: "200px", maxWidth: "300px" }}
                 label="Filter by Skill"
                 variant="outlined"
-                size="small"
                 placeholder="Skill name"
               />
             )}
-            options={skills}
-            getOptionLabel={(option) => option.name}
-            filterSelectedOptions
-            value={skillFilter}
-            onChange={(_, newValue) => setSkillFilter(newValue)}
           />
           <Button
             className="new-skill-category-button"

web-ui/src/pages/SkillCategoriesPage.test.js

@@ -0,0 +1,11 @@
+import React from "react";
+import {AppContextProvider} from "../context/AppContext";
+import SkillCategoriesPage from "./SkillCategoriesPage";
+
+it("renders correctly", () => {
+  snapshot(
+    <AppContextProvider>
+      <SkillCategoriesPage />
+    </AppContextProvider>
+  );
+});

web-ui/src/pages/SkillCategoryEditPage.jsx

@@ -40,11 +40,11 @@ const Root = styled('div')({
     backgroundColor: "transparent",
     margin: "4rem 2rem 2rem 2rem",
     height: "100%",
-    'max-width': "100%",
-    '@media (max-width:800px)': {
+    maxWidth: "100%",
+    '@media (max-width: 800px)': {
       display: "flex",
-      'flex-direction': "column",
-      'overflow-x': "hidden",
+      flexDirection: "column",
+      overflowX: "hidden",
       margin: "2rem 5% 0 5%",
     }
   }

web-ui/src/pages/SkillCategoryEditPage.test.js

@@ -0,0 +1,14 @@
+import React from "react";
+import {AppContextProvider} from "../context/AppContext";
+import SkillCategoryEditPage from "./SkillCategoryEditPage";
+import {BrowserRouter} from "react-router-dom";
+
+it("renders correctly", () => {
+  snapshot(
+    <AppContextProvider>
+      <BrowserRouter>
+        <SkillCategoryEditPage />
+      </BrowserRouter>
+    </AppContextProvider>
+  );
+});