diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml
index 6416da7..98bee1c 100644
--- a/.github/workflows/development.yml
+++ b/.github/workflows/development.yml
@@ -41,48 +41,34 @@ jobs:
env:
CI: true
- name: code coverage
+ if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
path-to-lcov: ./coverage/lcov.info
env:
CI: true
- - name: publish code coverage to code climate
- if: matrix.os == 'ubuntu-latest'
- uses: paambaati/codeclimate-action@v2.3.0
- env:
- CI: true
- CC_TEST_REPORTER_ID: ${{ secrets.CODE_CLIMATE }}
- with:
- coverageCommand: npm run test
- debug: true
- - name: npm run it
- if: matrix.os == 'ubuntu-latest'
+ - name: npm run e2e
+ if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
run: |
sudo apt-get update
sudo apt-get install xvfb
- xvfb-run --auto-servernum -- bash -c "npm run it"
+ xvfb-run --auto-servernum -- bash -c "npm run e2e"
env:
GITHUB_BRANCH: ${{ github.ref }}
GITHUB_COMMIT: ${{ github.sha }}
PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
- - name: npm run it
- if: matrix.os == 'macos-latest'
+ - name: npm run e2e
+ if: matrix.os == 'macos-latest' && matrix.node-version == '14.x'
run: |
- npm run it
+ npm run e2e
env:
GITHUB_BRANCH: ${{ github.ref }}
GITHUB_COMMIT: ${{ github.sha }}
PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
- name: archive e2e screenshots
uses: actions/upload-artifact@v1
- if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
- with:
- name: Screenshots
- path: it/screenshots
- - name: archive e2e diff
- uses: actions/upload-artifact@v1
- if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
+ if: ( matrix.os == 'ubuntu-latest' || matrix.os == 'macos-latest' ) && matrix.node-version == '14.x'
with:
- name: Screenshots Diff
- path: it/__image_snapshots__
+ name: Screenshots Development ${{ matrix.os }} ${{ matrix.node-version }}
+ path: e2e/screenshots
diff --git a/.github/workflows/feature.yml b/.github/workflows/feature.yml
index 1b0e755..34b2a25 100644
--- a/.github/workflows/feature.yml
+++ b/.github/workflows/feature.yml
@@ -40,19 +40,12 @@ jobs:
npm test
env:
CI: true
- - name: code coverage
- uses: coverallsapp/github-action@master
- with:
- github-token: ${{ secrets.GITHUB_TOKEN }}
- path-to-lcov: ./coverage/lcov.info
- env:
- CI: true
- - name: npm run it
- if: matrix.os == 'ubuntu-latest'
+ - name: npm run e2e
+ if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
run: |
sudo apt-get update
sudo apt-get install xvfb
- xvfb-run --auto-servernum -- bash -c "npm run it"
+ xvfb-run --auto-servernum -- bash -c "npm run e2e"
env:
GITHUB_BRANCH: ${{ github.ref }}
GITHUB_COMMIT: ${{ github.sha }}
@@ -61,11 +54,5 @@ jobs:
uses: actions/upload-artifact@v1
if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
with:
- name: Screenshots
- path: it/screenshots
- - name: archive e2e diff
- uses: actions/upload-artifact@v1
- if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
- with:
- name: Screenshots Diff
- path: it/__image_snapshots__
+ name: Screenshots Feature ${{ matrix.os }} ${{ matrix.node-version }}
+ path: e2e/screenshots
diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml
index b5bee4c..b5850a0 100644
--- a/.github/workflows/master.yml
+++ b/.github/workflows/master.yml
@@ -42,6 +42,7 @@ jobs:
env:
CI: true
- name: code coverage
+ if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -49,7 +50,7 @@ jobs:
env:
CI: true
- name: publish code coverage to code climate
- if: matrix.os == 'ubuntu-latest'
+ if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
uses: paambaati/codeclimate-action@v2.3.0
env:
CI: true
@@ -57,37 +58,32 @@ jobs:
with:
coverageCommand: npm run test
debug: true
- - name: npm run it
- if: matrix.os == 'ubuntu-latest'
+ - name: npm run e2e
+ if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
run: |
sudo apt-get update
sudo apt-get install xvfb
- xvfb-run --auto-servernum -- bash -c "npm run it"
+ xvfb-run --auto-servernum -- bash -c "npm run e2e"
env:
GITHUB_BRANCH: ${{ github.ref }}
GITHUB_COMMIT: ${{ github.sha }}
PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
- - name: npm run it
- if: matrix.os == 'macos-latest'
+ - name: npm run e2e
+ if: matrix.os == 'macos-latest' && matrix.node-version == '14.x'
run: |
- npm run it
+ npm run e2e
env:
GITHUB_BRANCH: ${{ github.ref }}
GITHUB_COMMIT: ${{ github.sha }}
PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
- name: archive e2e screenshots
uses: actions/upload-artifact@v1
- if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
- with:
- name: Screenshots
- path: it/screenshots
- - name: archive e2e diff
- uses: actions/upload-artifact@v1
- if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
+ if: ( matrix.os == 'ubuntu-latest' || matrix.os == 'macos-latest' ) && matrix.node-version == '14.x'
with:
- name: Screenshots Diff
- path: it/__image_snapshots__
+ name: Screenshots Master ${{ matrix.os }} ${{ matrix.node-version }}
+ path: e2e/screenshots
- name: create release
+ if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
id: createrelease
uses: gregoranders/nodejs-create-release@v0.0.6
env:
@@ -95,27 +91,7 @@ jobs:
PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
with:
tag: v${{ steps.projectinfo.outputs.version }}
- name: ${{ steps.projectinfo.outputs.name }} - ${{ steps.projectinfo.outputs.version }}
+ name: ${{ steps.projectinfo.outputs.version }} Release
body: ${{ steps.projectinfo.outputs.name }} - ${{ steps.projectinfo.outputs.version }} Release
target: ${{ github.ref }}
draft: false
- - name: update storybook docs
- if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
- run: |
- cd docs/public
- git config --global user.email "${{ secrets.EMAIL }}"
- git config --global user.name "Gregor Anders"
- git status
- git checkout master
- cd ../..
- npm run build-storybook
- cd docs/public
- git status
- git add -f .
- git commit -m "Updated storybook" .
- git push
- env:
- NODE_ENV: production
- GITHUB_BRANCH: ${{ github.ref }}
- GITHUB_COMMIT: ${{ github.sha }}
- PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 577b40c..aa0644a 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -3,7 +3,7 @@ name: Release CI
on:
release:
types:
- - edited
+ - created
jobs:
build:
@@ -11,8 +11,8 @@ jobs:
strategy:
matrix:
- os: [ubuntu-latest, macos-latest, windows-latest]
- node-version: [10.x, 12.x, 13.x, 14.x]
+ os: [ubuntu-latest]
+ node-version: [14.x]
steps:
- uses: actions/checkout@v2
@@ -40,71 +40,36 @@ jobs:
npm test
env:
CI: true
- - name: code coverage
- uses: coverallsapp/github-action@master
- with:
- github-token: ${{ secrets.GITHUB_TOKEN }}
- path-to-lcov: ./coverage/lcov.info
- env:
- CI: true
- - name: publish code coverage to code climate
- if: matrix.os == 'ubuntu-latest'
- uses: paambaati/codeclimate-action@v2.3.0
- env:
- CI: true
- CC_TEST_REPORTER_ID: ${{ secrets.CODE_CLIMATE }}
- with:
- coverageCommand: npm run test
- debug: true
- - name: npm run it
- if: matrix.os == 'ubuntu-latest'
+ - name: npm run e2e
run: |
sudo apt-get update
sudo apt-get install xvfb
- xvfb-run --auto-servernum -- bash -c "npm run it"
- env:
- GITHUB_BRANCH: ${{ github.ref }}
- GITHUB_COMMIT: ${{ github.sha }}
- PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
- - name: npm run it
- if: matrix.os == 'macos-latest'
- run: |
- npm run it
+ xvfb-run --auto-servernum -- bash -c "npm run e2e"
env:
GITHUB_BRANCH: ${{ github.ref }}
GITHUB_COMMIT: ${{ github.sha }}
PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
- name: archive e2e screenshots
uses: actions/upload-artifact@v1
- if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
- with:
- name: Screenshots
- path: it/screenshots
- - name: archive e2e diff
- uses: actions/upload-artifact@v1
- if: matrix.os == 'ubuntu-latest' && matrix.node-version == '14.x'
with:
- name: Screenshots Diff
- path: it/__image_snapshots__
- - name: create release
- id: createrelease
- uses: gregoranders/nodejs-create-release@v0.0.6
+ name: Screenshots Release ${{ matrix.os }} ${{ matrix.node-version }}
+ path: e2e/screenshots
+ - name: update storybook docs
+ run: |
+ cd docs/public
+ git config --global user.email "${{ secrets.EMAIL }}"
+ git config --global user.name "Gregor Anders"
+ git status
+ git checkout master
+ cd ../..
+ npm run build-storybook
+ cd docs/public
+ git status
+ git add -f .
+ git commit -m "${{ steps.projectinfo.outputs.name }} - v${{ steps.projectinfo.outputs.version }}" .
+ git push
env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ NODE_ENV: production
+ GITHUB_BRANCH: ${{ github.ref }}
+ GITHUB_COMMIT: ${{ github.sha }}
PACKAGE_JSON: ${{ steps.projectinfo.outputs.context }}
- with:
- tag: v${{ steps.projectinfo.outputs.version }}
- name: ${{ steps.projectinfo.outputs.name }} - ${{ steps.projectinfo.outputs.version }}
- body: ${{ steps.projectinfo.outputs.name }} - ${{ steps.projectinfo.outputs.version }} Release
- target: ${{ github.ref }}
- draft: false
- # - name: upload asset
- # if: matrix.os == 'ubuntu-latest' && matrix.node-version == '12.x'
- # id: uploadasset
- # uses: gregoranders/nodejs-upload-asset@v0.0.6
- # env:
- # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- # with:
- # id: ${{ steps.createrelease.outputs.id }}
- # path: dist/index.js
- # name: index.js
diff --git a/.gitignore b/.gitignore
index 149a200..57bd2c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,7 @@
dist/
coverage/
-coverage-it/
-public-it/
+coverage-e2e/
node_modules/
-storybook-static/
package-lock.json
junit.xml
diff --git a/.gitmodules b/.gitmodules
index c13cc40..d2465a3 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,6 +1,6 @@
[submodule "docs/public"]
path = docs/public
url = git@github.com:gregoranders/ts-react-playground-docs.git
-[submodule "it/__image_snapshots__"]
- path = it/__image_snapshots__
+[submodule "e2e/screenshots"]
+ path = e2e/screenshots
url = git@github.com:gregoranders/ts-react-playground-test-data.git
diff --git a/README.md b/README.md
index 11e772f..5a94f55 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,15 @@
-# ts-react-playground - TypeScript React Playground
+# ts-react-playground - [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground
-## [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground
+#### [Storybook](https://gregoranders.github.io/ts-react-playground-docs)
+
+[![Dependency Status][daviddm-image]][daviddm-url]
+[![License][license-image]][license-url]
+[![Issues][issues-image]][issues-url]
+[![Code maintainability][code-maintainability-image]][code-maintainability-url] [![Code issues][code-issues-image]][code-issues-url] [![Code Technical Debt][code-tech-debt-image]][code-tech-debt-url]
+
+[][code-metric-url] [][code-metric-url] [][code-metric-url] [][code-metric-url]
+
+## Features
* TypeScript
* React + React-Router + Recoil
@@ -16,23 +25,12 @@
* Code Quality via Code Climate
* Docker Container (nginx with ssl)
-[Storybook](https://gregoranders.github.io/ts-react-playground-docs)
-
-[![Dependency Status][daviddm-image]][daviddm-url]
-[![License][license-image]][license-url]
-[![Issues][issues-image]][issues-url]
+| | | |
+|-|-|-|
+|[![Release Build][release-build-image]][release-url]|||
+|[![Master Build][master-build-image]][master-url]|[![Master Coverage][master-coveralls-image]][master-coveralls-url]|[![Master Version][master-version-image]][master-version-url]|
+|[![Development Build][development-build-image]][development-url]|[![Test Coverage][development-coveralls-image]][development-coveralls-url]|[![Development Version][development-version-image]][development-version-url]|
-[![Release Build][release-build-image]][release-url]
-
-[![Master Build][master-build-image]][master-url] [![Master Coverage][master-coveralls-image]][master-coveralls-url] [![Master Version][master-version-image]][master-version-url]
-
-[![Development Build][development-build-image]][development-url] [![Test Coverage][development-coveralls-image]][development-coveralls-url] [![Development Version][development-version-image]][development-version-url]
-
-[![Master Build][master-circleci-image]][master-circleci-url] [![Development Build][development-circleci-image]][development-circleci-url]
-
-[![Code maintainability][code-maintainability-image]][code-maintainability-url] [![Code issues][code-issues-image]][code-issues-url] [![Code Technical Debt][code-tech-debt-image]][code-tech-debt-url]
-
-[][code-metric-url] [][code-metric-url] [][code-metric-url] [][code-metric-url]
### Clone repository
@@ -48,8 +46,13 @@ npm install
### Build
+#### Webpack
+```
+npm run build:webpack
+```
+#### ESM
```
-npm run build
+npm run build:esm
```
### Testing
@@ -63,14 +66,14 @@ npm test
#### E2E Test using [Jest](https://jestjs.io/) and [Puppeteer](https://pptr.dev/)
```
-npm run it
+npm run e2e
```
### Development
#### Webpack
```
-npm dev
+npm start
```
#### ESM
```
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000..795a552
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,11 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported |
+| ------- | ------------------ |
+| 0.0.1 | :white_check_mark: |
+
+## Reporting a Vulnerability
+
+[Create Issue](https://github.com/gregoranders/ts-react-playground/issues/new?labels=bug&template=bug_report.md&title=Security+Issue)
diff --git a/docs/Intro.stories.mdx b/docs/Intro.stories.mdx
index 9b3a597..cead18e 100644
--- a/docs/Intro.stories.mdx
+++ b/docs/Intro.stories.mdx
@@ -2,9 +2,16 @@ import { Meta } from '@storybook/addon-docs/blocks';
-# ts-react-playground - TypeScript React Playground v0.0.1
+# ts-react-playground - [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground v0.0.2
-## [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground
+[![Dependency Status][daviddm-image]][daviddm-url]
+[![License][license-image]][license-url]
+[![Issues][issues-image]][issues-url]
+[![Code maintainability][code-maintainability-image]][code-maintainability-url] [![Code issues][code-issues-image]][code-issues-url] [![Code Technical Debt][code-tech-debt-image]][code-tech-debt-url]
+
+[][code-metric-url] [][code-metric-url] [][code-metric-url] [][code-metric-url]
+
+## Features
* TypeScript
* React + React-Router + Recoil
@@ -20,23 +27,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
* Code Quality via Code Climate
* Docker Container (nginx with ssl)
-[Storybook](https://gregoranders.github.io/ts-react-playground-docs)
-
-[![Dependency Status][daviddm-image]][daviddm-url]
-[![License][license-image]][license-url]
-[![Issues][issues-image]][issues-url]
-
-[![Release Build][release-build-image]][release-url]
-
-[![Master Build][master-build-image]][master-url] [![Master Coverage][master-coveralls-image]][master-coveralls-url] [![Master Version][master-version-image]][master-version-url]
-
-[![Development Build][development-build-image]][development-url] [![Test Coverage][development-coveralls-image]][development-coveralls-url] [![Development Version][development-version-image]][development-version-url]
+| | | |
+|-|-|-|
+|[![Release Build][release-build-image]][release-url]|||
+|[![Master Build][master-build-image]][master-url]|[![Master Coverage][master-coveralls-image]][master-coveralls-url]|[![Master Version][master-version-image]][master-version-url]|
+|[![Development Build][development-build-image]][development-url]|[![Test Coverage][development-coveralls-image]][development-coveralls-url]|[![Development Version][development-version-image]][development-version-url]|
-[![Master Build][master-circleci-image]][master-circleci-url] [![Development Build][development-circleci-image]][development-circleci-url]
-
-[![Code maintainability][code-maintainability-image]][code-maintainability-url] [![Code issues][code-issues-image]][code-issues-url] [![Code Technical Debt][code-tech-debt-image]][code-tech-debt-url]
-
-[][code-metric-url] [][code-metric-url] [][code-metric-url] [][code-metric-url]
### Clone repository
@@ -52,8 +48,13 @@ npm install
### Build
+#### Webpack
+```
+npm run build:webpack
+```
+#### ESM
```
-npm run build
+npm run build:esm
```
### Testing
@@ -67,14 +68,14 @@ npm test
#### E2E Test using [Jest](https://jestjs.io/) and [Puppeteer](https://pptr.dev/)
```
-npm run it
+npm run e2e
```
### Development
#### Webpack
```
-npm dev
+npm start
```
#### ESM
```
diff --git a/docs/public b/docs/public
index 4181814..8a5c45c 160000
--- a/docs/public
+++ b/docs/public
@@ -1 +1 @@
-Subproject commit 4181814f3f92641c080cfcfb1eacce925abc04d1
+Subproject commit 8a5c45c23bc687ed5a39071e6c9509d14335b577
diff --git a/it/index.spec.ts b/e2e/index.spec.ts
similarity index 53%
rename from it/index.spec.ts
rename to e2e/index.spec.ts
index ac7b1e8..065c1b8 100644
--- a/it/index.spec.ts
+++ b/e2e/index.spec.ts
@@ -1,27 +1,12 @@
import { Browser, devices } from 'puppeteer';
-import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
-import 'expect-puppeteer';
-import fs from 'fs';
+import { mkdir, timeout, url, customSnapshotsDir, customDiffDir } from './setup';
declare const browser: Browser;
-const customConfig = { threshold: 0.5 };
-const toMatchImageSnapshot = configureToMatchImageSnapshot({
- customDiffConfig: customConfig,
-});
-
-expect.extend({ toMatchImageSnapshot });
-
-const timeout = 10000;
-const url = 'http://127.0.0.1:7683/ts-react-playground/';
-
-const mkdir = (path: string) => {
- if (!fs.existsSync(path)) fs.mkdirSync(path);
-};
-
describe('Index', () => {
beforeAll(async () => {
- mkdir('./it/screenshots');
+ mkdir(customSnapshotsDir);
+ mkdir(customDiffDir);
});
Object.keys(devices).forEach((key) => {
@@ -44,8 +29,7 @@ describe('Index', () => {
await page.goto(url);
await page.waitForSelector('.w3-margin');
- mkdir('./it/screenshots/index/');
- const image = await page.screenshot({ path: `./it/screenshots/index/${device.name}.png`, type: 'png' });
+ const image = await page.screenshot();
expect(image).toMatchImageSnapshot();
page.close();
diff --git a/it/journey.spec.ts b/e2e/journey.spec.ts
similarity index 94%
rename from it/journey.spec.ts
rename to e2e/journey.spec.ts
index e5d8b1d..efa5f8c 100644
--- a/it/journey.spec.ts
+++ b/e2e/journey.spec.ts
@@ -1,12 +1,10 @@
import { Browser, Page } from 'puppeteer';
-import 'expect-puppeteer';
+import { timeout, url } from './setup';
declare const browser: Browser;
const width = 1920;
const height = 1080;
-const timeout = 10000;
-const url = 'http://127.0.0.1:7683/ts-react-playground/';
let page: Page;
diff --git a/it/__image_snapshots__ b/e2e/screenshots
similarity index 100%
rename from it/__image_snapshots__
rename to e2e/screenshots
diff --git a/e2e/setup.ts b/e2e/setup.ts
new file mode 100644
index 0000000..71784ed
--- /dev/null
+++ b/e2e/setup.ts
@@ -0,0 +1,26 @@
+import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
+import 'expect-puppeteer';
+import fs from 'fs';
+import path from 'path';
+import { version } from '../package.json';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const jestPuppeteerConfig = require('../jest-puppeteer.config.js');
+
+export const timeout = 10000;
+export const url = `http://127.0.0.1:${jestPuppeteerConfig.server.port}`;
+
+export const customSnapshotsDir = path.join('e2e', 'screenshots', version);
+export const customDiffDir = path.join(customSnapshotsDir, 'diff');
+
+const customConfig = { threshold: 0.5 };
+const toMatchImageSnapshot = configureToMatchImageSnapshot({
+ customDiffConfig: customConfig,
+ customSnapshotsDir,
+ customDiffDir,
+});
+
+expect.extend({ toMatchImageSnapshot });
+
+export const mkdir = (path: string): void => {
+ if (!fs.existsSync(path)) fs.mkdirSync(path);
+};
diff --git a/e2e/webpack.config.js b/e2e/webpack.config.js
new file mode 100644
index 0000000..94e5b12
--- /dev/null
+++ b/e2e/webpack.config.js
@@ -0,0 +1,140 @@
+'use strict';
+const path = require('path');
+const CaseSensitivePlugin = require('case-sensitive-paths-webpack-plugin');
+const CleanPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
+const plugins = [
+ new CaseSensitivePlugin(),
+ new CleanPlugin(),
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ title: 'TypeScript React Redux Webpack Demo',
+ template: path.join('./public', 'webpack.html'),
+ }),
+ new MiniCssExtractPlugin({
+ filename: 'css/[name].css',
+ chunkFilename: 'css/[name].css',
+ }),
+ new webpack.ProgressPlugin(),
+];
+const cssLoaders = [
+ {
+ loader: 'css-loader',
+ },
+ {
+ loader: 'sass-loader',
+ options: {
+ sassOptions: { includePaths: ['node_modules'] },
+ },
+ },
+];
+const sassLoaders = cssLoaders.concat([
+ {
+ loader: 'sass-loader',
+ options: {
+ sassOptions: { includePaths: ['node_modules'] },
+ },
+ },
+]);
+
+module.exports = {
+ mode: 'production',
+ entry: {
+ index: path.resolve(path.join('src', 'script', 'index.tsx')),
+ styles: path.resolve(path.join('src', 'style', 'styles.scss')),
+ },
+ output: {
+ path: path.resolve('./dist'),
+ filename: 'js/[name].bundle.js',
+ },
+ optimization: {
+ minimize: false,
+ runtimeChunk: {
+ name: 'runtime',
+ },
+ splitChunks: {
+ cacheGroups: {
+ commons: {
+ chunks: 'initial',
+ minChunks: 2,
+ maxInitialRequests: 5,
+ minSize: 0,
+ },
+ vendor: {
+ test: /node_modules/,
+ chunks: 'initial',
+ name: 'vendor',
+ priority: 10,
+ enforce: true,
+ },
+ },
+ },
+ },
+ performance: {
+ maxEntrypointSize: 2000000,
+ maxAssetSize: 2000000,
+ },
+ resolve: {
+ extensions: ['.ts', '.tsx', '.scss', '.js'],
+ alias: {
+ '@models': path.resolve('src/script/models'),
+ '@atoms': path.resolve('src/script/components/atoms'),
+ '@organisms': path.resolve('src/script/components/organisms'),
+ '@molecules': path.resolve('src/script/components/molecules'),
+ '@pages': path.resolve('src/script/components/pages'),
+ '@components': path.resolve('src/script/components'),
+ '@app': path.resolve('src/script'),
+ './fonts': 'node_modules/@fortawesome/fontawesome-free/webfonts',
+ },
+ },
+ module: {
+ rules: [
+ {
+ test: /\.tsx?$/,
+ loader: 'ts-loader',
+ },
+ {
+ test: /\.s[a|c]ss$/,
+ use: [MiniCssExtractPlugin.loader].concat(sassLoaders),
+ },
+ {
+ test: /\.css$/,
+ use: [MiniCssExtractPlugin.loader].concat(cssLoaders),
+ },
+ {
+ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+ loader: 'url-loader',
+ options: {
+ limit: 10000,
+ name: 'images/[name].[ext]',
+ },
+ },
+ {
+ test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+ loader: 'url-loader',
+ options: {
+ limit: 10000,
+ name: 'media/[name].[ext]',
+ },
+ },
+ {
+ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+ loader: 'url-loader',
+ options: {
+ limit: 10000,
+ name: 'fonts/[name].[ext]',
+ },
+ },
+ ],
+ },
+ devServer: {
+ historyApiFallback: true,
+ host: '0.0.0.0',
+ port: 7683,
+ hot: false,
+ inline: false,
+ },
+ plugins: plugins,
+};
diff --git a/it/screenshots/.gitignore b/it/screenshots/.gitignore
deleted file mode 100644
index 593bcf0..0000000
--- a/it/screenshots/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-!.gitignore
-*
diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
index 8788dec..5462eec 100644
--- a/jest-puppeteer.config.js
+++ b/jest-puppeteer.config.js
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const webpackConfig = require('./e2e/webpack.config.js');
module.exports = {
browser: 'chromium',
browserContext: 'default',
@@ -6,8 +8,8 @@ module.exports = {
headless: process.env.HEADLESS !== 'false',
},
server: {
- command: `npm run serve`,
- port: 7683,
+ command: `npm run e2e:serve`,
+ port: webpackConfig.devServer.port,
launchTimeout: 10000,
debug: false,
},
diff --git a/minify.ts b/minify.ts
index e7f0d3d..3010d84 100644
--- a/minify.ts
+++ b/minify.ts
@@ -1,10 +1,9 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import { join } from 'path';
-import { readdirSync, statSync, writeFileSync } from 'fs';
+import { readdirSync, statSync, writeFileSync, Stats } from 'fs';
const minify = require('minify');
const basePath = './public';
-const promises = [] as Promise[];
const options = {
js: {
ecma: 2016,
@@ -29,45 +28,41 @@ const options = {
},
},
};
-let sizeBefore = 0;
-let sizeAfter = 0;
+
+const zerofill = (text: string) => {
+ const idx = text.indexOf('.');
+ if (idx == 1) {
+ return `0${text}`;
+ }
+ return text;
+};
+
+const compressFile = async (path: string, stat: Stats) => {
+ const data = await minify(path, options);
+ writeFileSync(path, data);
+ const nstat = statSync(path);
+ return { before: stat.size, after: nstat.size };
+};
const minifyDir = (parent: string) => {
const files = readdirSync(parent);
- files.forEach((file) => {
+ files.forEach(async (file) => {
const full = join(parent, file);
const stat = statSync(full);
if (stat.isDirectory()) {
minifyDir(full);
} else {
- if (full.endsWith('.js') || full.endsWith('.css')) {
- sizeBefore += stat.size;
- minify(full, options)
- .then((result: string) => {
- writeFileSync(full, result);
- const nstat = statSync(full);
- sizeAfter += nstat.size;
- console.log(
- `Compressed ${join(parent, file)} ${stat.size} ${nstat.size} ${stat.size - nstat.size} [${(
- (nstat.size / stat.size) *
- 100.0
- ).toFixed(2)}%]`,
- );
- })
- .catch(console.error);
+ if (file.endsWith('.js') || file.endsWith('.css')) {
+ const result = await compressFile(full, stat);
+ const ratio = (100.0 - (result.after / result.before) * 100.0).toFixed(2);
+ console.log(
+ `Compressed [${zerofill(ratio)}%] ${full} ${stat.size} ${result.after} ${stat.size - result.after}`,
+ );
}
}
});
};
minifyDir(basePath);
-
-Promise.all(promises)
- .then((results) => {
- results.forEach((result) => console.log(result));
- })
- .finally(() => {
- console.log(sizeBefore, sizeAfter, sizeBefore - sizeAfter);
- });
diff --git a/package.json b/package.json
index bbb6ed4..6eb799a 100644
--- a/package.json
+++ b/package.json
@@ -1,22 +1,22 @@
{
"name": "ts-react-playground",
- "version": "0.0.1",
+ "version": "0.0.2",
"description": "TypeScript React Playground",
- "main": "dist/index.js",
"scripts": {
- "dev": "webpack-dev-server --config webpack.config.js",
- "clear": "rimraf junit.xml ./it/screenshots/index ./node_modules ./dist ./coverage ./coverage-it ./package-lock.json ./public/vendor ./public/script ./public/styles.css .jest-test-results.json",
- "clear:snapshots": "rimraf ./**/__snapshots__",
- "start": "livereloadx -a ./public",
- "build": "npm run vendor && npm run script && npm run scss",
- "postbuild": "ts-node minify.ts",
+ "start": "webpack-dev-server --open --progress --config webpack.config.js",
+ "clear": "npm run prebuild && rimraf ./node_modules ./dist ./coverage ./coverage-e2e ./package-lock.json .jest-test-results.json junit.xml",
+ "prebuild": "npm run prebuild:webpack",
+ "build": "npm run build:webpack",
+ "prebuild:esc": "npm run prevendor && npm run prescript && npm run prescss",
+ "build:esm": "npm run vendor && npm run script && npm run scss",
+ "postbuild:esm": "ts-node minify.ts",
+ "prebuild:webpack": "rimraf ./dist",
+ "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"test": "jest --runInBand --env=enzyme --setupFilesAfterEnv=jest-enzyme --reporters=jest-spec-reporter jest-junit --coverage --coverageDirectory ../coverage --rootDir ./src",
"test:update": "npm run test -- -u",
- "preit": "rimraf public-it && node prepareit.js",
- "it": "jest --runInBand --preset=jest-puppeteer --coverage --coverageDirectory ../coverage-it --rootDir ./it",
- "postit": "rimraf public-it",
- "preesmoduleshims": "rimraf ./public/es-module-shims.js",
- "esmoduleshims": "tsc --project ./src/vendor/es-module-shims",
+ "e2e:serve": "cross-env NODE_ENV=production webpack-dev-server --silent --quiet --liveReload false --inline false --config ./e2e/webpack.config.js",
+ "e2e": "jest --testTimeout=60000 --runInBand --preset=jest-puppeteer --coverage --coverageDirectory ../coverage-e2e --rootDir ./e2e",
+ "livereload": "livereloadx -a ./public",
"prescript": "rimraf ./public/script",
"script": "tsc --project ./src/script --outDir ./public/script",
"prewatch-script": "npm run script",
@@ -25,20 +25,20 @@
"scss": "node-sass --output-style compressed --output ./public ./src/style/styles.scss",
"prewatch-scss": "npm run scss",
"watch-scss": "node-sass --output-style compressed --watch --output ./public ./src/style/styles.scss",
- "prevendor": "rimraf ./public/vendor",
- "vendor": "rimraf ./public/vendor && npm run vendor:base && npm run vendor:faker && npm run vendor:fontawesome && npm run vendor:react && npm run vendor:recharts",
+ "prevendor": "rimraf ./public/vendor ./public/es-module-shims.js",
+ "vendor": "rimraf ./public/vendor && npm run vendor:base && npm run vendor:faker && npm run vendor:fontawesome && npm run vendor:react && npm run vendor:recharts && npm run vendor:esmoduleshims",
"vendor:base": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-base.config.js",
"vendor:faker": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-faker.config.js",
"vendor:fontawesome": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-fontawesome.config.js",
"vendor:react": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-react.config.js",
"vendor:recharts": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-recharts.config.js",
- "postvendor": "npm run esmoduleshims",
+ "vendor:esmoduleshims": "tsc --project ./src/vendor/es-module-shims",
+ "predocker:build": "npm run build",
"docker:build": "cross-env NODE_ENV=production docker-compose build --force-rm --no-cache --parallel --pull",
"docker:up": "docker-compose up -d",
"docker:down": "docker-compose down",
- "serve": "http-serve ./public-it --cors -p 7683",
"prestorybook": "jest --runInBand --json --outputFile=.jest-test-results.json --env=enzyme --setupFilesAfterEnv=jest-enzyme --reporters=jest-spec-reporter jest-junit --coverage --coverageDirectory ../coverage --rootDir ./src",
- "storybook": "cross-env NODE_ENV=production start-storybook -p 6006",
+ "storybook": "cross-env NODE_ENV=production start-storybook",
"prebuild-storybook": "jest --runInBand --json --outputFile=.jest-test-results.json --env=enzyme --setupFilesAfterEnv=jest-enzyme --reporters=jest-spec-reporter jest-junit --coverage --coverageDirectory ../coverage --rootDir ./src",
"build-storybook": "rimraf ./docs/public/docs/* && cross-env NODE_ENV=production build-storybook -c .storybook --quiet -o ./docs/public/docs"
},
@@ -53,6 +53,7 @@
"jest",
"livereload",
"prop-types",
+ "puppeteer",
"react",
"react-dom",
"react-router-dom",
@@ -63,12 +64,21 @@
],
"husky": {
"hooks": {
- "pre-commit": "tsc --noEmit --project ./src/script && eslint './src/script/**/*.{js,ts,tsx}' --quiet && npm run test"
+ "pre-commit": "lint-staged && npm run test",
+ "pre-push": "npm run e2e"
}
},
+ "lint-staged": {
+ "*.{ts,tsx}": [
+ "eslint --fix --quiet",
+ "git add"
+ ]
+ },
"jest": {
"collectCoverage": true,
"collectCoverageFrom": [
+ "!setup.ts",
+ "!webpack.config.js",
"!**/tsconfig.json",
"!**/tsconfig.*.json",
"!**/*.tsx.snap",
@@ -87,7 +97,6 @@
],
"coverageReporters": [
"lcovonly",
- "html",
"text",
"text-summary"
],
@@ -112,7 +121,6 @@
],
"moduleNameMapper": {
"^@models/(.*)$": "../src/script/models/$1",
- "^@states/(.*)$": "../src/script/states/$1",
"^@atoms/(.*)$": "../src/script/components/atoms/$1",
"^@organisms/(.*)$": "../src/script/components/organisms/$1",
"^@molecules/(.*)$": "../src/script/components/molecules/$1",
@@ -241,7 +249,6 @@
"faker": "4.1.0",
"file-loader": "6.0.0",
"html-webpack-plugin": "4.3.0",
- "http-serve": "1.0.1",
"husky": "4.2.5",
"identity-obj-proxy": "3.0.0",
"jest": "26.0.1",
@@ -252,6 +259,7 @@
"jest-junit": "10.0.0",
"jest-puppeteer": "4.4.0",
"jest-spec-reporter": "1.0.13",
+ "lint-staged": "10.2.9",
"livereloadx": "0.3.10",
"mini-css-extract-plugin": "0.9.0",
"minify": "5.1.1",
diff --git a/prepareit.js b/prepareit.js
deleted file mode 100644
index becdbc3..0000000
--- a/prepareit.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const fs = require('fs');
-const copydir = require('copy-dir');
-
-fs.mkdirSync('./public-it');
-fs.mkdirSync('./public-it/ts-react-playground');
-
-copydir.sync('public', 'public-it/ts-react-playground');
diff --git a/public/index.html b/public/index.html
index 4e3e829..6f5ceb5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -55,8 +55,6 @@
"@models/user": "/ts-react-playground/script/models/user.js",
- "@states/user": "/ts-react-playground/script/states/user.js",
-
"@components/layout": "/ts-react-playground/script/components/layout/index.js",
"@atoms/button": "/ts-react-playground/script/components/atoms/button/index.js",
diff --git a/src/script/application.spec.tsx b/src/script/application.spec.tsx
index 1a7cd62..c40399e 100644
--- a/src/script/application.spec.tsx
+++ b/src/script/application.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { mount } from 'enzyme';
-import * as TestSubject from './application';
+import * as TestSubject from '@app/application';
describe(`${TestSubject.Application.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/atoms/button/button.stories.mdx b/src/script/components/atoms/button/button.stories.mdx
index 5ddd1cd..e520657 100644
--- a/src/script/components/atoms/button/button.stories.mdx
+++ b/src/script/components/atoms/button/button.stories.mdx
@@ -1,5 +1,6 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
import { Button } from './index';
@@ -22,7 +23,7 @@ import { Button } from './index';
-
+
diff --git a/src/script/components/atoms/button/index.spec.tsx b/src/script/components/atoms/button/index.spec.tsx
index 381aa20..dfc664b 100644
--- a/src/script/components/atoms/button/index.spec.tsx
+++ b/src/script/components/atoms/button/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@atoms/button';
describe(`${TestSubject.Button.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/atoms/navLink/index.spec.tsx b/src/script/components/atoms/navLink/index.spec.tsx
index 63585a9..d39ed98 100644
--- a/src/script/components/atoms/navLink/index.spec.tsx
+++ b/src/script/components/atoms/navLink/index.spec.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@atoms/navLink';
describe(`${TestSubject.NavLink.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/atoms/navLink/navLink.stories.mdx b/src/script/components/atoms/navLink/navLink.stories.mdx
index ea39309..8e449e8 100644
--- a/src/script/components/atoms/navLink/navLink.stories.mdx
+++ b/src/script/components/atoms/navLink/navLink.stories.mdx
@@ -1,4 +1,5 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { text } from '@storybook/addon-knobs';
import { NavLink } from './index';
@@ -24,6 +25,13 @@ import { NavLink } from './index';
+
+
+ {text('Content', 'Link')}
+
+
+
+
## Props
diff --git a/src/script/components/atoms/user/index.spec.tsx b/src/script/components/atoms/user/index.spec.tsx
index 4eea9a3..b137594 100644
--- a/src/script/components/atoms/user/index.spec.tsx
+++ b/src/script/components/atoms/user/index.spec.tsx
@@ -4,7 +4,7 @@ import { mount } from 'enzyme';
import { DefaultUser } from '@models/user';
-import * as TestSubject from './index';
+import * as TestSubject from '@atoms/user';
describe(`${TestSubject.UserView.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/layout/index.spec.tsx b/src/script/components/layout/index.spec.tsx
index b8a1cdb..cf75ccf 100644
--- a/src/script/components/layout/index.spec.tsx
+++ b/src/script/components/layout/index.spec.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@components/layout';
describe(`${TestSubject.Layout.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/molecules/users/index.spec.tsx b/src/script/components/molecules/users/index.spec.tsx
index 3525119..9dfe67b 100644
--- a/src/script/components/molecules/users/index.spec.tsx
+++ b/src/script/components/molecules/users/index.spec.tsx
@@ -4,7 +4,7 @@ import { mount } from 'enzyme';
import { DefaultUser } from '@models/user';
-import * as TestSubject from './index';
+import * as TestSubject from '@molecules/users';
describe(`${TestSubject.UsersView.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/organisms/footer/index.spec.tsx b/src/script/components/organisms/footer/index.spec.tsx
index 346f1e6..bcf25a8 100644
--- a/src/script/components/organisms/footer/index.spec.tsx
+++ b/src/script/components/organisms/footer/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@organisms/footer';
describe(`${TestSubject.Footer.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/organisms/header/index.spec.tsx b/src/script/components/organisms/header/index.spec.tsx
index 349255e..2fc3a51 100644
--- a/src/script/components/organisms/header/index.spec.tsx
+++ b/src/script/components/organisms/header/index.spec.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@organisms/header';
describe(`${TestSubject.Header.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/organisms/main/index.spec.tsx b/src/script/components/organisms/main/index.spec.tsx
index 0cac9cc..97a21cf 100644
--- a/src/script/components/organisms/main/index.spec.tsx
+++ b/src/script/components/organisms/main/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@organisms/main';
describe(`${TestSubject.Main.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/organisms/nav/index.spec.tsx b/src/script/components/organisms/nav/index.spec.tsx
index df74002..4200bb4 100644
--- a/src/script/components/organisms/nav/index.spec.tsx
+++ b/src/script/components/organisms/nav/index.spec.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@organisms/nav';
describe(`${TestSubject.Nav.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/organisms/users/index.spec.tsx b/src/script/components/organisms/users/index.spec.tsx
index 54e52a9..55abaf2 100644
--- a/src/script/components/organisms/users/index.spec.tsx
+++ b/src/script/components/organisms/users/index.spec.tsx
@@ -3,7 +3,7 @@ import { RecoilRoot } from 'recoil';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@organisms/users';
describe(`${TestSubject.UsersModelView.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/organisms/users/index.tsx b/src/script/components/organisms/users/index.tsx
index 63654d0..285dabb 100644
--- a/src/script/components/organisms/users/index.tsx
+++ b/src/script/components/organisms/users/index.tsx
@@ -1,13 +1,11 @@
import React, { FunctionComponent, memo } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
-import { generate } from '@models/user';
+import { generate, UsersAtom, UsersLength } from '@models/user';
import Button from '@atoms/button';
import UsersView from '@molecules/users';
-import { UsersAtom, UsersLength } from '@states/user';
-
export const UsersModelView: FunctionComponent = () => {
const [users, setUsers] = useRecoilState(UsersAtom);
const usersLength = useRecoilValue(UsersLength);
diff --git a/src/script/components/pages/about/index.spec.tsx b/src/script/components/pages/about/index.spec.tsx
index e71109a..f792f82 100644
--- a/src/script/components/pages/about/index.spec.tsx
+++ b/src/script/components/pages/about/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@pages/about';
describe(`${TestSubject.AboutPage.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/pages/home/index.spec.tsx b/src/script/components/pages/home/index.spec.tsx
index f4a8cad..49e93d3 100644
--- a/src/script/components/pages/home/index.spec.tsx
+++ b/src/script/components/pages/home/index.spec.tsx
@@ -3,7 +3,7 @@ import { RecoilRoot } from 'recoil';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@pages/home';
describe(`${TestSubject.HomePage.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/components/pages/index/index.spec.tsx b/src/script/components/pages/index/index.spec.tsx
index ed4a878..e57ceb3 100644
--- a/src/script/components/pages/index/index.spec.tsx
+++ b/src/script/components/pages/index/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './index';
+import * as TestSubject from '@pages/index';
describe(`${TestSubject.IndexPage.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/loading.spec.tsx b/src/script/loading.spec.tsx
index 7af5669..3c97c04 100644
--- a/src/script/loading.spec.tsx
+++ b/src/script/loading.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { create } from 'react-test-renderer';
import { mount } from 'enzyme';
-import * as TestSubject from './loading';
+import * as TestSubject from '@app/loading';
describe(`${TestSubject.Loading.displayName}`, () => {
it('exports default', () => {
diff --git a/src/script/models/user.spec.tsx b/src/script/models/user.spec.tsx
index ca5cf58..1aae0c4 100644
--- a/src/script/models/user.spec.tsx
+++ b/src/script/models/user.spec.tsx
@@ -1,4 +1,4 @@
-import * as TestSubject from './user';
+import * as TestSubject from '@models/user';
describe(`models/user`, () => {
it('exports generate', () => {
@@ -17,6 +17,18 @@ describe(`models/user`, () => {
expect(TestSubject.UserPropTypes).toBeDefined();
});
+ it('exports default', () => {
+ expect(TestSubject.default).toStrictEqual(TestSubject.UsersAtom);
+ });
+
+ it('exports Atom', () => {
+ expect(TestSubject.UsersAtom).toBeDefined();
+ });
+
+ it('exports Selector', () => {
+ expect(TestSubject.UsersLength).toBeDefined();
+ });
+
it('generate default number of users', async () => {
const result = TestSubject.generate();
expect(result.length).toBe(100);
diff --git a/src/script/models/user.tsx b/src/script/models/user.tsx
index 0201d59..06cebfb 100644
--- a/src/script/models/user.tsx
+++ b/src/script/models/user.tsx
@@ -1,3 +1,4 @@
+import { atom, selector } from 'recoil';
import { number as IsNumber, shape as IsShape, string as IsString } from 'prop-types';
import faker from 'faker';
@@ -45,18 +46,24 @@ export const generate = (count = 100): User[] => {
};
export const generateAsync = async (count = 100): Promise => {
- const users = [] as User[];
+ return generate(count);
+};
- for (let idx = 0; idx < count; idx++) {
- users.push({
- id: idx,
- firstName: faker.name.firstName(),
- lastName: faker.name.lastName(),
- eMail: faker.internet.email(),
- });
- }
+const USERS_KEY = 'userAtom';
- return users;
-};
+export const UsersAtom = atom({
+ key: USERS_KEY,
+ default: [] as User[],
+});
+
+const USERS_LENGTH_KEY = 'usersLengthSelector';
+
+export const UsersLength = selector({
+ key: USERS_LENGTH_KEY,
+ get: ({ get }) => {
+ const users = get(UsersAtom);
+ return users.length;
+ },
+});
-export default User;
+export default UsersAtom;
diff --git a/src/script/states/user.spec.tsx b/src/script/states/user.spec.tsx
deleted file mode 100644
index 6c03d0e..0000000
--- a/src/script/states/user.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as TestSubject from './user';
-
-describe(`models/user`, () => {
- it('exports default', () => {
- expect(TestSubject.UsersAtom).toBeDefined();
- });
-
- it('exports Atom', () => {
- expect(TestSubject.UsersAtom).toBeDefined();
- });
-
- it('exports Selector', () => {
- expect(TestSubject.UsersLength).toBeDefined();
- });
-});
diff --git a/src/script/states/user.tsx b/src/script/states/user.tsx
deleted file mode 100644
index 3428f24..0000000
--- a/src/script/states/user.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { User } from '@models/user';
-
-import { atom, selector } from 'recoil';
-
-const USERS_KEY = 'userAtom';
-
-export const UsersAtom = atom({
- key: USERS_KEY,
- default: [] as User[],
-});
-
-const USERS_LENGTH_KEY = 'usersLengthSelector';
-
-export const UsersLength = selector({
- key: USERS_LENGTH_KEY,
- get: ({ get }) => {
- const users = get(UsersAtom);
- return users.length;
- },
-});
-
-export default UsersAtom;
diff --git a/src/script/tsconfig.json b/src/script/tsconfig.json
index c6d49c5..65978d2 100644
--- a/src/script/tsconfig.json
+++ b/src/script/tsconfig.json
@@ -33,7 +33,6 @@
"outDir": "../../public/script",
"paths": {
"@models/*": ["./models/*"],
- "@states/*": ["./states/*"],
"@atoms/*": ["./components/atoms/*"],
"@organisms/*": ["./components/organisms/*"],
"@molecules/*": ["./components/molecules/*"],
diff --git a/src/script/tsconfig.spec.json b/src/script/tsconfig.spec.json
index bfcfa27..383b9e7 100644
--- a/src/script/tsconfig.spec.json
+++ b/src/script/tsconfig.spec.json
@@ -33,7 +33,6 @@
"outDir": "../../public/script",
"paths": {
"@models/*": ["./models/*"],
- "@states/*": ["./states/*"],
"@atoms/*": ["./components/atoms/*"],
"@organisms/*": ["./components/organisms/*"],
"@molecules/*": ["./components/molecules/*"],
diff --git a/webpack.config.js b/webpack.config.js
index 72ef230..2171700 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -133,7 +133,7 @@ module.exports = {
devServer: {
historyApiFallback: true,
host: '0.0.0.0',
- port: 9000,
+ port: 7683,
},
plugins: plugins,
};