wip: feat: import all views dynamically #752

dpschen · 2021-09-14T15:45:42Z

dpschen commented

2021-09-14 15:45:42 +00:00

Better code splitting.

Code Splitting can be optmized later even further.
But for now I want to focus on the vue 3 transition instead.

Better code splitting. Code Splitting can be optmized later even further. But for now I want to focus on the vue 3 transition instead.

dpschen force-pushed feature/import-view-dynamically from 3199d3d162 to dc5a2e19ef

2021-09-19 16:04:04 +00:00

Compare

dpschen referenced this pull request

2021-09-19 16:07:39 +00:00

feat: remove lodash dependency #743

dpschen changed title from ~~feat: import all views dynamically~~ to wip: feat: import all views dynamically

2021-09-19 16:31:22 +00:00

dpschen force-pushed feature/import-view-dynamically from dc5a2e19ef to 16e2fecb7b

2021-09-19 17:09:27 +00:00

Compare

dpschen force-pushed feature/import-view-dynamically from 16e2fecb7b to c5776b9a5a

2021-09-19 17:38:46 +00:00

Compare

dpschen force-pushed feature/import-view-dynamically from c5776b9a5a to 20f6f95546

2021-09-22 21:36:18 +00:00

Compare

dpschen force-pushed feature/import-view-dynamically from 20f6f95546 to 4ef533ae0a

2021-09-25 10:27:17 +00:00

Compare

dpschen commented

2021-09-26 14:00:00 +00:00

@konrad: Do you understand what fails here?

konrad commented

2021-09-26 14:06:46 +00:00

Is it reprocable locally?

dpschen commented

2021-09-28 07:45:24 +00:00

Is it reprocable locally?

I've still problems running cypress.

docker-compose run cypress bash
Creating cypress_cypress_run ... done
node@b97551694ab7:/project$ yarn test:frontend
yarn run v1.22.4
$ cypress run
No version of Cypress is installed in: /home/node/.cache/Cypress/8.4.1/Cypress

Please reinstall Cypress by running: cypress install

----------

Cypress executable not found at: /home/node/.cache/Cypress/8.4.1/Cypress/Cypress

----------

Platform: linux (Debian - 10.5)
Cypress Version: 8.4.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Running cypress install doesn't work:

node@b97551694ab7:/project$ cypress install
bash: cypress: command not found

Trying npx cypress install now, but that takes ages inside the docker... I think that's why I stopped trying the last time :D

> Is it reprocable locally? I've still problems running cypress. ```sh docker-compose run cypress bash Creating cypress_cypress_run ... done node@b97551694ab7:/project$ yarn test:frontend yarn run v1.22.4 $ cypress run No version of Cypress is installed in: /home/node/.cache/Cypress/8.4.1/Cypress Please reinstall Cypress by running: cypress install ---------- Cypress executable not found at: /home/node/.cache/Cypress/8.4.1/Cypress/Cypress ---------- Platform: linux (Debian - 10.5) Cypress Version: 8.4.1 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ``` Running `cypress install` doesn't work: ```sh node@b97551694ab7:/project$ cypress install bash: cypress: command not found ``` Trying `npx cypress install` now, but that takes ages inside the docker... I think that's why I stopped trying the last time :D

dpschen commented

2021-09-28 09:36:40 +00:00

@konrad:

Seems like it has something to do with the cypress cache volume.
When I comment that out the install is much faster.
For now I install cypress now each time that I restart the container :/ any idea?

Other than that I had some problems with setting the CYPRESS_BASE_URL. My docker knowledge is a bit rusty so I wasn't aware of host.docker.internal.
Maybe that should be noted in the readme for other mac users. Could also be commented out in the compose file.

At least cypress runs now with some effort :D

