Skip to content

P
pro-layout
Commit 823cd30f authored by Sendya's avatar Sendya
Browse files
Options

test: add page-container

parent b889a426
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 48 deletions
.babelrc deleted 100644 → 0
View file @ b889a426
{
"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
View file @ 823cd30f
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: {
......
src/PageContainer/index.tsx
View file @ 823cd30f
......@@ -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 0 → 100644
View file @ 823cd30f
// 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
View file @ 823cd30f
......@@ -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);
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment