Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Service overview e2e test #125359

Merged
merged 5 commits into from
Feb 15, 2022
Merged

Service overview e2e test #125359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d32f7ad
Add e2e test for service overview
MiriamAparicio Feb 11, 2022
2bdfb05
add test for comparison type change
MiriamAparicio Feb 11, 2022
2a63a21
PR review comments addressed
MiriamAparicio Feb 14, 2022
2bbbd1b
improve time range test
MiriamAparicio Feb 14, 2022
2d16ad7
Merge branch 'main' into service-overview-2e2-test
kibanamachine Feb 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
272 changes: 219 additions & 53 deletions .../apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,71 @@ const baseUrl = url.format({
query: { rangeFrom: start, rangeTo: end },
});

const apiRequestsToIntercept = [
{
endpoint:
'/internal/apm/services/opbeans-node/transactions/groups/main_statistics?*',
aliasName: 'transactionsGroupsMainStadisticsRequest',
},
{
endpoint:
'/internal/apm/services/opbeans-node/errors/groups/main_statistics?*',
aliasName: 'errorsGroupsMainStadisticsRequest',
},
{
endpoint:
'/internal/apm/services/opbeans-node/transaction/charts/breakdown?*',
aliasName: 'transactionsBreakdownRequest',
},
{
endpoint: '/internal/apm/services/opbeans-node/dependencies?*',
aliasName: 'dependenciesRequest',
},
];

const apiRequestsToInterceptWithComparison = [
{
endpoint:
'/internal/apm/services/opbeans-node/transactions/charts/latency?*',
aliasName: 'latencyRequest',
},
{
endpoint: '/internal/apm/services/opbeans-node/throughput?*',
aliasName: 'throughputRequest',
},
{
endpoint:
'/internal/apm/services/opbeans-node/transactions/charts/error_rate?*',
aliasName: 'errorRateRequest',
},
{
endpoint:
'/internal/apm/services/opbeans-node/transactions/groups/detailed_statistics?*',
aliasName: 'transactionsGroupsDetailedStadisticsRequest',
},
{
endpoint:
'/internal/apm/services/opbeans-node/service_overview_instances/main_statistics?*',
aliasName: 'instancesMainStadisticsRequest',
},

{
endpoint:
'/internal/apm/services/opbeans-node/service_overview_instances/detailed_statistics?*',
aliasName: 'instancesDetailedStadisticsRequest',
},
];

const aliasNamesNoComparison = apiRequestsToIntercept.map(
({ aliasName }) => `@${aliasName}`
);

const aliasNamesWithComparison = apiRequestsToInterceptWithComparison.map(
({ aliasName }) => `@${aliasName}`
);

const aliasNames = [...aliasNamesNoComparison, ...aliasNamesWithComparison];

describe('Service Overview', () => {
before(async () => {
await synthtrace.index(
Expand All @@ -32,66 +97,167 @@ describe('Service Overview', () => {
await synthtrace.clean();
});

beforeEach(() => {
cy.loginAsReadOnlyUser();
describe('renders', () => {
before(() => {
cy.loginAsReadOnlyUser();
cy.visit(baseUrl);
});
it('transaction latency chart', () => {
cy.get('[data-test-subj="latencyChart"]');
});

it('throughput chart', () => {
cy.get('[data-test-subj="throughput"]');
});

it('transactions group table', () => {
cy.get('[data-test-subj="transactionsGroupTable"]');
});

it('error table', () => {
cy.get('[data-test-subj="serviceOverviewErrorsTable"]');
});

it('dependencies table', () => {
cy.get('[data-test-subj="dependenciesTable"]');
});

it('instances latency distribution chart', () => {
cy.get('[data-test-subj="instancesLatencyDistribution"]');
});

it('instances table', () => {
cy.get('[data-test-subj="serviceOverviewInstancesTable"]');
});
});

it('persists transaction type selected when clicking on Transactions tab', () => {
cy.visit(baseUrl);
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'request'
);
cy.get('[data-test-subj="headerFilterTransactionType"]').select('Worker');
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'Worker'
);
cy.contains('Transactions').click();
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'Worker'
);
describe('transactions', () => {
Copy link
Contributor Author

@MiriamAparicio MiriamAparicio Feb 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kept these tests for the transactions because they were already there, but I think we need to create a specific test file for the transactions flow
What do you think @cauemarcondes @gbamparop ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or test all the tabs flow here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I can see, where are testing if the transaction type is persisted when navigating from service overview to something else, so IMO it makes sense to keep it here. What you could do is to improve the describe title.

beforeEach(() => {
cy.loginAsReadOnlyUser();
cy.visit(baseUrl);
});

it('persists transaction type selected when clicking on Transactions tab', () => {
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'request'
);
cy.get('[data-test-subj="headerFilterTransactionType"]').select('Worker');
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'Worker'
);
cy.contains('Transactions').click();
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'Worker'
);
});

it('persists transaction type selected when clicking on View Transactions link', () => {
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'request'
);
cy.get('[data-test-subj="headerFilterTransactionType"]').select('Worker');
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'Worker'
);

cy.contains('View transactions').click();
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'Worker'
);
});
});

