Skip to content

Commit

Permalink
feat: Fe onboarding flow (#1427)
Browse files Browse the repository at this point in the history
  • Loading branch information
yodigos authored Aug 6, 2024
1 parent e81194a commit a45fa43
Show file tree
Hide file tree
Showing 22 changed files with 983 additions and 64 deletions.
1 change: 1 addition & 0 deletions .github/workflows/e2e.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ jobs:
test-scenario:
- "multi-apps"
- "helm-chart"
- "fe-synthetic"
include:
- kube-version: "1.23"
kind-image: "kindest/node:v1.23.17@sha256:14d0a9a892b943866d7e6be119a06871291c517d279aedb816a4b4bc0ec0a5b3"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,7 @@ export function CreateConnectionForm({
)}
<FieldWrapper>
<KeyvalInput
data-cy={'create-destination-input-name'}
label={SETUP.DESTINATION_NAME}
value={destinationName}
onChange={setDestinationName}
Expand Down Expand Up @@ -269,6 +270,7 @@ export function CreateConnectionForm({
</KeyvalButton>
)}
<KeyvalButton
data-cy={'create-destination-create-click'}
disabled={
isCreateButtonDisabled || isConnectionTested.enabled === false
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export function renderFields(
return (
<FieldWrapper key={name}>
<KeyvalInput
data-cy={'create-destination-input-'+ name}
label={display_name}
value={dynamicFields[name]}
onChange={(value) => onChange(name, value)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function DestinationCard({

return (
<KeyvalCard>
<DestinationCardWrapper onClick={onClick}>
<DestinationCardWrapper data-cy={'choose-destination-'+ display_name} onClick={onClick}>
<KeyvalImage
src={image_url}
width={56}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function ChooseSourcesHeader({
</TotalSelectedWrapper>
)}

<KeyvalButton onClick={onNextClick} style={{ gap: 10, width: 120 }}>
<KeyvalButton data-cy={'choose-source-next-click'} onClick={onNextClick} style={{ gap: 10, width: 120 }}>
<KeyvalText size={20} weight={600} color={theme.text.dark_button}>
{SETUP.NEXT}
</KeyvalText>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function SourceCard({ item, onClick, focus }: any) {
<RadioButtonWrapper>
<KeyvalRadioButton onChange={onClick} value={focus} />
</RadioButtonWrapper>
<SourceCardWrapper onClick={onClick}>
<SourceCardWrapper onClick={onClick} data-cy={'choose-source-' + item.name}>
<Logo width={'6vh'} height={'6vh'} />
<SourceTextWrapper>
<ApplicationNameWrapper>
Expand Down
1 change: 1 addition & 0 deletions frontend/webapp/cypress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {defineConfig} from 'cypress';

export default defineConfig({
e2e: {
baseUrl: 'http://localhost:3000',
setupNodeEvents(on, config) {
},
},
Expand Down
36 changes: 36 additions & 0 deletions frontend/webapp/cypress/e2e/onboarding-flow.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
describe('On Boarding Flow Tests', () => {

beforeEach(() => {
cy.visit('/')
});

it('Source page redirects correctly', () => {
cy.url().should('eq', `${Cypress.config('baseUrl')}/choose-sources`);
})

it('Run on the onboarding flow', () => {
// Select All Apps
cy.get('[data-cy="choose-source-coupon"]').should('exist').click()
cy.get('[data-cy="choose-source-frontend"]').should('exist').click()
cy.get('[data-cy="choose-source-inventory"]').should('exist').click()
cy.get('[data-cy="choose-source-membership"]').should('exist').click()
cy.get('[data-cy="choose-source-pricing"]').should('exist').click()

// Click Next Page
cy.get('[data-cy="choose-source-next-click"]').should('exist').click()

// Select Tempo
cy.url().should('eq', `${Cypress.config('baseUrl')}/choose-destination`);
cy.get('[data-cy="choose-destination-Tempo"]').should('exist').click()

// Fill Destination Form
cy.url().should('eq', `${Cypress.config('baseUrl')}/connect-destination?type=tempo`);
cy.get('[data-cy=create-destination-input-name]').type('e2e-tests');
cy.get('[data-cy=create-destination-input-TEMPO_URL]').type('e2e-tests-tempo.traces:4317');
cy.get('[data-cy="create-destination-create-click"]').should('exist').click()

cy.url().should('contain', `${Cypress.config('baseUrl')}/overview`);

});
}
);
8 changes: 2 additions & 6 deletions frontend/webapp/cypress/e2e/test-overview.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,11 @@ describe('Overview Page Tests', () => {
});

it('should overview page redirect correctly', () => {
cy.url().should('eq', 'http://localhost:3000/overview');
cy.url().should('contain', `${Cypress.config('baseUrl')}/overview`);
})

it('should Sources exists', () => {
cy.get('[data-id="namespace-0"]').should('have.text', 'defaultcoupon')
cy.get('[data-id="namespace-1"]').should('have.text', 'defaultfrontend')
cy.get('[data-id="namespace-2"]').should('have.text', 'defaultinventory')
cy.get('[data-id="namespace-3"]').should('have.text', 'defaultmembership')
cy.get('[data-id="namespace-4"]').should('have.text', 'defaultpricing')
cy.assertDemoAppsExistOverviewPage()
})

it('should Destinations exists', () => {
Expand Down
54 changes: 17 additions & 37 deletions frontend/webapp/cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -1,37 +1,17 @@
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }
export {};

declare global {
namespace Cypress {
interface Chainable<Subject = any> {
assertDemoAppsExistOverviewPage(): Chainable<any>;
}
}
}

Cypress.Commands.add('assertDemoAppsExistOverviewPage', () => {
cy.get('[data-id="namespace-0"]').should('have.text', 'defaultcoupon')
cy.get('[data-id="namespace-1"]').should('have.text', 'defaultfrontend')
cy.get('[data-id="namespace-2"]').should('have.text', 'defaultinventory')
cy.get('[data-id="namespace-3"]').should('have.text', 'defaultmembership')
cy.get('[data-id="namespace-4"]').should('have.text', 'defaultpricing')
});
2 changes: 1 addition & 1 deletion frontend/webapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
},
"dependencies": {
"@focus-reactive/react-yaml": "^1.1.2",
"@keyval-dev/design-system": "^2.0.2",
"@keyval-dev/design-system": "^2.0.4",
"@next/font": "^13.4.7",
"@reduxjs/toolkit": "^2.2.1",
"@svgr/webpack": "^6.2.1",
Expand Down
8 changes: 4 additions & 4 deletions frontend/webapp/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1487,10 +1487,10 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"

"@keyval-dev/design-system@^2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@keyval-dev/design-system/-/design-system-2.0.2.tgz#6d1866af368bcfd3a1d07f66287b452ccd885f40"
integrity sha512-14+ga4fVgyo1kRTODQeRgxkZGF7Egyn/CgZcqCqq8tKKniXvimUu+RDRjDT6rzwHkktAX7E50KiT+E8bVtT3QQ==
"@keyval-dev/design-system@^2.0.4":
version "2.0.4"
resolved "https://registry.yarnpkg.com/@keyval-dev/design-system/-/design-system-2.0.4.tgz#1ee6de8c381c5668cd825b7f460dba42ed96ab3e"
integrity sha512-ZlYtAi7uE/yUp9KMSVrBod0QhCCC9/ua8FhR9F/j2MukAytMFftnq+ftfuostX1qEWj4cViAo08KL5cMPE3XMg==
dependencies:
"@focus-reactive/react-yaml" "^1.1.2"
"@svgr/core" "^8.0.0"
Expand Down
15 changes: 15 additions & 0 deletions tests/common/assert-multiple-yaml-files.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
#!/bin/bash

files=(
"assert-runtime-detected.yaml"
"assert-instrumented-and-pipeline.yaml"
)

for file in "${files[@]}"; do
echo "Asserting $file..."
# Your logic to assert the YAML file
# For example, use yamllint or a custom validation
yamllint "$file" || exit 1
done

echo "All YAML files passed assertions."
32 changes: 20 additions & 12 deletions tests/common/ui-tests/run_cypress_tests.sh
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
#!/bin/bash

run_cypress_test() {
local spec=$1
npx cypress run --spec "$spec"
local status=$?

if [ $status -ne 0 ]; then
echo "Cypress tests failed"
# Stop the background process
kill "$(cat odigos-ui.pid)"
rm odigos-ui.pid
rm ../../odigos-ui.log
exit $status
fi
}

echo "Running Cypress tests"
cd ../../../frontend/webapp || exit
npx cypress run --spec "cypress/e2e/test-overview.cy.ts"

status_cypress=$?
if [ $status_cypress -ne 0 ]; then
echo "Cypress tests failed"
if [ "$1" = "include-onboarding-flow" ]; then
run_cypress_test "cypress/e2e/onboarding-flow.cy.ts"
fi

# Stop the background process
kill "$(cat odigos-ui.pid)"
rm odigos-ui.pid
rm ../../odigos-ui.log
run_cypress_test "cypress/e2e/test-overview.cy.ts"

exit $status_cypress
else
echo "Cypress tests passed"
fi
echo "Cypress tests passed"
1 change: 0 additions & 1 deletion tests/common/ui-tests/start_odigos_ui.sh
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ then
echo "Odigos UI started successfully"
else
echo "Failed to start Odigos UI"
# I want to print the log file to the console
cat ../../odigos-ui.log
exit 1
fi
Loading

0 comments on commit a45fa43

Please sign in to comment.