fix(editor): Use BroadcastChannel instead of window.opener for OAuth callback window (#9779)

This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™
2024-06-17 13:41:49 +02:00
committed by GitHub
parent a1046607bf
commit 87cb199745
6 changed files with 68 additions and 12 deletions

View File

@@ -0,0 +1,46 @@
import { CredentialsPage, CredentialsModal } from '../pages';
const credentialsPage = new CredentialsPage();
const credentialsModal = new CredentialsModal();
describe('Credentials', () => {
it('create and connect with Google OAuth2', () => {
// Open credentials page
cy.visit(credentialsPage.url, {
onBeforeLoad(win) {
cy.stub(win, 'open').as('windowOpen');
},
});
// Add a new Google OAuth2 credential
credentialsPage.getters.emptyListCreateCredentialButton().click();
credentialsModal.getters.newCredentialTypeOption('Google OAuth2 API').click();
credentialsModal.getters.newCredentialTypeButton().click();
// Fill in the key/secret and save
credentialsModal.actions.fillField('clientId', 'test-key');
credentialsModal.actions.fillField('clientSecret', 'test-secret');
credentialsModal.actions.save();
// Connect to Google
credentialsModal.getters.oauthConnectButton().click();
cy.get('@windowOpen').should(
'have.been.calledOnceWith',
Cypress.sinon.match(
'https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&prompt=consent&client_id=test-key&redirect_uri=http%3A%2F%2Flocalhost%3A5678%2Frest%2Foauth2-credential%2Fcallback&response_type=code',
),
'OAuth Authorization',
'scrollbars=no,resizable=yes,status=no,titlebar=noe,location=no,toolbar=no,menubar=no,width=500,height=700',
);
// Emulate successful save using BroadcastChannel
cy.window().then(() => {
const channel = new BroadcastChannel('oauth-callback');
channel.postMessage('success');
});
// Check that the credential was saved and connected successfully
credentialsModal.getters.saveButton().should('contain.text', 'Saved');
credentialsModal.getters.oauthConnectSuccessBanner().should('be.visible');
});
});

View File

@@ -9,15 +9,16 @@ export class CredentialsModal extends BasePage {
newCredentialTypeOption: (credentialType: string) =>
cy.getByTestId('new-credential-type-select-option').contains(credentialType),
newCredentialTypeButton: () => cy.getByTestId('new-credential-type-button'),
connectionParameters: () => cy.getByTestId('credential-connection-parameter'),
connectionParameter: (fieldName: string) =>
this.getters.connectionParameters().find(`:contains('${fieldName}') .n8n-input input`),
this.getters.credentialInputs().find(`:contains('${fieldName}') .n8n-input input`),
name: () => cy.getByTestId('credential-name'),
nameInput: () => cy.getByTestId('credential-name').find('input'),
// Saving of the credentials takes a while on the CI so we need to increase the timeout
saveButton: () => cy.getByTestId('credential-save-button', { timeout: 5000 }),
deleteButton: () => cy.getByTestId('credential-delete-button'),
closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close').first(),
oauthConnectButton: () => cy.getByTestId('oauth-connect-button'),
oauthConnectSuccessBanner: () => cy.getByTestId('oauth-connect-success-banner'),
credentialsEditModal: () => cy.getByTestId('credential-edit-dialog'),
credentialsAuthTypeSelector: () => cy.getByTestId('node-auth-type-selector'),
credentialAuthTypeRadioButtons: () =>
@@ -69,6 +70,13 @@ export class CredentialsModal extends BasePage {
this.getters.closeButton().click();
}
},
fillField: (fieldName: string, value: string) => {
this.getters
.credentialInputs()
.getByTestId(`parameter-input-${fieldName}`)
.find('input')
.type(value);
},
createNewCredential: (type: string, closeModal = true) => {
this.getters.newCredentialModal().should('be.visible');
this.getters.newCredentialTypeSelect().should('be.visible');