fix: Menu, BasicLayout, VNodeType

README.md

@@ -13,9 +13,9 @@ Ant Design Pro Layout
 
 ```bash
 # yarn
-yarn add @ant-design-vue/pro-layout
+yarn add @ant-design-vue/pro-layout@next
 # npm
-npm i @ant-design-vue/pro-layout -S
+npm i @ant-design-vue/pro-layout@next -S
 ```
 
 ## Basic Usage
@@ -46,7 +46,7 @@ After that, you can use pro-layout in your Vue components as simply as this:
 
 <script>
 import { defineComponent, reactive } from 'vue';
-import ProLayout, { createRouteContext } from '@ant-design-vue/pro-layout';
+import { createRouteContext } from '@ant-design-vue/pro-layout';
 
 const [ RouteContextProvider ] = createRouteContext();
 
@@ -56,9 +56,7 @@ export default defineComponent({
       collapsed: false,
 
       openKeys: ['/dashboard'],
-      setOpenKeys: (keys) => (state.openKeys = keys),
       selectedKeys: ['/welcome'],
-      setSelectedKeys: (keys) => (state.selectedKeys = keys),
 
       isMobile: false,
       fixSiderbar: false,
@@ -76,7 +74,6 @@ export default defineComponent({
     }
   },
   components: {
-    ProLayout,
     RouteContextProvider,
   }
 });
@@ -95,9 +92,7 @@ export default defineComponent({
         collapsed: false,
 
         openKeys: ['/dashboard'],
-        setOpenKeys: (keys: string[]) => (state.openKeys = keys),
         selectedKeys: ['/welcome'],
-        setSelectedKeys: (keys: string[]) => (state.selectedKeys = keys),
 
         isMobile: false,
         fixSiderbar: false,

babel.config.js

@@ -3,7 +3,7 @@ module.exports = {
     test: {
       presets: [['@babel/preset-env', { targets: { node: true } }]],
       plugins: [
-        '@vue/babel-plugin-jsx',
+        ['@vue/babel-plugin-jsx', { mergeProps: false }],
         '@babel/plugin-proposal-optional-chaining',
         '@babel/plugin-transform-object-assign',
         '@babel/plugin-proposal-object-rest-spread',

examples/menus.ts

-import { RouteProps } from '../src/typings';
-
-export const menus: RouteProps[] = [
+export const menus = [
   {
     path: '/welcome',
     name: 'welcome',

examples/test.tsx

+import { createApp, reactive } from 'vue';
+import { default as ProLayout, createRouteContext, RouteContextProps } from '../src/';
+
+import { RouterLink } from './mock-router';
+import { menus } from './menus';
+import registerIcons from './_util/icons';
+
+const SimpleDemo = {
+  setup() {
+    const [RouteContextProvider] = createRouteContext();
+
+    const appState = reactive<RouteContextProps>({
+      selectedKeys: [],
+      openKeys: [],
+      collapsed: true,
+      menuData: menus,
+    });
+    return () => (
+      <RouteContextProvider value={appState}>
+        <ProLayout
+          title="Pro Tests"
+          logo="https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg"
+          layout="side"
+          navTheme="light"
+          contentWidth="Fluid"
+          contentStyle={{ minHeight: '300px' }}
+          collapsed={appState.collapsed}
+          onCollapse={collapsed => {
+            appState.collapsed = collapsed;
+          }}
+          onSelect={(selectedKeys: string[] | false) => {
+            selectedKeys && (appState.selectedKeys = selectedKeys);
+          }}
+          onOpenKeys={(openKeys: string[] | false) => {
+            console.log('onOpenKeys', openKeys);
+            openKeys && (appState.openKeys = openKeys);
+          }}
+          footerRender={() => <div>custom-footer</div>}
+          v-slots={{
+            rightContentRender: props => (
+              <div class="custom-header-right-content">
+                <span>custom-right-content</span>
+              </div>
+            ),
+          }}
+        >
+          <div>content</div>
+        </ProLayout>
+      </RouteContextProvider>
+    );
+  },
+};
+
+const app = createApp(SimpleDemo);
+
+app.use(ProLayout);
+app.use(RouterLink);
+app.use(registerIcons);
+app.mount('#__vue-content>div');

src/BasicLayout.tsx

-import { computed, FunctionalComponent, CSSProperties, VNodeChild, VNode, unref } from 'vue';
+import { computed, FunctionalComponent, CSSProperties, unref } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import { withInstall } from 'ant-design-vue/es/_util/type';
@@ -6,8 +6,8 @@ import { default as ProProvider, ProProviderData } from './ProProvider';
 import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
 import { WrapContent } from './WrapContent';
 import { default as Header, HeaderViewProps } from './Header';
-import { RenderVNodeType, WithFalse } from './typings';
-import { getComponentOrSlot, PropRenderType, PropTypes } from './utils';
+import { VNodeType, CustomRender, WithFalse } from './typings';
+import { getCustomRender, PropRenderType, PropTypes } from './utils';
 import useMediaQuery from './hooks/useMediaQuery';
 import './BasicLayout.less';
 
@@ -19,7 +19,7 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
     /**
      *@name logo url
      */
-    logo?: string | RenderVNodeType | WithFalse<string | RenderVNodeType>;
+    logo?: VNodeType;
 
     loading?: boolean;
 
@@ -29,11 +29,9 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
 
     onCollapse?: (collapsed: boolean) => void;
 
-    footerRender?: WithFalse<
-      (props: any /* FooterProps */, defaultDom: RenderVNodeType) => RenderVNodeType
-    >;
+    footerRender?: WithFalse<(props: any /* FooterProps */) => VNodeType>;
 
-    headerRender?: WithFalse<(props: any /* HeaderProps */) => RenderVNodeType>;
+    headerRender?: WithFalse<(props: any /* HeaderProps */) => VNodeType>;
 
     colSize?: string;
     /**
@@ -68,19 +66,16 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
   const isTop = computed(() => layout === 'top');
   // const isSide = computed(() => layout === 'side');
   // const isMix = computed(() => layout === 'mix');
-
-  const handleCollapse = (collapsed: boolean) => {
-    propsOnCollapse && propsOnCollapse(collapsed);
-    emit('update:collapsed', collapsed);
-  };
-  const handleOpenKeys = (openKeys: string[] | false): void => {
-    propsOnOpenKeys && propsOnOpenKeys(openKeys);
-    emit('update:open-keys', openKeys);
-  };
-  const handleSelect = (selectedKeys: string[] | false): void => {
-    propsOnSelect && propsOnSelect(selectedKeys);
-    emit('update:selected-keys', selectedKeys);
-  };
+  // if on event and @event
+  const onCollapse =
+    (propsOnCollapse && propsOnCollapse) ||
+    ((collapsed: boolean) => emit('update:collapsed', collapsed));
+  const onOpenKeys =
+    (propsOnOpenKeys && propsOnOpenKeys) ||
+    ((openKeys: string[] | false) => emit('update:open-keys', openKeys));
+  const onSelect =
+    (propsOnSelect && propsOnSelect) ||
+    ((selectedKeys: string[] | false) => emit('update:selected-keys', selectedKeys));
   const colSize = useMediaQuery();
   const isMobile = computed(
     () => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile,
@@ -115,42 +110,39 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
   const headerRender = (
     props: BasicLayoutProps & {
       hasSiderMenu: boolean;
-      customHeaderRender: VNodeChild | false;
-      rightContentRender: VNodeChild | VNode | false;
+      customHeaderRender: WithFalse<CustomRender>;
+      rightContentRender: WithFalse<CustomRender>;
     },
     matchMenuKeys: string[],
-  ): RenderVNodeType => {
+  ): VNodeType => {
     if (props.headerRender === false || props.pure) {
       return null;
     }
     return <Header matchMenuKeys={matchMenuKeys} {...props} headerHeight={48} />;
   };
-  const rightContentRender = getComponentOrSlot(props, slots, 'rightContentRender') as any;
-  const customHeaderRender = getComponentOrSlot(props, slots, 'headerRender');
-  const menuHeaderRenderFunc = props['menuHeaderRender'];
-  const menuHeaderRenderSlot = slots['menuHeaderRender'];
+  const rightContentRender = getCustomRender(props, slots, 'rightContentRender');
+  const customHeaderRender = getCustomRender(props, slots, 'headerRender');
+  const menuHeaderRender = getCustomRender(props, slots, 'menuHeaderRender');
+  const footerRender = getCustomRender(props, slots, 'footerRender');
+  // const menuRender = getCustomRender(props, slots, 'menuRender');
+
   const headerDom = headerRender(
     {
       ...props,
       hasSiderMenu: !isTop.value,
       menuData,
       isMobile: unref(isMobile),
-      onCollapse: handleCollapse,
-      onSelect: handleSelect,
-      onOpenKeys: handleOpenKeys,
+      onCollapse,
+      onOpenKeys,
+      onSelect,
       customHeaderRender,
       rightContentRender,
-      headerTitleRender:
-        menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot())),
+      headerTitleRender: menuHeaderRender,
       theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
     },
     matchMenuKeys,
   );
 
-  const footerRender = getComponentOrSlot(props, slots, 'footerRender');
-  // const menuRender = getComponentOrSlot(props, slots, 'menuRender');
-  // const menuHeaderRender = getComponentOrSlot(props, slots, 'menuHeaderRender');
-
   return (
     <ProProvider i18n={defaultI18nRender}>
       {props.pure ? (
@@ -162,12 +154,10 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
               <SiderMenuWrapper
                 {...props}
                 isMobile={isMobile.value}
-                menuHeaderRender={
-                  menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot()))
-                }
-                onCollapse={handleCollapse}
-                onSelect={handleSelect}
-                onOpenKeys={handleOpenKeys}
+                menuHeaderRender={menuHeaderRender}
+                onCollapse={onCollapse}
+                onSelect={onSelect}
+                onOpenKeys={onOpenKeys}
               />
             )}
             <Layout style={genLayoutStyle}>
@@ -178,7 +168,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
               >
                 {slots.default?.()}
               </WrapContent>
-              {footerRender !== false && footerRender && footerRender}
+              {footerRender && footerRender(props)}
             </Layout>
           </Layout>
         </div>
@@ -266,6 +256,8 @@ ProLayout.props = {
   collapsed: PropTypes.bool,
   /* 菜单的折叠收起事件 (collapsed: boolean) => void */
   onCollapse: PropTypes.func,
+  onSelect: PropTypes.func,
+  onOpenKeys: PropTypes.func,
   // onPageChange // 请使用 vue-router 监听
   /* 禁止自动切换到移动页面 */
   disableMobile: PropTypes.bool,

src/GlobalHeader/index.tsx

 import { computed, CSSProperties, FunctionalComponent } from 'vue';
 import { PureSettings } from '../defaultSettings';
-import { RenderVNodeType, MenuDataItem, WithFalse } from '../typings';
+import { VNodeType, MenuDataItem, WithFalse } from '../typings';
 import {
   SiderMenuProps,
   PrivateSiderMenuProps,
@@ -18,9 +18,9 @@ export interface GlobalHeaderProps extends Partial<PureSettings> {
   collapsed?: boolean;
   onCollapse?: (collapsed: boolean) => void;
   isMobile?: boolean;
-  logo?: RenderVNodeType;
-  menuRender?: WithFalse<(props: HeaderViewProps, defaultDom: RenderVNodeType) => RenderVNodeType>;
-  rightContentRender?: WithFalse<(props: HeaderViewProps) => RenderVNodeType>;
+  logo?: VNodeType;
+  menuRender?: WithFalse<(props: HeaderViewProps, defaultDom: VNodeType) => VNodeType>;
+  rightContentRender?: WithFalse<(props: HeaderViewProps) => VNodeType>;
   className?: string;
   prefixCls?: string;
   menuData?: MenuDataItem[];
@@ -33,10 +33,7 @@ export interface GlobalHeaderProps extends Partial<PureSettings> {
   onSelect?: (selectedKeys: WithFalse<string[]>) => void;
 }
 
-const renderLogo = (
-  menuHeaderRender: SiderMenuProps['menuHeaderRender'],
-  logoDom: RenderVNodeType,
-) => {
+const renderLogo = (menuHeaderRender: SiderMenuProps['menuHeaderRender'], logoDom: VNodeType) => {
   if (menuHeaderRender === false) {
     return null;
   }

src/Header.tsx

@@ -5,7 +5,7 @@ import Layout from 'ant-design-vue/es/layout';
 import { GlobalHeader, GlobalHeaderProps } from './GlobalHeader';
 import { TopNavHeader } from './TopNavHeader';
 import { useRouteContext } from './RouteContext';
-import { RenderVNodeType, WithFalse } from './typings';
+import { VNodeType, WithFalse } from './typings';
 import { clearMenuItem } from './utils';
 import './Header.less';
 
@@ -18,15 +18,11 @@ interface HeaderViewState {
 export type HeaderViewProps = GlobalHeaderProps & {
   isMobile?: boolean;
   collapsed?: boolean;
-  logo?: RenderVNodeType;
+  logo?: VNodeType;
 
-  headerRender?: WithFalse<
-    (props: HeaderViewProps, defaultDom: RenderVNodeType) => RenderVNodeType
-  >;
-  headerTitleRender?: WithFalse<
-    (props: HeaderViewProps, defaultDom: RenderVNodeType) => RenderVNodeType
-  >;
-  headerContentRender?: WithFalse<(props: HeaderViewProps) => RenderVNodeType>;
+  headerRender?: WithFalse<(props: HeaderViewProps, defaultDom: VNodeType) => VNodeType>;
+  headerTitleRender?: WithFalse<(props: HeaderViewProps, defaultDom: VNodeType) => VNodeType>;
+  headerContentRender?: WithFalse<(props: HeaderViewProps) => VNodeType>;
   siderWidth?: number;
   hasSiderMenu?: boolean;
 };
@@ -66,8 +62,6 @@ export const HeaderView = defineComponent({
   setup(props: HeaderViewProps) {
     const {
       prefixCls,
-      headerRender,
-      headerContentRender,
       isMobile,
       fixedHeader,
       hasSiderMenu,
@@ -96,7 +90,7 @@ export const HeaderView = defineComponent({
     const renderContent = () => {
       let defaultDom = (
         <GlobalHeader {...props} onCollapse={onCollapse.value} menuData={clearMenuData.value}>
-          {headerContentRender && headerContentRender.value && headerContentRender.value(props)}
+          {props.headerContentRender && props.headerContentRender(props)}
         </GlobalHeader>
       );
       if (isTop.value && !isMobile.value) {
@@ -110,8 +104,8 @@ export const HeaderView = defineComponent({
           />
         );
       }
-      if (headerRender.value && typeof headerRender.value === 'function') {
-        return headerRender.value(props, defaultDom);
+      if (props.headerRender) {
+        return props.headerRender(props, defaultDom);
       }
       return defaultDom;
     };

src/SiderMenu/BaseMenu.tsx

@@ -117,7 +117,6 @@ class MenuUtil {
 
   constructor(props: BaseMenuProps) {
     this.props = props;
-    console.log('MenuUtil constructor', new Date());
   }
 
   getNavMenuItems = (menusData: MenuDataItem[] = [], isChildren: boolean) => {

src/SiderMenu/SiderMenu.tsx

@@ -4,7 +4,7 @@ import Layout from 'ant-design-vue/es/layout';
 import 'ant-design-vue/es/menu/style';
 import Menu from 'ant-design-vue/es/menu';
 import BaseMenu, { BaseMenuProps } from './BaseMenu';
-import { WithFalse, RenderVNodeType } from '../typings';
+import { WithFalse, VNodeType } from '../typings';
 import { SiderProps } from './typings';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useProProvider } from '../ProProvider';
@@ -20,27 +20,26 @@ export type PrivateSiderMenuProps = {
 
 export interface SiderMenuProps
   extends Pick<BaseMenuProps, Exclude<keyof BaseMenuProps, ['onCollapse']>> {
-  logo?: RenderVNodeType;
+  logo?: VNodeType;
   siderWidth?: number;
   collapsedWidth?: number;
   menuHeaderRender?: WithFalse<
-    (logo: RenderVNodeType, title: RenderVNodeType, props?: SiderMenuProps) => RenderVNodeType
+    (logo: VNodeType, title: VNodeType, props?: SiderMenuProps) => VNodeType
   >;
-  menuFooterRender?: WithFalse<(props?: SiderMenuProps) => RenderVNodeType>;
-  menuContentRender?: WithFalse<
-    (props: SiderMenuProps, defaultDom: RenderVNodeType) => RenderVNodeType
-  >;
-  menuExtraRender?: WithFalse<(props: SiderMenuProps) => RenderVNodeType>;
-  collapsedButtonRender?: WithFalse<(collapsed?: boolean) => RenderVNodeType>;
+  menuFooterRender?: WithFalse<(props?: SiderMenuProps) => VNodeType>;
+  menuContentRender?: WithFalse<(props: SiderMenuProps, defaultDom: VNodeType) => VNodeType>;
+  menuExtraRender?: WithFalse<(props: SiderMenuProps) => VNodeType>;
+  collapsedButtonRender?: WithFalse<(collapsed?: boolean) => VNodeType>;
   breakpoint?: SiderProps['breakpoint'] | false;
   onMenuHeaderClick?: (e: MouseEvent) => void;
   fixed?: boolean;
   hide?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
   onOpenKeys?: (openKeys: WithFalse<string[]>) => void;
   onSelect?: (selectedKeys: WithFalse<string[]>) => void;
 }
 
-export const defaultRenderLogo = (logo: RenderVNodeType): RenderVNodeType => {
+export const defaultRenderLogo = (logo: VNodeType): VNodeType => {
   if (typeof logo === 'string') {
     return <img src={logo} alt="logo" />;
   }
@@ -53,7 +52,7 @@ export const defaultRenderLogo = (logo: RenderVNodeType): RenderVNodeType => {
 export const defaultRenderLogoAndTitle = (
   props: SiderMenuProps,
   renderKey: string | undefined = 'menuHeaderRender',
-): RenderVNodeType => {
+): VNodeType => {
   const {
     logo = 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg',
     title,
@@ -81,7 +80,7 @@ export const defaultRenderLogoAndTitle = (
   );
 };
 
-export const defaultRenderCollapsedButton = (collapsed?: boolean): RenderVNodeType =>
+export const defaultRenderCollapsedButton = (collapsed?: boolean): VNodeType =>
   collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />;
 
 const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => {
@@ -102,7 +101,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   const { getPrefixCls } = useProProvider();
   const context = useRouteContext();
   const baseClassName = getPrefixCls('sider');
-
   // const isMix = computed(() => props.layout === 'mix');
   // const fixed = computed(() => context.fixSiderbar);
   const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme);

src/SiderMenu/index.less

@@ -11,7 +11,7 @@
   border-right: 0;
   transition: background-color 0.3s, min-width 0.3s,
     max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  z-index: 9;
+  z-index: 100;
 
   &.@{ant-prefix}-menu-vertical .@{ant-prefix}-menu-item:not(:last-child),
   &.@{ant-prefix}-menu-vertical-left .@{ant-prefix}-menu-item:not(:last-child),

src/typings.ts

 import { VNode } from 'vue';
 
 // define global types
-export type RenderVNodeType = VNode | Element | JSX.Element;
+export type VNodeType = WithFalse<string | VNode | JSX.Element>;
 
 export type MenuTheme = 'dark' | 'light';
 
@@ -67,4 +67,6 @@ export interface MenuDataItem {
 
 export type WithFalse<T> = T | false;
 
+export type CustomRender = (...args: any[]) => VNode | VNode[];
+
 export type FormatMessage = (message: string) => string;

src/utils/index.ts

 import { Slots, VNodeChild } from 'vue';
-import { MenuDataItem } from '../typings';
+import { CustomRender, MenuDataItem } from '../typings';
 export { getComponent } from 'ant-design-vue/es/_util/props-util';
 export { default as PropTypes } from 'ant-design-vue/es/_util/vue-types';
 
@@ -12,6 +12,18 @@ export function getComponentOrSlot(props: any, slots: Slots, name: string): VNod
   return typeof comp === 'function' ? comp() : (comp && (comp as VNodeChild)) || false;
 }
 
+export function getCustomRender(props: any, slots: Slots, name: string): CustomRender | false {
+  const propRender = props[name];
+  if (propRender === false) {
+    return false;
+  }
+  if (propRender) {
+    return propRender;
+  }
+  const slotVNode = slots[name || 'default'];
+  return slotVNode;
+}
+
 export function warn(valid: boolean, message: string) {
   // Support uglify
   if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {

tests/__snapshots__/index.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BasicLayout 🥩 base use 1`] = `
+<div class="ant-pro-basicLayout ant-pro-basicLayout-side">
+  <section class="ant-layout ant-pro-basicLayout">
+    <!---->
+    <aside class="ant-pro-sider ant-pro-sider-light ant-pro-sider-side ant-layout-sider ant-layout-sider-light" style="flex: 0 0 208px; max-width: 208px; min-width: 208px; width: 208px;">
+      <div class="ant-layout-sider-children">
+        <div class="ant-pro-sider-logo"><a><img src="https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg" alt="logo">
+            <h1>Pro Tests</h1>
+          </a></div>
+        <div style="flex: 1; overflow: hidden auto;">
+          <ul role="menu" class="ant-pro-sider-menu ant-menu-light ant-menu-root ant-menu ant-menu-inline" style="width: 100%;"></ul>
+        </div>
+        <div class="ant-pro-sider-links">
+          <ul role="menu" class="ant-pro-sider-link-menu ant-menu-light ant-menu-root ant-menu ant-menu-inline">
+            <!---->
+            <li role="menuitem" style="padding-left: 16px;" class="ant-pro-sider-collapsed-button ant-menu-item"><span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold"><svg class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span>
+              <!---->
+            </li>
+          </ul>
+        </div>
+      </div>
+      <!---->
+    </aside>
+    <section class="ant-layout" style="position: relative; min-height: 0;">
+      <!---->
+      <header class="ant-layout-header" style="padding: 0px; height: 48px; line-height: 48px; width: 100%; z-index: 19;">
+        <div class="ant-pro-global-header ant-pro-global-header-layout-side">
+          <!---->
+          <!---->
+          <!---->
+          <div style="flex: 1;">
+            <!---->
+          </div>
+          <div class="custom-header-right-content"><span>custom-right-content</span></div>
+        </div>
+      </header>
+      <main class="ant-layout-content ant-pro-basicLayout-content ant-pro-basicLayout-has-header" style="min-height: 300px;">
+        <div>content</div>
+      </main>
+      <div>custom-footer</div>
+    </section>
+  </section>
+</div>
+`;

tests/_utils/mock-func.ts

+window.matchMedia = jest.fn().mockImplementation(query => {
+  return {
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  };
+});

tests/index.test.tsx

-import { mount, shallowMount } from '@vue/test-utils';
+import './_utils/mock-func';
+import { mount } from '@vue/test-utils';
 import BasicLayout from '../src/BasicLayout';
 
-describe('BasicLayout', () => {
+const title = 'Pro Tests';
+const logoSrc = 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg';
 
+describe('BasicLayout', () => {
   it('🥩 base use', () => {
-    // const wrapper = mount({
-    //   render() {
-    //     return (
-    //       <BasicLayout />
-    //     )
-    //   },
-    // });
-    // console.log(wrapper.html());
+    const wrapper = mount({
+      render() {
+        return (
+          <BasicLayout
+            title={title}
+            logo={logoSrc}
+            layout="side"
+            navTheme="light"
+            contentWidth="Fluid"
+            contentStyle={{ minHeight: '300px' }}
+            rightContentRender={() => (
+              <div class="custom-header-right-content">
+                <span>custom-right-content</span>
+              </div>
+            )}
+            footerRender={() => <div>custom-footer</div>}
+          >
+            <div>content</div>
+          </BasicLayout>
+        );
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
+  it('😄 custom title, logo', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <BasicLayout title={title} logo={logoSrc}>
+            <div>content</div>
+          </BasicLayout>
+        );
+      },
+    });
+
+    const renderTitle = wrapper.find('.ant-pro-sider-logo h1');
+    const renderLogo = wrapper.find('.ant-pro-sider-logo img');
+    expect(renderTitle.element.innerHTML).toEqual(title);
+    expect(renderLogo.attributes()).toHaveProperty('src', logoSrc);
+  });
 });