coneto/test/component/capsule-tab.cy.tsx at 7d5d7f10df2df43e7f32f98e3b858f23a4482023 · systatum/coneto · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { css } from "styled-components";
import {
  CapsuleTab,
  CapsuleTabContentProps,
} from "./../../components/capsule-tab";

describe("Capsule Tab", () => {
  const TABS_ITEMS: CapsuleTabContentProps[] = [
    { id: "1", title: "Write", content: "Write" },
    { id: "2", title: "Review", content: "Review" },
  ];

  context("styles", () => {
    it("renders capsule with 12px for active", () => {
      cy.mount(<CapsuleTab activeTab="1" tabs={TABS_ITEMS} />);

      cy.findAllByLabelText("active-capsule-box")
        .eq(0)
        .should("have.css", "border-radius", "12px");
      cy.findAllByLabelText("hover-capsule-box")
        .eq(0)
        .should("have.css", "border-radius", "12px");
    });

    context("self", () => {
      context("when given padding 20px", () => {
        it("renders the container wrapper with padding 20px", () => {
          cy.mount(
            <CapsuleTab
              activeTab="1"
              styles={{
                self: css`
                  padding: 20px;
                `,
              }}
              tabs={TABS_ITEMS}
            />
          );

          cy.findByLabelText("capsule-tab-wrapper").should(
            "have.css",
            "padding",
            "20px"
          );
        });
      });
    });

    context("contentStyle", () => {
      context("when given padding 20px", () => {
        it("renders the content wrapper with padding 20px", () => {
          cy.mount(
            <CapsuleTab
              activeTab="1"
              styles={{
                contentStyle: css`
                  padding: 20px;
                `,
              }}
              tabs={TABS_ITEMS}
            />
          );

          cy.findByLabelText("capsule-tab-content").should(
            "have.css",
            "padding",
            "20px"
          );
        });
      });
    });
  });

  context("when given", () => {
    it("renders on the left side", () => {
      cy.mount(<CapsuleTab tabs={TABS_ITEMS} />);

      cy.findByLabelText("capsule")
        .should("have.css", "justify-content", "normal")
        .and("have.css", "width", "458px");
    });
  });

  context("activeTab", () => {
    context("when given", () => {
      const TABS_ITEMS: CapsuleTabContentProps[] = [
        { id: "1", title: "Write", content: "Write" },
        { id: "2", title: "Review", content: "Review" },
      ];
      it("renders with active equal the id argument", () => {
        cy.mount(<CapsuleTab tabs={TABS_ITEMS} activeTab={"2"} />);
        cy.contains("Write").should("have.css", "color", "rgb(17, 24, 39)");
        cy.contains("Review").should("have.css", "color", "rgb(255, 255, 255)");
      });
    });
  });
});