it('persists transaction type selected when clicking on View Transactions link', () => {
cy.visit(baseUrl);
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'request'
);
cy.get('[data-test-subj="headerFilterTransactionType"]').select('Worker');
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'Worker'
);
describe('when RUM service', () => {
before(() => {
cy.loginAsReadOnlyUser();
cy.visit(
url.format({
pathname: '/app/apm/services/opbeans-rum/overview',
query: { rangeFrom: start, rangeTo: end },
})
);
});

cy.contains('View transactions').click();
cy.get('[data-test-subj="headerFilterTransactionType"]').should(
'have.value',
'Worker'
);
it('hides dependency tab when RUM service', () => {
cy.intercept('GET', '/internal/apm/services/opbeans-rum/agent?*').as(
'agentRequest'
);
cy.contains('Overview');
cy.contains('Transactions');
cy.contains('Error');
cy.contains('Service Map');
// Waits until the agent request is finished to check the tab.
cy.wait('@agentRequest');
cy.get('.euiTabs .euiTab__content').then((elements) => {
elements.map((index, element) => {
expect(element.innerText).to.not.equal('Dependencies');
});
});
});
});

it('hides dependency tab when RUM service', () => {
cy.intercept('GET', '/internal/apm/services/opbeans-rum/agent?*').as(
'agentRequest'
);
cy.visit(
url.format({
pathname: '/app/apm/services/opbeans-rum/overview',
query: { rangeFrom: start, rangeTo: end },
})
);
cy.contains('Overview');
cy.contains('Transactions');
cy.contains('Error');
cy.contains('Service Map');
// Waits until the agent request is finished to check the tab.
cy.wait('@agentRequest');
cy.get('.euiTabs .euiTab__content').then((elements) => {
elements.map((index, element) => {
expect(element.innerText).to.not.equal('Dependencies');
describe('Calls APIs', () => {
beforeEach(() => {
cy.loginAsReadOnlyUser();
cy.visit(baseUrl);
apiRequestsToIntercept.map(({ endpoint, aliasName }) => {
cy.intercept('GET', endpoint).as(aliasName);
});
apiRequestsToInterceptWithComparison.map(({ endpoint, aliasName }) => {
cy.intercept('GET', endpoint).as(aliasName);
});
});

it('with the correct environment when changing the environment', () => {
cy.wait(aliasNames, { requestTimeout: 10000 });

cy.get('[data-test-subj="environmentFilter"]').select('production');

cy.expectAPIsToHaveBeenCalledWith({
apisIntercepted: aliasNames,
value: 'environment=production',
});
});

it('when clicking the refresh button', () => {
cy.contains('Refresh').click();
cy.wait(aliasNames, { requestTimeout: 10000 });
});

it('when selecting a different time range and clicking the update button', () => {
cy.wait(aliasNames, { requestTimeout: 10000 });

cy.selectAbsoluteTimeRange(
'Oct 10, 2021 @ 01:00:00.000',
'Oct 10, 2021 @ 01:30:00.000'
);
cy.contains('Update').click();

cy.expectAPIsToHaveBeenCalledWith({
apisIntercepted: aliasNames,
value:
'start=2021-10-10T00%3A00%3A00.000Z&end=2021-10-10T00%3A30%3A00.000Z',
});
});

it('when selecting a different comparison window', () => {
cy.get('[data-test-subj="comparisonSelect"]').should('have.value', 'day');

// selects another comparison type
cy.get('[data-test-subj="comparisonSelect"]').select('week');
cy.get('[data-test-subj="comparisonSelect"]').should(
'have.value',
'week'
);
cy.expectAPIsToHaveBeenCalledWith({
apisIntercepted: aliasNamesWithComparison,
value: 'comparisonStart',
});
});
});
Expand Down
6 changes: 5 additions & 1 deletion ...lugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,11 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
});

return (
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexGroup
direction="column"
gutterSize="s"
data-test-subj="serviceOverviewErrorsTable"
>
<EuiFlexItem>
<EuiFlexGroup responsive={false} justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
Expand Down
6 changes: 5 additions & 1 deletion ...ins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,11 @@ export function ServiceOverviewInstancesTable({
};

return (
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexGroup
direction="column"
gutterSize="s"
data-test-subj="serviceOverviewInstancesTable"
>
<EuiFlexItem>
<EuiTitle size="xs">
<h2>
Expand Down
9 changes: 7 additions & 2 deletions ...lugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,13 @@ export function InstancesLatencyDistributionChart({
})}
</h2>
</EuiTitle>
<ChartContainer hasData={hasData} height={height} status={status}>
<Chart id="instances-latency-distribution">
<ChartContainer
hasData={hasData}
height={height}
status={status}
id="instancesLatencyDistribution"
>
<Chart>
<Settings
legendPosition={Position.Bottom}
onElementClick={handleElementClick}
Expand Down
6 changes: 5 additions & 1 deletion x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,11 @@ export function DependenciesTable(props: Props) {
);

return (
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexGroup
direction="column"
gutterSize="s"
data-test-subj="dependenciesTable"
>
<EuiFlexItem>
<EuiFlexGroup responsive={false} justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
Expand Down
6 changes: 5 additions & 1 deletion x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,11 @@ export function TransactionsTable({
const isNotInitiated = status === FETCH_STATUS.NOT_INITIATED;

return (
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexGroup
direction="column"
gutterSize="s"
data-test-subj="transactionsGroupTable"
>
<EuiFlexItem>
<EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
<EuiFlexItem grow={false}>
Expand Down