Adding functional test.

dom111 · Aug 27, 2022 · 09fc82e · 09fc82e
1 parent b39d173
commit 09fc82e
Show file tree

Hide file tree

Showing 30 changed files with 1,855 additions and 1,389 deletions.
diff --git a/.github/workflows/build-on-push.yml b/.github/workflows/build-on-push.yml
@@ -1,6 +1,12 @@
 name: Build and test application on push to remote
 
-on: [push]
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
 
 jobs:
   build:
@@ -9,7 +15,6 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
-      - run: yarn install
-      - run: yarn build
-      - run: yarn test
+          node-version: 16
+      - run: make build
+      - run: make test
diff --git a/Makefile b/Makefile
@@ -1,19 +1,12 @@
 SHELL = /bin/bash
 
 .PHONY: build
-build: docker-compose.override.yml
-	docker-compose run --rm web npm run build
+build: node_modules
+	npm run build
 
 .PHONY: test
-test: docker-compose.override.yml
-	docker-compose run --rm test npm run test
+test: node_modules
+	docker-compose run --rm -e BASE_URL=http://webdav test npm run test
 
-docker-compose.override.yml:
-	@echo "version: '3'" > docker-compose.override.yml
-	@echo >> docker-compose.override.yml
-	@echo "services:" >> docker-compose.override.yml
-	@echo "  web:" >> docker-compose.override.yml
-	@echo "    user: `id -u`:`id -g`" >> docker-compose.override.yml
-
-dist/js/app.js:
-dist/js/app.js: build
+node_modules:
+	npm install
diff --git a/README.md b/README.md
@@ -8,15 +8,14 @@ without the need for using a third party application.
 The application has since been rewritten to not rely on jQuery and use more modern methods and provide a single runtime
 file. Now that there's more separation between the interface code and the library code, I'd like to investigate using
 other frontend approaches to see which I prefer (and also to weigh up the differences between the currently available
-frameworks). There's still work to do around code separation andhopefully this will be something I can continue to work
+frameworks). There's still work to do around code separation and hopefully this will be something I can continue to work
 on (as time allows) I feel it's at least as stable as the previous version.
 
 ## Tested in:
 
 - Chrome
 - Firefox
 - Edge
-- IE11 (I may drop support for this to reduce the package size in the future - unless anyone REALY needs it?)
 
 ## Implementations
 

