Add upload artifact (#13)

* Add upload artifact

* Fix workflow

* Fix command

* Fix workflow

* Fix only one version

* Fix path

* Fix do not checkout

* Fix syntax error

* Fix error

* Fix error

* Fix path

* tweak

* Fix README

* Fix tweak README

* Fix const name

* Fix add visual regression tests

* Fix command

* Fix command

* Fix add scripts for visualize test

* Fix use bash

Author: heavenshell

.github/workflows/main.yml

@@ -9,14 +9,15 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [10.x]
 
     steps:
     - uses: actions/checkout@v1
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
+
     - name: Install dependencies
       run: yarn install
 
@@ -31,15 +32,23 @@ jobs:
         mkdir -p "./dist/storybook/${{ github.head_ref }}"
         yarn build-storybook -o "./dist/storybook/${{ github.head_ref }}"
 
-    - name: Deploy branch - "${{ github.head_ref }}"
+    - name: Prepare upload artifact - "${{ github.head_ref }}"
       run: |
-        echo "not master branch ${{ github.head_ref }}"
+        echo `which wget`
+        mkdir -p "./dist/__regressions__${{ github.head_ref }}/actual"
+        yarn screenshot -o "./dist/__regressions__/${{ github.head_ref }}/actual"
+      if: contains(github.ref, 'master') == false
+
+    - name: Upload artifact
+      uses: actions/upload-artifact@master
+      with:
+        name: screenshots
+        path: "./dist/__regressions__/${{ github.head_ref }}/actual"
       if: contains(github.ref, 'master') == false
 
     - name: Deploy master
       run: |
         echo "./dist"
         ls ./dist
         echo "./dist/storybook/${{ github.head_ref }}"
-        ls "./dist/storybook/${{ github.head_ref }}"
       if: contains(github.ref, 'master')

.gitignore

@@ -96,3 +96,4 @@ tmp/
 package-lock.json
 storybook-static/
 __screenshots__/
+__regressions__/

README.md

@@ -1,7 +1,7 @@
 # My Site build with React-Static
 
 [![Build Status](https://github.com/heavenshell/ts-react-static/workflows/build/badge.svg)](https://github.com/heavenshell/ts-react-static/actions)
-
+[![Netlify Status](https://api.netlify.com/api/v1/badges/aa9245e5-3cff-49a0-bf2c-cd3e8d37ca7a/deploy-status)](https://app.netlify.com/sites/heavenshell/deploys)
 
 | Library        | Description                     |
 |:---------------|:--------------------------------|
@@ -16,42 +16,47 @@
 | Enzyme         | React testing library           |
 | Storybook      | UI component dev & test         |
 
+- Site
+  - https://heavenshell.netlify.com/
+- Storybook
+  - https://heavenshell.netlify.com/storybook/
+
 ## Install
 
 ```
-$ yarn
+yarn
 ```
 
 ## Usage
 
 ### Build
 
 ```
-$ yarn build
+yarn build
 ```
 
 ### Development
 
 ```
-$ yarn start
+yarn start
 ```
 
 ### Storybook
 
 ```
-$ yarn storybook
+yarn storybook
 ```
 
 ### Test
 
 ```
-$ yarn test
+yarn test
 ```
 
 ### Lint
 
 ```
-$ yarn lint
+yarn lint
 ```
 
 ## LICENSE

package.json

@@ -17,8 +17,9 @@
     "lint:md": "markdownlint contents",
     "lint": "run-p -l lint:*",
     "test": "jest --maxWorkers=1",
-    "screenshot": "zisui --serverCmd 'start-storybook -p 6006' --serverTimeout 100000 http://localhost:6006",
-    "build:all": "yarn build && mkdir -p ./dist/storybook && yarn build-storybook -o ./dist/storybook"
+    "screenshot": "zisui --serverCmd 'start-storybook -p 6006' --serverTimeout 100000 http://localhost:6006 -i '**/Regression'",
+    "build:reg": "bash ./scripts/reg.sh",
+    "build:all": "yarn build && yarn build:reg"
   },
   "dependencies": {
     "@emotion/core": "10.0.17",
@@ -93,6 +94,7 @@
     "markdownlint-cli": "0.18.0",
     "npm-run-all": "4.1.5",
     "prettier": "1.18.2",
+    "reg-cli": "0.15.7",
     "serve": "11.1.0",
     "style-loader": "1.0.0",
     "ts-config-webpack-plugin": "1.4.0",

scripts/reg.sh

@@ -0,0 +1,37 @@
+#!/bin/sh
+
+function prepare () {
+  mkdir -p ./dist/storybook
+  rm -rf ./dist/__regressions__
+  mkdir -p ./dist/__regressions__/{expected,actual}
+  yarn build-storybook -o ./dist/storybook
+  yarn screenshot -o ./dist/__regressions__/actual
+}
+
+function download () {
+  echo "wget expected file"
+  wget https://heavenshell.netflify.com/__regressions__/expected/files.tar.gz
+  if [ -e files.tar.gz ]; then
+    mv files.tar.gz ./dist/__regressions__/expected/files.tar.gz
+    echo "unzip file.tar.gz"
+    tar xzf ./dist/__regressions__/expected/files.tar.gz ./dist/__regressions__/exptected
+  fi
+}
+
+function run_reg () {
+  reg-cli ./dist/__regressions__/actual ./dist/__regressions__/expected ./dist/__regressions__/reports/ -R ./dist/__regressions__/report.html
+  mv reg.json ./dist/__regressions__/.
+}
+
+
+function compress () {
+  if [ -d ./dist/__regressions__/expected ]; then
+    echo "compress files and move to exptected"
+    tar czf ./dist/__regressions__/expected/files.tar.gz ./dist/__regressions__/actual
+  fi
+}
+
+prepare
+download
+run_reg
+compress

src/components/__fixtures__/json/about.json

@@ -0,0 +1,4 @@
+{
+  "title": "Lorem ipsum dolor sit amet...",
+  "content": "Nisi alias cumque alias eligendi et suscipit. Cumque pariatur dolorum sit non est et qui non. Eum modi rerum. Quasi pariatur inventore rerum. Sit cumque et fuga ut eveniet fuga. Ut tempora optio repudiandae cumque iste aliquid labore nemo. Excepturi suscipit eum aliquam natus at delectus. Laborum est earum rerum doloribus. Consectetur officia perferendis et consequatur. Eaque velit soluta et nostrum sit. Voluptate natus aut veniam optio qui voluptatibus qui. Dolores placeat dolore corrupti ipsam. Quo ut eveniet facere."
+}

src/components/__fixtures__/json/home.json

@@ -0,0 +1,17 @@
+[
+  {
+    "title": "Sint sit dolores fugit qui rerum distinctio saepe.",
+    "date": "2019-01-01",
+    "slug": "foo"
+  },
+  {
+    "title": "corrupti consequatur dolores",
+    "date": "2019-01-02",
+    "slug": "bar"
+  },
+  {
+    "title": "Alias voluptatem molestiae temporibus omnis deserunt dolore non neque. Harum neque optio accusantium. Ipsum quia vero sit quas nemo ea vel quidem sint.",
+    "date": "2019-01-03",
+    "slug": "baz"
+  }
+]

src/components/__fixtures__/json/layout.json

@@ -0,0 +1,3 @@
+{
+  "children": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+}

src/components/__fixtures__/json/next.json

@@ -0,0 +1,4 @@
+{
+  "title": "Perferendis sit nihil.",
+  "slug": "foo"
+}

src/components/__fixtures__/json/post.json

@@ -0,0 +1,6 @@
+{
+  "title": "alias iusto cumque",
+  "contents": "Ipsam velit eaque. Et quia ad natus dignissimos nostrum maiores et similique voluptas. Doloribus ut in officiis dolore a dolor error. Temporibus consequatur qui deserunt nesciunt quis dolorum. Cum adipisci occaecati quidem autem. Sapiente eveniet ullam quo fugit praesentium fuga perferendis. Ea saepe dolorem quis omnis enim. Voluptatum quia eveniet culpa amet dolor. Quia cumque cumque dolorum minus officiis illo animi ab voluptatibus. Et recusandae repudiandae omnis repellendus est. Quaerat nisi ut modi natus quam ut consequatur. Aut sit iusto reprehenderit minus iste fuga quo numquam qui. Aspernatur explicabo enim in dolorum inventore. Quia est ut et at dolorem id sit. Qui ab porro assumenda.",
+  "date": "2019-01-01",
+  "slug": "main"
+}

src/components/__fixtures__/json/posts.json

@@ -0,0 +1,27 @@
+[
+  {
+    "title": "Minus optio fugiat harum.",
+    "date": "2020-01-01",
+    "slug": "foo"
+  },
+  {
+    "title": "Eveniet fugiat dignissimos ut aliquid consequatur.",
+    "date": "2020-01-02",
+    "slug": "bar"
+  },
+  {
+    "title": "Enim qui similique aliquid ut ut repudiandae aspernatur libero.",
+    "date": "2020-01-03",
+    "slug": "baz"
+  },
+  {
+    "title": "Consequatur dolore assumenda omnis necessitatibus sit.",
+    "date": "2020-01-04",
+    "slug": "spam"
+  },
+  {
+    "title": "Id porro aut cupiditate perspiciatis molestiae omnis accusamus at maiores.",
+    "date": "2020-01-05",
+    "slug": "ham"
+  }
+]

src/components/__fixtures__/json/prev.json

@@ -0,0 +1,4 @@
+{
+  "title": "Iusto maxime est.",
+  "slug": "bar"
+}

src/components/atoms/GitHubIcon/index.stories.tsx

@@ -8,9 +8,9 @@ const story = {
   title: 'atoms/GitHubIcon',
 }
 
-export const icon: StoryProps = () => <GitHubIcon />
+export const component: StoryProps = () => <GitHubIcon />
 
-icon.story = {
+component.story = {
   name: 'default',
 }
 

src/components/atoms/TwitterIcon/index.stories.tsx

@@ -8,9 +8,9 @@ const story = {
   title: 'atoms/TwitterIcon',
 }
 
-export const twitterIcon: StoryProps = () => <TwitterIcon />
+export const component: StoryProps = () => <TwitterIcon />
 
-twitterIcon.story = {
+component.story = {
   name: 'default',
 }
 

src/components/pages/About/index.stories.tsx

@@ -3,6 +3,7 @@ import { lorem } from 'faker'
 
 import About from '.'
 
+import json from '../../__fixtures__/json/about.json'
 import { createLayoutProps } from '../../__fixtures__/createLayout'
 import { StoryProps } from '../../../types'
 
@@ -20,4 +21,14 @@ component.story = {
   name: 'default',
 }
 
+export const regression: StoryProps = () => {
+  const contents = json.content
+  const title = json.title
+  return <About {...createLayoutProps()} contents={contents} title={title} />
+}
+
+regression.story = {
+  name: 'regression',
+}
+
 export default story

src/components/pages/Errors/index.stories.tsx

@@ -15,4 +15,12 @@ component.story = {
   name: 'default',
 }
 
+export const regression: StoryProps = () => (
+  <NotFound {...createLayoutProps()} />
+)
+
+regression.story = {
+  name: 'regression',
+}
+
 export default story

src/components/pages/Home/index.stories.tsx

@@ -4,6 +4,7 @@ import { lorem } from 'faker'
 
 import Home from '.'
 
+import json from '../../__fixtures__/json/home.json'
 import { createLayoutProps } from '../../__fixtures__/createLayout'
 import { StoryProps } from '../../../types'
 
@@ -16,7 +17,6 @@ export const component: StoryProps = () => {
     title: lorem.text(),
     slug: lorem.slug(),
     date: new Date(),
-    contents: lorem.sentences(),
   }))
 
   return (
@@ -35,4 +35,26 @@ component.story = {
   name: 'default',
 }
 
+export const regression: StoryProps = () => {
+  const posts = json.map(({ date, ...props }) => ({
+    ...props,
+    date: new Date(date),
+  }))
+
+  return (
+    <Home
+      {...createLayoutProps()}
+      onPostLinkClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault()
+        action('onPostLinkClick')(e.target)
+      }}
+      posts={posts}
+    />
+  )
+}
+
+regression.story = {
+  name: 'regression',
+}
+
 export default story

src/components/pages/Home/index.tsx

@@ -4,10 +4,10 @@ import CalendarTodayIcon from '@material-ui/icons/CalendarToday'
 import dayjs from 'dayjs'
 
 import Layout, { Props as LayoutProps } from '../../templates/Layout'
-import { PostProps } from '../../../types'
+import { PostTitleProps } from '../../../types'
 
 type ViewProps = {
-  posts: PostProps[]
+  posts: PostTitleProps[]
 }
 
 type ActionProps = {