Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

N21-1319 ctl showing tool usage #2922

Merged
merged 18 commits into from
Nov 20, 2023
Merged

N21-1319 ctl showing tool usage #2922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
3adc55b
N21-1319 generate Api
mrikallab Nov 16, 2023
4a2bcb3
N21-1319 metadata and mapper
mrikallab Nov 16, 2023
dd8cffc
N21-1319 store action
mrikallab Nov 16, 2023
16a4aec
N21-1319 composable and display count
mrikallab Nov 16, 2023
b602a5c
N21-1319 translation
mrikallab Nov 17, 2023
a54c2d7
Merge branch 'main' into N21-1319-ctl-showing-tool-usage
mrikallab Nov 17, 2023
e0344da
N21-1319 removal in store
mrikallab Nov 17, 2023
ae7685a
N21-1319 testids
mrikallab Nov 17, 2023
3e78b3f
N21-1319 adjust testids
mrikallab Nov 17, 2023
34de0e3
N21-1319 composable tests
mrikallab Nov 17, 2023
19e9a9a
N21-1319 unit tests
mrikallab Nov 20, 2023
f9223cc
N21-1319 clean up
mrikallab Nov 20, 2023
cbe4489
N21-1319 fix tests
mrikallab Nov 20, 2023
1e5eebd
N21-1319 clean up
mrikallab Nov 20, 2023
95853f2
N21-1319 clean up
mrikallab Nov 20, 2023
6fc0a99
N21-1319 fix html tags
mrikallab Nov 20, 2023
921bd5f
N21-1319 imports and mapper
mrikallab Nov 20, 2023
1021de2
Merge branch 'main' into N21-1319-ctl-showing-tool-usage
mrikallab Nov 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 162 additions & 11 deletions src/components/administration/ExternalToolSection.unit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,25 @@ import createComponentMocks from "@@/tests/test-utils/componentMocks";
import { i18nMock } from "@@/tests/test-utils/i18nMock";
import { mdiCheckCircle, mdiRefreshCircle } from "@mdi/js";
import { mount, Wrapper } from "@vue/test-utils";
import Vue from "vue";
import Vue, { ref } from "vue";
import ExternalToolSection from "./ExternalToolSection.vue";
import { createMock, DeepMocked } from "@golevelup/ts-jest";
import { useSchoolExternalToolUsage } from "@data-external-tool";
import {
schoolExternalToolFactory,
schoolExternalToolMetadataFactory,
} from "@@/tests/test-utils/factory";

jest.mock("@data-external-tool");

