test: update page-header test

Author: tangjinzhou

components/_util/props-util/index.js

@@ -333,6 +333,10 @@ export function isFragment(c) {
   return c.length === 1 && c[0].type === Fragment;
 }
 
+export function isEmptyContent(c) {
+  return c === undefined || c === null || c === '' || (Array.isArray(c) && c.length === 0);
+}
+
 export function isEmptyElement(c) {
   return (
     c.type === Comment ||

components/page-header/__tests__/__snapshots__/index.test.js.snap

@@ -19,15 +19,20 @@ exports[`PageHeader pageHeader should support class 1`] = `
   <div
     class="ant-page-header-heading"
   >
-    <!---->
-    <!---->
-    <span
-      class="ant-page-header-heading-title"
+    <div
+      class="ant-page-header-heading-left"
     >
-      Page Title
-    </span>
-    <!---->
-    <!---->
+      <!---->
+      <!---->
+      <span
+        class="ant-page-header-heading-title"
+        title="Page Title"
+      >
+        Page Title
+      </span>
+      <!---->
+      <!---->
+    </div>
     <!---->
   </div>
   <!---->

components/page-header/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, ExtractPropTypes, ref, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { flattenChildren } from '../_util/props-util';
+import { filterEmpty, flattenChildren, isEmptyContent } from '../_util/props-util';
 import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
 import ArrowRightOutlined from '@ant-design/icons-vue/ArrowRightOutlined';
 import Breadcrumb from '../breadcrumb';
@@ -39,7 +39,7 @@ const PageHeader = defineComponent({
     const onResize = ({ width }: { width: number }) => {
       compact.value = width < 768;
     };
-    const ghost = computed(() => props.ghost ?? pageHeader.value?.ghost ?? false);
+    const ghost = computed(() => props.ghost ?? pageHeader.value?.ghost ?? true);
 
     const getBackIcon = () => {
       return (
@@ -123,7 +123,10 @@ const PageHeader = defineComponent({
     };
 
     const renderFooter = () => {
-      return <div class={`${prefixCls.value}-footer`}>{props.footer ?? slots.footer?.()}</div>;
+      const footer = props.footer ?? filterEmpty(slots.footer?.());
+      return isEmptyContent(footer) ? null : (
+        <div class={`${prefixCls.value}-footer`}>{footer}</div>
+      );
     };
 
     const renderChildren = (children: any) => {

package.json

@@ -160,6 +160,7 @@
     "querystring": "^0.2.0",
     "raw-loader": "^4.0.2",
     "reqwest": "^2.0.5",
+    "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.0",
     "rucksack-css": "^1.0.2",
     "selenium-server": "^3.0.1",

tests/setup.js

@@ -23,6 +23,8 @@ if (typeof window !== 'undefined') {
   }
 }
 
+global.ResizeObserver = require('resize-observer-polyfill');
+
 // The built-in requestAnimationFrame and cancelAnimationFrame not working with jest.runFakeTimes()
 // https://github.com/facebook/jest/issues/5147
 global.requestAnimationFrame = function(cb) {