Jest tests

app/assets/stylesheets/__mocks__/styleMock.js

@@ -0,0 +1 @@
+export default ''

app/javascript/__mocks__/fileMock.js

@@ -0,0 +1 @@
+export default ''

package.json

@@ -1,12 +1,15 @@
 {
   "scripts": {
-    "start": "./bin/webpack-dev-server --host 0.0.0.0 --inline --content-base .",
+    "start": "webpack-dev-server --host 0.0.0.0 --inline --content-base .",
+    "test": "jest",
     "lint": "eslint --ext .js,.vue"
   },
   "dependencies": {
     "@amcharts/amcharts4": "^4.9.28",
     "@rails/webpacker": "^4.0.2",
     "axios": "^0.19.0",
+    "babel-jest": "^26.1.0",
+    "babel-preset-es2015": "^6.24.1",
     "babel-polyfill": "^6.26.0",
     "d3": "^5.9.2",
     "dotenv-webpack": "^1.7.0",
@@ -18,15 +21,37 @@
     "vue": "^2.6.10",
     "vue-analytics": "^5.17.2",
     "vue-flickity": "^1.2.1",
+    "vue-jest": "^3.0.6",
     "vue-lazyload": "^1.3.3",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.10",
+    "vue-test-utils": "^1.0.0-beta.11",
     "vue2-touch-events": "^2.0.0",
     "vuex": "^3.1.0",
     "webpack-dev-server": "^3.8.2"
   },
   "devDependencies": {
+    "babel-core": "^7.0.0-bridge.0",
+    "jest": "^26.1.0",
     "eslint": "~5.16.0",
     "eslint-plugin-vue": "^5.2.3"
+  },
+  "jest": {
+    "moduleDirectories": [
+      "node_modules",
+      "app/javascript"
+    ],
+    "moduleFileExtensions": ["js", "json", "vue"],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/app/javascript/__mocks__/fileMock.js",
+      "\\.(css|scss)$": "<rootDir>/app/assets/stylesheets/__mocks__/styleMock.js"
+    },
+    "roots": [
+      "test/javascripts"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "vue-jest"
+    }
   }
 }

test/javascripts/tests/select/selectDropdown.test.js

@@ -0,0 +1,49 @@
+import { mount } from "vue-test-utils";
+import SelectDropdown from "components/select/SelectDropdown.vue";
+
+describe("SelectDropdown.vue", () => {
+  // Set up props
+  const protectedAreas = [
+  { title: "test message 1" }, 
+  { title: "test message 2" }, 
+  { title: "test message 3" }
+  ];
+
+  // Mount the component
+  const component = mount(SelectDropdown, {
+    propsData: { protectedAreas }
+  });
+
+  // Locate the select button of the dropdown (that actually allows selections)
+  const select = component.find('div.select--dropdown__selected');
+
+  // Locates the last option of the dropdown 
+  const newSelection = component.find('span.select--dropdown__option:last-child')
+
+  it("receives the full set of props it is passed", () => {
+    expect(component.props().protectedAreas.length).toEqual(protectedAreas.length);
+  });
+
+
+  it("initially renders the first prop it is passed", () => {
+    const selectedTitle = component.find('div.select--dropdown__selected > span')
+    expect(selectedTitle.text()).toBe(protectedAreas[0].title);
+  });
+
+  it("allows selections to be made", async () => {
+    await select.trigger('click');
+    expect(component.vm.isActive).toBeTruthy();
+
+    expect(newSelection.text()).toEqual(protectedAreas[2].title);
+
+    // Updates the 'selected' property of data
+    await newSelection.trigger('click');
+    expect(component.vm.selected).toEqual(protectedAreas[2]);
+  });
+
+  it("emits the selected option", async () => {
+    await select.trigger('click');
+    await newSelection.trigger('click');
+    expect(component.emitted('pa-selected')).toBeTruthy;
+  });
+});

test/javascripts/tests/select/selectEquity.test.js

@@ -0,0 +1,56 @@
+import { mount } from "vue-test-utils";
+import SelectEquity from "components/select/SelectEquity.vue";
+import SelectDropdown from "components/select/SelectDropdown.vue";
+import image from "../assets/images/background.jpg";
+
+
+describe("SelectEquity.vue", () => {
+  // Set up props
+  const imageURL = "http://localhost/" + image
+
+  const protectedAreas = [
+    { title: "test message 1", text: "sample text 1", image: imageURL }, 
+    { title: "test message 2", text: "sample text 2" }, 
+    { title: "test message 3", text: "sample text 3" }
+  ];
+
+  // Mount the component
+  const component = mount(SelectEquity, {
+    propsData: { protectedAreas }
+  });
+
+  const child = component.find(SelectDropdown);
+
+  // Teardown funcs: reset the component's selected value to the first value of 
+  // protectedAreas after each test
+  afterEach(() => {
+    resetComponent();
+  });
+
+  function resetComponent() {
+    component.setData({ selected: protectedAreas[0] });
+  }
+
+
+  // Test suite
+  it("renders its child component correctly", () => {
+    expect(child.exists()).toBe(true);
+  });
+
+  it("listens for emitted events and updates its properties in response", async () => {
+    await child.find('div.select--dropdown__selected').trigger('click');
+    await child.find('span.select--dropdown__option:last-child').trigger('click');
+    expect(child.emitted('pa-selected').length).toBe(1);
+    expect(component.vm.selected).toBe(protectedAreas[2]);
+  });
+
+  it("displays the correct text", () => {
+    const text = component.find('p')
+    expect(text.text()).toEqual(protectedAreas[0].text);
+  });
+
+  it("shows the correct image", () => {
+    const imageUrl = component.find('img').element.src;
+    expect(imageUrl).toEqual(protectedAreas[0].image);
+  });
+});