From 63851120d33be3fad28baca82f3b680772669e4e Mon Sep 17 00:00:00 2001 From: tealjulia Date: Mon, 8 Aug 2022 22:45:45 -0400 Subject: [PATCH 1/6] wip diff modal test setup --- .../CatalogDiffModal.test.tsx | 80 +++++++++++++++++++ .../components/DiffFieldTable.tsx | 2 +- .../components/DiffSection.tsx | 2 +- .../CatalogDiffModal/components/StreamRow.tsx | 2 +- 4 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx new file mode 100644 index 0000000000000..b4b5666e95879 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx @@ -0,0 +1,80 @@ +import { render, screen } from "@testing-library/react"; +import { IntlProvider } from "react-intl"; + +import { CatalogDiff } from "core/request/AirbyteClient"; + +import messages from "../../../locales/en.json"; +import { CatalogDiffModal } from "./CatalogDiffModal"; + +const mockCatalogDiff: CatalogDiff = { + transforms: [ + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "dragonfruit" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "eclair" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "fishcake" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "gelatin_mold" }, + }, + // { + // transformType: "update_stream", + // streamDescriptor: { namespace: "apple", name: "harissa_paste" }, + // updateStream: [ + // { transformType: "add_field", fieldName: ["users", "phone"] }, + // { transformType: "add_field", fieldName: ["users", "email"] }, + // { transformType: "remove_field", fieldName: ["users", "lastName"] }, + + // { + // transformType: "update_field_schema", + // fieldName: ["users", "address"], + // updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, + // }, + // ], + // }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "banana" }, + }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "carrot" }, + }, + ], +}; + +const mockCatalog = { + streams: [], +}; + +test("it renders the correct section for added streams", () => { + //todo: should this render w the modal service here or not? + render( + + { + return null; + }} + /> + + ); + + const newStreamsTable = screen.getByRole("table", { name: /new streams/ }); + expect(newStreamsTable).toBeInTheDocument(); + + const removedStreamsTable = screen.getByRole("table", { name: /removed streams/ }); + expect(removedStreamsTable).toBeInTheDocument(); +}); +test("it renders the correct section for removed streams", () => {}); +test("it renders the correct section for changed streams", () => {}); +test("changed streams accordion displays correct information", () => {}); +test("changed streams accordion opens/closes on clicking the description row", () => {}); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index e0cb49a1f5777..24c54af63dfcf 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -14,7 +14,7 @@ interface DiffFieldTableProps { export const DiffFieldTable: React.FC = ({ fieldTransforms, diffVerb }) => { return ( - +
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index 47981779d2d9b..cd82648fdee96 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -31,7 +31,7 @@ export const DiffSection: React.FC = ({ streams, catalog, diff
- +
- {" "} + ); From 72df84392a751c53460e5e4ef9afee0360a45a8c Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 10 Aug 2022 09:34:24 -0400 Subject: [PATCH 2/6] starting storybook add --- airbyte-webapp/.storybook/withProvider.tsx | 1 + .../CatalogDiffModal.test.tsx | 220 ++++++++++++------ .../CatalogDiffModal/index.stories.tsx | 76 ++++++ 3 files changed, 231 insertions(+), 66 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx diff --git a/airbyte-webapp/.storybook/withProvider.tsx b/airbyte-webapp/.storybook/withProvider.tsx index bbf184f559a93..9e121bcb8f447 100644 --- a/airbyte-webapp/.storybook/withProvider.tsx +++ b/airbyte-webapp/.storybook/withProvider.tsx @@ -13,6 +13,7 @@ import { FeatureService } from "../src/hooks/services/Feature"; import { ConfigServiceProvider, defaultConfig } from "../src/config"; import { DocumentationPanelProvider } from "../src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext"; import { ServicesProvider } from "../src/core/servicesProvider"; +import { ModalServiceProvider } from "../src/hooks/services/Modal"; import { analyticsServiceContext, AnalyticsServiceProviderValue } from "../src/hooks/services/Analytics"; const AnalyticsContextMock: AnalyticsServiceProviderValue = { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx index b4b5666e95879..f7b8c1a96364e 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx @@ -1,80 +1,168 @@ -import { render, screen } from "@testing-library/react"; +import { cleanup, render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { IntlProvider } from "react-intl"; -import { CatalogDiff } from "core/request/AirbyteClient"; +import { CatalogDiff, StreamTransform } from "core/request/AirbyteClient"; import messages from "../../../locales/en.json"; import { CatalogDiffModal } from "./CatalogDiffModal"; const mockCatalogDiff: CatalogDiff = { - transforms: [ - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "dragonfruit" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "eclair" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "fishcake" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "gelatin_mold" }, - }, - // { - // transformType: "update_stream", - // streamDescriptor: { namespace: "apple", name: "harissa_paste" }, - // updateStream: [ - // { transformType: "add_field", fieldName: ["users", "phone"] }, - // { transformType: "add_field", fieldName: ["users", "email"] }, - // { transformType: "remove_field", fieldName: ["users", "lastName"] }, - - // { - // transformType: "update_field_schema", - // fieldName: ["users", "address"], - // updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, - // }, - // ], - // }, - { - transformType: "add_stream", - streamDescriptor: { namespace: "apple", name: "banana" }, - }, - { - transformType: "add_stream", - streamDescriptor: { namespace: "apple", name: "carrot" }, - }, - ], + transforms: [], }; +const removedItems: StreamTransform[] = [ + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "dragonfruit" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "eclair" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "fishcake" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "gelatin_mold" }, + }, +]; + +const addedItems: StreamTransform[] = [ + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "banana" }, + }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "carrot" }, + }, +]; + +const updatedItems: StreamTransform[] = [ + { + transformType: "update_stream", + streamDescriptor: { namespace: "apple", name: "harissa_paste" }, + updateStream: [ + { transformType: "add_field", fieldName: ["users", "phone"] }, + { transformType: "add_field", fieldName: ["users", "email"] }, + { transformType: "remove_field", fieldName: ["users", "lastName"] }, + + { + transformType: "update_field_schema", + fieldName: ["users", "address"], + updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, + }, + ], + }, +]; + const mockCatalog = { streams: [], }; -test("it renders the correct section for added streams", () => { - //todo: should this render w the modal service here or not? - render( - - { - return null; - }} - /> - - ); - - const newStreamsTable = screen.getByRole("table", { name: /new streams/ }); - expect(newStreamsTable).toBeInTheDocument(); - - const removedStreamsTable = screen.getByRole("table", { name: /removed streams/ }); - expect(removedStreamsTable).toBeInTheDocument(); +describe("catalog diff modal", () => { + afterEach(cleanup); + + test("it renders the correct section for each type of transform", () => { + //todo: should this render w the modal service here or not? + + mockCatalogDiff.transforms.push(...addedItems, ...removedItems, ...updatedItems); + + render( + + { + return null; + }} + /> + + ); + + const newStreamsTable = screen.getByRole("table", { name: /new streams/ }); + expect(newStreamsTable).toBeInTheDocument(); + + const removedStreamsTable = screen.getByRole("table", { name: /removed streams/ }); + expect(removedStreamsTable).toBeInTheDocument(); + + const updatedStreamsSection = screen.getByRole("list", { name: /table with changes/ }); + expect(updatedStreamsSection).toBeInTheDocument(); + + mockCatalogDiff.transforms = []; + }); + + test("added fields are not rendered when not in the diff", () => { + mockCatalogDiff.transforms.push(...removedItems, ...updatedItems); + + render( + + { + return null; + }} + /> + + ); + + const newStreamsTable = screen.queryByRole("table", { name: /new streams/ }); + expect(newStreamsTable).not.toBeInTheDocument(); + mockCatalogDiff.transforms = []; + }); + + test("removed fields are not rendered when not in the diff", () => { + mockCatalogDiff.transforms.push(...addedItems, ...updatedItems); + + render( + + { + return null; + }} + /> + + ); + + const removedStreamsTable = screen.queryByRole("table", { name: /removed streams/ }); + expect(removedStreamsTable).not.toBeInTheDocument(); + mockCatalogDiff.transforms = []; + }); + + test("changed streams accordion opens/closes on clicking the description row", () => { + mockCatalogDiff.transforms.push(...addedItems, ...updatedItems); + + render( + + { + return null; + }} + /> + + ); + + const accordionHeader = screen.getByRole("button", { name: /toggle accordion/ }); + + expect(accordionHeader).toBeInTheDocument(); + + const nullAccordionBody = screen.queryByRole("table", { name: /removed fields/ }); + expect(nullAccordionBody).not.toBeInTheDocument(); + + userEvent.click(accordionHeader); + const openAccordionBody = screen.getByRole("table", { name: /removed fields/ }); + expect(openAccordionBody).toBeInTheDocument(); + + userEvent.click(accordionHeader); + const nullAccordionBodyAgain = screen.queryByRole("table", { name: /removed fields/ }); + expect(nullAccordionBodyAgain).not.toBeInTheDocument(); + }); }); -test("it renders the correct section for removed streams", () => {}); -test("it renders the correct section for changed streams", () => {}); -test("changed streams accordion displays correct information", () => {}); -test("changed streams accordion opens/closes on clicking the description row", () => {}); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx new file mode 100644 index 0000000000000..6eb8ee24d3312 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx @@ -0,0 +1,76 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { useIntl } from "react-intl"; + +import Modal from "components/Modal"; + +import { CatalogDiffModal } from "./CatalogDiffModal"; + +export default { + title: "Ui/CatalogDiffModal", + component: CatalogDiffModal, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + const { formatMessage } = useIntl(); + + return ( + + { + return null; + }} + /> + + ); +}; + +export const Primary = Template.bind({}); + +Primary.args = { + catalogDiff: { + transforms: [ + { + transformType: "update_stream", + streamDescriptor: { namespace: "apple", name: "harissa_paste" }, + updateStream: [ + { transformType: "add_field", fieldName: ["users", "phone"] }, + { transformType: "add_field", fieldName: ["users", "email"] }, + { transformType: "remove_field", fieldName: ["users", "lastName"] }, + + { + transformType: "update_field_schema", + fieldName: ["users", "address"], + updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, + }, + ], + }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "banana" }, + }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "carrot" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "dragonfruit" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "eclair" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "fishcake" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "gelatin_mold" }, + }, + ], + }, + catalog: { streams: [] }, +}; From 74985042100f2ec59ff61b4dc08dff618cd734c3 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 10 Aug 2022 10:08:24 -0400 Subject: [PATCH 3/6] storybook working now --- .../Connection/CatalogDiffModal/CatalogDiffModal.test.tsx | 2 -- .../src/views/Connection/CatalogDiffModal/index.stories.tsx | 6 ++---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx index f7b8c1a96364e..64645de25987c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx @@ -67,8 +67,6 @@ describe("catalog diff modal", () => { afterEach(cleanup); test("it renders the correct section for each type of transform", () => { - //todo: should this render w the modal service here or not? - mockCatalogDiff.transforms.push(...addedItems, ...removedItems, ...updatedItems); render( diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx index 6eb8ee24d3312..ca2181e4a465b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx @@ -1,5 +1,5 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"; -import { useIntl } from "react-intl"; +import { FormattedMessage } from "react-intl"; import Modal from "components/Modal"; @@ -11,10 +11,8 @@ export default { } as ComponentMeta; const Template: ComponentStory = (args) => { - const { formatMessage } = useIntl(); - return ( - + }> Date: Wed, 10 Aug 2022 12:50:46 -0400 Subject: [PATCH 4/6] cleanup --- airbyte-webapp/.storybook/withProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/.storybook/withProvider.tsx b/airbyte-webapp/.storybook/withProvider.tsx index 9e121bcb8f447..bbf184f559a93 100644 --- a/airbyte-webapp/.storybook/withProvider.tsx +++ b/airbyte-webapp/.storybook/withProvider.tsx @@ -13,7 +13,6 @@ import { FeatureService } from "../src/hooks/services/Feature"; import { ConfigServiceProvider, defaultConfig } from "../src/config"; import { DocumentationPanelProvider } from "../src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext"; import { ServicesProvider } from "../src/core/servicesProvider"; -import { ModalServiceProvider } from "../src/hooks/services/Modal"; import { analyticsServiceContext, AnalyticsServiceProviderValue } from "../src/hooks/services/Analytics"; const AnalyticsContextMock: AnalyticsServiceProviderValue = { From a8f44c4231adaa2908e4c75cd56042705698025d Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 10 Aug 2022 12:54:44 -0400 Subject: [PATCH 5/6] aria labels --- .../CatalogDiffModal/CatalogDiffModal.test.tsx | 8 ++++---- .../CatalogDiffModal/components/DiffAccordion.tsx | 2 +- .../CatalogDiffModal/components/DiffIconBlock.tsx | 12 ++++++------ .../CatalogDiffModal/components/FieldRow.tsx | 10 +++++----- .../CatalogDiffModal/components/FieldSection.tsx | 10 +++++++++- 5 files changed, 25 insertions(+), 17 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx index 64645de25987c..e2b0214e24729 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx @@ -65,6 +65,9 @@ const mockCatalog = { describe("catalog diff modal", () => { afterEach(cleanup); + beforeEach(() => { + mockCatalogDiff.transforms = []; + }); test("it renders the correct section for each type of transform", () => { mockCatalogDiff.transforms.push(...addedItems, ...removedItems, ...updatedItems); @@ -89,8 +92,6 @@ describe("catalog diff modal", () => { const updatedStreamsSection = screen.getByRole("list", { name: /table with changes/ }); expect(updatedStreamsSection).toBeInTheDocument(); - - mockCatalogDiff.transforms = []; }); test("added fields are not rendered when not in the diff", () => { @@ -110,7 +111,6 @@ describe("catalog diff modal", () => { const newStreamsTable = screen.queryByRole("table", { name: /new streams/ }); expect(newStreamsTable).not.toBeInTheDocument(); - mockCatalogDiff.transforms = []; }); test("removed fields are not rendered when not in the diff", () => { @@ -130,7 +130,6 @@ describe("catalog diff modal", () => { const removedStreamsTable = screen.queryByRole("table", { name: /removed streams/ }); expect(removedStreamsTable).not.toBeInTheDocument(); - mockCatalogDiff.transforms = []; }); test("changed streams accordion opens/closes on clicking the description row", () => { @@ -162,5 +161,6 @@ describe("catalog diff modal", () => { userEvent.click(accordionHeader); const nullAccordionBodyAgain = screen.queryByRole("table", { name: /removed fields/ }); expect(nullAccordionBodyAgain).not.toBeInTheDocument(); + mockCatalogDiff.transforms = []; }); }); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index d42a051c03b99..112563dba001e 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -23,7 +23,7 @@ export const DiffAccordion: React.FC = ({ streamTransform }) {({ open }) => ( <> - + = ({ newCount, removedC num={removedCount} color="red" light - ariaLabel={`${removedCount} ${formatMessage( + ariaLabel={`${formatMessage( { id: "connection.updateSchema.removed", }, { value: removedCount, - item: formatMessage({ id: "field" }, { values: { count: removedCount } }), + item: formatMessage({ id: "connection.updateSchema.field" }, { count: removedCount }), } )}`} /> @@ -35,13 +35,13 @@ export const DiffIconBlock: React.FC = ({ newCount, removedC num={newCount} color="green" light - ariaLabel={`${newCount} ${formatMessage( + ariaLabel={`${formatMessage( { id: "connection.updateSchema.new", }, { value: newCount, - item: formatMessage({ id: "field" }, { values: { count: newCount } }), + item: formatMessage({ id: "connection.updateSchema.field" }, { count: newCount }), } )}`} /> @@ -51,13 +51,13 @@ export const DiffIconBlock: React.FC = ({ newCount, removedC num={changedCount} color="blue" light - ariaLabel={`${changedCount} ${formatMessage( + ariaLabel={`${formatMessage( { id: "connection.updateSchema.changed", }, { value: changedCount, - item: formatMessage({ id: "field" }, { values: { count: changedCount } }), + item: formatMessage({ id: "connection.updateSchema.field" }, { count: changedCount }), } )}`} /> diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx index 1c77e9a7281af..3f8d715c59065 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -28,7 +28,7 @@ export const FieldRow: React.FC = ({ transform }) => { [styles.mod]: diffType === "update", }); - const contentStyle = classnames(styles.content, { + const contentStyle = classnames(styles.content, styles.cell, { [styles.add]: diffType === "add", [styles.remove]: diffType === "remove", [styles.update]: diffType === "update", @@ -50,16 +50,16 @@ export const FieldRow: React.FC = ({ transform }) => { )} - + ); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx index 4c03fcf8a4e7b..f6d150fb80b16 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -32,7 +32,15 @@ export const FieldSection: React.FC = ({ streams, diffVerb })
{streams.length > 0 && ( -
    +
      {streams.map((stream) => { return (
    • From 2027a6c5c53e1f7b6e12796b27c1efb27a968220 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 10 Aug 2022 13:24:14 -0400 Subject: [PATCH 6/6] test syncmode string --- .../CatalogDiffModal.test.tsx | 105 +++++++++++++++++- 1 file changed, 102 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx index e2b0214e24729..8f025a281d077 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.test.tsx @@ -2,7 +2,13 @@ import { cleanup, render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { IntlProvider } from "react-intl"; -import { CatalogDiff, StreamTransform } from "core/request/AirbyteClient"; +import { + AirbyteCatalog, + CatalogDiff, + DestinationSyncMode, + StreamTransform, + SyncMode, +} from "core/request/AirbyteClient"; import messages from "../../../locales/en.json"; import { CatalogDiffModal } from "./CatalogDiffModal"; @@ -59,8 +65,79 @@ const updatedItems: StreamTransform[] = [ }, ]; -const mockCatalog = { - streams: [], +const mockCatalog: AirbyteCatalog = { + streams: [ + { + stream: { + namespace: "apple", + name: "banana", + }, + config: { + syncMode: SyncMode.full_refresh, + destinationSyncMode: DestinationSyncMode.overwrite, + }, + }, + { + stream: { + namespace: "apple", + name: "carrot", + }, + config: { + syncMode: SyncMode.full_refresh, + destinationSyncMode: DestinationSyncMode.overwrite, + }, + }, + { + stream: { + namespace: "apple", + name: "dragonfruit", + }, + config: { + syncMode: SyncMode.full_refresh, + destinationSyncMode: DestinationSyncMode.overwrite, + }, + }, + { + stream: { + namespace: "apple", + name: "eclair", + }, + config: { + syncMode: SyncMode.full_refresh, + destinationSyncMode: DestinationSyncMode.overwrite, + }, + }, + { + stream: { + namespace: "apple", + name: "fishcake", + }, + config: { + syncMode: SyncMode.incremental, + destinationSyncMode: DestinationSyncMode.append_dedup, + }, + }, + { + stream: { + namespace: "apple", + name: "gelatin_mold", + }, + config: { + syncMode: SyncMode.incremental, + destinationSyncMode: DestinationSyncMode.append_dedup, + }, + }, + { + stream: { + namespace: "apple", + name: "harissa_paste", + }, + config: { + syncMode: SyncMode.full_refresh, + destinationSyncMode: DestinationSyncMode.overwrite, + }, + }, + ], }; describe("catalog diff modal", () => { @@ -84,14 +161,36 @@ describe("catalog diff modal", () => { ); + /** + * tests for: + * - proper sections being created + * - syncmode string is only rendered for removed streams + */ + const newStreamsTable = screen.getByRole("table", { name: /new streams/ }); expect(newStreamsTable).toBeInTheDocument(); + const newStreamRow = screen.getByRole("row", { name: "apple banana" }); + expect(newStreamRow).toBeInTheDocument(); + + const newStreamRowWithSyncMode = screen.queryByRole("row", { name: "apple carrot incremental | append_dedup" }); + expect(newStreamRowWithSyncMode).not.toBeInTheDocument(); + const removedStreamsTable = screen.getByRole("table", { name: /removed streams/ }); expect(removedStreamsTable).toBeInTheDocument(); + const removedStreamRowWithSyncMode = screen.getByRole("row", { + name: "apple dragonfruit full_refresh | overwrite", + }); + expect(removedStreamRowWithSyncMode).toBeInTheDocument(); + const updatedStreamsSection = screen.getByRole("list", { name: /table with changes/ }); expect(updatedStreamsSection).toBeInTheDocument(); + + const updatedStreamRowWithSyncMode = screen.queryByRole("row", { + name: "apple harissa_paste full_refresh | overwrite", + }); + expect(updatedStreamRowWithSyncMode).not.toBeInTheDocument(); }); test("added fields are not rendered when not in the diff", () => {
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 2931ed5ed644b..de077b279de8c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -45,7 +45,7 @@ export const StreamRow: React.FC = ({ streamTransform, syncMode, )} {namespace}{itemName}{itemName} {diffVerb === "removed" && syncMode && }
- +
{fieldName} -
+ +
{oldType && newType && ( {oldType} {newType} )} -