import { DSLWidget } from "widgets/constants";
import {
  tableWidgetPropertyPaneMigrations,
  migrateTableWidgetParentRowSpaceProperty,
  migrateTableWidgetHeaderVisibilityProperties,
  migrateTableWidgetSelectedRowBindings,
  migrateTableSanitizeColumnKeys,
} from "./TableWidget";

const input1: DSLWidget = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table1",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 19,
      bottomRow: 26,
      parentId: "0",
      widgetId: "fs785w9gcy",
      dynamicBindingPathList: [],
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const input2: DSLWidget = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table2",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 28,
      bottomRow: 35,
      parentId: "0",
      widgetId: "l9i1e8ybkm",
      dynamicBindingPathList: [],
      dynamicTriggerPathList: [{ key: "columnActions" }],
      columnActions: [
        {
          label: "Test",
          id: "ezooq966rd",
          actionPayloads: [],
          dynamicTrigger: "{{showAlert('test','success')}}",
        },
        {
          label: "Fail",
          id: "1k8nkay5r6",
          actionPayloads: [],
          dynamicTrigger: "{{showAlert('Fail','error')}}",
        },
      ],
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const input3: DSLWidget = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table3",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 37,
      bottomRow: 44,
      parentId: "0",
      widgetId: "8mkidz550s",
      dynamicBindingPathList: [],
      dynamicTriggerPathList: [
        { key: "onRowSelected" },
        { key: "onSearchTextChanged" },
      ],
      onRowSelected: "{{showAlert('test','success')}}",
      onSearchTextChanged: "{{showAlert('fail','error')}}",
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const output1 = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table1",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 19,
      bottomRow: 26,
      parentId: "0",
      widgetId: "fs785w9gcy",
      dynamicBindingPathList: [],
      primaryColumns: {
        id: {
          index: 0,
          width: 150,
          id: "id",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "id",
          computedValue: "",
        },
        email: {
          index: 1,
          width: 150,
          id: "email",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "email",
          computedValue: "",
        },
        userName: {
          index: 2,
          width: 150,
          id: "userName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "userName",
          computedValue: "",
        },
        productName: {
          index: 3,
          width: 150,
          id: "productName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "productName",
          computedValue: "",
        },
        orderAmount: {
          index: 4,
          width: 150,
          id: "orderAmount",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "orderAmount",
          computedValue: "",
        },
      },
      textSize: "PARAGRAPH",
      horizontalAlignment: "LEFT",
      verticalAlignment: "CENTER",
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const output2 = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table2",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 28,
      bottomRow: 35,
      parentId: "0",
      widgetId: "l9i1e8ybkm",
      dynamicBindingPathList: [],
      dynamicTriggerPathList: [
        { key: "columnActions" },
        { key: "primaryColumns.customColumn1.onClick" },
        { key: "primaryColumns.customColumn2.onClick" },
      ],
      columnActions: [
        {
          label: "Test",
          id: "ezooq966rd",
          actionPayloads: [],
          dynamicTrigger: "{{showAlert('test','success')}}",
        },
        {
          label: "Fail",
          id: "1k8nkay5r6",
          actionPayloads: [],
          dynamicTrigger: "{{showAlert('Fail','error')}}",
        },
      ],
      primaryColumns: {
        id: {
          index: 0,
          width: 150,
          id: "id",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "id",
          computedValue: "",
        },
        email: {
          index: 1,
          width: 150,
          id: "email",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "email",
          computedValue: "",
        },
        userName: {
          index: 2,
          width: 150,
          id: "userName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "userName",
          computedValue: "",
        },
        productName: {
          index: 3,
          width: 150,
          id: "productName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "productName",
          computedValue: "",
        },
        orderAmount: {
          index: 4,
          width: 150,
          id: "orderAmount",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "orderAmount",
          computedValue: "",
        },
        customColumn1: {
          index: 5,
          width: 150,
          id: "ezooq966rd",
          label: "Test",
          columnType: "button",
          isVisible: true,
          isDerived: true,
          buttonLabel: "Test",
          buttonStyle: "rgb(3, 179, 101)",
          buttonLabelColor: "#FFFFFF",
          onClick: "{{showAlert('test','success')}}",
        },
        customColumn2: {
          index: 6,
          width: 150,
          id: "1k8nkay5r6",
          label: "Fail",
          columnType: "button",
          isVisible: true,
          isDerived: true,
          buttonLabel: "Fail",
          buttonStyle: "rgb(3, 179, 101)",
          buttonLabelColor: "#FFFFFF",
          onClick: "{{showAlert('Fail','error')}}",
        },
      },
      textSize: "PARAGRAPH",
      horizontalAlignment: "LEFT",
      verticalAlignment: "CENTER",
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

const output3 = {
  widgetName: "MainContainer",
  backgroundColor: "none",
  rightColumn: 1224,
  snapColumns: 16,
  detachFromLayout: true,
  widgetId: "0",
  topRow: 0,
  bottomRow: 1840,
  containerStyle: "none",
  snapRows: 33,
  parentRowSpace: 1,
  type: "CANVAS_WIDGET",
  canExtend: true,
  version: 7,
  minHeight: 1292,
  parentColumnSpace: 1,
  dynamicBindingPathList: [],
  leftColumn: 0,
  isLoading: false,
  parentId: "",
  renderMode: "CANVAS",
  children: [
    {
      isVisible: true,
      label: "Data",
      widgetName: "Table3",
      searchKey: "",
      tableData:
        '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
      type: "TABLE_WIDGET",
      isLoading: false,
      parentColumnSpace: 74,
      parentRowSpace: 40,
      leftColumn: 0,
      rightColumn: 8,
      topRow: 37,
      bottomRow: 44,
      parentId: "0",
      widgetId: "8mkidz550s",
      dynamicBindingPathList: [],
      dynamicTriggerPathList: [
        { key: "onRowSelected" },
        { key: "onSearchTextChanged" },
      ],
      onRowSelected: "{{showAlert('test','success')}}",
      onSearchTextChanged: "{{showAlert('fail','error')}}",
      primaryColumns: {
        id: {
          index: 0,
          width: 150,
          id: "id",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "id",
          computedValue: "",
        },
        email: {
          index: 1,
          width: 150,
          id: "email",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "email",
          computedValue: "",
        },
        userName: {
          index: 2,
          width: 150,
          id: "userName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "userName",
          computedValue: "",
        },
        productName: {
          index: 3,
          width: 150,
          id: "productName",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "productName",
          computedValue: "",
        },
        orderAmount: {
          index: 4,
          width: 150,
          id: "orderAmount",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          columnType: "text",
          textColor: "#231F20",
          textSize: "PARAGRAPH",
          fontStyle: "REGULAR",
          enableFilter: true,
          enableSort: true,
          isVisible: true,
          isDerived: false,
          label: "orderAmount",
          computedValue: "",
        },
      },
      textSize: "PARAGRAPH",
      horizontalAlignment: "LEFT",
      verticalAlignment: "CENTER",
      renderMode: "CANVAS",
      version: 1,
    },
  ],
};

describe("Table Widget Property Pane Upgrade", () => {
  it("To test primaryColumns are created for a simple table", () => {
    const newDsl = tableWidgetPropertyPaneMigrations(input1);
    expect(JSON.stringify(newDsl) === JSON.stringify(output1));
  });
  it("To test columnActions are migrated derived primaryColumns", () => {
    const newDsl = tableWidgetPropertyPaneMigrations(input2);
    expect(JSON.stringify(newDsl) === JSON.stringify(output2));
  });
  it("To test table action are migrated", () => {
    const newDsl = tableWidgetPropertyPaneMigrations(input3);
    expect(JSON.stringify(newDsl) === JSON.stringify(output3));
  });

  it("To test table parentRowSpace is updated", () => {
    const inputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1224,
      snapColumns: 16,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 1840,
      containerStyle: "none",
      snapRows: 33,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 7,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      isLoading: false,
      parentId: "",
      renderMode: "CANVAS",
      children: [
        {
          isVisible: true,
          label: "Data",
          widgetName: "Table1",
          searchKey: "",
          tableData:
            '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
          type: "TABLE_WIDGET",
          isLoading: false,
          parentColumnSpace: 74,
          parentRowSpace: 40,
          leftColumn: 0,
          rightColumn: 8,
          topRow: 19,
          bottomRow: 26,
          parentId: "0",
          widgetId: "fs785w9gcy",
          dynamicBindingPathList: [],
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "id",
              computedValue: "",
            },
            email: {
              index: 1,
              width: 150,
              id: "email",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "email",
              computedValue: "",
            },
            userName: {
              index: 2,
              width: 150,
              id: "userName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "userName",
              computedValue: "",
            },
            productName: {
              index: 3,
              width: 150,
              id: "productName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "productName",
              computedValue: "",
            },
            orderAmount: {
              index: 4,
              width: 150,
              id: "orderAmount",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "orderAmount",
              computedValue: "",
            },
          },
          textSize: "PARAGRAPH",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          renderMode: "CANVAS",
          version: 1,
        },
      ],
    };
    const outputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1224,
      snapColumns: 16,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 1840,
      containerStyle: "none",
      snapRows: 33,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 7,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      isLoading: false,
      parentId: "",
      renderMode: "CANVAS",
      children: [
        {
          isVisible: true,
          label: "Data",
          widgetName: "Table1",
          searchKey: "",
          tableData:
            '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
          type: "TABLE_WIDGET",
          isLoading: false,
          parentColumnSpace: 74,
          parentRowSpace: 10,
          leftColumn: 0,
          rightColumn: 8,
          topRow: 19,
          bottomRow: 26,
          parentId: "0",
          widgetId: "fs785w9gcy",
          dynamicBindingPathList: [],
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "id",
              computedValue: "",
            },
            email: {
              index: 1,
              width: 150,
              id: "email",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "email",
              computedValue: "",
            },
            userName: {
              index: 2,
              width: 150,
              id: "userName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "userName",
              computedValue: "",
            },
            productName: {
              index: 3,
              width: 150,
              id: "productName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "productName",
              computedValue: "",
            },
            orderAmount: {
              index: 4,
              width: 150,
              id: "orderAmount",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "orderAmount",
              computedValue: "",
            },
          },
          textSize: "PARAGRAPH",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          renderMode: "CANVAS",
          version: 1,
        },
      ],
    };
    const newDsl = migrateTableWidgetParentRowSpaceProperty(inputDsl);
    expect(JSON.stringify(newDsl) === JSON.stringify(outputDsl));
  });

  it("TableWidget : should update header options visibilities", () => {
    const inputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1224,
      snapColumns: 16,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 1840,
      containerStyle: "none",
      snapRows: 33,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 7,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      isLoading: false,
      parentId: "",
      renderMode: "CANVAS",
      children: [
        {
          isVisible: true,
          label: "Data",
          widgetName: "Table1",
          searchKey: "",
          tableData:
            '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
          type: "TABLE_WIDGET",
          isLoading: false,
          parentColumnSpace: 74,
          parentRowSpace: 40,
          leftColumn: 0,
          rightColumn: 8,
          topRow: 19,
          bottomRow: 26,
          parentId: "0",
          widgetId: "fs785w9gcy",
          dynamicBindingPathList: [],
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "id",
              computedValue: "",
            },
            email: {
              index: 1,
              width: 150,
              id: "email",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "email",
              computedValue: "",
            },
            userName: {
              index: 2,
              width: 150,
              id: "userName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "userName",
              computedValue: "",
            },
            productName: {
              index: 3,
              width: 150,
              id: "productName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "productName",
              computedValue: "",
            },
            orderAmount: {
              index: 4,
              width: 150,
              id: "orderAmount",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "orderAmount",
              computedValue: "",
            },
          },
          textSize: "PARAGRAPH",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          renderMode: "CANVAS",
          version: 1,
        },
      ],
    };
    const outputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1224,
      snapColumns: 16,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 1840,
      containerStyle: "none",
      snapRows: 33,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 7,
      minHeight: 1292,
      parentColumnSpace: 1,
      dynamicBindingPathList: [],
      leftColumn: 0,
      isLoading: false,
      parentId: "",
      renderMode: "CANVAS",
      children: [
        {
          isVisible: true,
          label: "Data",
          widgetName: "Table1",
          searchKey: "",
          tableData:
            '[\n  {\n    "id": 2381224,\n    "email": "michael.lawson@reqres.in",\n    "userName": "Michael Lawson",\n    "productName": "Chicken Sandwich",\n    "orderAmount": 4.99\n  },\n  {\n    "id": 2736212,\n    "email": "lindsay.ferguson@reqres.in",\n    "userName": "Lindsay Ferguson",\n    "productName": "Tuna Salad",\n    "orderAmount": 9.99\n  },\n  {\n    "id": 6788734,\n    "email": "tobias.funke@reqres.in",\n    "userName": "Tobias Funke",\n    "productName": "Beef steak",\n    "orderAmount": 19.99\n  }\n]',
          type: "TABLE_WIDGET",
          isLoading: false,
          parentColumnSpace: 74,
          parentRowSpace: 10,
          leftColumn: 0,
          rightColumn: 8,
          topRow: 19,
          bottomRow: 26,
          parentId: "0",
          widgetId: "fs785w9gcy",
          dynamicBindingPathList: [],
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "id",
              computedValue: "",
            },
            email: {
              index: 1,
              width: 150,
              id: "email",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "email",
              computedValue: "",
            },
            userName: {
              index: 2,
              width: 150,
              id: "userName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "userName",
              computedValue: "",
            },
            productName: {
              index: 3,
              width: 150,
              id: "productName",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "productName",
              computedValue: "",
            },
            orderAmount: {
              index: 4,
              width: 150,
              id: "orderAmount",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textColor: "#231F20",
              textSize: "PARAGRAPH",
              fontStyle: "REGULAR",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "orderAmount",
              computedValue: "",
            },
          },
          textSize: "PARAGRAPH",
          horizontalAlignment: "LEFT",
          verticalAlignment: "CENTER",
          renderMode: "CANVAS",
          isVisibleSearch: true,
          isVisibleFilters: true,
          isVisibleDownload: true,
          isVisibleCompactMode: true,
          isVisiblePagination: true,
          version: 1,
        },
      ],
    };
    const newDsl = migrateTableWidgetHeaderVisibilityProperties(inputDsl);
    expect(JSON.stringify(newDsl) === JSON.stringify(outputDsl));
  });
});

describe("Table Widget Migration - #migrateTableSanitizeColumnKeys", () => {
  it("sanitizes primaryColumns, dynamicBindingPathList, columnOrder", () => {
    const inputDsl = ({
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1080,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 980,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 34,
      minHeight: 860,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          columnOrder: ["id", "name", "'random_header", "Employee.id"],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 53,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          parentColumnSpace: 14.62421875,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            { key: "tableData" },
            { key: "primaryColumns.id.computedValue" },
            { key: "primaryColumns.name.computedValue" },
            { key: "primaryColumns.'random_header.computedValue" },
            { key: "primaryColumns.Employee.id.computedValue" },
          ],
          leftColumn: 1,
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}",
            },
            name: {
              index: 14,
              width: 150,
              id: "name",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "name",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.name))}}",
            },
            "'random_header": {
              index: 20,
              width: 150,
              id: "'random_header",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "'random_header",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.'random_header))}}",
            },
            "Employee.id": {
              index: 20,
              width: 150,
              id: "Employee.id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "Employee.id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee.id))}}",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 63,
          textSize: "PARAGRAPH",
          widgetId: "oclzovhzgx",
          isVisibleFilters: true,
          tableData: '{{users.data.concat({ "\'random header": 100})}}',
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          parentId: "0",
          totalRecordCount: 0,
          isLoading: false,
          isVisibleCompactMode: true,
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
            email: 261,
          },
        },
      ],
    } as unknown) as DSLWidget;

    const outputDsl = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1080,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 980,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 34,
      minHeight: 860,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          columnOrder: ["id", "name", "_random_header", "Employee_id"],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 53,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          parentColumnSpace: 14.62421875,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            { key: "tableData" },
            { key: "primaryColumns.id.computedValue" },
            { key: "primaryColumns.name.computedValue" },
            { key: "primaryColumns._random_header.computedValue" },
            { key: "primaryColumns.Employee_id.computedValue" },
          ],
          leftColumn: 1,
          primaryColumns: {
            id: {
              index: 0,
              width: 150,
              id: "id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}",
            },
            name: {
              index: 14,
              width: 150,
              id: "name",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDisabled: false,
              isCellVisible: true,
              isDerived: false,
              label: "name",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.name))}}",
            },
            _random_header: {
              index: 20,
              width: 150,
              id: "_random_header",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "'random_header",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow._random_header))}}",
            },
            Employee_id: {
              index: 20,
              width: 150,
              id: "Employee_id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "Employee.id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee_id))}}",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 63,
          textSize: "PARAGRAPH",
          widgetId: "oclzovhzgx",
          isVisibleFilters: true,
          tableData: '{{users.data.concat({ "\'random header": 100})}}',
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          parentId: "0",
          totalRecordCount: 0,
          isLoading: false,
          isVisibleCompactMode: true,
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
            email: 261,
          },
        },
      ],
    };

    const badDsl = ({
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1080,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 980,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 34,
      minHeight: 860,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          columnOrder: ["Employee.id"],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 53,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          parentColumnSpace: 14.62421875,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            { key: "tableData" },
            { key: "primaryColumns.Employee.id.computedValue" },
          ],
          leftColumn: 1,
          primaryColumns: {
            "Employee.id": {
              "": {
                index: 20,
                width: 150,
                id: "Employee.id",
                horizontalAlignment: "LEFT",
                verticalAlignment: "CENTER",
                columnType: "text",
                textSize: "PARAGRAPH",
                enableFilter: true,
                enableSort: true,
                isVisible: true,
                isDerived: false,
                label: "Employee.id",
                computedValue:
                  "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee.id))}}",
              },
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 63,
          textSize: "PARAGRAPH",
          widgetId: "oclzovhzgx",
          isVisibleFilters: true,
          tableData: '{{users.data.concat({ "\'random header": 100})}}',
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          parentId: "0",
          totalRecordCount: 0,
          isLoading: false,
          isVisibleCompactMode: true,
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
            email: 261,
          },
        },
      ],
    } as unknown) as DSLWidget;

    const fixedDsl = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1080,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 980,
      containerStyle: "none",
      snapRows: 125,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 34,
      minHeight: 860,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          columnOrder: ["Employee_id"],
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 53,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          parentColumnSpace: 14.62421875,
          dynamicTriggerPathList: [],
          dynamicBindingPathList: [
            { key: "tableData" },
            { key: "primaryColumns.Employee_id.computedValue" },
          ],
          leftColumn: 1,
          primaryColumns: {
            Employee_id: {
              index: 20,
              width: 150,
              id: "Employee_id",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isDerived: false,
              label: "Employee.id",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.Employee_id))}}",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 63,
          textSize: "PARAGRAPH",
          widgetId: "oclzovhzgx",
          isVisibleFilters: true,
          tableData: '{{users.data.concat({ "\'random header": 100})}}',
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          parentId: "0",
          totalRecordCount: 0,
          isLoading: false,
          isVisibleCompactMode: true,
          horizontalAlignment: "LEFT",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: {
            task: 245,
            step: 62,
            status: 75,
            email: 261,
          },
        },
      ],
    };

    const newDsl = migrateTableSanitizeColumnKeys(inputDsl);
    const correctedDsl = migrateTableSanitizeColumnKeys(badDsl);
    expect(newDsl).toStrictEqual(outputDsl);
    expect(correctedDsl).toStrictEqual(fixedDsl);
  });
});

describe("Table Widget selectedRow bindings update", () => {
  it("To test selectedRow bindings are updated for primaryColumns and derivedColumns", () => {
    const inputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1118,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 540,
      containerStyle: "none",
      snapRows: 129,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 36,
      minHeight: 550,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      renderMode: "CANVAS",
      isLoading: false,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 36,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          defaultSelectedRow: "0",
          parentColumnSpace: 17.28125,
          dynamicTriggerPathList: [{ key: "primaryColumns.action.onClick" }],
          dynamicBindingPathList: [
            { key: "primaryColumns.step.computedValue" },
            { key: "primaryColumns.task.computedValue" },
            { key: "primaryColumns.status.computedValue" },
            { key: "primaryColumns.action.computedValue" },
          ],
          leftColumn: 6,
          primaryColumns: {
            step: {
              index: 0,
              width: 150,
              id: "step",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "step",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
            },
            task: {
              index: 1,
              width: 150,
              id: "task",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "task",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
            },
            status: {
              index: 2,
              width: 150,
              id: "status",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "status",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
            },
            action: {
              index: 3,
              width: 150,
              id: "action",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "button",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDisabled: false,
              isDerived: false,
              label: "action",
              onClick: "{{showAlert(Table1.selectedRow.task,'info')}}",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
            },
            customColumn1: {
              index: 4,
              width: 150,
              id: "customColumn1",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "button",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDisabled: false,
              isDerived: true,
              label: "Delete",
              onClick: "{{showAlert('Hello')}}",
              computedValue: "",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 36,
          textSize: "PARAGRAPH",
          widgetId: "yd68qpgb0b",
          isVisibleFilters: true,
          tableData: [
            { step: "#1", task: "Drop a table", status: "✅", action: "" },
            {
              step: "#2",
              task: "Create a query fetch_users with the Mock DB",
              status: "--",
              action: "",
            },
            {
              step: "#3",
              task: "Bind the query using => fetch_users.data",
              status: "--",
              action: "",
            },
          ],
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          totalRecordsCount: 0,
          parentId: "0",
          isLoading: false,
          horizontalAlignment: "LEFT",
          renderMode: "CANVAS",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: { task: 245, step: 62, status: 75 },
        },
      ],
    };
    const newDsl = migrateTableWidgetSelectedRowBindings(inputDsl);
    const outputDsl: DSLWidget = {
      widgetName: "MainContainer",
      backgroundColor: "none",
      rightColumn: 1118,
      snapColumns: 64,
      detachFromLayout: true,
      widgetId: "0",
      topRow: 0,
      bottomRow: 540,
      containerStyle: "none",
      snapRows: 129,
      parentRowSpace: 1,
      type: "CANVAS_WIDGET",
      canExtend: true,
      version: 36,
      minHeight: 550,
      parentColumnSpace: 1,
      dynamicTriggerPathList: [],
      dynamicBindingPathList: [],
      leftColumn: 0,
      renderMode: "CANVAS",
      isLoading: false,
      children: [
        {
          widgetName: "Table1",
          defaultPageSize: 0,
          isVisibleDownload: true,
          dynamicPropertyPathList: [],
          topRow: 8,
          bottomRow: 36,
          parentRowSpace: 10,
          type: "TABLE_WIDGET",
          defaultSelectedRow: "0",
          parentColumnSpace: 17.28125,
          dynamicTriggerPathList: [{ key: "primaryColumns.action.onClick" }],
          dynamicBindingPathList: [
            { key: "primaryColumns.step.computedValue" },
            { key: "primaryColumns.task.computedValue" },
            { key: "primaryColumns.status.computedValue" },
            { key: "primaryColumns.action.computedValue" },
          ],
          leftColumn: 6,
          primaryColumns: {
            step: {
              index: 0,
              width: 150,
              id: "step",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "step",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}",
            },
            task: {
              index: 1,
              width: 150,
              id: "task",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "task",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}",
            },
            status: {
              index: 2,
              width: 150,
              id: "status",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "text",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDerived: false,
              label: "status",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}",
            },
            action: {
              index: 3,
              width: 150,
              id: "action",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "button",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDisabled: false,
              isDerived: false,
              label: "action",
              onClick: "{{showAlert(currentRow.task,'info')}}",
              computedValue:
                "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}",
            },
            customColumn1: {
              index: 4,
              width: 150,
              id: "customColumn1",
              horizontalAlignment: "LEFT",
              verticalAlignment: "CENTER",
              columnType: "button",
              textSize: "PARAGRAPH",
              enableFilter: true,
              enableSort: true,
              isVisible: true,
              isCellVisible: true,
              isDisabled: false,
              isDerived: true,
              label: "Delete",
              onClick: "{{showAlert('Hello')}}",
              computedValue: "",
            },
          },
          delimiter: ",",
          derivedColumns: {},
          rightColumn: 36,
          textSize: "PARAGRAPH",
          widgetId: "yd68qpgb0b",
          isVisibleFilters: true,
          tableData: [
            { step: "#1", task: "Drop a table", status: "✅", action: "" },
            {
              step: "#2",
              task: "Create a query fetch_users with the Mock DB",
              status: "--",
              action: "",
            },
            {
              step: "#3",
              task: "Bind the query using => fetch_users.data",
              status: "--",
              action: "",
            },
          ],
          isVisible: true,
          label: "Data",
          searchKey: "",
          version: 1,
          totalRecordsCount: 0,
          parentId: "0",
          isLoading: false,
          horizontalAlignment: "LEFT",
          renderMode: "CANVAS",
          isVisibleSearch: true,
          isVisiblePagination: true,
          verticalAlignment: "CENTER",
          columnSizeMap: { task: 245, step: 62, status: 75 },
        },
      ],
    };
    expect(newDsl).toStrictEqual(outputDsl);
  });
});
