Update components and query definition to fix cypress test

This commit is contained in:
Ramon Wenger 2023-08-08 14:33:17 +02:00
parent 36b60c6a2e
commit 46ad200f1e
8 changed files with 128 additions and 51 deletions

8
.graphqlrc Normal file
View File

@ -0,0 +1,8 @@
projects:
config:
schema: ./server/schema.graphql
includes: ./client/src/graphql/**
excludes: ./client/src/graphql/gql/public-client/**
public:
schema: ./server/schema-public.graphql
includes: ./client/src/graphql/gql/public-client/*.gql

View File

@ -152,6 +152,11 @@ describe('Snapshot', () => {
slug: module.slug,
},
},
ModuleTitleQuery: {
module: {
title: module.title,
},
},
ModuleSnapshotsQuery: {
module: {
...module,

View File

@ -14,10 +14,13 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
*/
const documents = {
"\n query ReadOnlyQuery {\n me {\n readOnly\n selectedClass {\n readOnly\n }\n }\n }\n ": types.ReadOnlyQueryDocument,
"\n fragment SnapshotFragment on SnapshotNode {\n title\n }\n ": types.SnapshotFragmentFragmentDoc,
"\n query ModuleTitleQuery($slug: String) {\n module(slug: $slug) {\n title\n }\n }\n ": types.ModuleTitleQueryDocument,
"\n fragment SnapshotListItem on SnapshotNode {\n id\n title\n created\n mine\n shared\n creator\n }\n": types.SnapshotListItemFragmentDoc,
"\n fragment SnapshotTitle on SnapshotNode {\n title\n }\n": types.SnapshotTitleFragmentDoc,
"\n query ModuleEditModeQuery($slug: String) {\n module(slug: $slug) {\n inEditMode @client\n slug\n }\n }\n": types.ModuleEditModeQueryDocument,
"\n query ChapterQuery($id: ID!) {\n chapter(id: $id) {\n path\n }\n }\n ": types.ChapterQueryDocument,
"\n query ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n ": types.ContentBlockQueryDocument,
"\n query ModuleSnapshotsQuery($slug: String!) {\n module(slug: $slug) {\n id\n title\n metaTitle\n slug\n topic {\n title\n }\n snapshots {\n ...SnapshotListItem\n }\n }\n }\n ": types.ModuleSnapshotsQueryDocument,
"\n query ModuleSolutions($slug: String) {\n module(slug: $slug) {\n solutionsEnabled\n slug\n }\n }\n": types.ModuleSolutionsDocument,
};
@ -42,7 +45,15 @@ export function graphql(source: "\n query ReadOnlyQuery {\n me {
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment SnapshotFragment on SnapshotNode {\n title\n }\n "): (typeof documents)["\n fragment SnapshotFragment on SnapshotNode {\n title\n }\n "];
export function graphql(source: "\n query ModuleTitleQuery($slug: String) {\n module(slug: $slug) {\n title\n }\n }\n "): (typeof documents)["\n query ModuleTitleQuery($slug: String) {\n module(slug: $slug) {\n title\n }\n }\n "];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment SnapshotListItem on SnapshotNode {\n id\n title\n created\n mine\n shared\n creator\n }\n"): (typeof documents)["\n fragment SnapshotListItem on SnapshotNode {\n id\n title\n created\n mine\n shared\n creator\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment SnapshotTitle on SnapshotNode {\n title\n }\n"): (typeof documents)["\n fragment SnapshotTitle on SnapshotNode {\n title\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@ -55,6 +66,10 @@ export function graphql(source: "\n query ChapterQuery($id: ID!) {\n cha
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n "): (typeof documents)["\n query ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n "];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query ModuleSnapshotsQuery($slug: String!) {\n module(slug: $slug) {\n id\n title\n metaTitle\n slug\n topic {\n title\n }\n snapshots {\n ...SnapshotListItem\n }\n }\n }\n "): (typeof documents)["\n query ModuleSnapshotsQuery($slug: String!) {\n module(slug: $slug) {\n id\n title\n metaTitle\n slug\n topic {\n title\n }\n snapshots {\n ...SnapshotListItem\n }\n }\n }\n "];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

View File

@ -2274,7 +2274,16 @@ export type ReadOnlyQueryQueryVariables = Exact<{ [key: string]: never; }>;
export type ReadOnlyQueryQuery = { __typename?: 'Query', me?: { __typename?: 'PrivateUserNode', readOnly?: boolean | null, selectedClass?: { __typename?: 'SchoolClassNode', readOnly?: boolean | null } | null } | null };
export type SnapshotFragmentFragment = { __typename?: 'SnapshotNode', title?: string | null } & { ' $fragmentName'?: 'SnapshotFragmentFragment' };
export type ModuleTitleQueryQueryVariables = Exact<{
slug?: InputMaybe<Scalars['String']['input']>;
}>;
export type ModuleTitleQueryQuery = { __typename?: 'Query', module?: { __typename?: 'ModuleNode', title: string } | null };
export type SnapshotListItemFragment = { __typename?: 'SnapshotNode', id: string, title?: string | null, created: any, mine?: boolean | null, shared: boolean, creator: string } & { ' $fragmentName'?: 'SnapshotListItemFragment' };
export type SnapshotTitleFragment = { __typename?: 'SnapshotNode', title?: string | null } & { ' $fragmentName'?: 'SnapshotTitleFragment' };
export type ModuleEditModeQueryQueryVariables = Exact<{
slug?: InputMaybe<Scalars['String']['input']>;
@ -2297,6 +2306,16 @@ export type ContentBlockQueryQueryVariables = Exact<{
export type ContentBlockQueryQuery = { __typename?: 'Query', contentBlock?: { __typename?: 'ContentBlockNode', path?: string | null } | null };
export type ModuleSnapshotsQueryQueryVariables = Exact<{
slug: Scalars['String']['input'];
}>;
export type ModuleSnapshotsQueryQuery = { __typename?: 'Query', module?: { __typename?: 'ModuleNode', id: string, title: string, metaTitle: string, slug: string, topic?: { __typename?: 'TopicNode', title: string } | null, snapshots?: Array<(
{ __typename?: 'SnapshotNode' }
& { ' $fragmentRefs'?: { 'SnapshotListItemFragment': SnapshotListItemFragment } }
) | null> | null } | null };
export type ModuleSolutionsQueryVariables = Exact<{
slug?: InputMaybe<Scalars['String']['input']>;
}>;
@ -2304,9 +2323,12 @@ export type ModuleSolutionsQueryVariables = Exact<{
export type ModuleSolutionsQuery = { __typename?: 'Query', module?: { __typename?: 'ModuleNode', solutionsEnabled?: boolean | null, slug: string } | null };
export const SnapshotFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotFragmentFragment, unknown>;
export const SnapshotListItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}}]}}]} as unknown as DocumentNode<SnapshotListItemFragment, unknown>;
export const SnapshotTitleFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotTitle"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]} as unknown as DocumentNode<SnapshotTitleFragment, unknown>;
export const ReadOnlyQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ReadOnlyQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}},{"kind":"Field","name":{"kind":"Name","value":"selectedClass"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}}]}}]}}]}}]} as unknown as DocumentNode<ReadOnlyQueryQuery, ReadOnlyQueryQueryVariables>;
export const ModuleTitleQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleTitleQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]} as unknown as DocumentNode<ModuleTitleQueryQuery, ModuleTitleQueryQueryVariables>;
export const ModuleEditModeQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleEditModeQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inEditMode"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleEditModeQueryQuery, ModuleEditModeQueryQueryVariables>;
export const ChapterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ChapterQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chapter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ChapterQueryQuery, ChapterQueryQueryVariables>;
export const ContentBlockQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ContentBlockQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contentBlock"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ContentBlockQueryQuery, ContentBlockQueryQueryVariables>;
export const ModuleSnapshotsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSnapshotsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"metaTitle"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"topic"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"snapshots"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SnapshotListItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"mine"}},{"kind":"Field","name":{"kind":"Name","value":"shared"}},{"kind":"Field","name":{"kind":"Name","value":"creator"}}]}}]} as unknown as DocumentNode<ModuleSnapshotsQueryQuery, ModuleSnapshotsQueryQueryVariables>;
export const ModuleSolutionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSolutions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"solutionsEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleSolutionsQuery, ModuleSolutionsQueryVariables>;

