Merge pull request #209 from mberlanda/jest

Add jest support and ts unit tests

.eslintrc

@@ -17,5 +17,10 @@
       "plugin:@typescript-eslint/eslint-recommended",
       "plugin:@typescript-eslint/recommended"
     ],
-    "rules": {}
+    "rules": {},
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    }
 }

.github/workflows/ruby.yml

@@ -73,10 +73,14 @@ jobs:
           yarn install --pure-lockfile
       - name: Run ESLint
         run: yarn run lint
+      - name: Run Jest tests
+        env:
+          NODE_ENV: test
+        run: yarn run test app/javascript
       - name: Install PostgreSQL client
         run: |
           sudo apt-get -yqq install libpq-dev
-      - name: Run tests
+      - name: Run RSpec tests
         env:
           PGHOST: localhost
           PGUSER: postgres

app/javascript/components/event/__tests__/__snapshots__/availability_progressbar.spec.tsx.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EventAvailabilityProgressbar when availability: 1, currentUser: {"canBook":true} 1`] = `
+<div
+  className="progress event-progress"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={0}
+    className="progress-bar progress-bar-danger"
+    role="progressbar"
+    style={
+      Object {
+        "width": "99%",
+      }
+    }
+  >
+    <span
+      className="sr-only"
+    >
+      99%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`EventAvailabilityProgressbar when availability: 26, currentUser: {"canBook":true} 1`] = `
+<div
+  className="progress event-progress"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={0}
+    className="progress-bar progress-bar-warning"
+    role="progressbar"
+    style={
+      Object {
+        "width": "74%",
+      }
+    }
+  >
+    <span
+      className="sr-only"
+    >
+      74%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`EventAvailabilityProgressbar when availability: 51, currentUser: {"canBook":true} 1`] = `
+<div
+  className="progress event-progress"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={0}
+    className="progress-bar progress-bar-info"
+    role="progressbar"
+    style={
+      Object {
+        "width": "49%",
+      }
+    }
+  >
+    <span
+      className="sr-only"
+    >
+      49%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`EventAvailabilityProgressbar when availability: 76, currentUser: {"canBook":true} 1`] = `
+<div
+  className="progress event-progress"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={0}
+    className="progress-bar progress-bar-success"
+    role="progressbar"
+    style={
+      Object {
+        "width": "24%",
+      }
+    }
+  >
+    <span
+      className="sr-only"
+    >
+      24%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`EventAvailabilityProgressbar when availability: 100, currentUser: {"canBook":false} 1`] = `
+<div
+  className="progress event-progress"
+/>
+`;
+
+exports[`EventAvailabilityProgressbar when availability: 100, currentUser: undefined 1`] = `
+<div
+  className="progress event-progress"
+/>
+`;

app/javascript/components/event/__tests__/__snapshots__/icon.spec.tsx.snap

@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EventIcon when status: "available" and audience: "gold" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="fa fa-calendar-check-o icon-green"
+    message="Prenotabile"
+  />
+  <Icon
+    className="fa fa-trophy icon-yellow"
+    message="Solo Corieristi Gold"
+  />
+</div>
+`;
+
+exports[`EventIcon when status: "available" and audience: "preferred" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="fa fa-calendar-check-o icon-green"
+    message="Prenotabile"
+  />
+  <Icon
+    className="fa fa-star icon-yellow"
+    message="Solo Corieristi Semper Fidelis"
+  />
+</div>
+`;
+
+exports[`EventIcon when status: "available" and audience: "undefined" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="fa fa-calendar-check-o icon-green"
+    message="Prenotabile"
+  />
+  <Icon
+    className="hidden"
+    message=""
+  />
+</div>
+`;
+
+exports[`EventIcon when status: "fully_booked" and audience: "gold" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="fa fa-calendar-times-o icon-red"
+    message="Disponibilità Esaurita"
+  />
+  <Icon
+    className="fa fa-trophy icon-yellow"
+    message="Solo Corieristi Gold"
+  />
+</div>
+`;
+
+exports[`EventIcon when status: "fully_booked" and audience: "preferred" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="fa fa-calendar-times-o icon-red"
+    message="Disponibilità Esaurita"
+  />
+  <Icon
+    className="fa fa-star icon-yellow"
+    message="Solo Corieristi Semper Fidelis"
+  />
+</div>
+`;
+
+exports[`EventIcon when status: "fully_booked" and audience: "undefined" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="fa fa-calendar-times-o icon-red"
+    message="Disponibilità Esaurita"
+  />
+  <Icon
+    className="hidden"
+    message=""
+  />
+</div>
+`;
+
+exports[`EventIcon when status: "undefined" and audience: "gold" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="hidden"
+    message=""
+  />
+  <Icon
+    className="fa fa-trophy icon-yellow"
+    message="Solo Corieristi Gold"
+  />
+</div>
+`;
+
+exports[`EventIcon when status: "undefined" and audience: "preferred" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="hidden"
+    message=""
+  />
+  <Icon
+    className="fa fa-star icon-yellow"
+    message="Solo Corieristi Semper Fidelis"
+  />
+</div>
+`;
+
+exports[`EventIcon when status: "undefined" and audience: "undefined" 1`] = `
+<div
+  className="pull-right"
+>
+  <Icon
+    className="hidden"
+    message=""
+  />
+  <Icon
+    className="hidden"
+    message=""
+  />
+</div>
+`;

app/javascript/components/event/__tests__/availability_progressbar.spec.tsx

@@ -0,0 +1,25 @@
+import { configure } from "enzyme";
+import * as Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+configure({ adapter: new Adapter() });
+import { EventAvailabilityProgressbar } from "..";
+import { Game } from "../../../models";
+
+describe("EventAvailabilityProgressbar", () => {
+  [
+    { availability: 100 },
+    { availability: 100, currentUser: { canBook: false } },
+    { availability: 1, currentUser: { canBook: true } },
+    { availability: 26, currentUser: { canBook: true } },
+    { availability: 51, currentUser: { canBook: true } },
+    { availability: 76, currentUser: { canBook: true } },
+  ].forEach((game: Partial<Game>) => {
+    test(`when availability: ${game.availability}, currentUser: ${
+      game.currentUser && JSON.stringify(game.currentUser)
+    }`, () => {
+      const progressBar = new EventAvailabilityProgressbar({
+        game: game,
+      });
+      expect(progressBar.render()).toMatchSnapshot();
+    });
+  });
+});

app/javascript/components/event/__tests__/icon.spec.tsx

@@ -0,0 +1,24 @@
+import { configure } from "enzyme";
+import * as Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+configure({ adapter: new Adapter() });
+
+import { EventIcon } from "..";
+
+describe("EventIcon", () => {
+  const STATUSES = [undefined, "available", "fully_booked"];
+  const AUDIENCES = [undefined, "preferred", "gold"];
+
+  STATUSES.forEach((status: string) => {
+    AUDIENCES.forEach((audience: string) => {
+      test(`when status: "${status}" and audience: "${audience}"`, () => {
+        const statusProp = status ? { status: status } : {};
+        const audienceProp = audience ? { audience: audience } : {};
+        const eventIcon = new EventIcon({
+          game: { ...statusProp, ...audienceProp },
+        });
+
+        expect(eventIcon.render()).toMatchSnapshot();
+      });
+    });
+  });
+});

app/javascript/components/event/availability_progressbar.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Game } from "../../models";
 
 interface ProgressbarProps {
-  game: Game;
+  game: Partial<Game>;
 }
 
 // TODO: this can be refactored
@@ -31,7 +31,7 @@ export class EventAvailabilityProgressbar extends React.Component<ProgressbarPro
     );
   }
 
-  _getVisibleBar = (game: Game) => {
+  _getVisibleBar = (game: Partial<Game>) => {
     if (game.currentUser?.canBook) {
       const divStyle = {
         width: `${this.state.occupancy}%`,

app/javascript/components/event/icon.tsx

@@ -25,7 +25,7 @@ class Icon extends React.Component<IconProps> {
 }
 
 interface EventIconProps {
-  game: Game;
+  game: Partial<Game>;
 }
 
 enum IconTypes {

app/javascript/packs/application.js

@@ -13,7 +13,11 @@ require("@rails/ujs").start();
 // require("channels")
 
 // Support component names relative to this directory:
-var componentRequireContext = require.context("components", true);
+var componentRequireContext = require.context(
+  "components",
+  true,
+  /^(?!.*__tests__\/.*$).+\.[jt]sx?$/
+);
 var ReactRailsUJS = require("react_ujs");
 ReactRailsUJS.useContext(componentRequireContext);
 

app/javascript/packs/server_rendering.ts

@@ -1,6 +1,10 @@
 import * as ReactRailsUJS from "react_ujs";
 // By default, this pack is loaded for server-side rendering.
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
-const componentRequireContext = require.context("components", true);
+const componentRequireContext = require.context(
+  "components",
+  true,
+  /^(?!.*__tests__\/.*$).+\.[jt]sx?$/
+);
 
 ReactRailsUJS.useContext(componentRequireContext);