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.

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

refactor: [M3-6354] - MUI v5 Migration - Components > LandingLoading #9282

Merged
merged 3 commits into from
Jun 27, 2023
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
refactor: [M3-6354] - Components > LandingLoading
  • Loading branch information
jaalah committed Jun 21, 2023
commit 6ca07c8f59e9f986adfc5070a77983624d5237f6
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { LandingLoading, DEFAULT_DELAY } from './LandingLoading';

const meta: Meta<typeof LandingLoading> = {
title: 'Components/LandingLoading',
component: LandingLoading,
argTypes: {},
args: {
shouldDelay: false,
delayInMS: DEFAULT_DELAY,
children: undefined,
},
};

export default meta;

type Story = StoryObj<typeof LandingLoading>;

export const Default: Story = {
args: {},
render: (args) => <LandingLoading {...args} />,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import * as React from 'react';
import { LandingLoading, DEFAULT_DELAY } from './LandingLoading';
import { render, screen, act } from '@testing-library/react';

jest.useFakeTimers();

const LOADING_ICON = 'circle-progress';

describe('LandingLoading', () => {
afterEach(() => {
jest.clearAllTimers();
});

it('renders the loading indicator by default', () => {
render(<LandingLoading />);
expect(screen.getByTestId(LOADING_ICON)).toBeInTheDocument();
});

it('renders custom loading indicator when children are provided', () => {
render(
<LandingLoading>
<div data-testid="custom-loading-indicator">Loading...</div>
</LandingLoading>
);
expect(screen.getByTestId('custom-loading-indicator')).toBeInTheDocument();
expect(screen.queryByTestId(LOADING_ICON)).toBeNull();
});

it('does not render the loading indicator when shouldDelay is true', () => {
render(<LandingLoading shouldDelay />);
expect(screen.queryByTestId(LOADING_ICON)).toBeNull();
});

it('renders the loading indicator after the delay', () => {
render(<LandingLoading shouldDelay />);
expect(screen.queryByTestId(LOADING_ICON)).toBeNull();
act(() => {
jest.advanceTimersByTime(DEFAULT_DELAY);
});
expect(screen.getByTestId(LOADING_ICON)).toBeInTheDocument();
});

it('renders the loading indicator after the specified delayInMS', () => {
render(<LandingLoading delayInMS={2000} />);
expect(screen.queryByTestId(LOADING_ICON)).toBeNull();
act(() => {
jest.advanceTimersByTime(2000);
});
expect(screen.getByTestId(LOADING_ICON)).toBeInTheDocument();
});

it('does not render the loading indicator when shouldDelay is false and no delayInMS is provided', () => {
render(<LandingLoading shouldDelay={false} />);
expect(screen.getByTestId(LOADING_ICON)).toBeInTheDocument();
});
});
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { CircleProgress } from 'src/components/CircleProgress';

const DEFAULT_DELAY = 1000;
export const DEFAULT_DELAY = 1000;

interface LandingLoadingProps {
/** If true, the loading indicator will not be rendered for 1 second which may give user's with fast connections a more fluid experience. */
@@ -48,5 +48,7 @@ export const LandingLoading = ({
};
}, [shouldDelay, delayInMS]);

return showLoading ? children || <CircleProgress /> : null;
return showLoading
? children || <CircleProgress data-testid="circle-progress" />
: null;
};