Playwright tests & cleanup

.github/workflows/publish.yml

@@ -49,11 +49,8 @@ jobs:
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-#    - run: yarn test:coverage
-#      env:
-#        COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_REPO_TOKEN }}
-#    - uses: coverallsapp/github-action@master
-#      if: success()
-#      with:
-#        github-token: ${{ secrets.GITHUB_TOKEN }}
-#        path-to-lcov: 'packages/*/coverage/lcov.info'
+    - uses: coverallsapp/github-action@master
+      if: success()
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        path-to-lcov: 'packages/wrapper/coverage/lcov.info'

package.json

@@ -5,21 +5,17 @@
   "description": "Redux wrapper for Next.js",
   "scripts": {
     "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
-    "start": "yarn build:quick && yarn start:quick",
-    "start:quick": "lerna run start --parallel",
+    "start": "yarn build && yarn start:all",
+    "start:all": "lerna run start --parallel",
     "build": "lerna run build --stream",
-    "build:quick": "yarn build --scope=next-redux-wrapper",
     "test": "lerna run test --parallel",
     "test:quick": "lerna run test:quick --parallel",
-    "test:coverage": "cat packages/*/coverage/lcov.info | coveralls",
     "publish:release": "lerna publish --tag-version-prefix=\"\" --force-publish=* --no-push --no-git-tag-version",
     "lint": "eslint --cache --cache-location .eslint/cache --fix",
     "lint:all": "yarn lint '**/*.{ts,tsx,js,jsx}'",
     "lint:staged": "lint-staged --debug"
   },
   "devDependencies": {
-    "@types/webpack": "^4.41.25",
-    "coveralls": "3.1.0",
     "eslint": "7.0.0",
     "eslint-config-ringcentral-typescript": "3.0.0",
     "husky": "4.3.5",

packages/configs/playwright.js

@@ -0,0 +1,8 @@
+module.exports = {
+    webServer: {
+        command: 'yarn start',
+        port: 3000,
+        timeout: 120 * 1000,
+        reuseExistingServer: !process.env.CI,
+    },
+};

packages/demo-page/package.json

@@ -5,10 +5,8 @@
   "description": "Demo of redux wrapper for Next.js",
   "scripts": {
     "clean": "rimraf .next coverage",
-    "test": "jest",
-    "start": "next --port=4000",
-    "build": "next build",
-    "serve": "next start --port=4000"
+    "test": "playwright test",
+    "start": "next --port=4000"
   },
   "dependencies": {
     "jsondiffpatch": "0.4.1",
@@ -20,22 +18,15 @@
     "redux-logger": "3.0.6"
   },
   "devDependencies": {
-    "@types/expect-puppeteer": "4.4.5",
-    "@types/jest": "26.0.19",
-    "@types/jest-environment-puppeteer": "4.4.1",
-    "@types/puppeteer": "5.4.2",
+    "@playwright/test": "1.14.1",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
     "@types/react-redux": "7.1.11",
     "@types/redux-logger": "3.0.8",
-    "@types/webpack-env": "1.16.0",
-    "jest": "26.6.3",
-    "jest-puppeteer": "4.4.0",
     "next": "10.0.3",
     "next-redux-wrapper-configs": "^7.0.0",
-    "puppeteer": "5.5.0",
+    "playwright": "1.14.1",
     "rimraf": "3.0.2",
-    "ts-jest": "26.4.4",
     "typescript": "4.1.2"
   },
   "author": "Kirill Konshin",

packages/demo-page/playwright.config.ts

@@ -0,0 +1,12 @@
+import {PlaywrightTestConfig} from '@playwright/test';
+import defaultConfig from 'next-redux-wrapper-configs/playwright';
+
+const config: PlaywrightTestConfig = {
+    ...defaultConfig,
+    webServer: {
+        ...defaultConfig.webServer,
+        port: 4000,
+    },
+};
+
+export default config;

packages/demo-page/src/pages/index.tsx

@@ -29,7 +29,7 @@ const Page: NextPage<ConnectedPageProps> = ({custom}) => {
 export const getServerSideProps = wrapper.getServerSideProps(store => async ({req}) => {
     console.log('2. Page.getServerSideProps uses the store to dispatch things');
     store.dispatch({type: 'PAGE', payload: 'was set in index page ' + req.url});
-    await new Promise(res => setTimeout(res, 1000));
+    await new Promise(res => setTimeout(res, 100));
     return {props: {custom: 'custom'}};
 });
 

packages/demo-page/src/pages/pageProps.tsx

@@ -18,11 +18,8 @@ const PropsPage: NextPage<State> = props => {
     );
 };
 
-PropsPage.getInitialProps = wrapper.getInitialPageProps(store => async () => {
-    console.log('!!!', store);
-    return {
-        prop: 'foo',
-    };
-});
+PropsPage.getInitialProps = wrapper.getInitialPageProps(store => async () => ({
+    prop: 'foo',
+}));
 
 export default PropsPage;

packages/demo-page/tests/index.spec.ts

@@ -1,37 +1,35 @@
-import config from '../jest-puppeteer.config';
+import {test, expect, Page} from '@playwright/test';
 
-const openPage = (url = '/') => page.goto(`http://localhost:${config.server.port}${url}`);
+const openPage = (page: Page, url = '/') => page.goto(`http://localhost:4000${url}`);
 
-describe('Basic integration', () => {
-    it('shows the page', async () => {
-        await openPage();
+test('shows the page', async ({page}) => {
+    await openPage(page);
 
-        await page.waitForSelector('div.index');
+    await page.waitForSelector('div.index');
 
-        await expect(page).toMatch('"page": "was set in index page /"');
-        await expect(page).toMatch('"custom": "custom"');
-    });
+    await expect(page.locator('body')).toContainText('"page": "was set in index page /"');
+    await expect(page.locator('body')).toContainText('"custom": "custom"');
+});
 
-    it('clicks the button', async () => {
-        await openPage('/other');
+test('clicks the button', async ({page}) => {
+    await openPage(page, '/other');
 
-        await page.waitForSelector('div.other');
+    await page.waitForSelector('div.other');
 
-        await expect(page).toMatch('"page": "was set in other page {}"');
+    await expect(page.locator('body')).toContainText('"page": "was set in other page {}"');
 
-        await expect(page).toClick('a', {text: 'Navigate to index'});
+    await page.click('text=Navigate to index');
 
-        await page.waitForSelector('div.index');
+    await page.waitForSelector('div.index');
 
-        await expect(page).toMatch('"page": "was set in index page');
-        await expect(page).toMatch('"custom": "custom"');
-    });
+    await expect(page.locator('body')).toContainText('"page": "was set in index page');
+    await expect(page.locator('body')).toContainText('"custom": "custom"');
+});
 
-    it('initial page props', async () => {
-        await openPage('/pageProps');
+test('initial page props', async ({page}) => {
+    await openPage(page, '/pageProps');
 
-        await page.waitForSelector('div.pageProps');
+    await page.waitForSelector('div.pageProps');
 
-        await expect(page).toMatch('{"prop":"foo"}');
-    });
+    await expect(page.locator('body')).toContainText('{"prop":"foo"}');
 });

packages/demo-redux-toolkit/package.json

@@ -3,18 +3,18 @@
   "version": "7.0.0",
   "private": true,
   "scripts": {
-    "start": "next --port=6060",
-    "build": "next build",
-    "serve": "next start --port=6060"
+    "start": "next --port=6060"
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.5.0",
-    "next": "10.0.3",
     "next-redux-wrapper": "^7.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "7.2.2",
     "redux": "4.0.5"
   },
+  "devDependencies": {
+    "next": "10.0.3"
+  },
   "license": "MIT"
 }

packages/demo-saga-page/package.json

@@ -5,10 +5,8 @@
   "description": "Demo of redux wrapper for Next.js",
   "scripts": {
     "clean": "rimraf .next coverage",
-    "test": "jest",
-    "start": "next --port=5050",
-    "build": "next build",
-    "serve": "next start --port=5050"
+    "test": "playwright test",
+    "start": "next --port=5050"
   },
   "dependencies": {
     "jsondiffpatch": "0.4.1",
@@ -21,23 +19,15 @@
     "redux-saga": "1.1.3"
   },
   "devDependencies": {
-    "@types/expect-puppeteer": "4.4.5",
-    "@types/jest": "26.0.19",
-    "@types/jest-environment-puppeteer": "4.4.1",
-    "@types/next-redux-saga": "3.0.2",
     "@types/puppeteer": "5.4.2",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
     "@types/react-redux": "7.1.11",
     "@types/redux-logger": "3.0.8",
-    "@types/webpack-env": "1.16.0",
-    "jest": "26.6.3",
-    "jest-puppeteer": "4.4.0",
     "next": "10.0.3",
     "next-redux-wrapper-configs": "^7.0.0",
-    "puppeteer": "5.5.0",
+    "playwright": "1.14.1",
     "rimraf": "3.0.2",
-    "ts-jest": "26.4.4",
     "typescript": "4.1.2"
   },
   "author": "Kirill Konshin",

packages/demo-saga-page/playwright.config.ts

@@ -0,0 +1,12 @@
+import {PlaywrightTestConfig} from '@playwright/test';
+import defaultConfig from 'next-redux-wrapper-configs/playwright';
+
+const config: PlaywrightTestConfig = {
+    ...defaultConfig,
+    webServer: {
+        ...defaultConfig.webServer,
+        port: 5050,
+    },
+};
+
+export default config;

packages/demo-saga-page/tests/index.spec.ts

@@ -1,14 +1,12 @@
-import config from '../jest-puppeteer.config';
+import {test, expect, Page} from '@playwright/test';
 
-const openPage = (url = '/') => page.goto(`http://localhost:${config.server.port}${url}`);
+const openPage = (page: Page, url = '/') => page.goto(`http://localhost:5050${url}`);
 
-describe('Basic integration', () => {
-    it('shows the page', async () => {
-        await openPage();
+test('shows the page', async ({page}) => {
+    await openPage(page);
 
-        await page.waitForSelector('div.index');
+    await page.waitForSelector('div.index');
 
-        await expect(page).toMatch('"page": "async text"');
-        await expect(page).toMatch('"custom": "custom"');
-    });
+    await expect(page.locator('body')).toContainText('"page": "async text"');
+    await expect(page.locator('body')).toContainText('"custom": "custom"');
 });

packages/demo-saga/package.json

@@ -5,10 +5,8 @@
   "description": "Demo of redux wrapper for Next.js",
   "scripts": {
     "clean": "rimraf .next coverage",
-    "test": "jest",
-    "start": "next --port=5000",
-    "build": "next build",
-    "serve": "next start --port=5000"
+    "test": "playwright test",
+    "start": "next --port=5000"
   },
   "dependencies": {
     "jsondiffpatch": "0.4.1",
@@ -21,23 +19,15 @@
     "redux-saga": "1.1.3"
   },
   "devDependencies": {
-    "@types/expect-puppeteer": "4.4.5",
-    "@types/jest": "26.0.19",
-    "@types/jest-environment-puppeteer": "4.4.1",
-    "@types/next-redux-saga": "3.0.2",
     "@types/puppeteer": "5.4.2",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
     "@types/react-redux": "7.1.11",
     "@types/redux-logger": "3.0.8",
-    "@types/webpack-env": "1.16.0",
-    "jest": "26.6.3",
-    "jest-puppeteer": "4.4.0",
     "next": "10.0.3",
     "next-redux-wrapper-configs": "^7.0.0",
-    "puppeteer": "5.5.0",
+    "playwright": "1.14.1",
     "rimraf": "3.0.2",
-    "ts-jest": "26.4.4",
     "typescript": "4.1.2"
   },
   "author": "Kirill Konshin",

packages/demo-saga/playwright.config.ts

@@ -0,0 +1,12 @@
+import {PlaywrightTestConfig} from '@playwright/test';
+import defaultConfig from 'next-redux-wrapper-configs/playwright';
+
+const config: PlaywrightTestConfig = {
+    ...defaultConfig,
+    webServer: {
+        ...defaultConfig.webServer,
+        port: 5000,
+    },
+};
+
+export default config;

packages/demo-saga/tests/index.spec.ts

@@ -1,14 +1,12 @@
-import config from '../jest-puppeteer.config';
+import {test, expect, Page} from '@playwright/test';
 
-const openPage = (url = '/') => page.goto(`http://localhost:${config.server.port}${url}`);
+const openPage = (page: Page, url = '/') => page.goto(`http://localhost:5000${url}`);
 
-describe('Basic integration', () => {
-    it('shows the page', async () => {
-        await openPage();
+test('shows the page', async ({page}) => {
+    await openPage(page);
 
-        await page.waitForSelector('div.index');
+    await page.waitForSelector('div.index');
 
-        await expect(page).toMatch('"page": "async text"');
-        await expect(page).toMatch('"custom": "custom"');
-    });
+    await expect(page.locator('body')).toContainText('"page": "async text"');
+    await expect(page.locator('body')).toContainText('"custom": "custom"');
 });