Add server tests (wip)

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "eslint.workingDirectories": ["./client", "./server"],
   "eslint.enable": true,
-  "eslint.packageManager": "yarn"
+  "eslint.packageManager": "yarn",
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true
 }

README.md

@@ -4,6 +4,15 @@ Multiplayer truco game made with GraphQL and React.
 
 ## Development
 
+### Tech stack
+
+- GraphQL (Apollo Server + Apollo Client)
+- React
+- React router
+- Typescript
+- Tailwind CSS
+- GraphQL Codegen (generate Typescript types from GraphQL schema)
+
 ### Client
 
 [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](link to site)

client/.eslintrc.js

@@ -1,23 +1,23 @@
 module.exports = {
-    env: {
-        browser: true,
-        commonjs: true,
-        es6: true,
-    },
-    extends: [
-        "react-app",
-        "prettier",
-        "prettier/react",
-        "plugin:prettier/recommended",
-    ],
-    plugins: ["prettier"],
-    parserOptions: {
-        ecmaVersion: 2018
-    },
-    rules: {
-        "prettier/prettier": ["error"],
-        "class-methods-use-this": "off",
-        "no-underscore-dangle": "off",
-        "func-names": "off",
-    },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  extends: [
+    "react-app",
+    "prettier",
+    "prettier/react",
+    "plugin:prettier/recommended",
+  ],
+  plugins: ["prettier"],
+  parserOptions: {
+    ecmaVersion: 2018,
+  },
+  rules: {
+    "prettier/prettier": ["error"],
+    "class-methods-use-this": "off",
+    "no-underscore-dangle": "off",
+    "func-names": "off",
+  },
 };

client/.storybook/addons.js

@@ -1,2 +1,2 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";

client/.storybook/config.js

@@ -7,8 +7,9 @@ import "../src/styles/tailwind.css";
 addDecorator(StoryRouter());
 
 // Only add typeDefs so we don't get an error
-addDecorator(apolloStorybookDecorator({
-  typeDefs: `
+addDecorator(
+  apolloStorybookDecorator({
+    typeDefs: `
     type Query {
       test: String
     }
@@ -17,14 +18,14 @@ addDecorator(apolloStorybookDecorator({
       query: Query
     }
   `,
-  mocks: {}
-}));
-
+    mocks: {},
+  })
+);
 
 // automatically import all files ending in *.stories.js
-const req = require.context("../src", true, /\.stories\.js$/);
+const req = require.context("../src", true, /\.stories\.tsx$/);
 function loadStories() {
-  req.keys().forEach(filename => req(filename));
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

client/.storybook/preview-head.html

@@ -1 +1,4 @@
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap"
+  rel="stylesheet"
+/>

client/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@apollo/client": "^3.0.0-beta.46",
+    "@apollo/client": "^3.0.0-rc.5",
     "@apollo/link-context": "^2.0.0-beta.3",
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/link-ws": "^2.0.0-beta.3",
@@ -16,11 +16,10 @@
     "classnames": "^2.2.6",
     "faker": "^4.1.0",
     "formik": "^2.1.4",
-    "graphql": "^14.1.1",
-    "graphql-tag": "^2.10.3",
+    "graphql": "^15.1.0",
     "node-sass": "^4.11.0",
     "pad-start": "^1.0.2",
-    "ramda": "^0.26.1",
+    "ramda": "^0.27.0",
     "random-item": "^3.0.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
@@ -29,10 +28,11 @@
     "react-google-login": "^5.0.4",
     "react-modal": "^3.8.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "2.1.5",
+    "react-scripts": "^3.4.1",
     "react-svg-spinner": "^1.0.4",
     "storybook-react-router": "^1.0.5",
-    "subscriptions-transport-ws": "^0.9.15"
+    "subscriptions-transport-ws": "^0.9.15",
+    "typescript": "^3.9.5"
   },
   "scripts": {
     "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
@@ -41,7 +41,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prettier": "prettier --write '**/*.{ts,tsx,js,jsx,css,html}'"
   },
   "browserslist": [
     ">0.2%",
@@ -55,6 +56,16 @@
     "@storybook/addon-links": "^5.1.9",
     "@storybook/addons": "^5.1.9",
     "@storybook/react": "^5.1.9",
+    "@types/classnames": "^2.2.10",
+    "@types/faker": "^4.1.12",
+    "@types/jest": "^26.0.0",
+    "@types/node": "^14.0.13",
+    "@types/ramda": "^0.27.6",
+    "@types/react": "^16.9.36",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-facebook-login": "^4.1.2",
+    "@types/react-modal": "^3.10.5",
+    "@types/react-router-dom": "^5.1.5",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
     "apollo-storybook-react": "^0.2.4",
@@ -67,9 +78,8 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "2.x",
-    "graphql-tools": "^5.0.0",
     "postcss-cli": "^7.1.0",
-    "prettier": "^2.0.5",
+    "prettier": "2.0.5",
     "tailwindcss": "^1.3.4"
   }
 }

client/postcss.config.js

@@ -1,9 +1,6 @@
 //postcss.config.js
-const tailwindcss = require('tailwindcss');
+const tailwindcss = require("tailwindcss");
 
 module.exports = {
-    plugins: [
-        tailwindcss('./tailwind.js'),
-        require('autoprefixer'),
-    ],
-};
+  plugins: [tailwindcss("./tailwind.js"), require("autoprefixer")],
+};

client/public/index.html

@@ -1,24 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
-
-  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
-  <meta name="msapplication-config" content="%PUBLIC_URL%/browserconfig.xml" />
-  <meta name="msapplication-TileColor" content="#ffffff">
-  <meta name="theme-color" content="#ffffff">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/favicon-16x16.png"
+    />
+    <meta
+      name="msapplication-config"
+      content="%PUBLIC_URL%/browserconfig.xml"
+    />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="theme-color" content="#ffffff" />
 
-  <!--
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -27,13 +46,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Truco.pro 🇦🇷 Juga al truco argentino online gratis</title>
-</head>
+    <title>Truco.pro 🇦🇷 Juga al truco argentino online gratis</title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -43,7 +62,9 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
-</body>
-
-</html>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+  </body>
+</html>

client/src/App.js → client/src/App.tsx

@@ -46,11 +46,20 @@ const wsClient = new SubscriptionClient(
 
 const webSocketLink = new WebSocketLink(wsClient);
 
-const requestLink = ({ queryOrMutationLink, subscriptionLink }) =>
+const requestLink = ({
+  queryOrMutationLink,
+  subscriptionLink,
+}: {
+  queryOrMutationLink: ApolloLink;
+  subscriptionLink: ApolloLink;
+}) =>
   split(
     ({ query }) => {
-      const { kind, operation } = getMainDefinition(query);
-      return kind === "OperationDefinition" && operation === "subscription";
+      const definition = getMainDefinition(query);
+      return (
+        definition.kind === "OperationDefinition" &&
+        definition.operation === "subscription"
+      );
     },
     subscriptionLink,
     queryOrMutationLink
@@ -59,7 +68,7 @@ const requestLink = ({ queryOrMutationLink, subscriptionLink }) =>
 const errorLink = onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors) {
     graphQLErrors.forEach(({ message, locations, path, extensions }) => {
-      if (extensions.code === "UNAUTHENTICATED") {
+      if (extensions && extensions.code === "UNAUTHENTICATED") {
         localStorage.removeItem("token");
         location.reload(); //eslint-disable-line no-restricted-globals
       }