View File

@ -9,9 +9,26 @@
<script setup lang="ts">
import BackLink from '@/components/BackLink.vue';
import { getModule } from '@/graphql/queries';
import { useQuery } from '@vue/apollo-composable';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import { graphql } from '@/__generated__';
const { module } = getModule();
const route = useRoute();
const { result } = useQuery(
graphql(`
query ModuleTitleQuery($slug: String) {
module(slug: $slug) {
title
}
}
`),
{
slug: route.params.slug as string,
}
);
const module = computed(() => result.value?.module || { title: '' });
</script>
<style scoped lang="scss">

View File

@ -51,17 +51,28 @@ import SHARE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/share.gql';
import UPDATE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/update.gql';
import DELETE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/delete.gql';
import SNAPSHOTS_QUERY from 'gql/queries/moduleSnapshots.gql';
import gql from 'graphql-tag';
import PenIcon from '@/components/icons/PenIcon.vue';
import TrashIcon from '@/components/icons/TrashIcon.vue';
import { removeAtIndex } from '@/graphql/immutable-operations';
import { matomoTrackEvent } from '@/helpers/matomo-client';
import { graphql } from '@/__generated__';
const SNAPSHOT_FRAGMENT = gql`
fragment SnapshotFragment on SnapshotNode {
title
}
`
export const SnapshotListItemFragment = graphql(`
fragment SnapshotListItem on SnapshotNode {
id
title
created
mine
shared
creator
}
`);
export const SnapshotTitleListItem = graphql(`
fragment SnapshotTitle on SnapshotNode {
title
}
`);
export default {
props: {

View File

@ -12,7 +12,6 @@ import ModuleSubNavigation from '@/components/modules/ModuleSubNavigation.vue';
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
import { matomoTrackPageView } from '@/helpers/matomo-client';
export default {
components: {
ModuleNavigation,

View File

@ -22,52 +22,52 @@
</div>
</template>
<script>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useQuery } from '@vue/apollo-composable';
import SnapshotListItem from '@/components/modules/SnapshotListItem.vue';
import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu.vue';
import { useRoute } from 'vue-router';
import { graphql } from '@/__generated__';
const defaultModule = { topic: {}, snapshots: [] };
export default {
components: {
SnapshotTeamMenu,
SnapshotListItem,
},
data() {
return {
module: defaultModule,
selectedLink: 'mine',
};
},
const selectedLink = ref('mine');
computed: {
snapshots() {
if (this.selectedLink === 'mine') {
return this.module.snapshots.filter((snapshot) => snapshot.mine);
} else {
return this.module.snapshots.filter((snapshot) => snapshot.shared);
const route = useRoute();
const { result } = useQuery(
graphql(`
query ModuleSnapshotsQuery($slug: String!) {
module(slug: $slug) {
id
title
metaTitle
slug
topic {
title
}
snapshots {
...SnapshotListItem
}
}
},
},
}
`),
{
slug: route.params.slug as string,
}
);
apollo: {
module: {
query: MODULE_SNAPSHOTS_QUERY,
variables() {
return {
slug: this.$route.params.slug,
};
},
error(error, vm, key, type, options) {
console.log(error, vm, key, type, options);
},
update(data) {
return data.module || defaultModule;
},
},
},
};
const module = computed(() => result.value?.module || defaultModule);
const snapshots = computed(() => {
if (selectedLink.value === 'mine') {
return module.value.snapshots.filter((snapshot) => snapshot.mine);
} else {
return module.value.snapshots.filter((snapshot) => snapshot.shared);
}
});
</script>
<style scoped lang="scss">