Skip to content

[NextJS] fix frontend tests outside of main workspace #1527

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

Jump to bottom
Merged
merged 17 commits into from
Sep 9, 2024
Merged

[NextJS] fix frontend tests outside of main workspace #1527

merged 17 commits into from
Sep 9, 2024

Conversation

@ChristopherChudzicki
Copy link
Contributor

@ChristopherChudzicki ChristopherChudzicki commented Sep 6, 2024 •
edited
Loading

What are the relevant tickets?

Toward https://github.com/mitodl/hq/issues/5395

Description (What does it do?)

This PR fixes tests outside of the main (nextjs) workspace. Primarily this was:

  • Changing some APP_SETTINGS to process.env.var_name
  • dealing with Image src
  • resolving issues with routing hooks

How can this be tested?

  1. Run yarn test locally.

@ChristopherChudzicki ChristopherChudzicki changed the title Cc/nextjs tests Fix nextjs tests outside of main dir Sep 6, 2024
@ChristopherChudzicki ChristopherChudzicki changed the title Fix nextjs tests outside of main dir [NextJS] fix frontend tests outside of main workspace Sep 6, 2024
@ChristopherChudzicki ChristopherChudzicki changed the base branch from main to nextjs September 6, 2024 21:09
ChristopherChudzicki
ChristopherChudzicki commented Sep 6, 2024
View reviewed changes
frontends/api/src/test-utils/mock-requests-example.test.ts
Copy link
Contributor Author

@ChristopherChudzicki ChristopherChudzicki Sep 6, 2024

Choose a reason for hiding this comment

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

This was deleted in nextjs branch; i've just reinstated it.

ChristopherChudzicki
ChristopherChudzicki commented Sep 6, 2024
View reviewed changes
frontends/jest-shared-setup.ts
Copy link
Contributor Author

@ChristopherChudzicki ChristopherChudzicki Sep 6, 2024

Choose a reason for hiding this comment

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

This is one of the bigger changes. Basically, react-router came with MemoryRouter specifically designed for uses in tests. NextJS does not have anything like that builtin.

next-router-mock is a community library for mocking next/router, but it's designed for the Pages router. There's an open issue for using it with the App router, but that takes a little effort.

ChristopherChudzicki
ChristopherChudzicki commented Sep 6, 2024
View reviewed changes
frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
? getEmbedlyUrl(resource, size, isMedia)
: DEFAULT_RESOURCE_IMG
}
src={resource.image?.url ? resource.image?.url : DEFAULT_RESOURCE_IMG}
Copy link
Contributor Author

@ChristopherChudzicki ChristopherChudzicki Sep 6, 2024

Choose a reason for hiding this comment

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

@jonkafton Did you mean to use both embedly and NextJS Image component here? I've switched it to just NextJS for now.

Copy link
Contributor

@jonkafton jonkafton Sep 9, 2024

Choose a reason for hiding this comment

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

I added a fallback in getEmbedlyUrl in the Storybook branch to just use the image URL if the env var is not set:

  if (!process.env.NEXT_PUBLIC_EMBEDLY_KEY!) {
    return resource.image!.url!
  }

Writing this I realize that where we use the nextjs/image component we'd be pulling an Embedly image via the Next.js image optimizer, so yeh - we don't want to do that!

@ChristopherChudzicki ChristopherChudzicki marked this pull request as ready for review September 6, 2024 22:16
@ChristopherChudzicki ChristopherChudzicki mentioned this pull request Sep 9, 2024
Merged
@ChristopherChudzicki ChristopherChudzicki merged commit 948974e into nextjs Sep 9, 2024
ChristopherChudzicki added a commit that referenced this pull request Sep 10, 2024
@ChristopherChudzicki
[NextJS] fix frontend tests outside of main workspace (#1527)
1f43fbb 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
ChristopherChudzicki added a commit that referenced this pull request Sep 11, 2024
@ChristopherChudzicki
[NextJS] fix frontend tests outside of main workspace (#1527)
f6c4d89 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
ChristopherChudzicki added a commit that referenced this pull request Sep 13, 2024
@ChristopherChudzicki
[NextJS] fix frontend tests outside of main workspace (#1527)
1ecd60e 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
ChristopherChudzicki added a commit that referenced this pull request Sep 16, 2024
@ChristopherChudzicki
[NextJS] fix frontend tests outside of main workspace (#1527)
9c42d0f 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
jonkafton pushed a commit that referenced this pull request Sep 18, 2024
@ChristopherChudzicki @jonkafton
[NextJS] fix frontend tests outside of main workspace (#1527)
32bb439 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
ChristopherChudzicki added a commit that referenced this pull request Sep 19, 2024
@ChristopherChudzicki
[NextJS] fix frontend tests outside of main workspace (#1527)
5b0fb81 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
jonkafton pushed a commit that referenced this pull request Sep 23, 2024
@ChristopherChudzicki @jonkafton
[NextJS] fix frontend tests outside of main workspace (#1527)
47448e5 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
jonkafton pushed a commit that referenced this pull request Sep 23, 2024
@ChristopherChudzicki @jonkafton
[NextJS] fix frontend tests outside of main workspace (#1527)
3920b24 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
jonkafton pushed a commit that referenced this pull request Sep 24, 2024
@ChristopherChudzicki @jonkafton
[NextJS] fix frontend tests outside of main workspace (#1527)
f8c4c42 
* add util getByImageSrc

* remove main + mit-learn jest configs (for now)

* restore mock request example

* use NEXT_PUBLIC_MITOL_API_BASE_URL

* fix failing image related tests

* fix most remaining ol-components tests

* fix remaining nextjs tests in ol-components

* fix some TS errors, move mock

* disable ci typecheck task

* better comment

* sometimes TS is frustrating

* re-enable tests

* run tests w specific env var

* remove sharp

* formatting fix

* dedupe types/react

* enable build-storybook on ci
@odlbot odlbot mentioned this pull request Oct 22, 2024
Merged
74 tasks
@rhysyngsun rhysyngsun deleted the cc/nextjs-tests branch February 7, 2025 20:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jonkafton jonkafton jonkafton approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ChristopherChudzicki @jonkafton