diff --git a/TODO.md b/TODO.md
@@ -1,12 +1,11 @@
+- [x] Add more unit tests for the UI
+- [x] Add end-to-end UI testing
+- [x] Move to TypeScript
+- [ ] Add drag and drop tests
 - [ ] Allow uploading of directories ([#48](https://github.com/dom111/webdav-js/issues/48))
 - [ ] Add functionality for copying and moving files and directories
 - [ ] Add progress bar for file uploads
-- [ ] Add more unit tests for the UI
-- [ ] Add end-to-end UI testing (although it seems that drag and drop might be a problem)
 - [ ] Support keyboard navigation whilst overlay is visible
-- [ ] Improve code in `item.js` - maybe split out the functionality into each action?
-- [ ] Look into moving to TypeScript
 - [ ] ReactJS implementation
 - [ ] VueJS implementation
-- [ ] Native Web Components implementation
-- [ ] Angular implementation
+- [ ] Maybe a refactor...
diff --git a/build/sass.sh b/build/sass.sh
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -28,4 +28,4 @@ services:
     # https://stackoverflow.com/a/53975412/3145856
     # https://github.com/docker/compose/issues/5574
     security_opt:
-      - seccomp:"./docker/test/chrome.json"
+      - seccomp:./docker/test/chrome.json
diff --git a/index.html b/index.html
@@ -44,13 +44,41 @@
         display: none;
       }
     </style>
+    <style>
+      .github-corner:hover .octo-arm {
+        animation: octocat-wave 560ms ease-in-out;
+      }
+      @keyframes octocat-wave {
+        0%,
+        100% {
+          transform: rotate(0);
+        }
+        20%,
+        60% {
+          transform: rotate(-25deg);
+        }
+        40%,
+        80% {
+          transform: rotate(10deg);
+        }
+      }
+      @media (max-width: 500px) {
+        .github-corner:hover .octo-arm {
+          animation: none;
+        }
+        .github-corner .octo-arm {
+          animation: octocat-wave 560ms ease-in-out;
+        }
+      }
+    </style>
   </head>
   <body>
     <a
       href="https://github.com/dom111/webdav-js"
       class="github-corner"
       aria-label="View source on Github"
-      ><svg
+    >
+      <svg
         width="80"
         height="80"
         viewBox="0 0 250 250"
@@ -75,34 +103,9 @@
           d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
           fill="currentColor"
           class="octo-body"
-        ></path></svg></a
-    ><style>
-      .github-corner:hover .octo-arm {
-        animation: octocat-wave 560ms ease-in-out;
-      }
-      @keyframes octocat-wave {
-        0%,
-        100% {
-          transform: rotate(0);
-        }
-        20%,
-        60% {
-          transform: rotate(-25deg);
-        }
-        40%,
-        80% {
-          transform: rotate(10deg);
-        }
-      }
-      @media (max-width: 500px) {
-        .github-corner:hover .octo-arm {
-          animation: none;
-        }
-        .github-corner .octo-arm {
-          animation: octocat-wave 560ms ease-in-out;
-        }
-      }
-    </style>
+        ></path>
+      </svg>
+    </a>
 
     <div class="jumbotron">
       <div class="container">
@@ -125,14 +128,14 @@ <h2 class="panel-title panel-title-lg">Information</h2>
             cross-browser addition to the bookmarks of anyone that has to
             interact with WebDAV. It supports previewing of many common
             filetypes (syntax highlighting for code, previews for
-            images/videos/fonts), drag and drop file uplaods and history state
+            images/videos/fonts), drag and drop file uploads and history state
             (for back button navigation).
           </p>
           <p>
             Whilst this started out as a very simple bookmarklet with some basic
             styling (and it's still not much more than that!), I'd like to
-            continue improve it somewhat, adding in new features and using it as
-            a testbed for front-end framework experience. I'd like to
+            continue to improve it somewhat, adding in new features and using it
+            as a testbed for front-end framework experience. I'd like to
             investigate more thorough testing using it too, ideally performing
             full end-to-end testing for all the features currently implemented.
           </p>
@@ -202,29 +205,5 @@ <h3>Use it</h3>
         event.preventDefault();
       });
     </script>
-    <script>
-      (function (i, s, o, g, r, a, m) {
-        i['GoogleAnalyticsObject'] = r;
-        (i[r] =
-          i[r] ||
-          function () {
-            (i[r].q = i[r].q || []).push(arguments);
-          }),
-          (i[r].l = 1 * new Date());
-        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-      })(
-        window,
-        document,
-        'script',
-        'https://www.google-analytics.com/analytics.js',
-        'ga'
-      );
-
-      ga('create', 'UA-5273748-7', 'auto');
-      ga('send', 'pageview');
-    </script>
   </body>
 </html>
diff --git a/jest.config.functional.ts → jest.config.functional.chrome.ts b/jest.config.functional.ts → jest.config.functional.chrome.ts
@@ -1,4 +1,4 @@
 export default {
   testMatch: ['**/tests/functional/**/*.ts'],
-  preset: './tests/jest.ts-puppeteer.preset.ts',
+  preset: './tests/jest.ts-puppeteer.preset.chrome.ts',
 };
diff --git a/jest.config.functional.firefox.ts b/jest.config.functional.firefox.ts
@@ -0,0 +1,4 @@
+export default {
+  testMatch: ['**/tests/functional/**/*.ts'],
+  preset: './tests/jest.ts-puppeteer.preset.firefox.ts',
+};