mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: render footer as a component instead of render prop (#5970)
* feat: render footer as a component instead of render prop * Export FooterCenter as footer * remove useDevice export * revert some changes * remove * add spec * update specs * parse children into a dictionary * factor app footer components into a single file * Add docs * split app footer components Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
parent
d2e371cdf0
commit
b704705ed8
17 changed files with 232 additions and 160 deletions
|
@ -1,5 +1,5 @@
|
|||
import { fireEvent, GlobalTestState, render } from "../test-utils";
|
||||
import { Excalidraw } from "../../packages/excalidraw/index";
|
||||
import { Excalidraw, Footer } from "../../packages/excalidraw/index";
|
||||
import { queryByText, queryByTestId } from "@testing-library/react";
|
||||
import { GRID_SIZE, THEME } from "../../constants";
|
||||
import { t } from "../../i18n";
|
||||
|
@ -49,6 +49,31 @@ describe("<Excalidraw/>", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("should render the footer only when Footer is passed as children", async () => {
|
||||
//Footer not passed hence it will not render the footer
|
||||
let { container } = await render(
|
||||
<Excalidraw>
|
||||
<div>This is a custom footer</div>
|
||||
</Excalidraw>,
|
||||
);
|
||||
expect(
|
||||
container.querySelector(".layer-ui__wrapper__footer-center"),
|
||||
).toBeEmptyDOMElement();
|
||||
|
||||
// Footer passed hence it will render the footer
|
||||
({ container } = await render(
|
||||
<Excalidraw>
|
||||
<Footer>
|
||||
<div>This is a custom footer</div>
|
||||
</Footer>
|
||||
</Excalidraw>,
|
||||
));
|
||||
expect(
|
||||
container.querySelector(".layer-ui__wrapper__footer-center")?.innerHTML,
|
||||
).toMatchInlineSnapshot(
|
||||
`"<div class=\\"layer-ui__wrapper__footer-center zen-mode-transition\\"><div>This is a custom footer</div></div>"`,
|
||||
);
|
||||
});
|
||||
describe("Test gridModeEnabled prop", () => {
|
||||
it('should show grid mode in context menu when gridModeEnabled is "undefined"', async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue