diff options
Diffstat (limited to 'spec/frontend/ml/experiment_tracking/components')
| -rw-r--r-- | spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap | 233 | ||||
| -rw-r--r-- | spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_experiment_spec.js.snap (renamed from spec/frontend/ml/experiment_tracking/components/__snapshots__/experiment_spec.js.snap) | 73 | ||||
| -rw-r--r-- | spec/frontend/ml/experiment_tracking/components/incubation_alert_spec.js | 2 | ||||
| -rw-r--r-- | spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js | 43 | ||||
| -rw-r--r-- | spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js (renamed from spec/frontend/ml/experiment_tracking/components/experiment_spec.js) | 12 |
5 files changed, 350 insertions, 13 deletions
diff --git a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap new file mode 100644 index 00000000000..8af0753f929 --- /dev/null +++ b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap @@ -0,0 +1,233 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MlCandidate renders correctly 1`] = ` +<div> + <div + class="gl-alert gl-alert-warning" + > + <svg + aria-hidden="true" + class="gl-icon s16 gl-alert-icon" + data-testid="warning-icon" + role="img" + > + <use + href="#warning" + /> + </svg> + + <div + aria-live="assertive" + class="gl-alert-content" + role="alert" + > + <h2 + class="gl-alert-title" + > + Machine Learning Experiment Tracking is in Incubating Phase + </h2> + + <div + class="gl-alert-body" + > + + GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited + + <a + class="gl-link" + href="https://about.gitlab.com/handbook/engineering/incubation/" + rel="noopener noreferrer" + target="_blank" + > + Learn more + </a> + </div> + + <div + class="gl-alert-actions" + > + <a + class="btn gl-alert-action btn-confirm btn-md gl-button" + href="https://gitlab.com/gitlab-org/gitlab/-/issues/381660" + > + <!----> + + <!----> + + <span + class="gl-button-text" + > + + Feedback + + </span> + </a> + </div> + </div> + + <button + aria-label="Dismiss" + class="btn gl-dismiss-btn btn-default btn-sm gl-button btn-default-tertiary btn-icon" + type="button" + > + <!----> + + <svg + aria-hidden="true" + class="gl-button-icon gl-icon s16" + data-testid="close-icon" + role="img" + > + <use + href="#close" + /> + </svg> + + <!----> + </button> + </div> + + <h3> + + Model candidate details + + </h3> + + <table + class="candidate-details" + > + <tbody> + <tr + class="divider" + /> + + <tr> + <td + class="gl-text-secondary gl-font-weight-bold" + > + Info + </td> + + <td + class="gl-font-weight-bold" + > + ID + </td> + + <td> + candidate_iid + </td> + </tr> + + <tr> + <td /> + + <td + class="gl-font-weight-bold" + > + Status + </td> + + <td> + SUCCESS + </td> + </tr> + + <tr> + <td /> + + <td + class="gl-font-weight-bold" + > + Experiment + </td> + + <td> + <a + class="gl-link" + href="#" + > + The Experiment + </a> + </td> + </tr> + + <!----> + + <tr + class="divider" + /> + + <tr> + <td + class="gl-text-secondary gl-font-weight-bold" + > + + Parameters + + </td> + + <td + class="gl-font-weight-bold" + > + Algorithm + </td> + + <td> + Decision Tree + </td> + </tr> + <tr> + <td /> + + <td + class="gl-font-weight-bold" + > + MaxDepth + </td> + + <td> + 3 + </td> + </tr> + + <tr + class="divider" + /> + + <tr> + <td + class="gl-text-secondary gl-font-weight-bold" + > + + Metrics + + </td> + + <td + class="gl-font-weight-bold" + > + AUC + </td> + + <td> + .55 + </td> + </tr> + <tr> + <td /> + + <td + class="gl-font-weight-bold" + > + Accuracy + </td> + + <td> + .99 + </td> + </tr> + </tbody> + </table> +</div> +`; diff --git a/spec/frontend/ml/experiment_tracking/components/__snapshots__/experiment_spec.js.snap b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_experiment_spec.js.snap index 2eba8869535..e253a0afc6c 100644 --- a/spec/frontend/ml/experiment_tracking/components/__snapshots__/experiment_spec.js.snap +++ b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_experiment_spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ShowExperiment with candidates renders correctly 1`] = ` +exports[`MlExperiment with candidates renders correctly 1`] = ` <div> <div class="gl-alert gl-alert-warning" @@ -39,7 +39,7 @@ exports[`ShowExperiment with candidates renders correctly 1`] = ` rel="noopener noreferrer" target="_blank" > - Learn More + Learn more </a> </div> @@ -48,7 +48,7 @@ exports[`ShowExperiment with candidates renders correctly 1`] = ` > <a class="btn gl-alert-action btn-confirm btn-md gl-button" - href="https://gitlab.com/groups/gitlab-org/-/epics/8560" + href="https://gitlab.com/gitlab-org/gitlab/-/issues/381660" > <!----> @@ -58,7 +58,7 @@ exports[`ShowExperiment with candidates renders correctly 1`] = ` class="gl-button-text" > - Feedback and Updates + Feedback </span> </a> @@ -89,13 +89,13 @@ exports[`ShowExperiment with candidates renders correctly 1`] = ` <h3> - Experiment Candidates + Experiment candidates </h3> <table aria-busy="false" - aria-colcount="4" + aria-colcount="6" class="table b-table gl-table gl-mt-0!" role="table" > @@ -150,6 +150,24 @@ exports[`ShowExperiment with candidates renders correctly 1`] = ` Mae </div> </th> + <th + aria-colindex="5" + aria-label="Details" + class="" + role="columnheader" + scope="col" + > + <div /> + </th> + <th + aria-colindex="6" + aria-label="Artifact" + class="" + role="columnheader" + scope="col" + > + <div /> + </th> </tr> </thead> <tbody @@ -184,6 +202,32 @@ exports[`ShowExperiment with candidates renders correctly 1`] = ` class="" role="cell" /> + <td + aria-colindex="5" + class="" + role="cell" + > + <a + class="gl-link" + href="link_to_candidate1" + > + Details + </a> + </td> + <td + aria-colindex="6" + class="" + role="cell" + > + <a + class="gl-link" + href="link_to_artifact" + rel="noopener" + target="_blank" + > + Artifacts + </a> + </td> </tr> <tr class="" @@ -213,6 +257,23 @@ exports[`ShowExperiment with candidates renders correctly 1`] = ` class="" role="cell" /> + <td + aria-colindex="5" + class="" + role="cell" + > + <a + class="gl-link" + href="link_to_candidate2" + > + Details + </a> + </td> + <td + aria-colindex="6" + class="" + role="cell" + /> </tr> <!----> <!----> diff --git a/spec/frontend/ml/experiment_tracking/components/incubation_alert_spec.js b/spec/frontend/ml/experiment_tracking/components/incubation_alert_spec.js index e07a4ed816b..7dca360c7ee 100644 --- a/spec/frontend/ml/experiment_tracking/components/incubation_alert_spec.js +++ b/spec/frontend/ml/experiment_tracking/components/incubation_alert_spec.js @@ -15,7 +15,7 @@ describe('IncubationAlert', () => { it('displays link to issue', () => { expect(findButton().attributes().href).toBe( - 'https://gitlab.com/groups/gitlab-org/-/epics/8560', + 'https://gitlab.com/gitlab-org/gitlab/-/issues/381660', ); }); diff --git a/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js b/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js new file mode 100644 index 00000000000..4b16312815a --- /dev/null +++ b/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js @@ -0,0 +1,43 @@ +import { GlAlert } from '@gitlab/ui'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import MlCandidate from '~/ml/experiment_tracking/components/ml_candidate.vue'; + +describe('MlCandidate', () => { + let wrapper; + + const createWrapper = () => { + const candidate = { + params: [ + { name: 'Algorithm', value: 'Decision Tree' }, + { name: 'MaxDepth', value: '3' }, + ], + metrics: [ + { name: 'AUC', value: '.55' }, + { name: 'Accuracy', value: '.99' }, + ], + info: { + iid: 'candidate_iid', + artifact_link: 'path_to_artifact', + experiment_name: 'The Experiment', + experiment_path: 'path/to/experiment', + status: 'SUCCESS', + }, + }; + + return mountExtended(MlCandidate, { provide: { candidate } }); + }; + + const findAlert = () => wrapper.findComponent(GlAlert); + + it('shows incubation warning', () => { + wrapper = createWrapper(); + + expect(findAlert().exists()).toBe(true); + }); + + it('renders correctly', () => { + wrapper = createWrapper(); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/frontend/ml/experiment_tracking/components/experiment_spec.js b/spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js index af722d77532..50539440f25 100644 --- a/spec/frontend/ml/experiment_tracking/components/experiment_spec.js +++ b/spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js @@ -1,17 +1,17 @@ import { GlAlert } from '@gitlab/ui'; import { mountExtended } from 'helpers/vue_test_utils_helper'; -import ShowExperiment from '~/ml/experiment_tracking/components/experiment.vue'; +import MlExperiment from '~/ml/experiment_tracking/components/ml_experiment.vue'; -describe('ShowExperiment', () => { +describe('MlExperiment', () => { let wrapper; const createWrapper = (candidates = [], metricNames = [], paramNames = []) => { - return mountExtended(ShowExperiment, { provide: { candidates, metricNames, paramNames } }); + return mountExtended(MlExperiment, { provide: { candidates, metricNames, paramNames } }); }; const findAlert = () => wrapper.findComponent(GlAlert); - const findEmptyState = () => wrapper.findByText('This Experiment has no logged Candidates'); + const findEmptyState = () => wrapper.findByText('This experiment has no logged candidates'); it('shows incubation warning', () => { wrapper = createWrapper(); @@ -31,8 +31,8 @@ describe('ShowExperiment', () => { it('renders correctly', () => { wrapper = createWrapper( [ - { rmse: 1, l1_ratio: 0.4 }, - { auc: 0.3, l1_ratio: 0.5 }, + { rmse: 1, l1_ratio: 0.4, details: 'link_to_candidate1', artifact: 'link_to_artifact' }, + { auc: 0.3, l1_ratio: 0.5, details: 'link_to_candidate2' }, ], ['rmse', 'auc', 'mae'], ['l1_ratio'], |