react-component-groups/packages/module/src/ResponsiveActions/ResponsiveActions.test.tsx at dbd675392ddabf58e2f4e1118bdd6db2b801d7a1 · rhamilto/react-component-groups · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import { render, screen } from '@testing-library/react';
import ResponsiveActions from './ResponsiveActions';
import ResponsiveAction from '../ResponsiveAction';

describe('ResponsiveActions component', () => {
  describe('should render correctly', () => {

    test('ResponsiveActions', () => {
      const { container } = render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isPersistent>Persistent action</ResponsiveAction>
          <ResponsiveAction isPinned variant='secondary'>Pinned action</ResponsiveAction>
          <ResponsiveAction>Overflow action</ResponsiveAction>
        </ResponsiveActions>);
      expect(container).toMatchSnapshot();
    });

    test('ResponsiveActions with only isPersistent actions', () => {
      const { container } = render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isPersistent>Persistent action 1</ResponsiveAction>
          <ResponsiveAction isPersistent>Persistent action 2</ResponsiveAction>
        </ResponsiveActions>);

      // Should not have dropdown control when only persistent actions
      const dropdownControl = container.querySelector('[data-ouia-component-id="ResponsiveActions-menu-control"]');
      expect(dropdownControl).toBeNull();

      // Should have persistent actions
      const buttons = container.querySelectorAll('button');
      expect(buttons).toHaveLength(2);
    });

    test('ResponsiveActions with only isPinned actions', () => {
      const { container } = render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isPinned>Pinned action 1</ResponsiveAction>
          <ResponsiveAction isPinned>Pinned action 2</ResponsiveAction>
        </ResponsiveActions>);

      // Should have pinned actions as buttons
      const buttons = container.querySelectorAll('button');
      expect(buttons).toHaveLength(2);
      expect(container).toMatchSnapshot();
    });

    test('ResponsiveActions with mix of isPersistent and isPinned actions', () => {
      const { container } = render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isPersistent>Persistent action</ResponsiveAction>
          <ResponsiveAction isPinned>Pinned action</ResponsiveAction>
        </ResponsiveActions>);

      // Should have both persistent and pinned actions as buttons
      const buttons = container.querySelectorAll('button');
      expect(buttons).toHaveLength(2);
      expect(container).toMatchSnapshot();
    });

    test('ResponsiveActions with all dropdown items disabled should disable kebab', () => {
      render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isDisabled>Disabled action 1</ResponsiveAction>
          <ResponsiveAction isDisabled>Disabled action 2</ResponsiveAction>
        </ResponsiveActions>);

      const kebabToggle = screen.getByRole('button', { name: /actions overflow menu/i });
      expect(kebabToggle).toBeDisabled();
    });

    test('ResponsiveActions with some enabled dropdown items should not disable kebab', () => {
      render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isDisabled>Disabled action</ResponsiveAction>
          <ResponsiveAction>Enabled action</ResponsiveAction>
        </ResponsiveActions>);

      const kebabToggle = screen.getByRole('button', { name: /actions overflow menu/i });
      expect(kebabToggle).toBeEnabled();
    });

    test('ResponsiveActions with enabled pinned item and disabled regular item should disable kebab above breakpoint', () => {
      render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isPinned>Enabled pinned action</ResponsiveAction>
          <ResponsiveAction isDisabled>Disabled regular action</ResponsiveAction>
        </ResponsiveActions>);

      const kebabToggle = screen.getByRole('button', { name: /actions overflow menu/i });
      expect(kebabToggle).toBeDisabled();
    });

    test('ResponsiveActions with enabled pinned item and enabled regular item should not disable kebab', () => {
      render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isPinned>Enabled pinned action</ResponsiveAction>
          <ResponsiveAction>Enabled regular action</ResponsiveAction>
        </ResponsiveActions>);

      const kebabToggle = screen.getByRole('button', { name: /actions overflow menu/i });
      expect(kebabToggle).toBeEnabled();
    });

    test('ResponsiveActions with all dropdown items disabled including pinned should disable kebab', () => {
      render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isPinned isDisabled>Disabled pinned action</ResponsiveAction>
          <ResponsiveAction isDisabled>Disabled action</ResponsiveAction>
        </ResponsiveActions>);

      const kebabToggle = screen.getByRole('button', { name: /actions overflow menu/i });
      expect(kebabToggle).toBeDisabled();
    });

    test('ResponsiveActions with only persistent items should not render kebab', () => {
      const { container } = render(
        <ResponsiveActions breakpoint="lg">
          <ResponsiveAction isPersistent>Persistent action</ResponsiveAction>
        </ResponsiveActions>);

      // Should not have kebab when only persistent items exist
      const kebabToggle = container.querySelector('[data-ouia-component-id="ResponsiveActions-menu-dropdown-toggle"]');
      expect(kebabToggle).toBeNull();
    });
  });
});