Skip to content

Commit

Permalink
Re-enable TraceDetail tests and update test IDs
Browse files Browse the repository at this point in the history
  • Loading branch information
@carbonrobot
carbonrobot committed Nov 19, 2023
1 parent b1d2316 commit 3a72cfb
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 87 deletions.
157 changes: 75 additions & 82 deletions packages/webui/src/components/ui/TraceDetail.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ import { Trace } from '@/types';
import TraceDetail from './TraceDetail';

jest.mock('@/components', () => ({
Badge: function ({ children }: any) {
return <>Mock Badge component: {children}</>;
Badge: function ({ children, ...props }: any) {
return <span {...props}>Mock Badge component: {children}</span>;
},
Code: function ({ children }: any) {
return <>Mock Code component: {children}</>;
Expand All @@ -31,18 +31,19 @@ jest.mock('@/components', () => ({
Fields: function (props: any) {
return <div {...props} />;
},
CodeDisplay: function ({ children }: any) {
return <>Mock CodeDisplay component: {children}</>;
CodeDisplay: function ({ children, contentType, ...props }: any) {
return (
<div {...props} data-content-type={contentType}>
Mock CodeDisplay component: {children}
</div>
);
},
Loading: function (props: any) {
return <div {...props}>Mock Loading component</div>;
},
Section: function ({ collapsible, ...safeProps }: any) {
return <div {...safeProps} />;
},
XmlDisplay: function ({ children }: any) {
return <>Mock XmlDisplay component: {children}</>;
},
Button: function ({ children, Icon, ...props }: any) {
return <div {...props}>Mock Button component: {children}</div>;
},
Expand Down Expand Up @@ -76,6 +77,25 @@ jest.mock(
return <div {...props}>Mock ResponseHeaders component: {trace.id}</div>;
},
);
jest.mock('@/components/ui/Tabs', () => ({
TabList: function MockTabList({ children, ...props }: any) {
return <ul {...props}>Mock TabList component: {children}</ul>;
},
TabListItem: function MockTabListItem({ id, title, ...props }: any) {
return (
<li {...props} data-test-id={id}>
Mock TabListItem component: {title}
</li>
);
},
TabContent: function MockTabContent({ id, children, ...props }: any) {
return (
<div {...props} data-test-id={id}>
Mock TabContent component: {children}
</div>
);
},
}));
jest.mock(
'@/components/ui/TimingsDiagram',
() =>
Expand Down Expand Up @@ -122,7 +142,7 @@ describe('TraceDetail', () => {
cleanup();
});

fit('should render without error', () => {
it('should render without error', () => {
render(<TraceDetail />);
});

Expand Down Expand Up @@ -250,10 +270,10 @@ describe('TraceDetail', () => {
const { getByTestId } = render(<TraceDetail />);

const summary = getByTestId('summary');
const service = within(summary).getByTestId('service');
const service = within(summary).getByTestId('service-name');

expect(service).toBeVisible();
expect(service).toHaveTextContent('Sent from my-service');
expect(service).toHaveTextContent('my-service');
});

it('should display button to copy as cURL snippet', () => {
Expand Down Expand Up @@ -281,11 +301,11 @@ describe('TraceDetail', () => {
});

it.each([
{ statusCode: 500, color: 'purple-500' },
{ statusCode: 400, color: 'red-500' },
{ statusCode: 300, color: 'yellow-500' },
{ statusCode: 200, color: 'green-500' },
])('should display a $color circle next to the status code for HTTP $statusCode', ({ statusCode, color }) => {
{ statusCode: 500, color: 'badge-500' },
{ statusCode: 400, color: 'badge-400' },
{ statusCode: 300, color: 'badge-300' },
{ statusCode: 200, color: 'badge-200' },
])('should display a $color badge next to the status code for HTTP $statusCode', ({ statusCode, color }) => {
getSelectedTraceFn.mockReturnValue({
...mockTrace,
http: {
Expand All @@ -297,9 +317,7 @@ describe('TraceDetail', () => {
const { getByTestId } = render(<TraceDetail />);

const status = getByTestId('response-status');
const statusCodeCircle = status.firstChild;

expect(statusCodeCircle).toHaveClass(`bg-${color}`);
expect(status).toHaveClass(color);
});
});

Expand Down Expand Up @@ -369,47 +387,35 @@ describe('TraceDetail', () => {
it.each([
{
contentType: 'application/json',
component: 'JsonDisplay',
content: 'Mock JsonDisplay component: mock_request_body',
},
{
contentType: 'application/graphql-response+json',
component: 'JsonDisplay',
content: 'Mock JsonDisplay component: mock_request_body',
},
{
contentType: 'application/xml',
component: 'XmlDisplay',
content: 'Mock XmlDisplay component: mock_request_body',
},
{
contentType: 'text/text',

component: 'Code',
content: 'Mock Code component: mock_request_body',
},
])(
'should render $component component for request body when content type is $contentType',
({ contentType, content }) => {
getSelectedTraceFn.mockReturnValue({
...mockTrace,
http: {
...mockTrace.http,
requestHeaders: {
'content-type': contentType,
},
])('should display the correct content type for $contentType', ({ contentType }) => {
getSelectedTraceFn.mockReturnValue({
...mockTrace,
http: {
...mockTrace.http,
requestHeaders: {
'content-type': contentType,
},
});
},
});

const { getByTestId } = render(<TraceDetail />);
const { getByTestId } = render(<TraceDetail />);

const requestDetails = getByTestId('trace-detail');
const body = within(requestDetails).getByTestId('request-body');
const requestDetails = getByTestId('trace-detail');
const body = within(requestDetails).getByTestId('request-body');

expect(body).toBeVisible();
expect(body).toHaveTextContent(content);
},
);
expect(body).toBeVisible();
expect(body.getAttribute('data-content-type')).toBe(contentType);
});

it('should not render anything for the body if the body is empty', () => {
jest.mocked(getRequestBody).mockReturnValue(undefined);
Expand All @@ -424,8 +430,7 @@ describe('TraceDetail', () => {
it('should render QueryParams component for trace query params', () => {
const { getByTestId } = render(<TraceDetail />);

const requestDetails = getByTestId('request-details');
const queryParams = within(requestDetails).getByTestId('query-params');
const queryParams = getByTestId('query-params');

expect(queryParams).toBeVisible();
expect(queryParams).toHaveTextContent(`Mock QueryParams component: ${mockTrace.id}`);
Expand All @@ -434,7 +439,7 @@ describe('TraceDetail', () => {
it('should render RequestHeaders component for trace headers', () => {
const { getByTestId } = render(<TraceDetail />);

const requestDetails = getByTestId('request-details');
const requestDetails = getByTestId('request-headers');
const headers = within(requestDetails).getByTestId('headers');

expect(headers).toBeVisible();
Expand Down Expand Up @@ -535,7 +540,7 @@ describe('TraceDetail', () => {
it('should render ResponseHeaders component for trace headers', () => {
const { getByTestId } = render(<TraceDetail />);

const responseDetails = getByTestId('response-details');
const responseDetails = getByTestId('response-headers');
const headers = within(responseDetails).getByTestId('headers');

expect(headers).toBeVisible();
Expand Down Expand Up @@ -599,7 +604,7 @@ describe('TraceDetail', () => {

const { getByTestId } = render(<TraceDetail />);

const responseDetails = getByTestId('response-details');
const responseDetails = getByTestId('request-timings');
const timings = within(responseDetails).getByTestId('timings');

expect(timings).toBeVisible();
Expand All @@ -618,7 +623,7 @@ describe('TraceDetail', () => {

const { getByTestId } = render(<TraceDetail />);

const responseDetails = getByTestId('response-details');
const responseDetails = getByTestId('request-timings');
const timingsBlocked = within(responseDetails).getByTestId('timings-blocked');

expect(timingsBlocked).toBeVisible();
Expand Down Expand Up @@ -673,57 +678,45 @@ describe('TraceDetail', () => {
it.each([
{
contentType: 'application/json',
component: 'JsonDisplay',
content: 'Mock JsonDisplay component: mock_response_body',
},
{
contentType: 'application/graphql-response+json',
component: 'JsonDisplay',
content: 'Mock JsonDisplay component: mock_response_body',
},
{
contentType: 'application/xml',
component: 'XmlDisplay',
content: 'Mock XmlDisplay component: mock_response_body',
},
{
contentType: 'text/text',

component: 'Code',
content: 'Mock Code component: mock_response_body',
},
])(
'should render $component component for response body when content type is $contentType',
({ contentType, content }) => {
getSelectedTraceFn.mockReturnValue({
...mockTrace,
http: {
...mockTrace.http,
responseHeaders: {
'content-type': contentType,
},
])('should display the correct content type for $contentType', ({ contentType }) => {
getSelectedTraceFn.mockReturnValue({
...mockTrace,
http: {
...mockTrace.http,
responseHeaders: {
'content-type': contentType,
},
});
},
});

const { getByTestId } = render(<TraceDetail />);
const { getByTestId } = render(<TraceDetail />);

const responseBody = getByTestId('trace-detail');
const body = within(responseBody).queryByTestId('response-body');
const requestDetails = getByTestId('trace-detail');
const body = within(requestDetails).getByTestId('response-body');

expect(body).toBeVisible();
expect(body).toHaveTextContent(content);
},
);
expect(body).toBeVisible();
expect(body.getAttribute('data-content-type')).toBe(contentType);
});

it('should not render anything for the body if the body is empty', () => {
it('should disable the response tab if the body is empty', () => {
jest.mocked(getResponseBody).mockReturnValue(undefined);

const { getByTestId } = render(<TraceDetail />);

const responseBody = getByTestId('trace-detail');
const body = within(responseBody).queryByTestId('response-body');
const responseBody = getByTestId('summary');
const tab = within(responseBody).queryByTestId('response');

expect(body).not.toBeInTheDocument();
expect(tab).toHaveAttribute('disabled');
});
});
});
Expand Down
12 changes: 7 additions & 5 deletions packages/webui/src/components/ui/TraceDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,18 +87,20 @@ export default function TraceDetail() {
<div className="flex items-center">
<img src={getIconUri(trace)} alt="" className="w-6 h-6" />
</div>
<div className="text-xl font-bold">{method}</div>
<div className="text-xl font-bold" data-test-id="method">
{method}
</div>
{requestAborted && (
<Badge className="bg-manatee-700 uppercase" data-test-id="aborted-indicator">
Aborted
</Badge>
)}
{statusCode && (
<Badge className={badgeStyle(trace)} data-test-id="method">
<Badge className={badgeStyle(trace)} data-test-id="response-status">
{httpStatusLabel}
</Badge>
)}
<Badge>{serviceName}</Badge>
<Badge data-test-id="service-name">{serviceName}</Badge>
</div>
<div className="flex flex-row gap-1">
<CopyAsCurlButton data-test-id="copy-as-curl" trace={trace} />
Expand Down Expand Up @@ -139,7 +141,7 @@ export default function TraceDetail() {

<QueryParams data-test-id="query-params" trace={trace} />

<Section data-test-id="request-details" title="Request Headers">
<Section data-test-id="request-headers" title="Request Headers">
<RequestHeaders data-test-id="headers" trace={trace} />
</Section>

Expand Down Expand Up @@ -169,7 +171,7 @@ export default function TraceDetail() {
</Section>

{showResponseHeaders && (
<Section data-test-id="request-headers" title="Response Headers">
<Section data-test-id="response-headers" title="Response Headers">
<ResponseHeaders data-test-id="headers" trace={trace} />
</Section>
)}
Expand Down

0 comments on commit 3a72cfb

Please sign in to comment.