add visual test lib, loki and bump up versions

.eslintrc.js

@@ -36,6 +36,7 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-unused-vars': [
       'error',
       { ignoreRestSiblings: true },

.loki/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

.storybook/preview.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RouterContext } from 'next/dist/next-server/lib/router-context';
+import 'loki/configure-react';
 // NOTE: can add a global CSS
 
 export const parameters = {

@types/index.d.ts

@@ -0,0 +1 @@
+declare module '@loki/create-async-callback';

README.md

@@ -31,6 +31,20 @@ yarn test
 
 It will open Cypress for Unit tests and E2E tests.
 
+Third, run visual regression tests:
+
+```bash
+# https://loki.js.org/command-line-arguments.html#loki-test
+
+# to test all stories
+yarn storybook
+yarn test:visual
+
+# to use regular expression for stories to test
+# Below will only test stories whose name has the string, 'card'
+yarn test:visual:filter card
+```
+
 ## Build
 
 Run the development server with build files:

cypress/support/commands.js

@@ -22,7 +22,7 @@ Cypress.Commands.add(
     reqAfterCallback,
     selectorToCheckUiRenderDone,
   }) => {
-    cy.setCookie('mock_server', 'true');
+    cy.setCookie('no_mock_api', 'false');
     cy.visit(url, {
       onBeforeLoad: win => {
         win.eval(window.parent.xhookResponse);

loki.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  configurations: {
+    'chrome.laptop': {
+      target: 'chrome.app',
+      width: 1366,
+      height: 768,
+      deviceScaleFactor: 1,
+      mobile: false,
+    },
+  },
+};

package.json

@@ -14,6 +14,12 @@
     "test": "cross-env COVERAGE=true cypress open",
     "test:run": "cross-env COVERAGE=true cypress run --browser chrome --headless --config baseUrl=http://localhost:6007",
     "test:ci": "start-server-and-test storybook:ci http://localhost:6007 test:run",
+    "test:visual": "yarn loki test",
+    "test:visual:filter": "loki test --storiesFilter",
+    "test:visual:update": "loki update",
+    "test:visual:approve": "loki approve",
+    "test:visual:ci:base": "loki test --reactPort 6007",
+    "test:visual:ci": "start-server-and-test storybook:ci http://localhost:6007 test:visual:ci:base",
     "ci": "yarn lint && yarn test:ci",
     "build": "next build && next export",
     "build:analyze": "cross-env ANALYZE=true yarn build",
@@ -23,7 +29,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
-    "axios": "^0.19.2",
+    "axios": "^0.20.0",
     "d3": "^5.16.0",
     "next": "^9.5.2",
     "react": "^16.13.1",
@@ -32,11 +38,12 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.8.1",
     "@cypress/webpack-preprocessor": "^5.4.4",
+    "@loki/create-async-callback": "^0.24.0",
     "@next/bundle-analyzer": "^9.5.2",
-    "@storybook/addon-actions": "^6.0.13",
-    "@storybook/addon-essentials": "^6.0.13",
-    "@storybook/addon-links": "^6.0.13",
-    "@storybook/react": "^6.0.13",
+    "@storybook/addon-actions": "^6.0.16",
+    "@storybook/addon-essentials": "^6.0.16",
+    "@storybook/addon-links": "^6.0.16",
+    "@storybook/react": "^6.0.16",
     "@types/d3": "^5.7.2",
     "@types/react": "^16.9.46",
     "@typescript-eslint/eslint-plugin": "^3.9.1",
@@ -45,7 +52,7 @@
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
     "cross-env": "^7.0.2",
-    "cypress": "^4.12.1",
+    "cypress": "^5.0.0",
     "eslint": "^7.7.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-cypress": "^2.11.1",
@@ -54,11 +61,12 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "express": "^4.17.1",
     "http-proxy-middleware": "^1.0.5",
+    "loki": "^0.24.0",
     "lowdb": "^1.0.0",
     "morgan": "^1.10.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
     "start-server-and-test": "^1.11.3",
-    "typescript": "^3.9.7"
+    "typescript": "^4.0.2"
   }
 }

server/routes/index.js

@@ -52,15 +52,15 @@ module.exports = app => {
   app.use(express.urlencoded({ extended: true }));
 
   app.use('/api/posts', (req, res, next) => {
-    if (req.cookies.mock_server === 'true') {
-      timeouts.read();
-      const timeout = timeouts.get('getPosts') || 0;
-      setTimeout(() => {
-        postCtrl.getPosts(req, res);
-      }, timeout);
+    if (req.cookies.no_mock_api === 'true') {
+      next();
       return;
     }
-    next();
+    timeouts.read();
+    const timeout = timeouts.get('getPosts') || 0;
+    setTimeout(() => {
+      postCtrl.getPosts(req, res);
+    }, timeout);
   });
 
   setProxy(app);

src/components/Posts/index.tsx

@@ -9,12 +9,18 @@ type Post = {
   body: string;
 };
 
+export interface PostsProps {
+  onPostsLoad?: VoidFunction;
+}
+
 const API_URL_POST =
   process.env.NODE_ENV === 'production'
     ? `https://jsonplaceholder.typicode.com`
     : `/api`;
 
-export const Posts = () => {
+export const Posts = (props: PostsProps) => {
+  const { onPostsLoad = () => {} } = props;
+
   const [posts, setPosts] = useState<Post[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -29,6 +35,7 @@ export const Posts = () => {
       .then(response => {
         setPosts(response.data);
         setIsLoading(false);
+        onPostsLoad();
       })
       .catch(error => {
         if (axios.isCancel(error)) {

src/components/StorybookExample/Button.stories.tsx

@@ -23,15 +23,24 @@ export const Secondary = Template.bind({});
 Secondary.args = {
   label: 'Button',
 };
+Secondary.parameters = {
+  loki: { skip: true },
+};
 
 export const Large = Template.bind({});
 Large.args = {
   size: 'large',
   label: 'Button',
 };
+Large.parameters = {
+  loki: { skip: true },
+};
 
 export const Small = Template.bind({});
 Small.args = {
   size: 'small',
   label: 'Button',
 };
+Small.parameters = {
+  loki: { skip: true },
+};

src/pages/test/posts.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { GlobalCss } from '../../components/GlobalCss';
 import Head from 'next/head';
-import { Posts } from '../../components/Posts';
+import { Posts, PostsProps } from '../../components/Posts';
 import { useRouter } from 'next/router';
 import FaceIcon from '@material-ui/icons/Face';
 
-const PostsPage = () => {
+export type PostsPageProps = PostsProps;
+
+const PostsPage = (props: PostsPageProps) => {
+  const { onPostsLoad } = props;
   const router = useRouter();
   return (
     <>
@@ -23,10 +26,10 @@ const PostsPage = () => {
           </h1>
           <p className="description">
             Get started by editing{' '}
-            <code>{`src/pages${router.pathname}.tsx`}</code>
+            <code>{`src/pages${router.pathname || '/test/posts'}.tsx`}</code>
           </p>
           <FaceIcon />
-          <Posts />
+          <Posts onPostsLoad={onPostsLoad} />
         </main>
 
         <style jsx>{`

src/stories/test/posts.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
+import createAsyncCallback from '@loki/create-async-callback';
 
-import PostsPage from '../../pages/test/posts';
+import PostsPage, { PostsPageProps } from '../../pages/test/posts';
 
 export default {
   title: 'Test/PostsPage',
@@ -12,7 +13,19 @@ export default {
   },
 } as Meta;
 
-const Template: Story = args => <PostsPage {...args} />;
+const Template: Story<PostsPageProps> = args => {
+  // NOTE: createAsyncCallback doesn't work if it is passed by args like example below
+  // it hangs when running loki test
+  // Base.args = {
+  //   onPostsLoad: createAsyncCallback(),
+  // };
+  return (
+    <PostsPage
+      {...args}
+      onPostsLoad={args.onPostsLoad ? args.onPostsLoad : createAsyncCallback()}
+    />
+  );
+};
 
 export const Base = Template.bind({});
 Base.args = {};