Skip to content

Commit

Permalink
fix(components-LandingNav): polish animation effect (#879)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sabertazimi
sabertazimi committed May 29, 2022
1 parent 5f33855 commit f93fb9d
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 31 deletions.
45 changes: 21 additions & 24 deletions components/LandingNav/LandingNav.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
import LandingNav from './LandingNav';

describe('LandingNav', () => {
const navigationOpenStyle =
'opacity: 1; transform: translateX(0%) translateZ(0);';
const navigationCloseStyle =
'opacity: 0; transform: translateX(-100%) translateZ(0);';
const bannerOpenStyle =
'opacity: 0.7; transform: translateX(0%) translateZ(0);';
const bannerCloseStyle =
'opacity: 0; transform: translateX(-100%) translateZ(0);';

beforeAll(() => {
jest.useFakeTimers();
});
Expand Down Expand Up @@ -46,30 +55,24 @@ describe('LandingNav', () => {
jest.advanceTimersByTime(1000);
});

expect(screen.getByRole('navigation')).toHaveStyle(
'transform: translateX(-100%) translateZ(0);'
);
expect(screen.getByRole('banner')).toHaveStyle('opacity: 0');
expect(screen.getByRole('navigation')).toHaveStyle(navigationCloseStyle);
expect(screen.getByRole('banner')).toHaveStyle(bannerCloseStyle);

fireEvent.click(screen.getByTestId('hamburger-button'));
act(() => {
jest.advanceTimersByTime(1000);
});

expect(screen.getByRole('navigation')).toHaveStyle(
'transform: translateX(0%) translateZ(0);'
);
expect(screen.getByRole('banner')).toHaveStyle('opacity: 0.8');
expect(screen.getByRole('navigation')).toHaveStyle(navigationOpenStyle);
expect(screen.getByRole('banner')).toHaveStyle(bannerOpenStyle);

fireEvent.keyDown(screen.getByTestId('hamburger-button'), { key: 'Enter' });
act(() => {
jest.advanceTimersByTime(1000);
});

expect(screen.getByRole('navigation')).toHaveStyle(
'transform: translateX(-100%) translateZ(0);'
);
expect(screen.getByRole('banner')).toHaveStyle('opacity: 0');
expect(screen.getByRole('navigation')).toHaveStyle(navigationCloseStyle);
expect(screen.getByRole('banner')).toHaveStyle(bannerCloseStyle);
});

test('should expanded when navigation icon toggled', () => {
Expand All @@ -78,29 +81,23 @@ describe('LandingNav', () => {
jest.advanceTimersByTime(1000);
});

expect(screen.getByRole('navigation')).toHaveStyle(
'transform: translateX(-100%) translateZ(0);'
);
expect(screen.getByRole('banner')).toHaveStyle('opacity: 0');
expect(screen.getByRole('navigation')).toHaveStyle(navigationCloseStyle);
expect(screen.getByRole('banner')).toHaveStyle(bannerCloseStyle);

fireEvent.click(screen.getByTestId('hamburger-icon'));
act(() => {
jest.advanceTimersByTime(1000);
});

expect(screen.getByRole('navigation')).toHaveStyle(
'transform: translateX(0%) translateZ(0);'
);
expect(screen.getByRole('banner')).toHaveStyle('opacity: 0.8');
expect(screen.getByRole('navigation')).toHaveStyle(navigationOpenStyle);
expect(screen.getByRole('banner')).toHaveStyle(bannerOpenStyle);

fireEvent.keyDown(screen.getByTestId('hamburger-icon'), { key: 'Enter' });
act(() => {
jest.advanceTimersByTime(1000);
});

expect(screen.getByRole('navigation')).toHaveStyle(
'transform: translateX(-100%) translateZ(0);'
);
expect(screen.getByRole('banner')).toHaveStyle('opacity: 0');
expect(screen.getByRole('navigation')).toHaveStyle(navigationCloseStyle);
expect(screen.getByRole('banner')).toHaveStyle(bannerCloseStyle);
});
});
11 changes: 8 additions & 3 deletions components/LandingNav/LandingNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@ interface Props {
const navVariants: MotionProps['variants'] = {
open: {
x: 0,
opacity: 1,
},
close: {
x: '-100%',
opacity: 0,
},
};

Expand All @@ -29,16 +31,19 @@ const navTransition: MotionProps['transition'] = {

const bannerVariants: MotionProps['variants'] = {
open: {
opacity: 0.8,
x: 0,
opacity: 0.7,
},
close: {
x: '-100%',
opacity: 0,
},
};

const bannerTransition: MotionProps['transition'] = {
type: 'spring',
duration: 0.2,
type: 'tween',
ease: 'circInOut',
duration: 0.4,
};

const LandingNav = ({ routes = defaultRoutes }: Props): JSX.Element => {
Expand Down
4 changes: 2 additions & 2 deletions components/LandingNav/__snapshots__/LandingNav.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ exports[`LandingNav should render routes correctly (snapshot) 1`] = `
<div
class="nav"
role="navigation"
style="transform: translateX(-100%) translateZ(0);"
style="opacity: 0; transform: translateX(-100%) translateZ(0);"
>
<div
class="inline-flex tooltip"
Expand Down Expand Up @@ -103,7 +103,7 @@ exports[`LandingNav should render routes correctly (snapshot) 1`] = `
<div
class="banner"
role="banner"
style="opacity: 0;"
style="opacity: 0; transform: translateX(-100%) translateZ(0);"
/>
</div>
`;
2 changes: 0 additions & 2 deletions cypress/integration/home.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ describe('Home Page', () => {
it('should toggle navigation menu when navigation button toggled', () => {
cy.getByTestId('hamburger-button').click();

cy.getByRole('banner').should('be.visible');
cy.getByRole('navigation')
.should('be.visible')
.findByRole('link')
Expand All @@ -21,7 +20,6 @@ describe('Home Page', () => {

cy.getByTestId('hamburger-icon').type('{enter}');

cy.getByRole('banner').should('not.be.visible');
cy.getByRole('navigation')
.should('not.be.visible')
.findByRole('link')
Expand Down

1 comment on commit f93fb9d

@vercel
Copy link

@vercel vercel bot commented on f93fb9d May 29, 2022

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

blog – ./

blog-sabertaz.vercel.app
blog-git-main-sabertaz.vercel.app
blog.tazimi.dev

Please sign in to comment.