test: add page-container

.babelrc

-{
-  "env": {
-    "test": {
-      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]],
-      "plugins": [
-        "@vue/babel-plugin-jsx",
-        "@babel/plugin-transform-member-expression-literals",
-        "@babel/plugin-transform-object-assign",
-        "@babel/plugin-transform-property-literals",
-        "@babel/plugin-transform-spread",
-        "@babel/plugin-transform-template-literals",
-        "@babel/plugin-transform-modules-commonjs",
-        "@babel/plugin-proposal-export-default-from",
-        "@babel/plugin-proposal-export-namespace-from",
-        "@babel/plugin-proposal-object-rest-spread",
-        "@babel/plugin-proposal-class-properties"
-      ]
-    }
-  }
-}

.jest.js

 const libDir = process.env.LIB_DIR;
 
-const transformIgnorePatterns = [
-  '/dist/',
-  '<rootDir>/node_modules/(?!lodash-es)',
-  '<rootDir>/node_modules/(?!.*?/es/.*\\.js)',
-  // Ignore modules without es dir.
-  // Update: @babel/runtime should also be transformed
-  'node_modules/(?!.*(@babel|lodash-es))[^/]+?/(?!(es|node_modules)/)',
-];
 const testPathIgnorePatterns = ['/node_modules/', 'node'];
 module.exports = {
   testURL: 'http://localhost/',
@@ -15,23 +7,28 @@ module.exports = {
   moduleFileExtensions: ['js', 'ts', 'tsx', 'json', 'vue'],
   modulePathIgnorePatterns: ['/_site/'],
   transform: {
-    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
-    '.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
-    '.+\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    // '^.+\\.svg$': '<rootDir>/node_modules/jest-transform-stub',
+    '^.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
   },
   testRegex: libDir === 'dist' ? 'demo\\.test\\.ts$' : '.*\\.test\\.tsx$',
   testEnvironment: 'jest-environment-jsdom-fifteen',
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
     // '^.*lodash-es.*\\.js': '<rootDir>/node_modules/babel-jest',
-    '^.*ant-design-vue.*[.]?style|css|less.*$': 'jest-transform-stub',
+    // '^.*ant-design-vue.*[.]?style|css|less.*$': 'jest-transform-stub',
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   collectCoverage: process.env.COVERAGE === 'true',
   collectCoverageFrom: ['src/**/*.{ts,tsx,vue}'],
-  testPathIgnorePatterns,
-  transformIgnorePatterns,
+  testPathIgnorePatterns: ['/node_modules/', 'node'],
+  transformIgnorePatterns: [
+    '/dist/',
+    // Ignore modules without es dir.
+    // Update: @babel/runtime should also be transformed
+    '<rootDir>/node_modules/(?!(lodash-es|ant-design-vue/es))',
+  ],
   verbose: true,
   globals: {
     stubs: {

package.json

@@ -32,6 +32,7 @@
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@babel/plugin-transform-object-assign": "^7.12.1",
+    "@babel/preset-env": "^7.12.7",
     "@types/fs-extra": "^9.0.2",
     "@types/jest": "^24.0.17",
     "@types/node": "^13.13.15",
@@ -48,6 +49,7 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-beta.2",
     "babel-jest": "^26.6.3",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "cross-env": "^5.2.0",
     "eslint": "^6.7.2",
     "eslint-config-prettier": "^6.15.0",

src/PageContainer/index.tsx

@@ -7,14 +7,14 @@ import { AffixProps } from './interfaces/Affix';
 /* replace antd ts define end */
 import { useRouteContext, RouteContextProps } from '../RouteContext';
 import { useProProvider } from '../ProProvider';
-import 'ant-design-vue/lib/affix/style';
-import Affix from 'ant-design-vue/lib/affix';
-import 'ant-design-vue/lib/page-header/style';
-import PageHeader from 'ant-design-vue/lib/page-header';
-import 'ant-design-vue/lib/tabs/style';
-import Tabs from 'ant-design-vue/lib/tabs';
-import 'ant-design-vue/lib/spin/style';
-import Spin from 'ant-design-vue/lib/spin';
+import 'ant-design-vue/es/affix/style';
+import Affix from 'ant-design-vue/es/affix';
+import 'ant-design-vue/es/page-header/style';
+import PageHeader from 'ant-design-vue/es/page-header';
+import 'ant-design-vue/es/tabs/style';
+import Tabs from 'ant-design-vue/es/tabs';
+import 'ant-design-vue/es/spin/style';
+import Spin from 'ant-design-vue/es/spin';
 import GridContent from '../GridContent';
 import FooterToolbar from '../FooterToolbar';
 import './index.less';
@@ -85,7 +85,6 @@ const renderFooter = (
     tabProps,
     prefixedClassName,
   } = props;
-  console.log('tabProps', tabProps);
   if (tabList && tabList.length) {
     return (
       <Tabs
@@ -142,8 +141,6 @@ const defaultPageHeaderRender = (
     extraContent,
     ...restProps
   } = props;
-  console.log('restProps', restProps);
-  console.log('routeContext.value', value);
   if (pageHeaderRender) {
     return pageHeaderRender({ ...props, ...value });
   }

tests/__snapshots__/page-container.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageContainer 🥩 base use 1`] = `
+<div class="_rawValue __v_isRef _value">
+  <div class="ant-pro-page-container-warp">
+    <div class="ant-page-header has-breadcrumb ant-page-header-ghost">
+      <div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link"><a href="#/index">First-level Menu</a></span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link"><a href="#/index/first">Second-level Menu</a></span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link"><span>Third-level Menu</span></span><span class="ant-breadcrumb-separator">/</span></span></div>
+      <div class="ant-page-header-heading">
+        <div class="ant-page-header-back">
+          <div role="button" tabindex="0" class="ant-page-header-back-button" aria-label="Back" style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"><span role="img" aria-label="arrow-left" class="anticon anticon-arrow-left"><svg class="" data-icon="arrow-left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 000 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></div>
+        </div>
+        <!----><span class="ant-page-header-heading-title">Title</span><span class="ant-page-header-heading-sub-title">This is a subtitle</span><span class="ant-page-header-heading-tags"><span class="ant-tag ant-tag-blue">Tag 1<!----></span><span class="ant-tag ant-tag-blue">Tag 2<!----></span></span><span class="ant-page-header-heading-extra"><button class="ant-btn ant-btn-primary" type="button"><!----><span>主操作</span></button></span>
+      </div>
+      <div class="ant-page-header-content">
+        <div class="ant-pro-page-container-detail">
+          <div class="ant-pro-page-container-main">
+            <div class="ant-pro-page-container-row">
+              <div class="ant-pro-page-container-content">
+                <div>content</div>
+              </div>
+              <div class="ant-pro-page-container-extraContent">
+                <div>extraContent</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!---->
+    </div>
+  </div>
+  <div class="ant-pro-grid-content">
+    <div class="ant-pro-grid-content-children">
+      <div>
+        <div class="ant-pro-page-container-children-content">
+          <div>PageContent</div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-pro-footer-bar">
+    <div class="ant-pro-footer-bar-left">
+      <!---->
+    </div>
+    <div class="ant-pro-footer-bar-right"><button class="ant-btn" type="button">
+        <!----><span>重 置</span>
+      </button><button class="ant-btn ant-btn-primary" type="button">
+        <!----><span>提 交</span>
+      </button></div>
+  </div>
+</div>
+`;

tests/page-container.test.tsx

@@ -2,6 +2,8 @@ import { mount } from '@vue/test-utils';
 import { PageContainer } from '../src/PageContainer';
 import { Tag, Button } from 'ant-design-vue';
 
+export const sleep = (timeout = 0) => new Promise(resolve => setTimeout(resolve, timeout));
+
 describe('PageContainer', () => {
 
   const routes = [
@@ -40,12 +42,70 @@ describe('PageContainer', () => {
       render() {
         return (
           <PageContainer {...props}>
-            <div>Page Content</div>
+            <div>PageContent</div>
           </PageContainer>
         );
       },
     });
-    console.log(wrapper.html());
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('😄 custom title,subTitle', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <PageContainer
+            title="Title"
+            subTitle="SubTitle"
+          />
+        );
+      },
+    });
+
+    expect(wrapper.find('.ant-page-header-heading-title').text()).toBe('Title');
+    expect(wrapper.find('.ant-page-header-heading-sub-title').text()).toBe('SubTitle');
+  });
+
+  it('😄 render footer', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <PageContainer
+            footer={[
+              <Button key="3">重置</Button>,
+              <Button key="2" type="primary">
+                提交
+              </Button>,
+            ]}
+          />
+        );
+      },
+    });
+
+    expect(wrapper.findAll('.ant-pro-footer-bar-right button.ant-btn')).toHaveLength(2);
   });
 
+  it('😄 render tags', async () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <PageContainer
+            tags={['Tag 1', 'Tag 2'].map(tag => (<Tag color="blue">{tag}</Tag>))}
+          />
+        );
+      },
+    });
+    // test render tags
+    expect(wrapper.findAll('.ant-page-header-heading-tags span')).toHaveLength(2);
+    expect(wrapper.findAll('.ant-page-header-heading-tags span')[1].text()).toBe('Tag 2');
+
+    // test update prop tags
+    wrapper.setProps({
+      tags: undefined,
+    });
+
+    await sleep(50);
+
+    expect(wrapper.find('.ant-page-header-heading-tags').exists()).toBe(false);
+  });
 });