mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: fix site issue
This commit is contained in:
parent
a77f1aa8fc
commit
04da1f3fdf
@ -6,7 +6,7 @@ import classNames from 'classnames';
|
|||||||
import DemoContext from '../../slots/DemoContext';
|
import DemoContext from '../../slots/DemoContext';
|
||||||
|
|
||||||
const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
|
const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
|
||||||
const { showDebug, setShowDebug, setDebugDemos } = useContext(DemoContext);
|
const { showDebug, setShowDebug } = useContext(DemoContext);
|
||||||
|
|
||||||
const [expandAll, setExpandAll] = useState(false);
|
const [expandAll, setExpandAll] = useState(false);
|
||||||
|
|
||||||
@ -18,16 +18,12 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
|
|||||||
setShowDebug?.(!showDebug);
|
setShowDebug?.(!showDebug);
|
||||||
};
|
};
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
|
||||||
setDebugDemos?.(items.filter(item => item.previewerProps.debug).map(item => item.demo.id));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleExpandToggle = () => {
|
const handleExpandToggle = () => {
|
||||||
setExpandAll(!expandAll);
|
setExpandAll(!expandAll);
|
||||||
};
|
};
|
||||||
|
|
||||||
const visibleDemos = showDebug ? items : items.filter(item => !item.previewerProps.debug);
|
const visibleDemos = showDebug ? items : items.filter((item) => !item.previewerProps.debug);
|
||||||
const filteredItems = visibleDemos.map(item => ({
|
const filteredItems = visibleDemos.map((item) => ({
|
||||||
...item,
|
...item,
|
||||||
previewerProps: { ...item.previewerProps, expand: expandAll },
|
previewerProps: { ...item.previewerProps, expand: expandAll },
|
||||||
}));
|
}));
|
||||||
|
@ -115,14 +115,17 @@ const Content: FC<{ children: ReactNode }> = ({ children }) => {
|
|||||||
const { direction } = useContext(SiteContext);
|
const { direction } = useContext(SiteContext);
|
||||||
|
|
||||||
const [showDebug, setShowDebug] = useState(false);
|
const [showDebug, setShowDebug] = useState(false);
|
||||||
const [debugDemos, setDebugDemos] = useState<string[]>([]);
|
const debugDemos = useMemo(
|
||||||
|
() => meta.toc?.filter((item) => item._debug_demo).map((item) => item.id) || [],
|
||||||
|
[meta],
|
||||||
|
);
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
setShowDebug(process.env.NODE_ENV === 'development');
|
setShowDebug(process.env.NODE_ENV === 'development');
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const contextValue = useMemo<DemoContextProps>(
|
const contextValue = useMemo<DemoContextProps>(
|
||||||
() => ({ showDebug, setShowDebug, debugDemos, setDebugDemos }),
|
() => ({ showDebug, setShowDebug }),
|
||||||
[showDebug, debugDemos],
|
[showDebug, debugDemos],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -7,8 +7,6 @@ export type DemoContextProps = {
|
|||||||
const DemoContext = createContext<{
|
const DemoContext = createContext<{
|
||||||
showDebug?: boolean;
|
showDebug?: boolean;
|
||||||
setShowDebug?: (showDebug: boolean) => void;
|
setShowDebug?: (showDebug: boolean) => void;
|
||||||
debugDemos?: string[];
|
|
||||||
setDebugDemos?: (visibleItems: string[]) => void;
|
|
||||||
}>({});
|
}>({});
|
||||||
|
|
||||||
export default DemoContext;
|
export default DemoContext;
|
||||||
|
@ -21,7 +21,7 @@ FloatButton. Available since `5.0.0`.
|
|||||||
<code src="./demo/shape.tsx" iframe>Shape</code>
|
<code src="./demo/shape.tsx" iframe>Shape</code>
|
||||||
<code src="./demo/description.tsx" iframe>Description</code>
|
<code src="./demo/description.tsx" iframe>Description</code>
|
||||||
<code src="./demo/tooltip.tsx" iframe>FloatButton with tooltip</code>
|
<code src="./demo/tooltip.tsx" iframe>FloatButton with tooltip</code>
|
||||||
<code src="./demo/group.tsx" iframe>FloatButton Group</code>
|
<code src="./demo/group.tsx" iframe="300">FloatButton Group</code>
|
||||||
<code src="./demo/group-menu.tsx" iframe>Menu mode</code>
|
<code src="./demo/group-menu.tsx" iframe>Menu mode</code>
|
||||||
<code src="./demo/back-top.tsx" iframe>BackTop</code>
|
<code src="./demo/back-top.tsx" iframe>BackTop</code>
|
||||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||||
|
@ -22,7 +22,7 @@ demo:
|
|||||||
<code src="./demo/shape.tsx" iframe>形状</code>
|
<code src="./demo/shape.tsx" iframe>形状</code>
|
||||||
<code src="./demo/description.tsx" iframe>描述</code>
|
<code src="./demo/description.tsx" iframe>描述</code>
|
||||||
<code src="./demo/tooltip.tsx" iframe>含有气泡卡片的悬浮按钮</code>
|
<code src="./demo/tooltip.tsx" iframe>含有气泡卡片的悬浮按钮</code>
|
||||||
<code src="./demo/group.tsx" iframe>浮动按钮组</code>
|
<code src="./demo/group.tsx" iframe="300">浮动按钮组</code>
|
||||||
<code src="./demo/group-menu.tsx" iframe>菜单模式</code>
|
<code src="./demo/group-menu.tsx" iframe>菜单模式</code>
|
||||||
<code src="./demo/back-top.tsx" iframe>回到顶部</code>
|
<code src="./demo/back-top.tsx" iframe>回到顶部</code>
|
||||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||||
|
@ -14,14 +14,14 @@ const components = uniq(
|
|||||||
cwd: join(process.cwd()),
|
cwd: join(process.cwd()),
|
||||||
dot: false,
|
dot: false,
|
||||||
})
|
})
|
||||||
.map(path => path.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '')),
|
.map((path) => path.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '')),
|
||||||
);
|
);
|
||||||
|
|
||||||
describe('site test', () => {
|
describe('site test', () => {
|
||||||
let server;
|
let server;
|
||||||
const port = 3000;
|
const port = 3000;
|
||||||
const render = async path => {
|
const render = async (path) => {
|
||||||
const resp = await fetch(`http://127.0.0.1:${port}${path}`).then(async res => {
|
const resp = await fetch(`http://127.0.0.1:${port}${path}`).then(async (res) => {
|
||||||
const html = await res.text();
|
const html = await res.text();
|
||||||
const $ = cheerio.load(html, { decodeEntities: false, recognizeSelfClosing: true });
|
const $ = cheerio.load(html, { decodeEntities: false, recognizeSelfClosing: true });
|
||||||
return {
|
return {
|
||||||
@ -33,12 +33,12 @@ describe('site test', () => {
|
|||||||
return resp;
|
return resp;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleComponentName = name => {
|
const handleComponentName = (name) => {
|
||||||
const componentName = name.split('/')[1];
|
const componentName = name.split('/')[1];
|
||||||
return componentName.toLowerCase().replace('-', '');
|
return componentName.toLowerCase().replace('-', '');
|
||||||
};
|
};
|
||||||
|
|
||||||
const expectComponent = async component => {
|
const expectComponent = async (component) => {
|
||||||
const { status, $ } = await render(`/${component}/`);
|
const { status, $ } = await render(`/${component}/`);
|
||||||
expect(status).toBe(200);
|
expect(status).toBe(200);
|
||||||
expect($('h1').text().toLowerCase()).toMatch(handleComponentName(component));
|
expect($('h1').text().toLowerCase()).toMatch(handleComponentName(component));
|
||||||
@ -59,8 +59,7 @@ describe('site test', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// FIXME: should not skip if helmet is done
|
it('Basic Pages en', async () => {
|
||||||
it.skip('Basic Pages en', async () => {
|
|
||||||
const { status, $ } = await render('/');
|
const { status, $ } = await render('/');
|
||||||
expect($('title').text()).toEqual(
|
expect($('title').text()).toEqual(
|
||||||
`Ant Design - The world's second most popular React UI framework`,
|
`Ant Design - The world's second most popular React UI framework`,
|
||||||
@ -68,7 +67,7 @@ describe('site test', () => {
|
|||||||
expect(status).toBe(200);
|
expect(status).toBe(200);
|
||||||
});
|
});
|
||||||
|
|
||||||
it.skip('Basic Pages zh', async () => {
|
it('Basic Pages zh', async () => {
|
||||||
const { status, $ } = await render('/index-cn');
|
const { status, $ } = await render('/index-cn');
|
||||||
expect($('title').text()).toEqual(`Ant Design - 一套企业级 UI 设计语言和 React 组件库`);
|
expect($('title').text()).toEqual(`Ant Design - 一套企业级 UI 设计语言和 React 组件库`);
|
||||||
expect(status).toBe(200);
|
expect(status).toBe(200);
|
||||||
|
Loading…
Reference in New Issue
Block a user