Skip to content

Instantly share code, notes, and snippets.

Avatar

Thibaud Duthoit tidusia

View GitHub Profile
View New Button Story.ts
import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
import Button from ".";
import { userEvent, within, waitFor } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
export default {
component: Button,
argTypes: {
onClick: { action: true },
},
View React SVG Component.tsx
import React, { FunctionComponent } from "react";
const Menu: FunctionComponent<React.SVGProps<SVGSVGElement>> = (props) => (
<svg stroke="currentColor" fill="none" viewBox="0 0 24 24" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
View .dockerignore.txt
# Global docker ignore
**/.dockerignore
docker-compose.yml
Dockerfile*
*.dockerfile
.git/
# Nodejs app ignore
node_modules/
View Should play the story interaction.ts
test("should play the story interaction", async () => {
const onClick = jest.fn();
const { container } = render(<Default onClick={onClick} />);
await Default.play({ canvasElement: container });
expect(onClick).toHaveBeenCalledTimes(1);
});
@tidusia
tidusia / context-based-compound-component.js
Created Dec 22, 2021
Context based Compound Component example
View context-based-compound-component.js
// Flexible Compound Components - epicreact.dev
import * as React from 'react'
import {Switch} from '../switch'
// 📜 https://reactjs.org/docs/context.html#reactcreatecontext
const ToggleContext = React.createContext()
ToggleContext.displayName = 'ToggleContext'
function Toggle({children}) {
View React TS Story.ts
import { ComponentMeta } from "@storybook/react";
import COMPONENT_NAME from ".";
import { userEvent, within } from "@storybook/testing-library";
export default {
component: COMPONENT_NAME,
decorators: [(story) => <div>{story()}</div>],
parameters: {
layout: "centered",
},
View mws setupServer.ts
const server = setupServer(
rest.get("/jobs", (req, res, ctx) => res(ctx.json(fixtures.jobs))),
);
beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterAll(() => server.close());
afterEach(() => server.resetHandlers());
View mock react-modal.ts
jest.mock("react-modal", () => ({ children }: any) => children);
View Should be accessible and match snapshot.ts
test("should be accessible and match snapshot", async () => {
const { container } = render(<Default {...props} />);
expect(await axe(container)).toHaveNoViolations();
expect(container.firstChild).toMatchSnapshot();
});
View Should match snapshot.ts
test("should match snapshot", () => {
const { container } = render(<Default {...props} />);
expect(container.firstChild).toMatchSnapshot();
});