Add tests for checking Unsaved changes modal

[SofiiaZaitseva]

Add tests for checking Unsaved changes modal:

1. User opened the New source page and leaves the page(or any other pages) - should NOT see the unsaved changes modal
2. User opened the New source page and selected one of the connectors and leaves the page(or any other pages) - should NOT see the unsaved changes modal
3. User opened the New source page and selected one of the connectors, “touched” one of the fields and leaves the page(or any other pages) - should see the unsaved changes modal
4. User opened the New source => selected connector => filled in the fileds => start testing. If it was successful it should redirected to Connector Overview page
5. User opened the New source => selected connector => filled in the fileds => start testing. If it was failed and user tries to leave the page - should see the unsaved changes modal

[ambirdsall]

minor detail: there's no need for the anonymous wrapper function (() => { initialSetupCompleted() }) here. All describe needs for its second argument is some function that, when called with no arguments, does the correct setup, and that's exactly what the initialSetupCompleted value is:

// all three of these do the same thing in the context of a test
beforeEach(() => {
  initialSetupCompleted();
})

// and these last two behave exactly the same in every way
beforeEach(() => initialSetupCompleted());

// but this one is the shortest and cleanest
beforeEach(initialSetupCompleted);

[SofiiaZaitseva]

I used beforeEach(() => initialSetupCompleted()); due to initialSetupCompleted has optional parameter and cannot be used in this beforeEach(initialSetupCompleted); way

[ambirdsall]

These selectors are a bit brittle: if we ever stop using the headlessui library for this modal or use a different level heading than h5, the test will break even if the page behavior remains correct.

In this case, I would make the following changes:

1. add a data-testid attribute to the confirmation modal component (I believe this is in airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx, but I have not double-checked that). Adding it to the outermost Modal component should be fine:

<Modal onClose={onClose} title={<FormattedMessage id={title} />} data-testid="confirmationModal">
  {/* rest of modal implementation */}
</Modal>

2. use that testid attribute in the test. To avoid having to be overly specific with your selectors, use cy.get("[data-testid='confirmationModal']").contains(text) for all assertions, e.g. cy.get("[data-testid='confirmationModal']").contains("Discard changes") or cy.get("[data-testid='confirmationModal']").contains("There are unsaved changes. Are you sure you want to discard your changes?"). Since cy.contains returns true if the text is anywhere within the component, this approach lets our test code remain blissfully unaware of any future changes to the structure or implementation of the modal.

[SofiiaZaitseva]

fixed, thanks!

[ambirdsall]

This { should } import is unused, and should be removed.

[SofiiaZaitseva]

fixed

[ambirdsall]

Does

assert("include", `/source/${interception.response?.body.Id}`)`

assert against the url? (As an aside, if you're using backticks, you can insert values into the string with code, like ${value}, which is nicer to read) It would be a bit more readable to keep the old assertion style:

cy.wait("@createSource", { timeout: 30000 }).then((interception) => {
  cy.url().should("include", `/source/${interception.response?.body.Id}`);
});

[dizel852]

assert against the url?

Yeah, that's actually my suggestion during short sync with @SofiiaZaitseva. After connector creation, we aim to check that we were redirected to the "Overview" page.

[ambirdsall]

nit: use the same style of quotes throughout, unless you're using the interpolation feature of the backtick strings

[ambirdsall]

Consistent quote marks again

[dizel852]

Did a quick review, agree with @ambirdsall comments - need to polish a few things.

[ambirdsall]

Mostly looks good to me, just one last request.

[dizel852]

Code LGTM 👍
All comments are resolved.
CI tests run- ✅