Skip to content

Commit

Permalink
Migrate download button #2318
Browse files Browse the repository at this point in the history
  • Loading branch information
ngormsen committed Jul 30, 2021
1 parent 02b4559 commit d2feeed
Show file tree
Hide file tree
Showing 10 changed files with 69 additions and 58 deletions.
7 changes: 5 additions & 2 deletions visualization/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
import { UpgradeModule } from "@angular/upgrade/static"

import { SortingButtonComponent } from "./codeCharta/ui/sortingButton/sortingButton.component"
import { DownloadButtonComponent } from "./codeCharta/ui/downloadButton/downloadButton.component"
import { dialogServiceProvider } from "./codeCharta/ajs-upgraded-providers"

@NgModule({
imports: [BrowserModule, UpgradeModule],
declarations: [SortingButtonComponent],
entryComponents: [SortingButtonComponent]
declarations: [SortingButtonComponent, DownloadButtonComponent],
entryComponents: [SortingButtonComponent, DownloadButtonComponent],
providers: [dialogServiceProvider]
})
export class AppModule {
constructor(@Inject(UpgradeModule) private upgrade: UpgradeModule) {}
Expand Down
13 changes: 13 additions & 0 deletions visualization/app/codeCharta/ajs-upgraded-providers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { InjectionToken } from "@angular/core"

export const dialogService = new InjectionToken("dialogService")

export function dialogServiceFactory(index: any) {
return index.get("dialogService")
}

export const dialogServiceProvider = {
provide: "dialogService",
useFactory: dialogServiceFactory,
deps: ["$injector"]
}
2 changes: 2 additions & 0 deletions visualization/app/codeCharta/state/state.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ import { ExperimentalFeaturesEnabledService } from "./store/appSettings/enableEx
import { LayoutAlgorithmService } from "./store/appSettings/layoutAlgorithm/layoutAlgorithm.service"
import { MaxTreeMapFilesService } from "./store/appSettings/maxTreeMapFiles/maxTreeMapFiles.service"
import { SharpnessModeService } from "./store/appSettings/sharpnessMode/sharpnessMode.service"
import { DialogService } from "../ui/dialog/dialog.service"

angular
.module("app.codeCharta.state", ["app.codeCharta"])
Expand Down Expand Up @@ -112,3 +113,4 @@ angular
.service(camelCase(MaxTreeMapFilesService.name), MaxTreeMapFilesService)
.service(camelCase(SharpnessModeService.name), SharpnessModeService)
.service(camelCase(ExperimentalFeaturesEnabledService.name), ExperimentalFeaturesEnabledService)
.service(camelCase(DialogService.name), DialogService)
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<md-button class="toolbar-button" ng-click="$ctrl.downloadFile()" title="Download cc.json">
<button class="toolbar-button" style="transform: scale(0.93)" (click)="downloadFile()" title="Download cc.json">
<i class="fa fa-download"></i>
</md-button>
</button>
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
download-button-component {
.small-action-button {
margin-left: 0 !important;
}
.small-action-button {
margin-left: 0;
}
Original file line number Diff line number Diff line change
@@ -1,39 +1,45 @@
import "./downloadButton.module"
import { DownloadButtonController } from "./downloadButton.component"
import { getService, instantiateModule } from "../../../../mocks/ng.mockhelper"
import { Store } from "../../state/store/store"
import { TestBed } from "@angular/core/testing"
import { DownloadButtonComponent } from "./downloadButton.component"
import { dialogServiceProvider } from "../../ajs-upgraded-providers"
import { fireEvent, render, screen } from "@testing-library/angular"
import { DialogService } from "../dialog/dialog.service"

describe("DownloadButtonController", () => {
let downloadButtonController: DownloadButtonController
let dialogService: DialogService
jest.mock("../dialog/dialog.service")

beforeEach(() => {
restartSystem()
rebuildController()
withMockedDialogService()
describe("DownloadButtonController", () => {
let _$mdDialog
inject($mdDialog => {
_$mdDialog = $mdDialog
})

function restartSystem() {
instantiateModule("app.codeCharta.ui.downloadButton")

dialogService = getService<DialogService>("dialogService")
}

function rebuildController() {
downloadButtonController = new DownloadButtonController(dialogService)
}
const dialogService = new DialogService(_$mdDialog)

function withMockedDialogService() {
dialogService = downloadButtonController["dialogService"] = jest.fn().mockReturnValue({
showDownloadDialog: jest.fn()
})()
}
beforeEach(() => {
Store["initialize"]()

TestBed.configureTestingModule({
declarations: [DownloadButtonComponent],
providers: [
dialogServiceProvider,
{
provide: "$injector",
useValue: {
get: () => {
return dialogService
}
}
}
]
})
})

describe("downloadFile", () => {
it("should call showDownloadDialog", () => {
downloadButtonController.downloadFile()

expect(dialogService.showDownloadDialog).toHaveBeenCalled()
it("should call showDownloadDialog", async () => {
await render(DownloadButtonComponent)
const button = screen.getByRole("button")
fireEvent.click(button)
expect(dialogService.showDownloadDialog).toHaveBeenCalledTimes(1)
})
})
})
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
import "./downloadButton.component.scss"
import { Component, Inject } from "@angular/core"
import { DialogService } from "../dialog/dialog.service"

export class DownloadButtonController {
constructor(private dialogService: DialogService) {
"ngInject"
}
@Component({
selector: "cc-download-button",
template: require("./downloadButton.component.html"),
styleUrls: ["/../downloadButton/downloadButton.component.scss"]
})
export class DownloadButtonComponent {
constructor(@Inject("dialogService") private dialogService: DialogService) {}

downloadFile() {
this.dialogService.showDownloadDialog()
}
}

export const downloadButtonComponent = {
selector: "downloadButtonComponent",
template: require("./downloadButton.component.html"),
controller: DownloadButtonController
}

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="tool-bar" ng-mouseup="$ctrl.onClick()">
<file-chooser-directive></file-chooser-directive>
<download-button-component ng-show="!$ctrl._viewModel.experimentalFeaturesEnabled"></download-button-component>
<cc-download-button ng-show="!$ctrl._viewModel.experimentalFeaturesEnabled"></cc-download-button>
<screenshot-button-component></screenshot-button-component>

<file-panel-component ng-class="{ hidden: $ctrl._viewModel.isNodeHovered }"></file-panel-component>
Expand Down
4 changes: 2 additions & 2 deletions visualization/app/codeCharta/ui/ui.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import "./attributeTypeSelector/attributeTypeSelector.module"
import "./sortingOption/sortingOption.module"
import "./unfocusButton/unfocusButton.module"
import "./metricValueHovered/metricValueHovered.module"
import "./downloadButton/downloadButton.module"
import "./screenshotButton/screenshotButton.module"
import "./globalSettingsButton/globalSettingsButton.module"
import "./metricDeltaSelected/metricDeltaSelected.module"
Expand Down Expand Up @@ -48,6 +47,7 @@ import "./layoutSelection/layoutSelection.module"
import "./maxTreeMapFiles/maxTreeMapFiles.module"
import "./sharpnessModeSelector/sharpnessModeSelector.module"
import { SortingButtonComponent } from "./sortingButton/sortingButton.component"
import { DownloadButtonComponent } from "./downloadButton/downloadButton.component"

angular
.module("app.codeCharta.ui", [
Expand All @@ -59,7 +59,6 @@ angular
"app.codeCharta.ui.attributeTypeSelector",
"app.codeCharta.ui.unfocusButton",
"app.codeCharta.ui.metricValueHovered",
"app.codeCharta.ui.downloadButton",
"app.codeCharta.ui.screenshotButton",
"app.codeCharta.ui.globalSettingsButton",
"app.codeCharta.ui.metricDeltaSelected",
Expand Down Expand Up @@ -100,3 +99,4 @@ angular
"app.codeCharta.ui.maxTreeMapFiles"
])
.directive("ccSortingButton", downgradeComponent({ component: SortingButtonComponent }))
.directive("ccDownloadButton", downgradeComponent({ component: DownloadButtonComponent }))

0 comments on commit d2feeed

Please sign in to comment.