Skip to content

Commit

Permalink
unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
EmmaLRussell committed Jul 1, 2024
1 parent b9df2c3 commit 2f0ec80
Show file tree
Hide file tree
Showing 18 changed files with 289 additions and 70 deletions.
1 change: 1 addition & 0 deletions app/static/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = {
coveragePathIgnorePatterns: ["./tests/mocks.ts"],
transformIgnorePatterns: ["node_modules/(?!(d3-format))"],
moduleNameMapper: {
//"^color$": "<rootDir>/tests/color-shim.js",

Check failure on line 12 in app/static/jest.config.js

View workflow job for this annotation

GitHub Actions / test

Expected exception block, space or tab after '//' in comment
"raw-loader!.*/help/(.*)$": "<rootDir>/src/app/help/$1"
}
};
16 changes: 5 additions & 11 deletions app/static/src/app/components/code/CodeTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@
</div>
<error-info :error="error"></error-info>
<div class="mt-3">
<vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
<graph-configs></graph-configs>
</vertical-collapse>
<graph-configs-collapsible></graph-configs-collapsible>
</div>
</div>
</template>
Expand All @@ -32,16 +30,15 @@ import CodeEditor from "./CodeEditor.vue";
import { ModelAction } from "../../store/model/actions";
import userMessages from "../../userMessages";
import ErrorInfo from "../ErrorInfo.vue";
import GraphConfigs from "../graphConfig/GraphConfigs.vue";
import GenericHelp from "../help/GenericHelp.vue";
import VerticalCollapse from "@/app/components/VerticalCollapse.vue";
import GraphConfigsCollapsible from "../graphConfig/GraphConfigsCollapsible.vue";
export default defineComponent({
name: "CodeTab",
components: {
VerticalCollapse,
GraphConfigsCollapsible,
GenericHelp,
GraphConfigs,
ErrorInfo,
CodeEditor,
VueFeather
Expand All @@ -58,8 +55,6 @@ export default defineComponent({
const appIsConfigured = computed(() => store.state.configured);
const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
const loadingMessage = userMessages.code.isValidating;
const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
return {
appIsConfigured,
Expand All @@ -71,8 +66,7 @@ export default defineComponent({
error,
codeHelp,
codeValidating,
loadingMessage,
showGraphs
loadingMessage
};
}
});
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<template>
<vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
<graph-configs></graph-configs>
</vertical-collapse>
</template>

<script lang="ts">
import GraphConfigs from "@/app/components/graphConfig/GraphConfigs.vue";
import VerticalCollapse from "@/app/components/VerticalCollapse.vue";
import {computed, defineComponent} from "vue";
import {useStore} from "vuex";

Check failure on line 11 in app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue

View workflow job for this annotation

GitHub Actions / test

Expected 1 empty line after import statement not followed by another import
export default defineComponent({
name: "GraphConfigsCollapsible",
components: {
GraphConfigs,
VerticalCollapse
},
setup(){
const store = useStore();
const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
const showGraphs = computed(() => allVariables.value.length && !store.state.model.compileRequired);
return {
showGraphs
};
}
});
</script>
5 changes: 2 additions & 3 deletions app/static/src/app/components/graphConfig/HiddenVariables.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";
import VueFeather from "vue-feather";
import * as Color from "color";
import { GraphsGetter } from "../../store/graphs/getters";
import SelectVariables from "../mixins/selectVariables";
import {fadeColor} from "./utils";
export default defineComponent({
name: "HiddenVariables",
Expand All @@ -45,8 +45,7 @@ export default defineComponent({
const getStyle = (variable: string) => {
const bgcolor = palette.value ? palette.value[variable] : "#eee";
const desatBgColor = Color(bgcolor).desaturate(0.6).fade(0.4).rgb().string();
return { "background-color": desatBgColor };
return { "background-color": fadeColor(bgcolor)};
};
return {
Expand Down
5 changes: 5 additions & 0 deletions app/static/src/app/components/graphConfig/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import * as Color from "color";

export const fadeColor = (color: string) => {

Check warning on line 3 in app/static/src/app/components/graphConfig/utils.ts

View workflow job for this annotation

GitHub Actions / test

Missing return type on function
return Color(color).desaturate(0.6).fade(0.4).rgb().string();
};
4 changes: 3 additions & 1 deletion app/static/src/app/components/options/OptionsTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<vertical-collapse v-if="!isStochastic" title="Saved Parameter Sets" collapse-id="parameter-sets">
<parameter-sets></parameter-sets>
</vertical-collapse>
<graph-configs></graph-configs>
<graph-configs-collapsible></graph-configs-collapsible>
</div>
</template>

Expand All @@ -48,10 +48,12 @@ import GraphSettings from "./GraphSettings.vue";
import ParameterSets from "./ParameterSets.vue";
import AdvancedSettings from "./AdvancedSettings.vue";
import GraphConfigs from "@/app/components/graphConfig/GraphConfigs.vue";
import GraphConfigsCollapsible from "@/app/components/graphConfig/GraphConfigsCollapsible.vue";
export default defineComponent({
name: "OptionsTab",
components: {
GraphConfigsCollapsible,
GraphConfigs,
ParameterSets,
LinkData,
Expand Down
5 changes: 5 additions & 0 deletions app/static/src/scss/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,11 @@ $grey: #ccc;
background-color: #eee
}

.variable {
font-size: large;
cursor: pointer;
}

.variable-delete {
font-weight: normal;
margin-left: 0.3rem;
Expand Down
6 changes: 6 additions & 0 deletions app/static/tests/color-shim.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const Color = require("color/index.js");
const color2 = Color.default;
//module.exports = color2;
console.log("Color from shim")
console.log(typeof Color)
module.exports = Color;
29 changes: 2 additions & 27 deletions app/static/tests/unit/components/code/codeTab.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { BasicState } from "../../../../src/app/store/basic/state";
import { mockBasicState, mockCodeState, mockModelState } from "../../../mocks";
import ErrorInfo from "../../../../src/app/components/ErrorInfo.vue";
import { ModelState } from "../../../../src/app/store/model/state";
import VerticalCollapse from "../../../../src/app/components/VerticalCollapse.vue";
import GenericHelp from "../../../../src/app/components/help/GenericHelp.vue";
import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";

describe("CodeTab", () => {
const defaultModelState = {
Expand Down Expand Up @@ -63,7 +63,7 @@ describe("CodeTab", () => {
const statusIcon = wrapper.find("#code-status").findComponent(VueFeather);
expect(statusIcon.attributes("type")).toBe("check");
expect(statusIcon.classes()).toContain("text-success");
expect(wrapper.findComponent(VerticalCollapse).props("collapseId")).toBe("select-variables");
expect(wrapper.findComponent(GraphConfigsCollapsible).exists()).toBe(true);
expect(wrapper.findComponent(GenericHelp).props("title")).toBe("Write odin code");
expect(wrapper.findComponent(GenericHelp).props("markdown")).toContain("Write code in this editor");
});
Expand Down Expand Up @@ -101,27 +101,6 @@ describe("CodeTab", () => {
expect(wrapper.findComponent(ErrorInfo).props("error")).toStrictEqual(odinModelResponseError);
});

it("does not render selected variables when no variables in model", () => {
const wrapper = getWrapper({
...defaultModelState,
odinModelResponse: {
metadata: {
variables: []
},
valid: true
} as any
});
expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
});

it("does not render selected variables when compile required", () => {
const wrapper = getWrapper({
...defaultModelState,
compileRequired: true
});
expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
});

it("renders nothing when app state is not configured", () => {
const store = new Vuex.Store<BasicState>({
state: mockBasicState()
Expand All @@ -134,8 +113,4 @@ describe("CodeTab", () => {
});
expect(wrapper.findAll("div").length).toBe(0);
});

// TODO
// Graphs renders nothing if no variables
// Graphs renders nothing if compile required
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import {ModelState} from "../../../../src/app/store/model/state";
import Vuex from "vuex";
import {BasicState} from "../../../../src/app/store/basic/state";
import {mockBasicState, mockCodeState, mockModelState} from "../../../mocks";
import {shallowMount} from "@vue/test-utils";
import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";
import VerticalCollapse from "../../../../src/app/components/VerticalCollapse.vue";

describe("GraphConfigsCollapsible", () => {
const defaultModelState = {
compileRequired: false,
odinModelResponse: {
metadata: {
variables: ["S", "I", "R"]
},
valid: true
} as any
};

const getWrapper = (modelState: Partial<ModelState> = {}) => {
const store = new Vuex.Store<BasicState>({
state: mockBasicState({
configured: true
}),
modules: {
model: {
namespaced: true,
state: mockModelState({...defaultModelState, ...modelState})
}
}
});

return shallowMount(GraphConfigsCollapsible, {
global: {
plugins: [store]
}
});
};

it("renders collapsible when graph configs should be shown", () => {
const wrapper = getWrapper();
expect(wrapper.findComponent(VerticalCollapse).props("title")).toBe("Graphs");
});

it("does not render collapsible when no variables in model", () => {
const wrapper = getWrapper({
odinModelResponse: {
metadata: {
variables: []
},
valid: true
} as any
});
expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
});

it("does not render collapsible when compile required", () => {
const wrapper = getWrapper({
compileRequired: true
});
expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
});

});
Loading

0 comments on commit 2f0ec80

Please sign in to comment.