describe("ExternalToolSection", () => {
let el: HTMLDivElement;

const setup = (getters: Partial<SchoolExternalToolsModule> = {}) => {
let useSchoolExternalToolUsageMock: DeepMocked<
ReturnType<typeof useSchoolExternalToolUsage>
>;

const getWrapper = (getters: Partial<SchoolExternalToolsModule> = {}) => {
el = document.createElement("div");
el.setAttribute("data-app", "true");
document.body.appendChild(el);
Expand Down Expand Up @@ -63,17 +75,30 @@ describe("ExternalToolSection", () => {
};
};

beforeEach(() => {
useSchoolExternalToolUsageMock =
createMock<ReturnType<typeof useSchoolExternalToolUsage>>();

jest
.mocked(useSchoolExternalToolUsage)
.mockReturnValue(useSchoolExternalToolUsageMock);
});

afterEach(() => {
jest.clearAllMocks();
});

describe("when component is used", () => {
it("should be found in the dom", () => {
const { wrapper } = setup();
const { wrapper } = getWrapper();
expect(wrapper.findComponent(ExternalToolSection).exists()).toBeTruthy();
});
});

describe("onMounted is called", () => {
describe("when component is mounted", () => {
it("should load the external tools", () => {
const { schoolExternalToolsModule } = setup();
const { schoolExternalToolsModule } = getWrapper();

expect(
schoolExternalToolsModule.loadSchoolExternalTools
Expand All @@ -86,7 +111,7 @@ describe("ExternalToolSection", () => {
const setupItems = () => {
const firstToolName = "Test";
const secondToolName = "Test2";
const { wrapper, schoolExternalToolsModule } = setup({
const { wrapper, schoolExternalToolsModule } = getWrapper({
getSchoolExternalTools: [
{
id: "testId",
Expand Down Expand Up @@ -213,7 +238,7 @@ describe("ExternalToolSection", () => {

describe("when deletion is confirmed", () => {
it("should call externalToolsModule.deleteSchoolExternalTool", async () => {
const { wrapper, schoolExternalToolsModule } = setup({
const { wrapper, schoolExternalToolsModule } = getWrapper({
getSchoolExternalTools: [
{
id: "testId",
Expand All @@ -234,7 +259,9 @@ describe("ExternalToolSection", () => {
const deleteButton = firstRowButtons.at(1);
await deleteButton.trigger("click");

const confirmButton = wrapper.find("[data-testId=dialog-confirm]");
const confirmButton = wrapper.find(
"[data-testId=delete-dialog-confirm]"
);
await confirmButton.trigger("click");

expect(
Expand All @@ -243,7 +270,7 @@ describe("ExternalToolSection", () => {
});

it("should call notifierModule.show", async () => {
const { wrapper, notifierModule } = setup({
const { wrapper, notifierModule } = getWrapper({
getSchoolExternalTools: [
{
id: "testId",
Expand All @@ -264,7 +291,9 @@ describe("ExternalToolSection", () => {
const deleteButton = firstRowButtons.at(1);
await deleteButton.trigger("click");

const confirmButton = wrapper.find("[data-testId=dialog-confirm]");
const confirmButton = wrapper.find(
"[data-testId=delete-dialog-confirm]"
);
await confirmButton.trigger("click");

expect(notifierModule.show).toHaveBeenCalled();
Expand All @@ -277,7 +306,7 @@ describe("ExternalToolSection", () => {
describe("getItemName is called", () => {
describe("when itemToDelete is set", () => {
it("should return the name", () => {
const { wrapper } = setup();
const { wrapper } = getWrapper();

const expectedName = "Name";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
Expand All @@ -298,7 +327,7 @@ describe("ExternalToolSection", () => {

describe("when itemToDelete is not set", () => {
it("should return an empty string", () => {
const { wrapper } = setup();
const { wrapper } = getWrapper();

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
Expand All @@ -312,4 +341,126 @@ describe("ExternalToolSection", () => {
});
});
});

describe("when deleting a schoolExternalTool", () => {
describe("when metadata is given", () => {
const setup = () => {
const schoolExternalToolMetadata =
schoolExternalToolMetadataFactory.build();

useSchoolExternalToolUsageMock.metadata = ref(
schoolExternalToolMetadata
);

const { wrapper, notifierModule } = getWrapper({
getSchoolExternalTools: [
schoolExternalToolFactory.build(),
schoolExternalToolFactory.build(),
],
});

return {
wrapper,
notifierModule,
schoolExternalToolMetadata,
};
};

it("should display delete dialog", async () => {
const { wrapper } = setup();

const tableRows = wrapper.find("tbody").findAll("tr");

const firstRowButtons = tableRows.at(0).findAll("button");

const deleteButton = firstRowButtons.at(1);
await deleteButton.trigger("click");

const dialog = wrapper.find('[data-testid="delete-dialog"]');

expect(dialog.isVisible()).toBeTruthy();
});

it("should display tool usage count", async () => {
const { wrapper, schoolExternalToolMetadata } = setup();

const tableRows = wrapper.find("tbody").findAll("tr");

const firstRowButtons = tableRows.at(0).findAll("button");

const deleteButton = firstRowButtons.at(1);
await deleteButton.trigger("click");

const dialogContent = wrapper.find(
'[data-testid="delete-dialog-content"]'
);

expect(dialogContent.text()).toEqual(
`components.administration.externalToolsSection.dialog.content {"itemName":"name","courseCount":${schoolExternalToolMetadata.course},"boardElementCount":${schoolExternalToolMetadata.boardElement}}`
);
});

it("should not display notification", async () => {
const { wrapper, notifierModule } = setup();

const tableRows = wrapper.find("tbody").findAll("tr");

const firstRowButtons = tableRows.at(0).findAll("button");

const deleteButton = firstRowButtons.at(1);
await deleteButton.trigger("click");

expect(notifierModule.show).not.toHaveBeenCalled();
});
});

describe("when metadata is undefined", () => {
const setup = () => {
useSchoolExternalToolUsageMock.metadata = ref(undefined);

const { wrapper, notifierModule } = getWrapper({
getSchoolExternalTools: [
schoolExternalToolFactory.build({}),
schoolExternalToolFactory.build(),
],
});

return {
wrapper,
notifierModule,
};
};

it("should not display delete dialog", async () => {
const { wrapper } = setup();

const tableRows = wrapper.find("tbody").findAll("tr");

const firstRowButtons = tableRows.at(0).findAll("button");

const deleteButton = firstRowButtons.at(1);
await deleteButton.trigger("click");

const dialog = wrapper.find('[data-testid="delete-dialog"]');

expect(dialog).not.toBe("visible");
});

it("should display notification", async () => {
const { wrapper, notifierModule } = setup();

const tableRows = wrapper.find("tbody").findAll("tr");

const firstRowButtons = tableRows.at(0).findAll("button");

const deleteButton = firstRowButtons.at(1);
await deleteButton.trigger("click");

expect(notifierModule.show).toHaveBeenCalledWith({
status: "error",
text: "components.administration.externalToolsSection.dialog.content.metadata.error",
});
});
});
});
});
37 changes: 31 additions & 6 deletions src/components/administration/ExternalToolSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
{{ t("components.administration.externalToolsSection.info") }}
</p>
<v-data-table
data-testid="external-tool-section-table"
v-if="items.length"
:disable-pagination="true"
:hide-default-footer="true"
Expand Down Expand Up @@ -45,9 +46,14 @@
{{ t("components.administration.externalToolsSection.action.add") }}
</v-btn>

<v-dialog v-model="isDeleteDialogOpen" max-width="360">
<v-dialog
v-if="metadata"
data-testid="delete-dialog"
v-model="isDeleteDialogOpen"
max-width="360"
>
<v-card :ripple="false">
<v-card-title>
<v-card-title data-testid="delete-dialog-title">
<h2 class="text-h4 my-2">
{{
t("components.administration.externalToolsSection.dialog.title")
Expand All @@ -56,11 +62,16 @@
</v-card-title>
<v-card-text class="text--primary">
<RenderHTML
data-testid="delete-dialog-content"
class="text-md mt-2"
:html="
t(
'components.administration.externalToolsSection.dialog.content',
{ itemName: getItemName }
{
itemName: getItemName,
courseCount: metadata.course,
boardElementCount: metadata.boardElement,
}
)
"
component="p"
Expand All @@ -69,7 +80,7 @@
<v-card-actions>
<v-spacer />
<v-btn
data-testId="dialog-cancel"
data-testId="delete-dialog-cancel"
class="dialog-closed"
depressed
text
Expand All @@ -78,7 +89,7 @@
{{ t("common.actions.cancel") }}
</v-btn>
<v-btn
data-testId="dialog-confirm"
data-testId="delete-dialog-confirm"
class="dialog-confirmed px-6"
color="primary"
depressed
Expand Down Expand Up @@ -120,6 +131,7 @@ import { DataTableHeader } from "vuetify";
import { useExternalToolsSectionUtils } from "./external-tool-section-utils.composable";
import ExternalToolToolbar from "./ExternalToolToolbar.vue";
import { SchoolExternalToolItem } from "./school-external-tool-item";
import { useSchoolExternalToolUsage } from "@data-external-tool";

export default defineComponent({
name: "ExternalToolSection",
Expand Down Expand Up @@ -147,6 +159,8 @@ export default defineComponent({
i18n.tc(key, 0, values);

const { getHeaders, getItems } = useExternalToolsSectionUtils(t);
const { fetchSchoolExternalToolUsage, metadata } =
useSchoolExternalToolUsage();

const headers: DataTableHeader[] = getHeaders;

Expand Down Expand Up @@ -189,9 +203,19 @@ export default defineComponent({

const isDeleteDialogOpen: Ref<boolean> = ref(false);

const openDeleteDialog = (item: SchoolExternalToolItem) => {
const openDeleteDialog = async (item: SchoolExternalToolItem) => {
itemToDelete.value = item;
isDeleteDialogOpen.value = true;
await fetchSchoolExternalToolUsage(item.id);

if (!metadata.value) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not the best way to do it from a user experience standpoint, because when a user makes an action/presses a button, they expect some responding action to happen. If I remember correctly a delay of 500ms between action and response can already cause disorientation. So when the loading takes a second the button press does not feel responsive anymore.

Copy link
Contributor

@arnegns arnegns Nov 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will be fixed with other dialog requirements like error handling in the next ticket

notifierModule.show({
text: t(
"components.administration.externalToolsSection.dialog.content.metadata.error"
),
status: "error",
});
}
};

const onCloseDeleteDialog = () => {
Expand All @@ -214,6 +238,7 @@ export default defineComponent({
getItemName,
mdiRefreshCircle,
mdiCheckCircle,
metadata,
};
},
});
Expand Down
Loading
Loading