diff --git a/webclient/README.md b/webclient/README.md index 5269b6bb7..61fec2352 100644 --- a/webclient/README.md +++ b/webclient/README.md @@ -77,22 +77,21 @@ Each of those files are similar but differ in some aspects. If you serve the release build with a webserver (such as Nginx) you need to select the correct files based on the request URL and headers. ```plain --.html - ↑ ↑ - │ └── The page language. Either "de" or "en" at the moment. - │ It should be selected based on the "lang" Cookie or else the "Accept-Language" header. +.html + ↑ └── The page theme. Either "light" or "dark" at the moment. It should be selected based on the "theme" Cookie ("light" by default). ``` The language-selector is working in development and this differentialtion is only happening in the build. For the theme we can not do so for some reason (If you know of a better way, hit us up). -To test a different theme, you can change `$theme` [here](./src/assets/variables.scss). Values are `light` and `dark`. +To test a different theme, you can change `$theme` [here](./src/assets/variables.scss) and `theme='...'` [here](./index.html). Values are `light` and `dark`. ## Architecture The NavigaTUM webclient is made as a single-page application based on [Vue.js](https://vuejs.org/) and [Vue Router](https://router.vuejs.org/). -For state management we use [pinia](https://pinia.vuejs.org/) and our CSS framework is [Spectre.css](https://picturepan2.github.io/spectre/). +For state management we use [pinia](https://pinia.vuejs.org/). +Our CSS framework is currently being migrated from [Spectre.css](https://picturepan2.github.io/spectre/) to [Tailwind](https://tailwindcss.com/). (if you're interested in helping out, please contact us ^^) ### Directory structure (only the important parts) @@ -100,7 +99,7 @@ For state management we use [pinia](https://pinia.vuejs.org/) and our CSS framew webclient ├── public/ # 🠔 Static assets such as icons, which cannot get inlined ├── src/ -│ ├── codegen/ # 🠔 code generated via openapi.yaml for typechecking reasons +│ ├── api_types/ # 🠔 code generated via openapi.yaml for typechecking reasons │ ├── assets/ # 🠔 Static assets such as icons │ │ ├── md/ # 🠔 Static pages written in markdown. Served at `/about/`. │ │ ├── variables.scss # 🠔 Include-script for Spectre.CSS @@ -108,12 +107,11 @@ webclient │ │ ├── spectre-all.scss # 🠔 Include-script for Spectre.CSS │ │ └── logos # 🠔 The Logos used by the app │ ├── components/ # 🠔 Vue components, which are used in views. -│ ├── views/ # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes. -│ ├── router.ts # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes. +│ ├── pages/ # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes. +│ ├── router.ts # 🠔 The routes of our app. This is where the views are loaded. │ ├── App.vue # 🠔 Main view -│ └── main.ts # 🠔 Inialization of Vue.js. This is the entrypoint of our app, from which App.vue and associated Views/Components are loaded +│ └── main.ts # 🠔 Inialization of Vue.js. This is the entrypoint of our app, from which App.vue and associated views/components are loaded ├── vite.config.ts # 🠔 Build configuration -├── gulpfile.js # 🠔 Gulp configuration └── package.json # 🠔 Node package definition and dependencies ``` @@ -130,9 +128,21 @@ The reason behind these tests is that they fundamentally increase the future pro There are a few ways of running cypress -#### Running headless +#### e2e tests -For running headless, it is assumed, that you are on a normal machine (not a mac) and have [Chrome](https://www.google.com/intl/de/chrome/) + [Firefox Developer Edition](https://www.mozilla.org/de/firefox/developer/) installed. +For running e2e tests, it is assumed, that you + +- are on a normal machine (not a mac) +- have [Chrome](https://www.google.com/intl/de/chrome/) + [Firefox Developer Edition](https://www.mozilla.org/de/firefox/developer/) installed. +- have the webclient running on `http://localhost:3000` (i.e. `npm run dev`) + +The interface for interacting with cypress can be opened via + +```bash +pnpm run cy:open +``` + +##### Running headless ```bash pnpm run test @@ -140,14 +150,16 @@ pnpm run test There are also some subtargets preconfigured like `cy:run:chrome` and `cy:run:firefox`, but likely for debugging you want the second mode. -#### Running headed - -The interface for interacting with cypress can be opened via +#### component tests ```bash -pnpm run cy:open +pnpm run test:components ``` +Currently, these are not run in CI, as I could not get cypress to behave in [#892](https://github.com/TUM-Dev/NavigaTUM/pull/892) + +#### Running headed + ### Writing Tests Our Cypress test suite is located in the cypress directory, organized into different files and folders based on the features and components being tested. diff --git a/webclient/build.sh b/webclient/build.sh index 0c4b0b097..4133838ff 100755 --- a/webclient/build.sh +++ b/webclient/build.sh @@ -7,8 +7,9 @@ rm -fr ../dist for THEME in light dark do - # make sure we are really only building the right theme and language + # make sure we are really only building the right theme sed -i "s/\$theme: .*/\$theme: \"${THEME}\";/" src/assets/variables.scss + sed -i 's/class="light"/class="${THEME}"/' index.html echo "Building ${THEME}" npm run build-only diff --git a/webclient/cypress/e2e/frontpage.cy.ts b/webclient/cypress/e2e/frontpage.cy.ts index c18c784d4..36ae7bd48 100644 --- a/webclient/cypress/e2e/frontpage.cy.ts +++ b/webclient/cypress/e2e/frontpage.cy.ts @@ -1,10 +1,10 @@ describe("Check if navigating from the frontpage works as expected", () => { - it("navigating to the mi", () => { + it("navigating to the mri", () => { cy.intercept("GET", "/api/get/root?lang=de", { fixture: "get/root.de.json" }); cy.visit("http://localhost:3000/"); cy.intercept("GET", "/api/get/mi?lang=de", { fixture: "get/mi.de.json" }); - cy.contains("Informatik").click(); - cy.url().should("include", "/building/mi"); + cy.contains("MRI").click(); + cy.url().should("to.match", /(site|campus|view)\/mri/); }); it("navigating to an initally hidden entry", () => { cy.intercept("GET", "/api/get/root?lang=de", { fixture: "get/root.de.json" }); diff --git a/webclient/index.html b/webclient/index.html index 11b13b5b0..b96265056 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -1,5 +1,5 @@ - + - diff --git a/webclient/src/pages/view/[id].vue b/webclient/src/pages/view/[id].vue index dcd4fbfcd..43f15bffc 100644 --- a/webclient/src/pages/view/[id].vue +++ b/webclient/src/pages/view/[id].vue @@ -117,7 +117,11 @@ onMounted(() => { class="c-hand header-image-mobile show-sm" @click="state.showImageSlideshow(state.image.shown_image_id || 0)" > - + diff --git a/webclient/tailwind.config.js b/webclient/tailwind.config.js new file mode 100644 index 000000000..45ce1122b --- /dev/null +++ b/webclient/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +};