Merge pull request #72 from frysztak/release/v0.7.4

v0.7.4 into master

.github/actions/e2e/action.yml

@@ -31,6 +31,18 @@ runs:
         CYPRESS_RECORD_KEY: ${{ inputs.cypress-key }}
         GITHUB_TOKEN: ${{ inputs.github-token }}
 
+    - name: Fix coverage file
+      shell: bash
+      run: |
+        ./scripts/fix_nyc.sh
+
+    - name: Generate Lcov report
+      shell: bash
+      run: |
+        rm -rf coverage
+        npx nyc report --reporter=lcov
+
     - uses: codecov/codecov-action@v3
       with:
         token: ${{ inputs.codecov-token }}
+        directory: coverage

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.7.4] - 2022-10-20
+
+### Fixed
+
+-   Fixed changing layouts
+
 ## [0.7.3] - 2022-10-15
 
 ### Fixed
@@ -208,7 +214,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   The entire app!
 
-[Unreleased]: https://github.com/frysztak/orpington-news/compare/0.7.3...HEAD
+[Unreleased]: https://github.com/frysztak/orpington-news/compare/0.7.4...HEAD
+
+[0.7.4]: https://github.com/frysztak/orpington-news/compare/0.7.3...0.7.4
 
 [0.7.3]: https://github.com/frysztak/orpington-news/compare/0.7.2...0.7.3
 

cypress/e2e/feed.cy.ts

@@ -321,5 +321,67 @@ sizes.forEach((size) => {
         });
       });
     });
+
+    describe('change collection layout', () => {
+      it('home collection', () => {
+        cy.intercept({
+          method: 'PUT',
+          url: getApiPath('/collections/home/layout'),
+        }).as('apiPutLayout');
+
+        cy.addFeedByApi({
+          title: 'Kent C. Dodds Blog',
+          url: getFeedUrl('kentcdodds.xml'),
+          icon: 'Code',
+          refreshInterval: 120,
+        });
+
+        cy.visit('/');
+
+        cy.get(`[data-test-layout=card]`).should('exist').and('be.visible');
+
+        cy.clickCollectionHeaderLayout('magazine');
+
+        cy.wait('@apiPutLayout');
+
+        cy.get(`[data-test-layout=magazine]`).should('exist').and('be.visible');
+        cy.get(`[data-test-layout=card]`).should('not.exist');
+      });
+
+      it('other collection', () => {
+        cy.intercept({
+          method: 'GET',
+          url: getApiPath('/collections/1/items?pageIndex=0'),
+        }).as('apiGetItems');
+
+        cy.intercept({
+          method: 'PUT',
+          url: getApiPath('/collections/1/layout'),
+        }).as('apiPutLayout');
+
+        cy.addFeedByApi({
+          title: 'Kent C. Dodds Blog',
+          url: getFeedUrl('kentcdodds.xml'),
+          icon: 'Code',
+          refreshInterval: 120,
+        });
+
+        cy.visit('/');
+
+        // make collection active
+        cy.openDrawerIfExists();
+        cy.clickCollection('1');
+        cy.wait('@apiGetItems');
+
+        cy.get(`[data-test-layout=card]`).should('exist').and('be.visible');
+
+        cy.clickCollectionHeaderLayout('magazine');
+
+        cy.wait('@apiPutLayout');
+
+        cy.get(`[data-test-layout=magazine]`).should('exist').and('be.visible');
+        cy.get(`[data-test-layout=card]`).should('not.exist');
+      });
+    });
   });
 });

cypress/global.d.ts

@@ -27,6 +27,8 @@ declare namespace Cypress {
       action: string
     ): Chainable<JQuery<HTMLElement>>;
 
+    clickCollectionHeaderLayout(layout: string): Chainable<JQuery<HTMLElement>>;
+
     /**
      * Signs user up by using API request
      */

cypress/support/commands.ts

@@ -95,6 +95,15 @@ Cypress.Commands.add('clickCollectionHeaderMenuAction', (action: string) => {
   });
 });
 
