chore: update e2e test code

Author: ron0115

.storybook/main.js

@@ -2,7 +2,7 @@ const path = require('path');
 const basePath = path.resolve(__dirname, '../', 'src');
 
 module.exports = {
-  stories: ['../@(stories|example)/*.stories.@(ts|tsx)'],
+  stories: ['../stories/**/*.stories.@(jsx|tsx)'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',

example/Demo.stories.tsx

@@ -9,12 +9,15 @@ export const Demo = () => {
 
   return (
     <>
-      <button onClick={() => scrollTo('#y-item-20')}>
+      <button onClick={() => scrollTo('#y-item-20')} id={'demo-stories-btn-1'}>
         scrollTo('#y-item-20')
       </button>
-      <button onClick={() => scrollTo(400)}>scrollTo(400)</button>
+      <button onClick={() => scrollTo(400)} id={'demo-stories-btn-2'}>
+        scrollTo(400)
+      </button>
       <br />
       <div
+        id={'demo-stories'}
         ref={ref}
         style={{
           overflowY: 'scroll',

jest-puppeteer.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  server: {
+    command: 'npm run storybook',
+    port: 6006,
+    launchTimeout: 100000,
+    debug: true,
+    usedPortAction: 'ignore',
+  },
+  launch: {
+    // headless: false,
+  },
+};

jest.e2e.config.js

@@ -1,4 +1,9 @@
 module.exports = {
   preset: 'jest-puppeteer-preset',
   roots: ['<rootDir>/test/e2e/'],
+  globals: {
+    'ts-jest': {
+      diagnostics: false,
+    },
+  },
 };

package.json

@@ -60,19 +60,25 @@
     "@storybook/storybook-deployer": "^2.8.6",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
+    "add": "^2.0.6",
     "babel-loader": "^8.1.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
     "husky": "^4.2.5",
     "jest-enzyme": "^7.1.2",
     "jest-puppeteer-preset": "^4.4.0",
+    "puppeteer": "^5.3.1",
     "react": "^16.13.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
     "semantic-release": "^17.1.1",
+    "ts-jest": "^26.4.0",
     "ts-loader": "^8.0.2",
     "tsdx": "^0.13.2",
     "tslib": "^2.0.1",
-    "typescript": "^4.0.2"
+    "typescript": "^4.0.2",
+    "yarn": "^1.22.10"
   },
   "publishConfig": {
     "access": "public"

src/useSmoothScroll.tsx

@@ -21,7 +21,7 @@ export type UseSmoothScrollType = {
 };
 
 // get the relative distance from destination
-const getRelativeDistance = (
+export const getRelativeDistance = (
   target: number | string | undefined,
   parent: HTMLElement,
   attrMap: AttrMapType

test/e2e/useSmoothScroll.test.tsx

@@ -0,0 +1,53 @@
+var fs = require('fs');
+describe('useSmoothScroll', () => {
+  // jest.setTimeout(30000);
+  const CommonUsage = async () => {
+    beforeEach(async () => {
+      console.log('------------beforeEach');
+      const headlessUserAgent = await page.evaluate(() => navigator.userAgent);
+      const chromeUserAgent = headlessUserAgent.replace(
+        'HeadlessChrome',
+        'Chrome'
+      );
+      await page.setUserAgent(chromeUserAgent);
+      await page.setExtraHTTPHeaders({
+        'accept-language': 'en-US,en;q=0.8',
+      });
+      // await page.setViewport({
+      //   width: 1024,
+      //   height: 768,
+      // });
+      // hack：load storybook's iframe directly to avoid bug
+      await page.goto(
+        'http://localhost:6006/iframe.html?id=main-usesmoothscroll--docs&viewMode=docs#stories'
+      );
+      await page.waitForSelector('#root');
+
+      // test code below
+      // await page.waitFor(3000);
+      // const test = await page.content();
+      // fs.writeFileSync('writeMe.html', test);
+    });
+
+    it('should scrollTo target node when button clicked', async () => {
+      await expect(page).toMatch('y-item-0');
+      const demoWrapElm = await page.$(`#demo-stories`);
+      const getItem = async num => {
+        const res = await page.$(`#y-item-${num}`);
+        return res;
+      };
+      expect(await (await getItem(20)).isIntersectingViewport()).toBe(false);
+
+      // await expect(page).toClick('button', { text: `scrollTo('#y-item-20')` });
+      await (await page.$('#demo-stories-btn-1')).click();
+      await page.waitFor(1000);
+
+      // expect(await (await getItem(28)).isIntersectingViewport()).toBe(true);
+      // await expect(page).toMatchElement('#y-item-20');
+      expect(
+        await (await demoWrapElm.getProperty('scrollTop')).jsonValue()
+      ).toBe(430);
+    });
+  };
+  CommonUsage();
+});

test/specs/utils.test.tsx

@@ -0,0 +1,35 @@
+import { getAttrMap } from '../../src/utils';
+import { getCurIndex } from '../../src/useScrollWatch';
+describe('test src/utils', () => {
+  describe('getAttrMap', () => {
+    it('should return exact map when pass x', () => {
+      expect(getAttrMap('x')).toMatchObject({
+        scrollLeftTop: 'scrollLeft',
+        scrollWidthHeight: 'scrollWidth',
+        clientWidthHeight: 'clientWidth',
+        offsetLeftTop: 'offsetLeft',
+        offsetWidthHeight: 'offsetWidth',
+        leftTop: 'left',
+      });
+    });
+    it('should return exact map when pass y', () => {
+      expect(getAttrMap('y')).toMatchObject({
+        scrollLeftTop: 'scrollTop',
+        scrollWidthHeight: 'scrollHeight',
+        clientWidthHeight: 'clientHeight',
+        offsetLeftTop: 'offsetTop',
+        offsetWidthHeight: 'offsetHeight',
+        leftTop: 'top',
+      });
+    });
+  });
+
+  describe('getCurIndex', () => {
+    expect(getCurIndex(0, [])).toBe(-1);
+    expect(getCurIndex(100, [101, 200])).toBe(-1);
+    expect(getCurIndex(100, [100, 200])).toBe(0);
+    expect(getCurIndex(102, [101, 200])).toBe(0);
+    expect(getCurIndex(199, [101, 200])).toBe(0);
+    expect(getCurIndex(200, [101, 200])).toBe(1);
+  });
+});