From 87dc006fe2dee66432c9e9c8fde9e4651d70cfdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Wed, 19 Jun 2024 23:15:58 +0200 Subject: [PATCH 1/4] Added @testing-library/react --- packages/frontend/package-lock.json | 142 ++++++++-------------------- packages/frontend/package.json | 1 + 2 files changed, 41 insertions(+), 102 deletions(-) diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json index f572618ac..6a605a621 100644 --- a/packages/frontend/package-lock.json +++ b/packages/frontend/package-lock.json @@ -22,6 +22,7 @@ "devDependencies": { "@emotion/jest": "^11.11.0", "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", "@types/react-dom": "^18.3.0", "@types/react-test-renderer": "^18.3.0", @@ -3264,23 +3265,24 @@ } }, "node_modules/@testing-library/dom": { - "version": "9.3.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.0.tgz", - "integrity": "sha512-Dffe68pGwI6WlLRYR2I0piIkyole9cSBH5jGQKCGMRpHW5RHCqAUaqc2Kv0tUyd4dU4DLPKhJIjyKOnjv4tuUw==", + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz", + "integrity": "sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==", "dev": true, + "license": "MIT", "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", - "aria-query": "^5.0.0", + "aria-query": "5.3.0", "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "pretty-format": "^27.0.2" }, "engines": { - "node": ">=14" + "node": ">=18" } }, "node_modules/@testing-library/jest-dom": { @@ -3347,6 +3349,34 @@ "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", "dev": true }, + "node_modules/@testing-library/react": { + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.0.tgz", + "integrity": "sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@testing-library/user-event": { "version": "14.5.2", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", @@ -4620,12 +4650,13 @@ "dev": true }, "node_modules/aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, + "license": "Apache-2.0", "dependencies": { - "deep-equal": "^2.0.5" + "dequal": "^2.0.3" } }, "node_modules/array-buffer-byte-length": { @@ -5675,35 +5706,6 @@ } } }, - "node_modules/deep-equal": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.1.tgz", - "integrity": "sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==", - "dev": true, - "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "call-bind": "^1.0.2", - "es-get-iterator": "^1.1.3", - "get-intrinsic": "^1.2.0", - "is-arguments": "^1.1.1", - "is-array-buffer": "^3.0.2", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.2", - "isarray": "^2.0.5", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.0", - "side-channel": "^1.0.4", - "which-boxed-primitive": "^1.0.2", - "which-collection": "^1.0.1", - "which-typed-array": "^1.1.9" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -6238,26 +6240,6 @@ "node": ">= 0.4" } }, - "node_modules/es-get-iterator": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", - "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.3", - "has-symbols": "^1.0.3", - "is-arguments": "^1.1.1", - "is-map": "^2.0.2", - "is-set": "^2.0.2", - "is-string": "^1.0.7", - "isarray": "^2.0.5", - "stop-iteration-iterator": "^1.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/es-iterator-helpers": { "version": "1.0.19", "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz", @@ -7883,22 +7865,6 @@ "node": ">=10.13.0" } }, - "node_modules/is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-array-buffer": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", @@ -10956,22 +10922,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/object-is": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz", - "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", @@ -12504,18 +12454,6 @@ "node": ">=8" } }, - "node_modules/stop-iteration-iterator": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz", - "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==", - "dev": true, - "dependencies": { - "internal-slot": "^1.0.4" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", diff --git a/packages/frontend/package.json b/packages/frontend/package.json index dbfa3c9da..e06dfa75c 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -40,6 +40,7 @@ "devDependencies": { "@emotion/jest": "^11.11.0", "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", "@types/react-dom": "^18.3.0", "@types/react-test-renderer": "^18.3.0", From 949c415c87e04a9c15941d7aa3877abdd660d3a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Wed, 19 Jun 2024 23:39:41 +0200 Subject: [PATCH 2/4] Switched most tests over to @testing-library/react --- packages/frontend/__tests__/App.test.tsx | 72 +- .../__tests__/__snapshots__/App.test.tsx.snap | 1028 +++---- .../__tests__/components/Button.test.tsx | 52 +- .../__tests__/components/ColoredTag.test.tsx | 6 +- .../__tests__/components/ExtLink.test.tsx | 52 +- .../__tests__/components/Issue.test.tsx | 30 +- .../__tests__/components/IssuesList.test.tsx | 42 +- .../__tests__/components/Navigation.test.tsx | 76 +- .../__tests__/components/Project.test.tsx | 16 +- .../components/ProjectLinks.test.tsx | 16 +- .../__snapshots__/Button.test.tsx.snap | 8 +- .../__snapshots__/ColoredTag.test.tsx.snap | 2 +- .../__snapshots__/ExtLink.test.tsx.snap | 8 +- .../__snapshots__/Issue.test.tsx.snap | 28 +- .../__snapshots__/IssuesList.test.tsx.snap | 1454 +--------- .../__snapshots__/Navigation.test.tsx.snap | 16 +- .../__snapshots__/Project.test.tsx.snap | 17 +- .../__snapshots__/ProjectLinks.test.tsx.snap | 592 +--- .../__tests__/pages/IssueDetail.test.tsx | 10 +- .../__tests__/pages/IssuesList.test.tsx | 6 +- .../__tests__/pages/ProjectDetail.test.tsx | 10 +- .../__tests__/pages/ProjectsList.test.tsx | 6 +- .../__snapshots__/IssueDetail.test.tsx.snap | 297 +-- .../__snapshots__/IssuesList.test.tsx.snap | 2369 +---------------- .../__snapshots__/ProjectDetail.test.tsx.snap | 272 +- .../__snapshots__/ProjectsList.test.tsx.snap | 194 +- 26 files changed, 1030 insertions(+), 5649 deletions(-) diff --git a/packages/frontend/__tests__/App.test.tsx b/packages/frontend/__tests__/App.test.tsx index 6dc546c36..d7b58e57f 100644 --- a/packages/frontend/__tests__/App.test.tsx +++ b/packages/frontend/__tests__/App.test.tsx @@ -1,6 +1,6 @@ +import { render } from "@testing-library/react"; import { mocked } from "jest-mock"; import { MemoryRouter } from "react-router-dom"; -import renderer from "react-test-renderer"; import * as swr from "swr"; import { App } from "../src/App"; @@ -21,14 +21,12 @@ describe("App", () => { isValidating: false, isLoading: false, }); - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render projects correctly", () => { @@ -39,14 +37,12 @@ describe("App", () => { isValidating: false, isLoading: false, }); - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render project listing correctly", () => { @@ -57,14 +53,12 @@ describe("App", () => { isValidating: false, isLoading: false, }); - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render issue listing correctly", () => { @@ -75,14 +69,12 @@ describe("App", () => { isValidating: false, isLoading: false, }); - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should handle error gracefully", () => { @@ -93,13 +85,11 @@ describe("App", () => { isValidating: false, isLoading: false, }); - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/__snapshots__/App.test.tsx.snap b/packages/frontend/__tests__/__snapshots__/App.test.tsx.snap index 231087f1e..cafd1fc16 100644 --- a/packages/frontend/__tests__/__snapshots__/App.test.tsx.snap +++ b/packages/frontend/__tests__/__snapshots__/App.test.tsx.snap @@ -143,23 +143,22 @@ exports[`App should render correctly 1`] = ` }
logo

IT poptávky

@@ -169,51 +168,47 @@ exports[`App should render correctly 1`] = `

If a shortcut name differs from the original, the name in gallery and breadcrumbs differs

WordPress plugin: Galerie obrázků a videí z Google Disku

When in a situation that there is a Google Drive shortcut somewhere in the gallery, the plugin displays the folder and it works for browsing. However, when looking at the shortcut as a member of its parent directory and when being inside the directory and looking at its name in the breadcrumbs, one uses the shortcut name, whereas the other uses the original folder name (when they differ). @@ -282,52 +275,50 @@ exports[`App should render correctly 1`] = `

wordpress php javascript google

UX & design audit

WordPress plugin: Galerie obrázků a videí z Google Disku

Go over the design of: @@ -866,16 +839,15 @@ exports[`App should render correctly 1`] = `

  • @@ -889,11 +861,10 @@ exports[`App should render correctly 1`] = `
  • @@ -902,11 +873,10 @@ exports[`App should render correctly 1`] = `
  • @@ -915,11 +885,10 @@ exports[`App should render correctly 1`] = `
  • @@ -928,11 +897,10 @@ exports[`App should render correctly 1`] = `
  • @@ -941,11 +909,10 @@ exports[`App should render correctly 1`] = `
  • @@ -954,11 +921,10 @@ exports[`App should render correctly 1`] = `
  • @@ -967,11 +933,10 @@ exports[`App should render correctly 1`] = `
  • @@ -980,11 +945,10 @@ exports[`App should render correctly 1`] = `
  • @@ -1000,100 +964,96 @@ exports[`App should render correctly 1`] = `

    wordpress php javascript google

Modul "Nábory"

WordPress plugin: SkautIS integrace

modul pro nábory se zobrazením náborové mapy @@ -1327,22 +1279,22 @@ příklad:

wordpress php javascript skautis @@ -1602,23 +1554,22 @@ exports[`App should render issue listing correctly 1`] = ` }
logo

IT poptávky

@@ -1626,49 +1577,44 @@ exports[`App should render issue listing correctly 1`] = `
Poptávka:

Editing doesn't check path validity   # 3

When opening the editor which contains a gallery that is made from a folder that has been renamed or deleted, the editor breaks. It shows: @@ -1699,12 +1645,12 @@ exports[`App should render issue listing correctly 1`] = `

Zaujala tě poptávka?
Projekt:

WordPress plugin: Galerie obrázků a videí z Google Disku

Plugin pro WordPress, který ze složek s fotkami na Google Disku dělá galerie na webu.

Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky.

wordpress php javascript google

  @@ -1840,10 +1775,10 @@ exports[`App should render issue listing correctly 1`] = ` :

  @@ -1929,10 +1854,10 @@ exports[`App should render issue listing correctly 1`] = ` :

Další poptávky projektu:

Add video overlay   # 7 @@ -2247,20 +2151,19 @@ exports[`App should render issue listing correctly 1`] = `

UX & design audit   # 12 @@ -2408,16 +2307,15 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2431,11 +2329,10 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2444,11 +2341,10 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2457,11 +2353,10 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2470,11 +2365,10 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2483,11 +2377,10 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2496,11 +2389,10 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2509,11 +2401,10 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2522,11 +2413,10 @@ exports[`App should render issue listing correctly 1`] = `
  • @@ -2755,23 +2645,22 @@ exports[`App should render project listing correctly 1`] = ` }
    logo

    IT poptávky

    @@ -2779,51 +2668,51 @@ exports[`App should render project listing correctly 1`] = `

    WordPress plugin: Galerie obrázků a videí z Google Disku

    Plugin pro WordPress, který ze složek s fotkami na Google Disku dělá galerie na webu.

    Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky.

    wordpress php javascript google @@ -2831,24 +2720,19 @@ exports[`App should render project listing correctly 1`] = `

      @@ -2903,10 +2782,10 @@ exports[`App should render project listing correctly 1`] = ` :

      @@ -2992,10 +2861,10 @@ exports[`App should render project listing correctly 1`] = ` :

    Poptávky u projektu:

    Add video overlay   # 7 @@ -3343,20 +3190,19 @@ exports[`App should render project listing correctly 1`] = `

    UX & design audit   # 12 @@ -3504,16 +3346,15 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3527,11 +3368,10 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3540,11 +3380,10 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3553,11 +3392,10 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3566,11 +3404,10 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3579,11 +3416,10 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3592,11 +3428,10 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3605,11 +3440,10 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3618,11 +3452,10 @@ exports[`App should render project listing correctly 1`] = `
    • @@ -3780,23 +3613,22 @@ exports[`App should render projects correctly 1`] = ` }
      logo

      IT poptávky

      @@ -3806,109 +3638,105 @@ exports[`App should render projects correctly 1`] = `

      WordPress plugin: Galerie obrázků a videí z Google Disku

      Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky.

      wordpress php javascript google

      WordPress plugin: SkautIS integrace

      Plugin zajišťuje propojení skautských webů se skautISem. Dá se přes plugin registrovat, přihlašovat. Dokáže u stránek nastavovat oprávnění podle roli a dalších nastavení ve skautISu. Skrývá obsah podle toho jaká pravidla na stránce jsou nastavená.

      wordpress php javascript skautis diff --git a/packages/frontend/__tests__/components/Button.test.tsx b/packages/frontend/__tests__/components/Button.test.tsx index 97b8575a2..0f8e55cab 100644 --- a/packages/frontend/__tests__/components/Button.test.tsx +++ b/packages/frontend/__tests__/components/Button.test.tsx @@ -1,45 +1,39 @@ -import renderer from "react-test-renderer"; +import { render } from "@testing-library/react"; import { Button } from "../../src/components/Button"; describe("Button component", () => { test("should render correctly", () => { - const tree = renderer - .create() - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly with title", () => { - const tree = renderer - .create( - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly with custom class", () => { - const tree = renderer - .create( - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly with target self", () => { - const tree = renderer - .create( - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/components/ColoredTag.test.tsx b/packages/frontend/__tests__/components/ColoredTag.test.tsx index 9b4cc0856..ae43cf5be 100644 --- a/packages/frontend/__tests__/components/ColoredTag.test.tsx +++ b/packages/frontend/__tests__/components/ColoredTag.test.tsx @@ -1,10 +1,10 @@ -import renderer from "react-test-renderer"; +import { render } from "@testing-library/react"; import { ColoredTag } from "../../src/components/ColoredTag"; describe("ColoredTag component", () => { test("should render correctly", () => { - const tree = renderer.create(Tag).toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render(Tag); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/components/ExtLink.test.tsx b/packages/frontend/__tests__/components/ExtLink.test.tsx index 687b9423e..b62145764 100644 --- a/packages/frontend/__tests__/components/ExtLink.test.tsx +++ b/packages/frontend/__tests__/components/ExtLink.test.tsx @@ -1,45 +1,39 @@ -import renderer from "react-test-renderer"; +import { render } from "@testing-library/react"; import { ExtLink } from "../../src/components/ExtLink"; describe("ExtLink component", () => { test("should render correctly", () => { - const tree = renderer - .create(Link somewhere) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + Link somewhere, + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly with title", () => { - const tree = renderer - .create( - - Link somewhere - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + Link somewhere + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly with custom class", () => { - const tree = renderer - .create( - - Link somewhere - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + Link somewhere + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly with target self", () => { - const tree = renderer - .create( - - Link somewhere - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + Link somewhere + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/components/Issue.test.tsx b/packages/frontend/__tests__/components/Issue.test.tsx index fe1b6828c..defdb599d 100644 --- a/packages/frontend/__tests__/components/Issue.test.tsx +++ b/packages/frontend/__tests__/components/Issue.test.tsx @@ -1,5 +1,5 @@ +import { render } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; -import renderer from "react-test-renderer"; import { Issue } from "../../src/components/Issue"; import { getIssueWithProject } from "../../src/utils/getIssueWithProject"; @@ -18,24 +18,20 @@ const issueWithProject = getIssueWithProject( describe("Issue component", () => { test("should render correctly", () => { expect(issue).not.toBeNull(); - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly without tags", () => { - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/components/IssuesList.test.tsx b/packages/frontend/__tests__/components/IssuesList.test.tsx index 0cd41605d..bf1f074f0 100644 --- a/packages/frontend/__tests__/components/IssuesList.test.tsx +++ b/packages/frontend/__tests__/components/IssuesList.test.tsx @@ -1,5 +1,5 @@ +import { render } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; -import renderer from "react-test-renderer"; import { IssuesList } from "../../src/components/IssuesList"; import { testData } from "../testData"; @@ -8,29 +8,25 @@ const project = testData.projects[0]; describe("IssuesList component", () => { test("should render correctly", () => { - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly without link", () => { - const tree = renderer - .create( - - ({ - ...issue, - link: undefined, - }))} - project={project} - /> - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + ({ + ...issue, + link: undefined, + }))} + project={project} + /> + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/components/Navigation.test.tsx b/packages/frontend/__tests__/components/Navigation.test.tsx index f2e8f242e..70342ae80 100644 --- a/packages/frontend/__tests__/components/Navigation.test.tsx +++ b/packages/frontend/__tests__/components/Navigation.test.tsx @@ -1,50 +1,46 @@ +import { render } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; -import renderer from "react-test-renderer"; import { Navigation } from "../../src/components/Navigation"; describe("Navigation component", () => { test("should render correctly", () => { - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render correctly wyth active item", () => { - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/components/Project.test.tsx b/packages/frontend/__tests__/components/Project.test.tsx index 1d1208f69..7b7fbef83 100644 --- a/packages/frontend/__tests__/components/Project.test.tsx +++ b/packages/frontend/__tests__/components/Project.test.tsx @@ -1,5 +1,5 @@ +import { render } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; -import renderer from "react-test-renderer"; import { Project } from "../../src/components/Project"; import { testData } from "../testData"; @@ -8,13 +8,11 @@ const project = testData.projects[0]; describe("Project component", () => { test("should render correctly", () => { - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/components/ProjectLinks.test.tsx b/packages/frontend/__tests__/components/ProjectLinks.test.tsx index 1501602c1..f540c7668 100644 --- a/packages/frontend/__tests__/components/ProjectLinks.test.tsx +++ b/packages/frontend/__tests__/components/ProjectLinks.test.tsx @@ -1,5 +1,5 @@ +import { render } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; -import renderer from "react-test-renderer"; import { ProjectLinks } from "../../src/components/ProjectLinks"; import { testData } from "../testData"; @@ -8,13 +8,11 @@ const project = testData.projects[0]; describe("ProjectLinks component", () => { test("should render correctly", () => { - const tree = renderer - .create( - - - , - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render( + + + , + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/components/__snapshots__/Button.test.tsx.snap b/packages/frontend/__tests__/components/__snapshots__/Button.test.tsx.snap index 914d9f8b9..fe1553c3a 100644 --- a/packages/frontend/__tests__/components/__snapshots__/Button.test.tsx.snap +++ b/packages/frontend/__tests__/components/__snapshots__/Button.test.tsx.snap @@ -23,7 +23,7 @@ exports[`Button component should render correctly 1`] = ` } Link somewhere @@ -117,7 +117,7 @@ exports[`Button component should render correctly with title 1`] = ` } Tag diff --git a/packages/frontend/__tests__/components/__snapshots__/ExtLink.test.tsx.snap b/packages/frontend/__tests__/components/__snapshots__/ExtLink.test.tsx.snap index 92fbcc982..cc33ec202 100644 --- a/packages/frontend/__tests__/components/__snapshots__/ExtLink.test.tsx.snap +++ b/packages/frontend/__tests__/components/__snapshots__/ExtLink.test.tsx.snap @@ -13,7 +13,7 @@ exports[`ExtLink component should render correctly 1`] = ` } Link somewhere @@ -77,7 +77,7 @@ exports[`ExtLink component should render correctly with title 1`] = ` }

      Add hint to set videos to public

      WordPress plugin: Galerie obrázků a videí z Google Disku

      When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. @@ -107,22 +105,22 @@ exports[`Issue component should render correctly 1`] = `

      wordpress php javascript google @@ -160,31 +158,29 @@ exports[`Issue component should render correctly without tags 1`] = ` }

      Add hint to set videos to public

      WordPress plugin: Galerie obrázků a videí z Google Disku

      When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. diff --git a/packages/frontend/__tests__/components/__snapshots__/IssuesList.test.tsx.snap b/packages/frontend/__tests__/components/__snapshots__/IssuesList.test.tsx.snap index 0ec5882f4..145eb0fe2 100644 --- a/packages/frontend/__tests__/components/__snapshots__/IssuesList.test.tsx.snap +++ b/packages/frontend/__tests__/components/__snapshots__/IssuesList.test.tsx.snap @@ -1,8 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`IssuesList component should render correctly 1`] = ` -[ - .emotion-0 { +.emotion-0 { margin: 12px 0 24px; } @@ -22,716 +21,37 @@ exports[`IssuesList component should render correctly 1`] = ` }

      +

      -

      - - Add hint to set videos to public - -   - - # - 1 - -

      -

      - When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. -

      - - -

      - Depends on #792 -

      -
      , - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
      -

      - - If a shortcut name differs from the original, the name in gallery and breadcrumbs differs - -   - - # - 2 - -

      -

      - When in a situation that there is a Google Drive shortcut somewhere in the gallery, the plugin displays the folder and it works for browsing. However, when looking at the shortcut as a member of its parent directory and when being inside the directory and looking at its name in the breadcrumbs, one uses the shortcut name, whereas the other uses the original folder name (when they differ). -

      - - -

      - This is a bug and both should show the shortcut name. -

      -
      , - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
      -

      +   + - - Editing doesn't check path validity - -   - - # - 3 - -

      -

      - When opening the editor which contains a gallery that is made from a folder that has been renamed or deleted, the editor breaks. It shows: - - Directory "Galerie ODYWEB" wasn't found - it may have been deleted or renamed. - - Instead, it should verify that the path is valid and if it's not, should display a warning (and possibly move you to either the root directory, or the closest valid ancestor - however, this should not lead to you accidentally changing the gallery!) -

      - - -

      - Last tested on 36dc1a10a353ba5bf2b98f33b49b1135a36ae3d3 -

      -
      , - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
      -

      - - Add images to the block - -   - - # - 6 - -

      -

      - Currently, images aren't listed in the editor - both block and TinyMCE plugin. This often confuses users. -

      -
      , - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
      -

      - - Add video overlay - -   - - # - 7 - -

      -

      - In the image grid, we should add an overlay to signify that an item is a video (for example a big play icon). -

      -
      , - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
      -

      - - Themes with "editor-styles" support change the look of the block editor - -   - - # - 9 - -

      -

      - If the active theme contains -

      - - - 
      -      
-        add_theme_support( 'editor-styles' );
-
-      
-
      - - -

      - its styles are also applied to the block editor, which then looks weird. We should implement our own styles for the editor. -

      - - -

      - Example of such theme is the Twenty Seventeen theme. -

      -
      , - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
      -

      - - UX & design audit - -   - - # - 12 - -

      -

      - Go over the design of: -

      - - -
        - - -
      • - - - gallery view - - https://github.com/skaut/skaut-google-drive-gallery/issues/36 - -
        • - - -
      • - - - preview -
        • - - -
      • - - - folder thumbnail - overlay, folder title and image count -
        • - - -
      • - - - svg folder icon -
        • - - -
      • - - - gallery breadcrumbs -
        • - - -
      • - - - options page -
        • - - -
      • - - - WP.org plugin page -
        • - - -
      • - - - TinyMCE & Gutenberg editor plugins -
        • - - -
      • - - - TinyMCE & Gutenberg "Authentication failed" dialogs -
        • - - -
      - + # + 1 + +

    +

    + When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. +

    + -

    - Everything on the frontend needs to work at least with the default WP template and DSW templates. -

    -
    , -] +

    + Depends on #792 +

    +

`; exports[`IssuesList component should render correctly without link 1`] = ` -[ - .emotion-0 { +.emotion-0 { margin: 12px 0 24px; } @@ -751,709 +71,31 @@ exports[`IssuesList component should render correctly without link 1`] = ` }
+

-

- - Add hint to set videos to public - -   - - # - 1 - -

-

- When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. -

- - -

- Depends on #792 -

-
, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
-

- - If a shortcut name differs from the original, the name in gallery and breadcrumbs differs - -   - - # - 2 - -

-

- When in a situation that there is a Google Drive shortcut somewhere in the gallery, the plugin displays the folder and it works for browsing. However, when looking at the shortcut as a member of its parent directory and when being inside the directory and looking at its name in the breadcrumbs, one uses the shortcut name, whereas the other uses the original folder name (when they differ). -

- - -

- This is a bug and both should show the shortcut name. -

-
, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
-

+   + - - Editing doesn't check path validity - -   - - # - 3 - -

-

- When opening the editor which contains a gallery that is made from a folder that has been renamed or deleted, the editor breaks. It shows: - - Directory "Galerie ODYWEB" wasn't found - it may have been deleted or renamed. - - Instead, it should verify that the path is valid and if it's not, should display a warning (and possibly move you to either the root directory, or the closest valid ancestor - however, this should not lead to you accidentally changing the gallery!) -

- - -

- Last tested on 36dc1a10a353ba5bf2b98f33b49b1135a36ae3d3 -

-
, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
-

- - Add images to the block - -   - - # - 6 - -

-

- Currently, images aren't listed in the editor - both block and TinyMCE plugin. This often confuses users. -

-
, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
-

- - Add video overlay - -   - - # - 7 - -

-

- In the image grid, we should add an overlay to signify that an item is a video (for example a big play icon). -

-
, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
-

- - Themes with "editor-styles" support change the look of the block editor - -   - - # - 9 - -

-

- If the active theme contains -

- - - 
-      
-        add_theme_support( 'editor-styles' );
-
-      
-
- - -

- its styles are also applied to the block editor, which then looks weird. We should implement our own styles for the editor. -

- - -

- Example of such theme is the Twenty Seventeen theme. -

-
, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -, - .emotion-0 { - margin: 12px 0 24px; -} - -.emotion-0 img { - max-width: 100%; -} - -.emotion-1 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-2 { - color: #999; - font-weight: normal; -} - -
-

- - UX & design audit - -   - - # - 12 - -

-

- Go over the design of: -

- - -
    - - -
  • - - - gallery view - - https://github.com/skaut/skaut-google-drive-gallery/issues/36 - -
    • - - -
  • - - - preview -
    • - - -
  • - - - folder thumbnail - overlay, folder title and image count -
    • - - -
  • - - - svg folder icon -
    • - - -
  • - - - gallery breadcrumbs -
    • - - -
  • - - - options page -
    • - - -
  • - - - WP.org plugin page -
    • - - -
  • - - - TinyMCE & Gutenberg editor plugins -
    • - - -
  • - - - TinyMCE & Gutenberg "Authentication failed" dialogs -
    • - - -
- + # + 1 + + +

+ When editing and selecting a folder with videos, the editor could display a notice that setting videos to "Anyone can view" will speed them up. +

+ -

- Everything on the frontend needs to work at least with the default WP template and DSW templates. -

-
, -] +

+ Depends on #792 +

+
`; diff --git a/packages/frontend/__tests__/components/__snapshots__/Navigation.test.tsx.snap b/packages/frontend/__tests__/components/__snapshots__/Navigation.test.tsx.snap index 3fb11bd35..14d27cda0 100644 --- a/packages/frontend/__tests__/components/__snapshots__/Navigation.test.tsx.snap +++ b/packages/frontend/__tests__/components/__snapshots__/Navigation.test.tsx.snap @@ -29,20 +29,18 @@ exports[`Navigation component should render correctly 1`] = `