Skip to content

Instantly share code, notes, and snippets.

it('should handle uncontrolled value and change callback', () => {
const onToggleSpy = jest.fn();
const { clickHeader } = mountUsage(<Zippy header={'header'} onToggle={onToggleSpy}/>);
clickHeader();
expect(onToggleSpy).toBeCalledWith(true);
clickHeader();
expect(onToggleSpy).toBeCalledWith(false);
expect(onToggleSpy).toHaveBeenCalledTimes(2);
});
it('should work when value is controlled but changes are ignored (readonly mode)', () => {
const { clickHeader, isOpen } = mountUsage(<Zippy header={'header'} open={true}/>);
expect(isOpen()).toEqual(true);
clickHeader();
expect(isOpen()).toEqual(true);
clickHeader();
expect(isOpen()).toEqual(true);
});
it('should work in controlled mode', () => {
class ControlledUsage extends React.Component<{}, { counter: number, open: boolean }> {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
}
state = {
counter: 0,
open: true,
@alirezamirian
alirezamirian / webstorm-markdown-preview-github-style.css
Last active April 13, 2022 21:01
Github markdown theme for webstorm's markdown preview. just use this url in "Settings -> Languages & Frameworks -> Markdown -> Custom CSS -> Load from URI": https://gistcdn.githack.com/alirezamirian/aa06088df9310a4fccccb369a74815ac/raw/3004f7d4d3e1c0263b546aead7310fd8a34d1b12/webstorm-markdown-preview-github-style.css
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
color: #24292e;
background-color: #fff;
}
@alirezamirian
alirezamirian / ThemedStyledComponentsModule.ts
Created May 4, 2025 09:13
Temporary solution for ThemedStyledComponentsModule that's missing in styled-components@6. See https://github.com/styled-components/styled-components/issues/4062
import * as React from "react";
import {
AnyComponent,
BaseObject,
ExecutionProps,
Interpolation,
KnownTarget,
NoInfer,
RuleSet,
Styles,