feat(blog) Migrate BlogCard component

[Harkunwar]

This PR aims to migrate the BlogCard component as mentioned in #5308

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2023 6:03pm
nodejs-org-stories	✅ Ready (Inspect)	Visit Preview		Apr 24, 2023 6:03pm

[mikeesto]

Thanks, see if you can fix the lint issue in components/Blog/BlogCard/index.module.scss https://github.com/nodejs/nodejs.org/actions/runs/4775331933/jobs/8489525157?pr=5323

[ovflowd]

From the Stories, it looks like that:

• The colour of the title and font weights seem to be wrong
• The date formatting needs to be corrected? I guess you should use FormattedDateTime with something that makes "Month Day, Year" (e.g. "June, 21, 2022)
• After category, there should be a read time span

Example how it should look like:

Demo: https://nodejs.dev/en/blog

[Harkunwar]

I've made the requested changes

[ovflowd]

We're almost there. But impressive work!!

[Harkunwar]

@ovflowd I feel like there's a lot of duplication in the way we're writing unit tests and stories. If we could directly import stories in our unit tests, we'll have less duplication. Storybook already allows it, so would it be worth doing that?

[Harkunwar]

If I add this to our jest.setup.mjs, it will allow us to use decorators defined in .storybook/preview.

import { setProjectAnnotations } from '@storybook/react';
import * as globalStorybookConfig from './.storybook/preview';

setProjectAnnotations(globalStorybookConfig);

Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
    })),
});

Then we won't need to use IntlProvider anymore and our snapshot tests could become as simple as:

import { render } from '@testing-library/react';
import * as stories from '../index.stories';
import { composeStories } from '@storybook/react';

const { Default } = composeStories(stories);

jest.mock('next/router', () => ({
  useRouter: jest.fn().mockReturnValue({}),
}));

describe('BlogCard component', () => {
  it('renders correctly', () => {
    const { container } = render(<Default />);
    expect(container).toMatchSnapshot();
  });
});

And we can start using the stories in other tests as well instead of duplicating them multiple times.

[ovflowd]

@Harkunwar feel free to create an issue and work on a PR updating all tests to the approach you're suggesting :)

[shanpriyan]

Looks great! 🚀