Tests

feat(mdx-loader): the table-of-contents should display props passed to headings of imported MDX partials #4250

Triggered via pull request January 21, 2024 20:27

anatolykopyl

opened #9773

anatolykopyl:props-in-headings

Status Failure

Total duration 2m 48s

Artifacts –

tests.yml

on: pull_request

Matrix: Tests

Annotations

32 errors

toc remark plugin › outputs empty array for no TOC: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L38

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin outputs empty array for no TOC 1` - Snapshot - 1 + Received + 15 @@ -1,7 +1,21 @@ "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; - export const toc = []; + export const partialProps = []; + export const toc = []; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:38:20)

toc remark plugin › works on non text phrasing content: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L51

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin works on non text phrasing content 1` - Snapshot - 0 + Received + 14 @@ -1,6 +1,7 @@ "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; + export const partialProps = []; export const toc = [{ "value": "Emphasis", "id": "emphasis", "level": 2 }, { @@ -22,10 +23,23 @@ }, { "value": "some styled heading weird char\"> test", "id": "some-styled-heading--test", "level": 2 }]; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { code: "code", del: "del", em: "em", at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:51:20)

toc remark plugin › escapes inline code: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L56

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin escapes inline code 1` - Snapshot - 0 + Received + 14 @@ -1,6 +1,7 @@ "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; + export const partialProps = []; export const toc = [{ "value": "<code><Head /></code>", "id": "head-", "level": 2 }, { @@ -22,10 +23,23 @@ }, { "value": "<code><div>Test</div></code>", "id": "divitestidiv-1", "level": 2 }]; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:56:20)

toc remark plugin › works on text content: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L61

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin works on text content 1` - Snapshot - 0 + Received + 14 @@ -1,7 +1,8 @@ "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; export const c = 1; + export const partialProps = []; export const toc = [{ "value": "Endi", "id": "endi", "level": 3 }, { @@ -15,10 +16,23 @@ }, { "value": "I ♥ unicode.", "id": "i--unicode", "level": 2 }]; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { code: "code", h2: "h2", h3: "h3", at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:61:20)

toc remark plugin › inserts below imports: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L71

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin inserts below imports 1` - Snapshot - 0 + Received + 14 @@ -1,8 +1,9 @@ "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import something from 'something'; import somethingElse from 'something-else'; + export const partialProps = []; export const toc = [{ "value": "Title", "id": "title", "level": 2 }, { @@ -12,10 +13,23 @@ }, { "value": "Again", "id": "again", "level": 3 }]; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { h2: "h2", h3: "h3", p: "p", at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:71:20)

toc remark plugin › handles empty headings: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L76

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin handles empty headings 1` - Snapshot - 1 + Received + 15 @@ -1,7 +1,21 @@ "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; - export const toc = []; + export const partialProps = []; + export const toc = []; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { h1: "h1", h2: "h2", img: "img", at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:76:20)

toc remark plugin › works with imported markdown: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L81

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin works with imported markdown 1` - Snapshot - 4 + Received + 18 @@ -2,31 +2,45 @@ import Partial1, {toc as __tocPartial1} from './_partial1.md'; import SomeComponent from './SomeComponent'; import Partial2, {toc as __tocPartial2} from './_partial2.md'; import UnusedPartialImport from './_partial3.md'; import DoesNotExist, {toc as __tocDoesNotExist} from './_doesNotExist.md'; + export const partialProps = []; export const toc = [{ "value": "Index section 1", "id": "index-section-1", "level": 2 - }, ...__tocPartial1, { + }, ...placeProps(__tocPartial1, 'Partial1'), { "value": "Index section 2", "id": "index-section-2", "level": 2 - }, ...__tocPartial2, { + }, ...placeProps(__tocPartial2, 'Partial2'), { "value": "Unused partials", "id": "unused-partials", "level": 2 }, { "value": "NonExisting Partials", "id": "nonexisting-partials", "level": 2 - }, ...__tocDoesNotExist, { + }, ...placeProps(__tocDoesNotExist, 'DoesNotExist'), { "value": "Duplicate partials", "id": "duplicate-partials", "level": 2 - }, ...__tocPartial1, ...__tocPartial1]; + }, ...placeProps(__tocPartial1, 'Partial1'), ...placeProps(__tocPartial1, 'Partial1')]; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { h1: "h1", h2: "h2", p: "p", at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:81:20)

toc remark plugin › works with partials importing other partials: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L86

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin works with partials importing other partials 1` - Snapshot - 1 + Received + 15 @@ -1,16 +1,30 @@ "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import Partial2Nested, {toc as __tocPartial2Nested} from './partial2-nested.md'; + export const partialProps = []; export const toc = [{ "value": "Partial 2", "id": "partial-2", "level": 2 }, { "value": "Partial 2 Sub Heading", "id": "partial-2-sub-heading", "level": 3 - }, ...__tocPartial2Nested]; + }, ...placeProps(__tocPartial2Nested, 'Partial2Nested')]; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { h2: "h2", h3: "h3", p: "p", at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:86:20)

toc remark plugin › works with partial imported after its usage: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L93

expect(received).toMatchSnapshot() Snapshot name: `toc remark plugin works with partial imported after its usage 1` - Snapshot - 1 + Received + 15 @@ -1,8 +1,22 @@ "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import Partial, {toc as __tocPartial} from './_partial.md'; - export const toc = [...__tocPartial]; + export const partialProps = []; + export const toc = [...placeProps(__tocPartial, 'Partial')]; + function placeProps(toc, componentName) { + const componentProps = partialProps.filter(partialProp => partialProp.componentName === componentName); + return toc.map(tocItem => { + let value = tocItem.value; + for (let componentProp of componentProps) { + value = value.replace('props.' + componentProp.propName, componentProp.propValue); + } + return { + ...tocItem, + value + }; + }); + } function _createMdxContent(props) { const _components = { h1: "h1", p: "p", ...props.components at Object.toMatchSnapshot (packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts:93:20)

Tests (20)

Process completed with exit code 1.

Tests (18)

The job was canceled because "_20" failed.

toc remark plugin › outputs empty array for no TOC: packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts#L38