@yak/react 0.0.0-stage → 10.0.0-rc.1

package/runtime/__tests__/attrs.test.tsx

@@ -0,0 +1,490 @@
+import React, { FunctionComponent } from "react";
+import { render } from "@testing-library/react";
+import { beforeEach, expect, describe, it, vi } from "vitest";
+import { YakThemeProvider } from "../context";
+import { styled as styledFn } from "../styled";
+
+// This transform is usually done by the SWC plugin.
+// However this `attrs.test.tsx` does not compile
+// the code before testing
+const styled = Object.assign(styledFn, {
+  div: styledFn("div"),
+  h1: styledFn("h1"),
+  button: styledFn("button"),
+  a: styledFn("a"),
+  p: styledFn("p"),
+  span: styledFn("span"),
+}) as typeof styledFn;
+
+beforeEach(() => {
+  vi.spyOn(console, "warn");
+});
+
+type DataAttributes = { [key: `data-${string}`]: any };
+
+const getSnapshot = (element: React.ReactElement) => render(element).container.firstChild;
+
+it("works fine with an empty object", () => {
+  const Comp = styled.div.attrs({})``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`<div />`);
+});
+
+it("works fine with a function that returns an empty object", () => {
+  const Comp = styled.div.attrs(() => ({}))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`<div />`);
+});
+
+it("pass a simple attr via object", () => {
+  const Comp = styled.button.attrs({
+    type: "button",
+  })``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      type="button"
+    />
+  `);
+});
+
+it("pass a simple attr via function with object return", () => {
+  const Comp = styled.button.attrs(() => ({
+    type: "button",
+  }))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      type="button"
+    />
+  `);
+});
+
+it("pass a React component", () => {
+  const ReactComponent: FunctionComponent = () => <p>React Component</p>;
+
+  type ButtonProps = {
+    component: FunctionComponent;
+  };
+
+  const Button = ({ component: ChildComponent }: ButtonProps) => (
+    <button>
+      <ChildComponent />
+    </button>
+  );
+
+  const Comp = styled(Button).attrs<Partial<ButtonProps>>(() => ({
+    component: ReactComponent,
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button>
+      <p>
+        React Component
+      </p>
+    </button>
+  `);
+});
+
+it("should not call a function passed to attrs as an object value", () => {
+  const stub = vi.fn(() => "div");
+
+  const Comp = styled.button.attrs<{ foo?: typeof stub }>(() => ({
+    foo: stub,
+  }))``;
+
+  render(<Comp />);
+
+  expect(stub).not.toHaveBeenCalled();
+});
+
+it("pass props to the attr function", () => {
+  const Comp = styled.button.attrs<{ $submit?: boolean }>((p) => ({
+    type: p.$submit ? "submit" : "button",
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp $submit />)).toMatchInlineSnapshot(`
+    <button
+      type="submit"
+    />
+  `);
+});
+
+it("should replace props with attrs", () => {
+  const Comp = styled.button.attrs<{ $submit?: boolean }>((p) => ({
+    type: p.$submit ? "submit" : "button",
+    tabIndex: 0,
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      tabindex="0"
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp type="reset" />)).toMatchInlineSnapshot(`
+    <button
+      tabindex="0"
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp type="reset" tabIndex={-1} />)).toMatchInlineSnapshot(`
+    <button
+      tabindex="0"
+      type="button"
+    />
+  `);
+});
+
+it("should merge className", () => {
+  const Comp = styled.div.attrs(() => ({
+    className: "meow nya",
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div
+      class="meow nya"
+    />
+  `);
+});
+
+it("should merge className from folded attrs", () => {
+  const Inner = styled.div.attrs({ className: "foo" })``;
+
+  const Comp = styled(Inner).attrs(() => ({
+    className: "meow nya",
+  }))``;
+
+  expect(getSnapshot(<Comp className="something" />)).toMatchInlineSnapshot(`
+    <div
+      class="something foo meow nya"
+    />
+  `);
+});
+
+it("should merge className even if its a function", () => {
+  const Comp = styled.div.attrs<{ $purr?: boolean }>((p) => ({
+    className: `meow ${p.$purr ? "purr" : "nya"}`,
+  }))``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div
+      class="meow nya"
+    />
+  `);
+  expect(getSnapshot(<Comp $purr />)).toMatchInlineSnapshot(`
+    <div
+      class="meow purr"
+    />
+  `);
+});
+
+it("should merge style", () => {
+  const Comp = styled.div.attrs(() => ({
+    style: { color: "red", background: "blue" },
+  }))``;
+
+  expect(getSnapshot(<Comp style={{ color: "green", borderStyle: "dotted" }} />))
+    .toMatchInlineSnapshot(`
+    <div
+      style="color: red; border-style: dotted; background: blue;"
+    />
+  `);
+});
+
+it("should work with data and aria attributes", () => {
+  const Comp = styled.div.attrs<DataAttributes>(() => ({
+    "data-foo": "bar",
+    "aria-label": "A simple FooBar",
+  }))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div
+      aria-label="A simple FooBar"
+      data-foo="bar"
+    />
+  `);
+});
+
+it("merge attrs when inheriting SC", () => {
+  let attrsCallCount = 0;
+  const Parent = styled.button.attrs(() => {
+    // Parent should be called first and only once
+    // to behave exactly like styled-components
+    expect(attrsCallCount).toEqual(0);
+    attrsCallCount++;
+    return {
+      type: "button",
+      tabIndex: 0,
+    };
+  })``;
+  const Child = styled(Parent).attrs(() => {
+    // Child should be called second and only once
+    // to behave exactly like styled-components
+    expect(attrsCallCount).toEqual(1);
+    attrsCallCount++;
+    return {
+      type: "submit",
+    };
+  })``;
+  expect(getSnapshot(<Child />)).toMatchInlineSnapshot(`
+    <button
+      tabindex="0"
+      type="submit"
+    />
+  `);
+});
+
+it("overrides attrs of the wrapped component and appends its style class", () => {
+  // styled(SubmitButton) renders as a single flattened wrapper — this pins
+  // that flattening keeps styled-components semantics: the outer attrs win
+  // and the outer class comes after the inner one
+  // @ts-expect-error calling with a class name string mimics the compiled css form
+  const SubmitButton = styled.button.attrs({ type: "submit" })("submit_btn");
+  // @ts-expect-error calling with a class name string mimics the compiled css form
+  const ResetButton = styled(SubmitButton).attrs({ type: "reset" })("reset_btn");
+
+  expect(getSnapshot(<SubmitButton />)).toMatchInlineSnapshot(`
+    <button
+      class="submit_btn"
+      type="submit"
+    />
+  `);
+  expect(getSnapshot(<ResetButton />)).toMatchInlineSnapshot(`
+    <button
+      class="submit_btn reset_btn"
+      type="reset"
+    />
+  `);
+});
+
+it("pass attrs to style block", () => {
+  /* Would be a React Router Link in real life */
+  const Comp = styled.a.attrs<DataAttributes>(() => ({
+    href: "#",
+    "data-active-class-name": "--is-active",
+    // @ts-expect-error
+  }))("c1", {
+    style: {
+      "--testVar": (props: any) => props["data-active-class-name"] && "c2",
+    },
+  });
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <a
+      class="c1"
+      data-active-class-name="--is-active"
+      href="#"
+      style="--testVar: c2;"
+    />
+  `);
+});
+
+it("should pass through children as a normal prop", () => {
+  const Comp = styled.div.attrs(() => ({
+    children: "Probably a bad idea",
+  }))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div>
+      Probably a bad idea
+    </div>
+  `);
+});
+
+it("should pass through complex children as well", () => {
+  const Comp = styled.div.attrs(() => ({
+    children: <span>Probably a bad idea</span>,
+  }))``;
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <div>
+      <span>
+        Probably a bad idea
+      </span>
+    </div>
+  `);
+});
+
+it("should override children", () => {
+  const X = styled.div``;
+  type XProps = React.ComponentProps<typeof X>["children"] & React.JSX.Element;
+  const Comp = styled.div.attrs(() => ({
+    children: <span>Amazing</span>,
+  }))``;
+  expect(getSnapshot(<Comp>Something else</Comp>)).toMatchInlineSnapshot(`
+    <div>
+      <span>
+        Amazing
+      </span>
+    </div>
+  `);
+});
+
+it('should shallow merge "style" prop + attr instead of overwriting', () => {
+  const Paragraph = styled.p.attrs<{ $fontScale?: number }>((p) => ({
+    style: {
+      ...p.style,
+      fontSize: `${p.$fontScale}em`,
+    },
+  }))<{ $fontScale: number }>``;
+
+  const Text: FunctionComponent<Partial<React.ComponentProps<typeof Paragraph>>> = (props) => {
+    const fontScale = 4;
+
+    return (
+      <Paragraph $fontScale={fontScale} {...props}>
+        {props.children}
+      </Paragraph>
+    );
+  };
+
+  const BlueText = styled(Text).attrs(() => ({
+    style: {
+      color: "blue",
+    },
+  }))``;
+
+  expect(getSnapshot(<BlueText>Hello</BlueText>)).toMatchInlineSnapshot(`
+    <p
+      style="color: blue; font-size: 4em;"
+    >
+      Hello
+    </p>
+  `);
+});
+
+it("does not pass transient props to HTML element", () => {
+  type CompProps = { $textColor: string };
+
+  const Comp = styled.div<CompProps>`
+    color: ${(props) => props.$textColor};
+  `;
+
+  const StyledComp = styled(Comp).attrs<Partial<CompProps>>(() => ({
+    $textColor: "red",
+  }))``;
+
+  expect(getSnapshot(<StyledComp />)).toMatchInlineSnapshot(`<div />`);
+});
+
+it.skip('should apply given "as" prop to the progressive type', () => {
+  const Comp = styled.div.attrs<{ as?: any }>({ as: "video" as const })``;
+
+  //@ts-expect-error
+  expect(getSnapshot(<Comp loop />)).toMatchInlineSnapshot();
+});
+
+// our own tests
+it("should remap props", () => {
+  const Comp = styled.button.attrs<{ primary?: boolean; $submit?: boolean }>((p) => ({
+    type: p.$submit ? "submit" : "button",
+    $disabled: p.disabled,
+  }))<{ $disabled?: boolean }>``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`
+    <button
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp disabled />)).toMatchInlineSnapshot(`
+    <button
+      disabled=""
+      type="button"
+    />
+  `);
+  expect(getSnapshot(<Comp $submit />)).toMatchInlineSnapshot(`
+    <button
+      type="submit"
+    />
+  `);
+});
+
+it("should have optional attrs props as component interface", () => {
+  const Comp = styled.h1.attrs<{ $primary?: boolean }>({
+    $primary: true,
+  })``;
+
+  expect(getSnapshot(<Comp />)).toMatchInlineSnapshot(`<h1 />`);
+  expect(getSnapshot(<Comp $primary />)).toMatchInlineSnapshot(`<h1 />`);
+});
+
+it("should have access to theme", () => {
+  const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
+    <pre {...props}>{JSON.stringify(theme)}</pre>
+  );
+  const Comp = styled(ThemePrinter).attrs<DataAttributes>((p) => ({
+    "data-color": (p.theme as { color: string }).color,
+  }))``;
+
+  expect(
+    getSnapshot(
+      <YakThemeProvider theme={{ color: "red" }}>
+        <Comp />
+      </YakThemeProvider>,
+    ),
+  ).toMatchInlineSnapshot(`
+    <pre
+      data-color="red"
+    />
+  `);
+});
+
+it("should pass theme if theme is overwritten", () => {
+  const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
+    <pre {...props}>{JSON.stringify(theme)}</pre>
+  );
+  const Comp = styled(ThemePrinter).attrs({
+    theme: { color: "blue" },
+  })``;
+
+  expect(
+    getSnapshot(
+      <YakThemeProvider theme={{ color: "red" }}>
+        <Comp />
+      </YakThemeProvider>,
+    ),
+  ).toMatchInlineSnapshot(`
+    <pre>
+      {"color":"blue"}
+    </pre>
+  `);
+});
+
+describe("attrs bug issue #163", () => {
+  it("should allow to delete a prop", () => {
+    const Comp = styled.h1.attrs<{ primary?: boolean }>({
+      primary: undefined,
+    })``;
+
+    expect(getSnapshot(<Comp primary />)).toMatchInlineSnapshot(`<h1 />`);
+  });
+
+  it("should allow to rename a prop", () => {
+    const Comp = styled.h1.attrs<{ primary?: boolean }>((p) => ({
+      ...p,
+      primary: undefined,
+      $primary: p.primary,
+    }))``;
+
+    expect(getSnapshot(<Comp primary />)).toMatchInlineSnapshot(`<h1 />`);
+  });
+
+  it("should allow to rename a prop in overwritten attrs", () => {
+    const Parent = styled.h1.attrs<{ count: number }>((p) => {
+      expect(p.count).toBe(1);
+      return {
+        count: ++p.count,
+      };
+    })``;
+    const Comp = styled(Parent).attrs<{ count: number }>((p) => {
+      expect(p.count).toBe(2);
+      return {
+        count: ++p.count,
+      };
+    })``;
+
+    expect(getSnapshot(<Comp count={1} />)).toMatchInlineSnapshot(`
+      <h1
+        count="3"
+      />
+    `);
+  });
+});