Add tests for automatching

src/steps/MatchColumnsStep/tests/MatchColumnsStep.test.tsx

@@ -180,6 +180,197 @@ describe("Match Columns automatic matching", () => {
  expect(onContinue.mock.calls[0][0]).toEqual(result)
  })
 
+ test("AutoMatches select values on mount", async () => {
+ const header = ["first name", "count", "Email"]
+ const OPTION_RESULT_ONE = "John"
+ const OPTION_RESULT_ONE_VALUE = "1"
+ const OPTION_RESULT_TWO = "Dane"
+ const OPTION_RESULT_TWO_VALUE = "2"
+ const OPTION_RESULT_THREE = "Kane"
+ const OPTION_RESULT_THREE_VALUE = "3"
+ const data = [
+ [OPTION_RESULT_ONE, "123", "[email protected]"],
+ [OPTION_RESULT_TWO, "333", "[email protected]"],
+ [OPTION_RESULT_THREE, "534", "[email protected]"],
+ ]
+ const options = [
+ { label: OPTION_RESULT_ONE, value: OPTION_RESULT_ONE_VALUE },
+ { label: OPTION_RESULT_TWO, value: OPTION_RESULT_TWO_VALUE },
+ { label: OPTION_RESULT_THREE, value: OPTION_RESULT_THREE_VALUE },
+ ]
+ // finds only names with automatic matching
+ const result = [
+ { name: OPTION_RESULT_ONE_VALUE },
+ { name: OPTION_RESULT_TWO_VALUE },
+ { name: OPTION_RESULT_THREE_VALUE },
+ ]
+
+ const alternativeFields = [
+ {
+ label: "Name",
+ key: "name",
+ alternateMatches: ["first name"],
+ fieldType: {
+ type: "select",
+ options,
+ },
+ example: "Stephanie",
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+ <Providers
+ theme={defaultTheme}
+ rsiValues={{ ...mockRsiValues, fields: alternativeFields, autoMapSelectValues: true }}
+ >
+ <ModalWrapper isOpen={true} onClose={() => {}}>
+ <MatchColumnsStep headerValues={header} data={data} onContinue={onContinue} />
+ </ModalWrapper>
+ </Providers>,
+ )
+
+ expect(screen.getByText(/0 Unmatched/)).toBeInTheDocument()
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("Does not auto match select values when autoMapSelectValues:false", async () => {
+ const header = ["first name", "count", "Email"]
+ const OPTION_RESULT_ONE = "John"
+ const OPTION_RESULT_ONE_VALUE = "1"
+ const OPTION_RESULT_TWO = "Dane"
+ const OPTION_RESULT_TWO_VALUE = "2"
+ const OPTION_RESULT_THREE = "Kane"
+ const OPTION_RESULT_THREE_VALUE = "3"
+ const data = [
+ [OPTION_RESULT_ONE, "123", "[email protected]"],
+ [OPTION_RESULT_TWO, "333", "[email protected]"],
+ [OPTION_RESULT_THREE, "534", "[email protected]"],
+ ]
+ const options = [
+ { label: OPTION_RESULT_ONE, value: OPTION_RESULT_ONE_VALUE },
+ { label: OPTION_RESULT_TWO, value: OPTION_RESULT_TWO_VALUE },
+ { label: OPTION_RESULT_THREE, value: OPTION_RESULT_THREE_VALUE },
+ ]
+ const result = [{ name: undefined }, { name: undefined }, { name: undefined }]
+
+ const alternativeFields = [
+ {
+ label: "Name",
+ key: "name",
+ alternateMatches: ["first name"],
+ fieldType: {
+ type: "select",
+ options,
+ },
+ example: "Stephanie",
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+ <Providers
+ theme={defaultTheme}
+ rsiValues={{ ...mockRsiValues, fields: alternativeFields, autoMapSelectValues: false }}
+ >
+ <ModalWrapper isOpen={true} onClose={() => {}}>
+ <MatchColumnsStep headerValues={header} data={data} onContinue={onContinue} />
+ </ModalWrapper>
+ </Providers>,
+ )
+
+ expect(screen.getByText(/3 Unmatched/)).toBeInTheDocument()
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("AutoMatches select values on select", async () => {
+ const header = ["first name", "count", "Email"]
+ const OPTION_RESULT_ONE = "John"
+ const OPTION_RESULT_ONE_VALUE = "1"
+ const OPTION_RESULT_TWO = "Dane"
+ const OPTION_RESULT_TWO_VALUE = "2"
+ const OPTION_RESULT_THREE = "Kane"
+ const OPTION_RESULT_THREE_VALUE = "3"
+ const data = [
+ [OPTION_RESULT_ONE, "123", "[email protected]"],
+ [OPTION_RESULT_TWO, "333", "[email protected]"],
+ [OPTION_RESULT_THREE, "534", "[email protected]"],
+ ]
+ const options = [
+ { label: OPTION_RESULT_ONE, value: OPTION_RESULT_ONE_VALUE },
+ { label: OPTION_RESULT_TWO, value: OPTION_RESULT_TWO_VALUE },
+ { label: OPTION_RESULT_THREE, value: OPTION_RESULT_THREE_VALUE },
+ ]
+ // finds only names with automatic matching
+ const result = [
+ { name: OPTION_RESULT_ONE_VALUE },
+ { name: OPTION_RESULT_TWO_VALUE },
+ { name: OPTION_RESULT_THREE_VALUE },
+ ]
+
+ const alternativeFields = [
+ {
+ label: "Name",
+ key: "name",
+ fieldType: {
+ type: "select",
+ options,
+ },
+ example: "Stephanie",
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+ <Providers
+ theme={defaultTheme}
+ rsiValues={{ ...mockRsiValues, fields: alternativeFields, autoMapSelectValues: true }}
+ >
+ <ModalWrapper isOpen={true} onClose={() => {}}>
+ <MatchColumnsStep headerValues={header} data={data} onContinue={onContinue} />
+ <div id={SELECT_DROPDOWN_ID} />
+ </ModalWrapper>
+ </Providers>,
+ )
+
+ await selectEvent.select(screen.getByLabelText(header[0]), alternativeFields[0].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+
+ expect(screen.getByText(/0 Unmatched/)).toBeInTheDocument()
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
  test("Boolean-like values are returned as Booleans", async () => {
  const header = ["namezz", "is_cool", "Email"]
  const data = [