@konrad: Seems like it [has something to do with the cypress cache volume](https://github.com/cypress-io/cypress/issues/3803). When I comment that out the install is much faster. For now I install cypress now each time that I restart the container :/ any idea? Other than that I had some problems with setting the `CYPRESS_BASE_URL`. My docker knowledge is a bit rusty so I wasn't aware of [host.docker.internal](https://docs.docker.com/desktop/mac/networking/#use-cases-and-workarounds). Maybe that should be noted in the readme for other mac users. Could also be commented out in the compose file. At least cypress runs now with some effort :D

konrad commented

2021-09-29 18:35:29 +00:00

Did you try to mount the .cache directory to the host?

Does it make a difference if you try to install it on the host? That might actually be a good idea in general because you get cypress' dashboard with all details. Makes it a lot easier to debug failing tests.

Other than that I had some problems with setting the CYPRESS_BASE_URL. My docker knowledge is a bit rusty so I wasn't aware of host.docker.internal.

If you're using the docker-compose config in cypress/ you should be able to just use the url that is configured there.

Did you try to mount the .cache directory to the host? Does it make a difference if you try to install it on the host? That might actually be a good idea in general because you get cypress' dashboard with all details. Makes it a lot easier to debug failing tests. > Other than that I had some problems with setting the CYPRESS_BASE_URL. My docker knowledge is a bit rusty so I wasn't aware of host.docker.internal. If you're using the docker-compose config in `cypress/` you should be able to just use the url that is configured there.

dpschen commented

2021-09-30 08:48:52 +00:00

If you're using the docker-compose config in cypress/ you should be able to just use the url that is configured there.

It didn't work with that configuration though. I think it's a Docker mac specific thing.

Will continue to check the caching issue.

> If you're using the docker-compose config in `cypress/` you should be able to just use the url that is configured there. It didn't work with that configuration though. I think it's a Docker mac specific thing. Will continue to check the caching issue.

dpschen force-pushed feature/import-view-dynamically from 2395ed8ad9 to 7b91d1ffd6

2021-09-30 11:01:19 +00:00

Compare

dpschen commented

2021-09-30 15:59:06 +00:00

Okay I couldn't get it run with docker but locally works now.
When I build the commit #7b91d1ffd6 I get for example these errors.

It seems like the page is not loaded yet. When it tries to click the button :/

Okay I couldn't get it run with docker but locally works now. When I build the commit #7b91d1ffd6 I get for example these errors. It seems like the page is not loaded yet. When it tries to click the button :/

Screenshot 2021-09-30 at 17.45.54.png

359 KiB

Screenshot 2021-09-30 at 17.46.02.png

370 KiB

konrad commented

2021-09-30 18:22:13 +00:00

Since you're loading all views dynamically, that sounds very possible.

Is there an error in the browser console?

Since you're loading all views dynamically, that sounds very possible. Is there an error in the browser console?

dpschen commented

2021-09-30 18:31:51 +00:00

Since you're loading all views dynamically, that sounds very possible.

Is there an error in the browser console?

No everything works normal.

> Since you're loading all views dynamically, that sounds very possible. > > Is there an error in the browser console? No everything works normal.

konrad commented

2021-09-30 18:38:11 +00:00

And in the console in the test?

dpschen commented

2021-09-30 19:28:48 +00:00

Not sure what you mean exactly.
Right now I'm only focussing on trying to solve the "Team/Creates a new team" test in a good way.
What else do you mean then the message that is already in the screenshot?

Not sure what you mean exactly. Right now I'm only focussing on trying to solve the "Team/Creates a new team" test in a good way. What else do you mean then the message that is already in the screenshot?

dpschen commented

2021-10-01 15:56:58 +00:00

I found a hacky workaround. In this case I'm able to fulfil the test if I navigate to the /teams/new' route to warm up the cache:

cy.visit('/teams')
cy.visit('/teams/new')
cy.visit('/teams')

I'm actually a bit confused that this works because I always thought that cypress waits for stuff to load. Right now I presume it might be some issue with the service worker in combination with the async routes. But not really sure.

I found a hacky workaround. In this case I'm able to fulfil the test if I navigate to the `/teams/new'` route to warm up the cache: ```js cy.visit('/teams') cy.visit('/teams/new') cy.visit('/teams') ``` I'm actually a bit confused that this works because I always thought that cypress waits for stuff to load. Right now I presume it might be some issue with the service worker in combination with the async routes. But not really sure.

konrad commented

2021-10-02 13:01:46 +00:00

Not sure what you mean exactly.

In cypress, you have an option in the top menu to open developer tools. That lets you view the browser console of the test.

Right now I presume it might be some issue with the service worker in combination with the async routes. But not really sure.

Are you running the tests with a prod bundle? The service worker is disabled in dev mode so it should not have an effect on the test.

> Not sure what you mean exactly. In cypress, you have an option in the top menu to open developer tools. That lets you view the browser console of the test. > Right now I presume it might be some issue with the service worker in combination with the async routes. But not really sure. Are you running the tests with a prod bundle? The service worker is disabled in dev mode so it should not have an effect on the test.

👍 1

dpschen commented

2021-10-02 13:18:18 +00:00

Are you running the tests with a prod bundle? The service worker is disabled in dev mode so it should not have an effect on the test.

I was trying both. In both cases I got different test results than the test here.

Either way. I removed the dynamic route import (except the ones that were already dynamic) from the vue 3 branch. So I'll leave this one open for now.
I'm trying to tackle all the remaining issues with the vue3 branch, because the remaining issues seem to be minor.

> Are you running the tests with a prod bundle? The service worker is disabled in dev mode so it should not have an effect on the test. I was trying both. In both cases I got different test results than the test here. Either way. I removed the dynamic route import (except the ones that were already dynamic) from the vue 3 branch. So I'll leave this one open for now. I'm trying to tackle all the remaining issues with the vue3 branch, because the remaining issues seem to be minor.

👍 1

dpschen added the

kind/feature

label 2021-10-07 13:36:28 +00:00

dpschen self-assigned this 2021-11-01 00:40:23 +00:00

dpschen closed this pull request

2022-04-17 23:10:57 +00:00

This repo is archived. You cannot comment on pull requests.

No reviewers