+Cypress.Commands.add('clickCollectionHeaderLayout', (layout: string) => {
+  const selector = '[data-test=collectionHeader]:visible';
+  return cy.get(selector).within((item) => {
+    cy.getBySel('layoutButton').click();
+    cy.getBySel('layoutMenuList').should('be.visible');
+    cy.getBySel(`layout-${layout}`).click();
+  });
+});
+
 Cypress.Commands.add('signupByApi', (username, password, displayName) => {
   return cy.request('POST', `${Cypress.env('api_url')}/auth/register`, {
     username,

package.json

@@ -40,5 +40,5 @@
     "*.{js,cjs,css,md,ts,tsx,json,yml,yaml}": "prettier --write"
   },
   "packageManager": "yarn@3.2.0",
-  "version": "0.7.3"
+  "version": "0.7.4"
 }

packages/backend/package.json

@@ -39,6 +39,7 @@
     "@orpington-news/shared": "^0.0.0",
     "@sinclair/typebox": "^0.24.44",
     "@slonik/migrator": "^0.11.3",
+    "@theintern/istanbul-loader": "^1.0.0-beta.3",
     "@types/connect-pg-simple": "^7.0.0",
     "@types/jest": "^29.1.1",
     "@types/node": "^17.0.45",
@@ -62,8 +63,10 @@
     "fastify-type-provider-zod": "^1.1.7",
     "file-type": "^18.0.0",
     "html-entities": "^2.3.3",
+    "intern": "^4.10.1",
     "is-relative-url": "^4.0.0",
     "isomorphic-dompurify": "^0.22.0",
+    "istanbul-lib-instrument": "^5.2.1",
     "jest": "^29.1.2",
     "nock": "^13.2.9",
     "node-fetch": "^3.2.10",

packages/backend/routes/collections.ts

@@ -563,13 +563,13 @@ export const collections: FastifyPluginAsync = async (
   });
 
   fastify.put<{
-    Params: z.infer<typeof CollectionId>;
+    Params: z.infer<typeof HomeCollectionId>;
     Body: z.infer<typeof LayoutBody>;
   }>(
     '/:id/layout',
     {
       schema: {
-        params: CollectionId,
+        params: HomeCollectionId,
         body: LayoutBody,
         tags: ['Collections'],
       },

packages/backend/tsconfig.json

@@ -2,6 +2,7 @@
   "include": ["**/*.ts"],
   "exclude": ["dist"],
   "compilerOptions": {
+    "sourceMap": true,
     "target": "es2020",
     "lib": ["ESNext"],
     "module": "ESNext",

packages/backend/webpack.config.js

@@ -33,7 +33,12 @@ const config = {
     rules: [
       {
         test: /\.ts?$/,
-        use: 'ts-loader',
+        use: [
+          process.env.INSTRUMENT_COVERAGE === 'true'
+            ? '@theintern/istanbul-loader'
+            : null,
+          'ts-loader',
+        ].filter(Boolean),
         exclude: /node_modules/,
       },
     ],

packages/frontend/components/collection/header/CollectionHeader.tsx

@@ -84,8 +84,9 @@ export const CollectionHeader: React.FC<CollectionHeaderProps> = (props) => {
                 icon={<BsLayoutWtf />}
                 aria-label="Layout"
                 variant="ghost"
+                data-test="layoutButton"
               />
-              <MenuList data-focus-visible-disabled>
+              <MenuList data-focus-visible-disabled data-test="layoutMenuList">
                 {collection && (
                   <MenuOptionGroup
                     value={collection.layout}
@@ -97,6 +98,7 @@ export const CollectionHeader: React.FC<CollectionHeaderProps> = (props) => {
                         key={layout}
                         value={layout}
                         onClick={() => onChangeLayout?.(layout)}
+                        data-test={`layout-${layout}`}
                       >
                         {CollectionLayoutName[layout]}
                       </MenuItemOption>

packages/frontend/components/collection/list/CollectionList.tsx

@@ -105,6 +105,7 @@ export const CollectionList: React.FC<CollectionListProps & BoxProps> = (
       w="full"
       h="full"
       data-test="collectionItemList"
+      data-test-layout={layout}
       {...rest}
     >
       <RefreshIndicator isRefreshing={isRefreshing} />

packages/frontend/features/Collections/queries.ts

@@ -168,44 +168,52 @@ export const useSetCollectionLayout = () => {
       onError,
       onMutate: ({ id, layout }) => {
         if (id === 'home') {
-          const oldPreferences = queryClient.getQueryData<Preferences>(
-            preferencesKeys.base
+          queryClient.setQueryData(
+            preferencesKeys.base,
+            (old?: Preferences) =>
+              old && {
+                ...old,
+                homeCollectionLayout: layout,
+              }
           );
-          if (oldPreferences) {
-            queryClient.setQueryData<Preferences>(preferencesKeys.base, {
-              ...oldPreferences,
-              homeCollectionLayout: layout,
-            });
-          }
 
           return;
         }
 
-        const oldCollections = queryClient.getQueryData<FlatCollection[]>(
-          collectionKeys.tree
+        queryClient.setQueryData(
+          preferencesKeys.base,
+          (old?: Preferences) =>
+            old && {
+              ...old,
+              activeCollectionLayout: layout,
+            }
         );
 
-        if (oldCollections) {
-          const idx = oldCollections.findIndex((c) => c.id === id);
-          if (idx === -1) {
-            return oldCollections;
+        queryClient.setQueryData(
+          collectionKeys.tree,
+          (old?: FlatCollection[]) => {
+            if (!old) {
+              return old;
+            }
+
+            const idx = old.findIndex((c) => c.id === id);
+            if (idx === -1) {
+              return old;
+            }
+
+            const updatedCollection = {
+              ...old[idx]!,
+              layout,
+            };
+
+            return set(lensIndex(idx), updatedCollection, old);
           }
-
-          const updatedCollection = {
-            ...oldCollections[idx]!,
-            layout,
-          };
-
-          queryClient.setQueryData<FlatCollection[]>(
-            collectionKeys.tree,
-            set(lensIndex(idx), updatedCollection, oldCollections)
-          );
-        }
+        );
       },
       onSuccess: (_, { id }) => {
-        if (id === 'home') {
-          queryClient.invalidateQueries(preferencesKeys.base);
-        } else {
+        queryClient.invalidateQueries(preferencesKeys.base);
+
+        if (id !== 'home') {
           queryClient.invalidateQueries(collectionKeys.tree);
         }
       },

scripts/fix_nyc.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+set -e
+
+cd .nyc_output
+jq 'map_values(if has("inputSourceMap") then (.inputSourceMap?.sources[0] = .path) else . end)' out.json > processed.json
+mv processed.json out.json