codegate-ui/src/features/workspace/components/__tests__/form-muxing-rules.test.tsx at ce2550358bce55103115ccadacd3f845854d6c10 · stacklok/codegate-ui · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import { render } from '@/lib/test-utils'
import { screen, waitFor } from '@testing-library/react'
import { FormMuxRules } from '../form-mux-rules'
import userEvent from '@testing-library/user-event'

test('all fields are disabled if the form is disabled', async () => {
  render(<FormMuxRules isDisabled={true} workspaceName="fake-workspace" />)

  expect(
    screen.getByLabelText(/matcher type/i, { selector: 'button' })
  ).toBeDisabled()
  expect(
    screen.getByLabelText(/matcher/i, { selector: 'input' })
  ).toBeDisabled()
  expect(screen.getByLabelText(/model/i, { selector: 'input' })).toBeDisabled()
  expect(
    screen.getByLabelText(/delete/i, { selector: 'button' })
  ).toBeDisabled()
  expect(
    screen.getByLabelText(/add filter/i, { selector: 'button' })
  ).toBeDisabled()
  expect(
    screen.getByLabelText(/revert changes/i, { selector: 'button' })
  ).toBeDisabled()
  expect(screen.getByLabelText(/save/i, { selector: 'button' })).toBeDisabled()
})

test('muxing rules form works correctly', async () => {
  render(<FormMuxRules isDisabled={false} workspaceName="fake-workspace" />)

  // should only have 1 row initially
  expect(
    screen.getAllByLabelText(/matcher type/i, { selector: 'button' }).length
  ).toEqual(1)
  expect(
    screen.getAllByLabelText(/matcher/i, { selector: 'input' }).length
  ).toEqual(1)
  expect(
    screen.getAllByLabelText(/model/i, { selector: 'input' }).length
  ).toEqual(1)
  expect(
    screen.getAllByLabelText(/delete/i, { selector: 'button' }).length
  ).toEqual(1)

  // shouldn't be able to delete the catch-all row
  expect(
    screen.getAllByLabelText(/delete/i, { selector: 'button' })[0]
  ).toBeDisabled()

  // populate the "catch-all" row
  await userEvent.click(screen.getByLabelText('Model', { selector: 'input' }))
  await userEvent.click(screen.getByRole('option', { name: /claude-3.6/i }))
  await waitFor(() => {
    expect(screen.getByLabelText('Model', { selector: 'input' })).toHaveValue(
      'claude-3.6'
    )
  })

  // add a new row
  await userEvent.click(
    screen.getByLabelText(/add filter/i, { selector: 'button' })
  )

  // add a new row
  expect(
    screen.getAllByLabelText(/matcher type/i, { selector: 'button' }).length
  ).toEqual(2)
  expect(
    screen.getAllByLabelText(/matcher/i, { selector: 'input' }).length
  ).toEqual(2)
  expect(
    screen.getAllByLabelText(/model/i, { selector: 'input' }).length
  ).toEqual(2)
  expect(
    screen.getAllByLabelText(/delete/i, { selector: 'button' }).length
  ).toEqual(2)

  // shouldn't be able to delete the catch-all row
  expect(
    screen.getAllByLabelText(/delete/i, { selector: 'button' })[1]
  ).toBeDisabled()

  // populate new row
  const newMatcherTypeSelect = screen.getAllByLabelText(/matcher type/i, {
    selector: 'button',
  })[0]
  const newMatcherInput = screen.getAllByLabelText(/matcher/i, {
    selector: 'input',
  })[0]
  const newModelComboBox = screen.getAllByLabelText(/model/i, {
    selector: 'input',
  })[0]

  await userEvent.click(newMatcherTypeSelect as HTMLFormElement)
  await userEvent.click(screen.getByRole('option', { name: 'FIM' }))

  await userEvent.type(newMatcherInput as HTMLFormElement, '.tsx')

  await userEvent.click(newModelComboBox as HTMLFormElement)
  await userEvent.click(screen.getByRole('option', { name: /chatgpt-4p/i }))

  await userEvent.click(screen.getByRole('button', { name: /save/i }))

  await waitFor(() => {
    expect(
      screen.getByText(/muxing rules for fake-workspace updated/i)
    ).toBeVisible()
  })
})

test('displays validation errors with invalid config', async () => {
  render(<FormMuxRules isDisabled={false} workspaceName="fake-workspace" />)

  // should only have 1 row initially
  expect(
    screen.getAllByLabelText(/matcher type/i, { selector: 'button' }).length
  ).toEqual(1)
  expect(
    screen.getAllByLabelText(/matcher/i, { selector: 'input' }).length
  ).toEqual(1)
  expect(
    screen.getAllByLabelText(/model/i, { selector: 'input' }).length
  ).toEqual(1)
  expect(
    screen.getAllByLabelText(/delete/i, { selector: 'button' }).length
  ).toEqual(1)

  // add a new row
  await userEvent.click(
    screen.getByLabelText(/add filter/i, { selector: 'button' })
  )

  // populate the matcher input, but not the model
  const matcherInput = screen.getAllByLabelText(/matcher/i, {
    selector: 'input',
  })[0]
  await userEvent.type(matcherInput as HTMLFormElement, '.tsx')

  await userEvent.click(screen.getByRole('button', { name: /save/i }))

  await waitFor(() => {
    expect(screen.getByText(/muxing: model is required/i)).toBeVisible()
  })
})